【参考コード有】HTML内でscriptを使ってJavaScriptを書く方法【コピペOK】
PR ※当サイトではアフィリエイト広告を利用しています
「HTML内にJavaScriptをどのように書けば良いのかなぁ。そもそもどこに書けば良いのかなぁ？」
こんにちは、かんです！
本記事では、HTMLファイルにJavaScriptを書く方法について詳しく解説していきます。
初心者の方やHTML/CSSをメインに使ってきた方々にとっては、少し複雑に感じるかもしれません。そこで、この記事を通じて、JavaScriptについて少しでも理解ができたら嬉しいです。
それでは、JavaScriptをHTMLファイルに書く方法を一緒に学んでいきましょう。
JavaScriptの読み込み方
JavaScriptをHTMLファイル内で利用するには、主に2つの方法があります。
- HTMLファイル内の任意の位置に
<script>タグを用いて直接JavaScriptを書く方法 - 別途JavaScriptを記述した.jsファイルを作成し、HTMLファイルからリンクを通じて読み込む方法
直接書く場合は、<script>タグ内にJavaScriptのコードを書きます。通常は<body>タグの最後に配置することが多いです。
<html>
<body>
<!-- その他のHTMLコード -->
<script>
// ここにJavaScriptのコードを書く
</script>
</body>
</html>
一方、外部ファイルとして書く場合は、.jsという拡張子のファイルを作成し、その中にJavaScriptのコードを書きます。
そして、HTMLファイル内でそのファイルを読み込むために<script>タグのsrc属性を利用します。
<html>
<body>
<!-- その他のHTMLコード -->
<script src="script.js"></script>
</body>
</html>
実際にJavaScriptを書いてみた
それでは、実際にシンプルなJavaScriptのコードを書いてみましょう。
<html>
<body>
<h1 id="title">Hello, World!</h1>
<script>
document.getElementById("title").innerHTML = "Hello, JavaScript!";
</script>
</body>
</html>
ここでは、HTML内の<h1>タグに設定したid属性を利用して該当の要素をJavaScriptで取得し、その内容を変更しています。
これらの例を参考に、JavaScriptの基本的な利用方法を練習してみてください。
他にも色々作ってみましょう(｀・ω・)ゞ
アラートメッセージの表示:
htmlCopy code
<html>
<body>
<script>
alert("こんにちは、JavaScript!");
</script>
</body>
</html>
これはブラウザのアラートダイアログを表示します。
“こんにちは、JavaScript!”というメッセージがアラームとしてページ上部に表示されます。
ボタンクリック
htmlCopy code
<html>
<body>
<button id="myButton">クリックしてね！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
</script>
</body>
</html>
この例では、ボタンをクリックするとアラートメッセージが表示されます。
JavaScriptはボタンのクリックイベントを監視し、そのイベントが発生すると指定された関数が実行されます。
HTML要素のスタイル変更:
htmlCopy code
<html>
<body>
<p id="myParagraph">テキストの色を変更します。</p>
<button id="myButton">色を変更する！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("myParagraph").style.color = "red";
});
</script>
</body>
</html>
この例では、ボタンをクリックすると段落のテキスト色が赤に変わります。
JavaScriptはCSSプロパティを直接操作して、HTML要素のスタイルを変更することができます。
入力フォームの値を取得する:
htmlCopy code
<html>
<body>
<input id="myInput" type="text">
<button id="myButton">入力を表示する！</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
let inputValue = document.getElementById("myInput").value;
alert("あなたの入力は: " + inputValue);
});
</script>
</body>
</html>
この例では、ボタンをクリックすると入力フォームの値が取得され、それがアラートメッセージとして表示されます。
実際によくあるミス
JavaScriptをHTML内に書く際には、いくつかの一般的なミスに注意する必要があります。
タグの閉じ忘れ、多い、少ないなど
<script>タグを開始したら、必ず閉じタグを書くことを忘れないようにしましょう。閉じタグがないと、そもそも正常に動作しない可能性があります。
他にも、{ } の数など、数え忘れることが多いですね。こちらもしっかりと確認しておきましょう。
文法エラー
- プログラミング言語全般に言えることですが、JavaScriptも正しい文法を守る必要があります。文法エラーがあると、コードが正常に動作しません。
小文字とか要注意ですね。スニペットなどで登録をして、なるべく予測変換で出てくるソースコードで記入すると間違いやスペルミスを減らすことができます。
-
<script>タグの配置：<script>タグは通常、HTMLの<body>タグの最後に配置します。これは、HTMLの要素が全て読み込まれてからJavaScriptのコードを実行するためです。タグの先頭に<script>タグを配置すると、HTMLの要素がまだ読み込まれていない状態でJavaScriptが実行され、予期しないエラーが発生する可能性があります。
以上、JavaScriptをHTMLファイルに書く基本的な方法について解説しました。
これらの知識を基に、JavaScriptの学習を進めていきましょう(｀・ω・)ゞ
他にも記事を見てみる
- 【jQueryで解説】スムーススクロールでページ内リンクを遷移させる方法
- スムーススクロールで別ページに飛んでも特定の位置まで正しくスクロールさせる方法
- JavaScriptでモーダルウィンドウを表示させる方法【サンプル付きで解説】
- 【JavaScript】addEventListenerの種類一覧・使い方を紹介
合わせて読みたい記事
