JavaScriptをhtmlに記述には大きく分けて4通りの方法があります、場所によってページの読み込みが遅くなったり、ちゃんと動作しないことなどがありますので少し工夫が必要になります。基本的には文章の最後に記述するとページの表示が早くなることが多いですね。
スクリプトの記述場所
htmlファイルは上から下方向に向かって読み込まれます。それを念頭に置いておくとわかりやすいかもしれません。
JavaScriptの記述場所
| JavaScriptの記述場所 | 内容や特徴 | |
| ① | ヘッダー内 | ページのはじめに読み込ませたい関数や画像処理などのスクリプトを記述する |
| ② | タグ内 | タグの中にイベントを組み込んだり関数を記述したりします |
| ③ | 外部ファイル | 一つのスクリプトファイルを複数の場所で使いまわす場合は外部ファイルにします。 |
| ④ | body内 | タグの表示とともに動作させる場合などはここに記述します。順番に読み込まれるためbodyの下の方に記述するとページの表示が早くなります |
JavaScriptの記述方法
上記では記述場所を説明しましたが、ここでは各場所での記述方法を説明します。
ヘッダーやbodyに記述する場合
ヘッダーやbodyに記述する場合はscriptタグの間に記述します。
| <script> ココにJavaScriptのコードを記述する </script> |
タグ内に記述する場合
あまり使いませんが下記のような書き方もあります。
<img src=“basic1-1.jpg” onclick=“JavaScript:ココにコードを記述する“> |
例
<img src=”basic1-1.jpg” onclick=”JavaScript:alert(‘画像がクリックされました。’);”>
外部ファイルの場合
JavaScriptのファイルを外部から呼び出す場合の記述はsrc=”ファイルパス”の形式にします。ファイル形式は～～～.jsですがここでは解説しません。
<script src=“ファイルパス”></script> |
こんな感じ
<script src=”test.js”></script>
JavaScriptのコードを記述する場所は4か所ありますが、ブラウザで表示できるファイルは最初のhtmlファイルになります。その場合ファイルの最初の方にたくさんスクリプトを記述するとページの表示が遅くなる場合があります。
後からでもいい場合のスクリプトはbody内の下の方に記述したほうがいいです。ユーザーはページが表示されないとすぐに閉じてしまいますので…
このページはこれでおしまいです。
お疲れさまでした！
INDEX 次のページ
コメント