HTML-JavaScript

スクリプト*は、Webサイトにインタラクティブ機能を追加できる小さなプログラムです。たとえば、スクリプトはポップアップアラートボックスメッセージを生成したり、ドロップダウンメニューを提供したりできます。このスクリプトは、JavaScriptまたはVBScriptを使用して作成できます。

任意のスクリプト言語を使用してイベントハンドラーと呼ばれるさまざまな小さな関数を記述し、HTML属性を使用してそれらの関数をトリガーできます。

現在、ほとんどのWeb開発者は JavaScript および関連するフレームワークのみを使用していますが、VBScriptはさまざまな主要なブラウザーでもサポートされていません。

JavaScriptコードを別のファイルに保存して、必要な場所に含めるか、HTMLドキュメント自体の内部で機能を定義できます。適切な例を使用して、両方のケースを1つずつ見てみましょう。

外部JavaScript

さまざまなHTMLドキュメントで使用される機能を定義する場合は、その機能を別のJavaScriptファイルに保持してから、そのファイルをHTMLドキュメントに含めることをお勧めします。 JavaScriptファイルの拡張子は .js になり、<script>タグを使用してHTMLファイルに含まれます。

例

次のコードを持つ script.js でJavaScriptを使用して小さな関数を定義することを検討してください-

function Hello() {
   alert("Hello, World");
}

では、次のHTMLドキュメントで上記の外部JavaScriptファイルを利用しましょう-

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me"/>
   </body>

</html>

これにより、次の結果が生成されます。特定のボタンをクリックしてみてください-

内部スクリプト

スクリプトコードをHTMLドキュメントに直接書き込むことができます。通常、<script>タグを使用してドキュメントのヘッダーにスクリプトコードを保持します。それ以外の場合、制限はなく、ソースコードはドキュメント内のどこでも<script>タグ内に配置できます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.finddevguides.com/"/>

      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me"/>
   </body>

</html>

これにより、次の結果が生成されます。特定のボタンをクリックしてみてください-

イベントハンドラ

イベントハンドラは、マウスイベントまたはキーボードイベントに対して呼び出すことができる、単に定義された関数にすぎません。イベントハンドラー内でビジネスロジックを定義できます。ビジネスロジックは、1行から数千行のコードまでさまざまです。

次の例では、イベントハンドラの記述方法について説明します。ドキュメントのヘッダーに1つの単純な関数_EventHandler（）_を記述しましょう。ユーザーが段落の上にマウスを移動すると、この関数が呼び出されます。

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.finddevguides.com/"/>

      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

これにより、次の結果が生成されます。この線の上にマウスを移動し、結果を確認します-

古いブラウザからスクリプトを隠す

最近ではほとんどの（すべてではないにしても）ブラウザーがJavaScriptをサポートしていますが、それでも一部の古いブラウザーはJavaScriptをサポートしていません。ブラウザがJavaScriptをサポートしていない場合、スクリプトを実行する代わりに、ユーザーにコードを表示します。これを防ぐには、以下に示すように、スクリプトの周りにHTMLコメントを配置するだけです。

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
  //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>要素

また、ブラウザがスクリプトをサポートしていないユーザーや、スクリプトオプションを無効にしているユーザーに代替情報を提供することもできます。これを行うには、 <noscript> タグを使用します。

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
  //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

デフォルトのスクリプト言語

複数のスクリプトファイルを含め、最終的に複数の<script>タグを使用する場合があります。すべての_script_タグにデフォルトのスクリプト言語を指定できます。これにより、ページ内でスクリプトタグを使用するたびに言語を指定する必要がなくなります。以下は例です-

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript"/>

スクリプトタグ内で言語を指定することで、デフォルトを上書きすることができます。

Html-javascript

目次