JavaScriptをHTML要素内に直接記述する方法｜javascript: の使い方と注意点を初心者向けに解説
JavaScriptをWebページに組み込む方法はいくつかあります。
- HTML文書内に直接記述する
- 外部ファイル（.js）を読み込む
- HTML要素内に直接書く（イベント属性）
このページでは、もっとも簡単に動作を確認できる「HTML要素内に直接JavaScriptを書く方法」を初心者向けにわかりやすく解説します。
HTML要素内にJavaScriptを直接書く方法
HTMLの属性（イベント属性）に javascript: を使ってスクリプトを直接記述する方法です。
よく使われる場面としては、
- 画面レイアウトだけ先に作りたいとき
- ボタンやリンクの処理がまだ未実装のとき
- 簡易的な動作確認をしたいとき
このような場合に、「何もしない」 または 「未実装メッセージを出す」 といった処理をよく見かけます。
クリックしても何も起こらないリンクを作る（void(0)）
void(0) を使うと、リンクをクリックしても何も動作しないようにできます。
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<a href=”javascript:void(0)”>クリックしても何も起こりません。</a>
</body>
</html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<a href=”javascript:void(0)”>クリックしても何も起こりません。</a>
</body>
</html>
void(0) は「何も返さない」という意味で、リンクのデフォルト動作（ページ遷移）を防ぐときに便利です。
未実装メッセージを表示する例（alert）
処理がまだ実装されていない場合、クリック時に「未実装」と表示することもよくあります。
<html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<input type=”button” value=”実行” onclick=”javascript:alert(‘未実装’);”>
</body>
</html>
<head>
<title>JavaScript Sample</title>
</head>
<body>
<input type=”button” value=”実行” onclick=”javascript:alert(‘未実装’);”>
</body>
</html>
簡易的な動作確認やプロトタイプ作成時に便利な書き方です。
まとめ
- HTML要素内に
javascript:を使って直接スクリプトを書ける void(0)を使うと「何もしない」リンクが作れる- alert を使って「未実装」メッセージを表示できる
- プロトタイプや簡易動作確認に便利な方法
