1. タグ <script>
HTMLの詳細な学習に入る前に、もう一つのクールなもの、JavaScript という言語を紹介したいです。
JavaScript は、ダイナミックかつインタラクティブなウェブページを作成するための強力なプログラミング言語です。ユーザーのアクションに反応したり、ウェブページの内容を変更したり、サーバーと連携したりと、サイトのユーザー体験向上に役立つ多くの方法があります。
今回はJavaScriptを詳しく学習するわけではありませんが、時々例の中で使うことがあるので、JavaScriptをHTML文書に埋め込む方法について少し説明します。
タグ <script>; は、HTML文書にJavaScriptコードを埋め込むために使用されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの紹介</title>
</head>
<body>
<h1>私のサイトへようこそ！</h1>
<script>
// あなたのJavaScriptコードはこちら
alert('こんにちは、世界！');
</script>
</body>
</html>
この例では、タグ <script> を使用して、"こんにちは、世界！"というメッセージのポップアップウィンドウを表示する簡単なJavaScriptコードを埋め込んでいます。
2. スクリプトの追加
JavaScriptコードを 別ファイルに保存する ほうが良い場合もあります。これによりコードの整理が容易になり、再利用性が向上します。JavaScriptファイルを追加する場合も、<script> タグを使用しますが、src 属性を使ってJavaScriptファイル名を指定します。
外部JavaScriptファイルの追加例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの紹介</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>私のサイトへようこそ！</h1>
</body>
</html>
このHTMLファイルでは、script.jsという名前のJavaScriptファイルを追加するようブラウザに指示しています。このファイルには、以下のようなコードを含むことができます:
//script.js:
// あなたのJavaScriptコードはこちら
alert('こんにちは、世界！');
defer 属性は、HTMLドキュメントが完全に読み込まれ表示された後にスクリプトを実行するようブラウザに指示するために使用されます。
3. インラインコード
以前、style属性内に直接CSSスタイルを書く方法を学びましたよね？
<p style="color:red"> 赤</p>
同じように、JavaScriptコードを書くこともできます。
例えば、ある要素をクリックしたときにその色を青に変更したいとします。その場合、次のようなコードを書く必要があります:
<p style="color:red" onclick="this.style.color = 'blue';">赤</p>
緑色の部分はJavaScriptコードで、ユーザーが<p>要素をクリックすると実行されます。簡単でしょ？
-
onclick: クリックされたときに実行する関数を指定するHTML属性。 this: クリックされた要素を参照します。-
style.color: 要素の文字色を変更するCSSプロパティ。
GO TO FULL VERSION