「javascript」を書くには「HTML埋め込み型」か「外部参照型」で書くことができます。
「HTML埋め込み型」の「JavaScript」の書き方
「HTML埋め込み型」とは、拡張子が「.html」形式のWebページの中で、「JavaScript」を書くことができるようにするものです。
「HTML埋め込み型」はscriptタグで囲んだ中に「JavaScript」を書くことができます。
【構文】 「HTML埋め込み型」の「JavaScript」の書き方
「script type」で「text/JavaScript」を指定します。
<script type="text/javascript">
// ここに「JavaScript」を記述する
</script>
【例文】 「HTML埋め込み型」の「JavaScript」の書き方
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript">
document.write("Hello World");
//実行すると「Hello World」と表示されます。
</script>
</body>
</html>
「外部参照型」の「JavaScript」の書き方
「HTML埋め込み型」では、html本文中に「JavaScript」を書くことができました。
「外部参照型」では、拡張子が「.js」形式の「JavaScript」ファイルを作成し、Webページの途中で呼び出すこができるものです。
【構文】 「外部参照型」の「JavaScript」の書き方
「外部参照型」で書く場合はsrc=でJavaScriptのファイルのパスを読み込みます。
<script type="text/javascript" src="読み込む.jsファイルのパス"></script>
【例文】 「外部参照型」の「JavaScript」の書き方
<html>
<head>
<title>サンプル</title>
</head>
<body>
<script type="text/javascript" src="外部参照.js"></script>
</body>
</html>
外部参照.jsの中身
document.write("Hello World");
実行すると「Hello World」と表示されます
「HTML埋め込み型」と「外部参照型」はどちらがいいの？
「JavaScript」の書き方によって読み込み速度が変わります。
Webページは読み込み速度が早いほどいいので、「JavaScript」の書き方の方法は大事です。
短い「JavaScript」はHTML埋め込み型がいい
「HTML埋め込み型」の方が「外部参照型」より読み込み速度が早いです。
ですので、なるべく「HTML埋め込み型」で書くことをおすすめします。
「HTML埋め込み型」で書く場合は</body>タグの直前に書く
「JavaScript」はhtml本文のどこにでも書くことができます。
しかし、<header>タグ内に書くと、「JavaScript」を完全に読み込まれるまで<body>タグ内の本文が読み込まれません。
それでは本文の読み込みに時間がかかってしまいます。
それを回避するに</body>タグの直前に「JavaScript」を書くことで、本文が読み込まれてから「JavaScript」が読み込まれるようにします。
「外部参照型」で書くメリット
「JavaScript」を「外部参照型」で書くメリットは、「JavaScript」が長すぎる場合に別ファイルにすることで読みやすくすることです。
htmlファイルに長い「JavaScript」が書かれていると読みにくいものになります。