かんろぐ Written by kan

【参考コード有】HTML内でscriptを使ってJavaScriptを書く方法【コピペOK】

CODE HTML/CSS

PR ※当サイトではアフィリエイト広告を利用しています

「HTML内にJavaScriptをどのように書けば良いのかなぁ。そもそもどこに書けば良いのかなぁ?」

こんにちは、かんです!

本記事では、HTMLファイルにJavaScriptを書く方法について詳しく解説していきます。

初心者の方やHTML/CSSをメインに使ってきた方々にとっては、少し複雑に感じるかもしれません。そこで、この記事を通じて、JavaScriptについて少しでも理解ができたら嬉しいです。

それでは、JavaScriptをHTMLファイルに書く方法を一緒に学んでいきましょう。

JavaScriptの読み込み方

JavaScriptをHTMLファイル内で利用するには、主に2つの方法があります。

  1. HTMLファイル内の任意の位置に<script>タグを用いて直接JavaScriptを書く方法
  2. 別途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の学習を進めていきましょう(`・ω・)ゞ

他にも記事を見てみる

この記事を書いた人
かんろぐ/プロフィールアイコン
かん
未経験からWeb制作会社へ転職 | Webの楽しさや転職のあれこれを発信 | 転職サポート「CodeChange」主催 / 転職成功15名超 | WordPress・Shopify | CodeBegin転職講師 | マナブさん弟子 | カオマンガイとサウナ | ブロガー | ●かんろぐ運営/月間7,600PV達成 |

合わせて読みたい記事