JavaScriptをHTMLに記述する方法｜scriptタグの基本と正しい書き方を初心者向けに解説
JavaScriptをWebページに組み込む方法はいくつかあります。
- HTML文書内に直接記述する
- 外部ファイル（.js）を読み込む
- HTML要素内に直接書く（onclickなど）
このページでは、最も基本となる「HTML文書内にJavaScriptを書く方法」を初心者向けにわかりやすく解説します。
JavaScriptをHTML文書内に記述する方法
HTML文書の <script> タグ内に JavaScript を記述する方法です。もっとも基本的で、初心者が最初に覚えるべき書き方です。
<script type=”text/javascript”>
ここにスクリプトを書く
</script>
ここにスクリプトを書く
</script>
従来は language 属性を使ってスクリプト言語を指定していましたが、HTML4.01 以降では非推奨となり、現在は type 属性（text/javascript）が一般的です。
古いブラウザでの注意点（現在は不要）
昔の携帯ブラウザなど、JavaScriptに対応していない環境では、<script> タグ内のコードがそのまま画面に表示されてしまうことがありました。
そのため、スクリプト全体を <!-- と // --> で囲む書き方が一般的でした。
<script type=”text/javascript”>
<!–
ここにスクリプトを書く
// –>
</script>
<!–
ここにスクリプトを書く
// –>
</script>
現在のブラウザではこの記述は不要ですが、古いコードを読む際に知っておくと理解しやすいです。
コメントの書き方
JavaScriptでは、後で見返すためのメモや注意書きをコメントとして残すことができます。
- //：1行コメント
- /* ～ */：複数行コメント
<script type=”text/javascript”>
// これは1行コメント
/*
これは複数行コメント
*/
</script>
// これは1行コメント
/*
これは複数行コメント
*/
</script>
HTML内に複数のscriptタグを書く例
JavaScriptは、HTML内に複数の <script> タグを記述できます。必要な場所に必要な処理を書くことが可能です。
<html>
<head>
<title>JavaScript Sample</title>
<script type=”text/javascript”>
<!–
ここにスクリプトを書く
// –>
</script>
</head>
<body>
<script type=”text/javascript”> // JavaScriptは複数書ける
<!–
ここにスクリプトを書く
/* 複数行コメント */
// –>
</script>
<noscript>このページはJavaScript対応ブラウザで見てください。</noscript>
</body>
</html>
<head>
<title>JavaScript Sample</title>
<script type=”text/javascript”>
<!–
ここにスクリプトを書く
// –>
</script>
</head>
<body>
<script type=”text/javascript”> // JavaScriptは複数書ける
<!–
ここにスクリプトを書く
/* 複数行コメント */
// –>
</script>
<noscript>このページはJavaScript対応ブラウザで見てください。</noscript>
</body>
</html>
まとめ
- JavaScriptは
<script>タグ内に記述するのが基本 - 古いブラウザ向けの
<!-- ～ //-->は現在は不要 - コメントは // と /* */ を使い分ける
- HTML内に複数のscriptタグを記述できる
