HTMLページにJavaScriptを記述してみよう

HTML ページの中に JavaScript のコードを記述しておくと、ブラウザで HTML ページを開いた時に ページ内に記述されたコードを実行することができます。ここでは HTML ページの中に JavaScript のコードを記述する方法について解説します。
チェックマーク を付けて確認してみてください。

HTMLファイルに直接JavaScriptのコードを記述してみよう

HTML ファイルの中に JavaScript のコードを直接記述する方法について解説します。

script要素を記述する

Code

Code

JavaScriptのコードを別のファイルに記述する

HTML ファイル内に直接 JavaScript のコードを記述する代わりに、別のファイルに JavaScript のコードを記述し、そのファイルを HTML ファイルから読み込むことができます。同じコードを複数の HTML ファイルで利用する場合などに便利です。ここでは JavaScript のコードを別のファイルに記述する方法について解説します。

JavaScriptのコードが記述されたファイルを作成する

Code

Code

JavaScriptのファイルの文字コードを指定して読み込む

Code

Code

ブラウザのJavaScriptが無効の時に別のコンテンツを表示してみよう

ブラウザで JavaScript が無効になっていると HTML ファイルの中に記述された JavaScript のコードは実行されません。ただ利用者はなぜ何も表示されないのか分かりませんので、 noscript 要素を使用して JavaScript が無効になっているときにだけ別のコンテンツを表示することができます。ここでは ブラウザの JavaScript が無効の時に別のコンテンツを表示する方法について解説します。

noscript要素を記述する

Code

サンプルコード

Code

ブラウザのコンソールを表示しJavaScriptのコードを実行してみよう

JavaScript のコードを実行した内容の確認（デバッグ）する際に、ブラウザのコンソールを表示しJavaScriptのコードを実行することができます。

Code

JavaScriptのコードをHTMLファイルを記述するタイミング

JavaScriptのコードを読む順番

Code
Uncaught TypeError: Cannot set property 'innerHTML' of null

Code

JavaScriptの外部ファイルを非同期で読み込む(async属性,defer属性)

HTML ファイルの中から JavaScript が記述された外部ファイルを読み込む場合に、 script タグに async 属性または defer 属性を設定すると非同期で読み込むことができます。ここでは async 属性または defer 属性を設定して JavaScript の外部ファイルを非同期で読み込む方法、および async 属性と defer 属性の違いについて解説します。

defer属性を設定する

Code

async属性を設定する

Code

defer属性とasync属性の違い

defer 属性と async 属性はどちらも外部に記述した JavaScript のファイルの読み込みを HTML のパースと並行して行うため、読み込みによるパースや画面表示の遅延を回避することができます。
チェックマーク を付けて確認してみてください。

｜｜

土 20:30

本日

タイトル

D・ニキ
FREE

土 20:30

本日

タイトル

D・ニキ
FREE