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

LINEで送る
Pocket

3636fe71656dbf99f97c188f732a257b_s

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

スポンサーリンク

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

e86c6e29a89421d25d52c929a537edc2_s

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

1.HTMLとjavascriptとの関係性

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

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

2.HTML内にjavascriptを埋め込む

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

  1. <script type=”text/javascript”>
  2. (javascriptを記述します)
  3. </script>

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

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

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

  1. <script type=”text/javascript” src=””></script>

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

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

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

1.入門者のJavaScript

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

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

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

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

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

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

ノンプログラマのためのJavaScriptはじめの一歩は、基礎からJavaScriptを勉強したい方向けの本です。使い方や考え方などがしっかりと理解できるよう、分かりやすく丁寧に解説してあり、サンプルコードもついているため、手を動かしながら学べます。

構成内容:プログラムを学ぶうえでの心構え/JavaScriptとは何か/JavaScriptの実行/開発ツール/JavaScriptの文法/JavaScriptでHTMLやCSSを操作する/プログラムの読み方と組み立て方/jQueryでプログラミングを楽にする/HTMLの基本など

4.スラスラわかるJavaScript

スラスラわかるJavaScriptは、少しJavaScriptを勉強したことがある方向けの本です。テキストだけでなく、イラストを使った解説も多いため理解が進みます。プログラミングの勉強に苦手意識を持っている方でも、取り組める一冊です。

構成内容:JavaScriptとWebページの基礎知識/HTMLとは/CSSの基礎知識/書き方の基本/制御構文/関数/オブジェクトの基礎/イベント/ブラウザオブジェクト/DOM/jQueryの基礎知識/jQueryの文法/Ajax/アニメーションなど

5.ブレイクスルーJavaScript

ブレイクスルーJavaScriptは、JavaScript中級者向けの本です。実際の開発現場で壁と感じやすい5つのポイントを集中的に学ぶことができます。実際に具体的なコードを書きながら勉強できるため、実践で使える知識・スキルが身に付きます。

構成内容:オブジェクト指向/UI・インタラクティブ表現/グラフィック表現/AJAX・API連携・データ検索/シングルページアプリケーションなど

6.JavaScript本格入門

JavaScript本格入門は、初心者向けではなく中級者向けの本です。多くの人が呼んでいる本でもあり、基礎から応用までしっかりと学べます。非常にボリュームのある本なため、JavaScriptへの理解を深めたい方におすすめです。

構成内容:JavaScriptとは?/基本的な書き方を身につける/基本データを操作する/くり返し利用するコードを1箇所にまとめる/大規模開発でも通用する書き方を身につけるなど

まとめ

いかがでしたでしょうか。今回は「HTMLからjavascriptを呼び出す方法と関係性」について、紹介いたしました。インラインスクリプトと外部スクリプトを使えば、HTMLからjavascriptを呼び出すことが可能です。

特に外部スクリプトの方はよく使われますので、覚えておくと良いでしょう。これからHTMLやjavascriptを勉強する方は、ぜひ試しに使ってみてください。また、気になる本があれば、ぜひ直接確かめてみてください!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です