HTMLからJavaScriptへの読み込み方法｜メリット3つや例を解説！
HTMLの特徴とは
HTMLは「マークアップ言語」と呼ばれているもので、ウェブコンテンツの構造を定義します。ウェブサイトの各ページの文字列を見出しや段落として表示したり強調表示する、画像や動画を表示する、他のページにリンクを張る、といったことができます。
ウェブサイトの各ページがHTMLのみで作られている場合は、紙の本のように記述されている内容を更新することはできません。
JavaScriptの特徴とは
JavaScriptはプログラミング言語で、スクリプト言語に分類されます。JavaScriptを使うと、ウェブサイトの各ページの内容を変更する、画像のアニメーションなどの視覚効果、スマートフォンでは現在地を中心にした地図のなど、動的な表現を可能にします。
HTMLからJavaScriptへの読み込み方法
JavaScriptをHTMLに組み込む方法には、「インラインスクリプト」と「外部スクリプト」の2種類があります。
インラインスクリプトはHTMLの実行したい個所に直に記述する方法で、外部スクリプトはHTMLファイルとは別のファイルに記述する方法です。
インラインスクリプトで行う場合
インラインスクリプトとはJavaScriptのソースコードをHTMLファイルに直接記述する方法です。
HTMLファイルのJavaScriptを実行したい箇所に<script>JavaScriptのソースコード</script>と記述します。
<script>、JavaScriptのソースコード、</script>はそれぞれを改行して別の行に記述できます。
JavaScriptでHTML要素を取得する
JavaScriptでHTMLの要素を取り出すには、タグに定義したID名を指定する方法とclass名を指定する方法があります。
IDを指定する方法では「document.getElementById(ID名).value」、class名で取り出すには「document.getElementsByClassName(class名)[n].value」と記述します。
class名を指定する方法では配列に格納されます。
「script」タグで外部ファイルを読み込む方法
JavaScriptのソースコードをHTMLファイルに直接記述する方法の他に別ファイルに記述する方法があります。この別ファイルは「外部ファイル」と呼ばれます。
外部ファイルを読み込むにはscriptタグにファイル名を指定し、<script src=”外部ファイル名”></script>と記述します。
外部ファイル化してHTMLのコードから読み込む方法
JavaScriptのソースコードを外部ファイル化するとソースコードの定義と実行を別々に指定できます。この方法では実行したい内容を関数として定義して外部ファイルに記述します。
関数を記述した外部ファイルを<script src=”外部ファイル名”></script>と記述し、関数を実行する個所に<script>実行する関数</script>と記述します。
外部スクリプトで行う場合
JavaScriptのソースコードを他のファイルに記述し、外部ファイルとして組み込む方法があります。
外部ファイルの利点は、複数のHTMLファイルで同じ処理を定義できることです。
「body」タグ内に記述する方法
JavaScriptの外部ファイルを「body」タグの最後に組み込むのは、「HTMLの構文解析を途中で止めない」という利点があるからです。
ブラウザがbodyタグの最初のほうでJavaScriptファイルを読み込むと、JavaScriptファイルの解析が終わるまでHTMLの構文解析が中断し、画面に表示されるまで時間がかかってしまいます。
「head」タグ内に記述する方法
JavaScriptを「head」タグ内で読み込むと、CSSファイルなどを含む複数のファイルを並列で読み込むことになります。
JavaScriptを「head」タグ内で読み込むのは、他のJavaScriptファイルやCSSファイルの解析の効率が良くなる、という利点があります。
HTMLからJavaScriptを読み込むメリット3つ
ウェブコンテンツを定義するHTMLにJavaScriptを組み込むと、Webページの一部の内容を更新する、色や文字の大きさを変えられる、アニメーション表示にするなどの「動き」を加えられる、などの利点があります。
また、特定のライブラリーを利用するとサーバーとの交信もできるため、様々な表現が可能になります。
JavaScriptを読み込むメリット1：Webページに動きの表現を出せる
最新のHTMLやCSSとJavaScriptを組み合わせると、Webページの表示に「動き」を表現できます。
CSSでは、ページ内の要素のアニメーションや、仮想的に奥行きを定義して3Dの表示ができます。
また、ajaxというプログラミング技法とHTML5の機能を組み合わせると、スマートフォンアプリのようにWebページの画面遷移をシームレスに行えます。
JavaScriptを読み込むメリット2：HTMLコンテンツの内容を変更できる
JavaScriptを使うと、Webページ内の任意のタグの内容を更新する、ページ内の指定した場所に新しい要素を追加する、任意のタグを削除する、といったことができます。
ページ内の内容の変更は、状況に応じて表示を変えたり、ユーザーのボタンクリック等の動作やフォームに入力したときの値などに応じた、「ユーザーへのフィードバック」として使えます。
JavaScriptを読み込むメリット3：CSSを編集して修正できる
JavaScriptでは、スタイルシートについて、内容の変更、要素の追加や削除ができます。この機能を使うとページ内の要素の装飾を任意のタイミングで変えられます。
スタイルシートの変更もHTMLコンテンツの内容の変更と同様に、「ユーザーへのフィードバック」として使えます。
ページ内のコンテンツの変更とCSSの編集を組み合わせると、より複雑な動的な表現が可能になるでしょう。
HTMLとJavaScriptを使った例とは？
JavaScriptのサンプルコードは、基礎的なものからライブラリーを使ったものなど様々です。
サンプルコードはその言語の基本的な使い方や関数の機能などを説明するためのもので、コピーペーストしてそのまま使えたり、軽微な編集のみで使えるものなど多数あります。
日付を表示させる
日付を取得するには、日付のオブジェクトを生成し、オブジェクトから年をgetFullYear()で、月をgetMonth()で、日をgetDate()で取り出します。月は0から11の値となるため、表示用には+1します。
年、月、日それぞれの値が揃ったら、年と月、月と日を分けるセパレータとして「/」や「-」使って表示用文字時列を生成します。
日付を表示するには次のようなコードになります。
var t = new Date();
var y = t.getFullYear();
var m = t.getMonth() + 1;
var d = t.getDate();
ここまでが日付情報の取り出しです。
続いて日付情報を表示用に整形し、表示します。
var s = y + “/” + m + “/”+ d;
console.log(s);
console.log以外にタグを指定した出力もできます。
メッセージを表示させる
JavaScriptでメッセージを表示させる方法はalert()、confirm()を使ってダイアログで表示する方法と、タグを指定してページ内の指定した位置に表示する方法に大別できます。
alert()はメッセージを表示するのみです。confirm()はユーザーへの選択肢として「はい」と「いいえ」のボタンをダイアログ内に表示します。
タグを指定する方法は、innerHTML()で任意に指定したタグにメッセージを表示できます。
- alert関数
alert(表示する文字列); - confirm関数
if(confirm(表示する文字列)) {
//「はい」ボタンがクリックされたときの処理
} else {
//「いいえ」ボタンがクリックされたときの処理
} - タグを指定する方法
tagID.innerHTML=表示する文字列;
HTMLからJavaScriptを読み込んで効率的な開発を行おう
HTML、CSS、JavaScriptの3つを組み合わせると動的なWebサイトを構築できます。これは単に「見た目」を良くするだけでなく、ユーザーが操作したときのフィードバックにも使えます。
JavaScriptを使ったWebサイトを作るときは、公開されている様々なプラットフォームやライブラリー、サンプルコードを使って開発効率を上げていきましょう。
