JavaScript は、Web 開発で広く使用されているオブジェクトベースのイベント駆動型スクリプト言語です。 Web ページは JavaScript を使用してよりインタラクティブで動的にすることができ、開発中にページの機能を実現するために HTML に JavaScript コードを追加することが必要になることがよくあります。

この記事では、内部スクリプト、外部スクリプト、インライン スクリプトなどの JavaScript を HTML に追加する方法を紹介します。

1. 内部スクリプト

内部スクリプトとは、HTML ページに JavaScript コードを直接記述することです。この方法は、単純なインタラクティブなエフェクトなど、コードの量が少ない状況に適しています。以下は、内部スクリプトを使用して、マウスを置いたときにテキストの色を変更する例です。

    
    




    
鼠标放上去改变颜色

この例では、JavaScript コードが、onmouseover および onmouseout イベントを通じて HTML 要素 h1 に直接追加されます。マウスを置くと文字の色が変化し、上に行くと赤、離れると黒になります。

2. 外部スクリプト

外部スクリプトは、JavaScript コードを別のファイルに保存し、HTML ページを通じてそれを導入します。この方法は、コード量が多い場合や複数のページを共有する必要がある場合に適しており、コードの保守性や再利用性を向上させることができます。外部 JavaScript ファイルを HTML ページに導入する例を次に示します。

    
    
    




    
Hello World!

この例では、外部 JavaScript ファイルは、src 属性によって指定されます。 ; タグのパスを追加し、ファイル内の JavaScript コードを HTML ファイルに導入することでコードの再利用を実現します。

3. インライン スクリプト

インライン スクリプトとは、HTML タグの属性に JavaScript コードを記述することを意味します。このメソッドは、JavaScript を使用して特定のインタラクティブ効果を実装する必要があり、このタグ内でのみ機能する必要がある状況に適しています。以下は、ボタンをクリックしたときにインライン スクリプトを使用してプロンプト ボックスをポップアップ表示する例です。

    
    




    点击这里弹出提示框

この例では、onclick イベントを通じて HTML ボタン要素に JavaScript コードが直接追加されます。ボタンをクリックするとプロンプト ボックスが表示されます。