HTMLからjavascriptを呼び出す方法と関係性

※本ページにはプロモーション(広告)が含まれています

HTMLとjavascriptは関係性が強く、サイト制作にあたりどちらも重要な役割を担います。ここでは、「HTMLからjavascriptを呼び出す方法と関係性」について、紹介いたします。これから、HTMLやjavascriptを勉強する方や、HTMLからjavascriptを呼び出す方法が分からず困っていた方は、参考にご覧ください。

１.HTMLからjavascriptを呼び出す方法と関係性について

ここでは、HTMLからjavascriptを呼び出す場合の２つの方法と、関係性について紹介します。

１.HTMLとjavascriptとの関係性

HTMLはHyper Text Markup Languageの略で、テキストや画像などをWebサイトに定義するマークアップ言語です。タグというマークを使ってテキストや画像などを表示したり、指定したりします。JavascriptはHTMLやCSSの書き換えや動作を表現するためのプログラミング言語です。

テキストの点滅や、ダイアログ表示、カーソルを合わせるとリスト表示や色の変化など、さまざまな動きを与えます。Javascript以外のプログラミング言語を学ぶ際は、HTMLを学ぶ必要がないのですが、javascriptのプログラムを作るにはHTMLが必要なため両方を学ぶ必要があります。そして、HTMLからjavascriptを呼び出すためには、インラインスクリプトと外部スクリプトの２つの方法があります。

２.HTML内にjavascriptを埋め込む

HTMLからjavascriptを呼び出す方法として、HTML内にjavascriptを直接埋め込むインラインスクリプトという方法があります。インラインスクリプトの書き方は、＜script＞と＜/script＞の間にjavascriptを書きます。下記はインラインスクリプトの例です。

インラインスクリプトの場合は、”＜/script＞”をコード内に含めることはできません。記述してしまうとそれ以降をただの文字列と解釈してしまいます。

３.外部スクリプトをHTML内で読み込む

インラインスクリプトの他にも外部スクリプトの方法があります。外部スクリプトをHTML内で読み込む方法になり、こちらの方法が一般的には使われることが多いです。下記は外部スクリプトの例です。

外部スクリプトの際は文字化け防止のために文字エンコーディングへの配慮が必要です。

２.JavaScriptの勉強でおすすめの本

ここでは、JavaScriptを学ぶ場合に使えるおすすめの本について紹介します。

１.入門者のJavaScript

入門者のJavaScriptは、JavaScript初心者の方向けの本で、少しずつ基本を学んでいけます。本のテーマが「手順通りに書いて 動かすだけで自然とJavaScriptが身につく」となっており、実際に手を動かしながら、実践的な知識を学んでいける内容となっています。勉強が苦手な方でも大丈夫なように、分かりやすく丁寧に解説されている一冊です。

構成内容：JavaScriptとは何だろう／JavaScriptを学習する前の準備／JavaScriptプログラミングはじめの一歩／ボタンクリックで処理を実行させよう／JavaScriptでHTMLやCSSを操作する／変数の処理を学ぼう／表示する画像によって実行する堀を使い分ける／画像の表示をスムーズにする記述方法についてなど

２.確かな力が身につくJavaScript「超」入門

確かな力が身につくJavaScript「超」入門は、JavaScript初心者の方向けの入門書です。他の参考書では勉強が続かなかった方でも、初心者がつまづきやすいポイントを丁寧に分かりやすく解説していますので、頑張って勉強を続けていける本です。

知識だけでなく、実際に手を動かしてサンプルを作っていくため、実践的な基礎力が身に付きます。構成内容：JavaScriptの文法と基本的な機能／インプットとデータの加工／一歩進んだテクニック／jQuery入門／外部データを活用したアプリケーションに挑戦など

３.ノンプログラマのためのJavaScriptはじめの一歩

1 2