HTMLでJavaScriptコードを使用する方法-フロントエンドQ&A-php.cn

HTML は Web デザインの基本言語です。Web ページで JavaScript を使用すると、Web ページの対話性、ダイナミクス、実用性が向上します。この記事では、HTML で JavaScript コードがどのように使用されるかを詳しく紹介します。

1. JavaScript コードの紹介

HTML ページで JavaScript コードを使用するには、medium-script タグが必要です。通常、スクリプトタグは HTML ファイルの先頭または本文の部分に配置されます。以下は簡単な例です:

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript">
          //JavaScript代码在这里
      </script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

ログイン後にコピー

上記のコードでは、script タグを使用して head タグに JavaScript コードを導入し、その中に JavaScript コードを記述します。実際の開発では、JavaScript コードを別の .js ファイルに記述し、それを script タグを通じて導入することがあります。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript" src="myscript.js"></script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

ログイン後にコピー

上記のコードでは、src 属性を介して myscript.js という名前のファイルを導入しました。このファイルには JavaScript コードが含まれています。

2. JavaScript コードの場所

JavaScript コードは、HTML ページのヘッド、ボディ、さまざまなタグなど、HTML ファイルのさまざまな部分に配置できます。 JavaScript コードを別の場所に配置すると、コードの実行時間と実行範囲に影響します。

head タグに配置

head タグに配置された JavaScript コードは、通常、グローバル変数の初期化、オブジェクトと関数の定義に使用されます。 head タグ内のコードはページが読み込まれた直後に実行されるため、ページがレンダリングされる前にいくつかの前処理関数をページに提供できます。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <script type="text/javascript">
         var myVar = "Hello, World!";
         
         function myFunction() {
            alert(myVar);
         }
      </script>
   </head>
   <body>
      <!-- HTML页面中的其他内容 -->
   </body>
</html>

ログイン後にコピー

上記のコードでは、myVar という名前の変数と myFunction という名前の関数を定義しました。これらのコードはページが読み込まれた直後に実行され、レンダリング前にページにいくつかの前処理関数を提供できます。

body タグに配置

body タグに配置された JavaScript コードは、通常、ページの操作とイベント処理を処理するために使用されます。 body タグ内のコードはページが読み込まれた後に実行されるため、ページのレンダリング後にページにさらに対話性とダイナミクスを提供できます。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <button onclick="myFunction()">点击这里</button>
      <script type="text/javascript">
          function myFunction() {
            alert("你点击了这个按钮！");
         }
      </script>
   </body>
</html>

ログイン後にコピー

上記のコードでは、body タグでボタンと myFunction という名前の JavaScript 関数を定義します。ユーザーがボタンをクリックすると、myFunction 関数がトリガーされ、プロンプトボックスがポップアップ表示されます。

さまざまなタグ内に配置する

さまざまな HTML タグ内に配置された JavaScript コードは、通常、ユーザーの操作に基づいてコンテンツとスタイルを動的に更新するために使用されます。たとえば、特定のタグの onclick または onmouseover 属性に JavaScript コードを直接記述することで、ユーザーがタグを操作すると、ページのコンテンツやスタイルが変更されます。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <style>
         .myDiv {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h1>我的网页</h1>
      <div class="myDiv" onmouseover="this.style.backgroundColor=&#39;red&#39;"
         onmouseout="this.style.backgroundColor=&#39;yellow&#39;">
         <p>这个div会改变颜色！</p>
      </div>
   </body>
</html>

ログイン後にコピー

上記のコードでは、myDiv という名前の div タグを定義し、その onmouseover 属性と onmouseout 属性に JavaScript コードを追加します。ユーザーがマウスを myDiv 上に移動すると、div の背景色は赤に変わり、ユーザーがマウスを離れると、div の背景色は黄色に戻ります。

3. JavaScript コードの使用

HTML ページで JavaScript コードを使用する場合は、次の点を考慮する必要があります:

変数とデータ型

JavaScript では、変数にデータを格納でき、変数名では大文字と小文字が区別されます。 JavaScript は、数値、文字列、ブール値、配列、オブジェクトなどを含むさまざまなデータ型をサポートしています。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <script type="text/javascript">
         var myNum = 123;
         var myStr = "Hello, World!";
         var myBool = true;
         var myArr = [1,2,3,4,5];
         var myObj = {name:"John", age:30, city:"New York"};

         document.write(myNum); // 输出 123
         document.write("<br>");
         document.write(myStr); // 输出 Hello, World!
         document.write("<br>");
         document.write(myBool); // 输出 true
         document.write("<br>");
         document.write(myArr[0]); // 输出 1
         document.write("<br>");
         document.write(myObj.name); // 输出 John
         document.write("<br>");
      </script>
   </body>
</html>

ログイン後にコピー

上記のコードでは、5 つの異なる変数を定義し、document.write() 関数を使用してそれらの値をページに出力します。また、配列およびオブジェクトの要素にアクセスする方法も示しました。

関数とイベント

JavaScript の関数は、関数名を通じて呼び出して実行できる再利用可能なコードです。関数はパラメータを受け取り、戻り値を持つことができます。 HTML ページでは、通常、関数はユーザーイベントの処理、入力の検証などに使用されます。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
   </head>
   <body>
      <h1>我的网页</h1>
      <button onclick="myFunction()">点击这里</button>
      <p id="demo"></p>
      <script type="text/javascript">
          function myFunction() {
            document.getElementById("demo").innerHTML = "你点击了这个按钮！";
         }
      </script>
   </body>
</html>

ログイン後にコピー

上記のコードでは、myFunction という名前の関数を定義し、それをボタンの onclick イベントにバインドします。ユーザーがボタンをクリックすると、myFunction 関数が p タグの innerHTML 属性を変更し、テキストの内容を「このボタンをクリックしました!」に設定します。

DOM 操作

DOM (Document Object Model) は、HTML ドキュメント用のプログラミングインターフェイスであり、JavaScript コードがドキュメント内の任意の要素にアクセスし、そのコンテンツ、属性、スタイルなどを変更できるようにします。 HTML ページでは、通常、DOM 操作を使用してページのコンテンツとスタイルを動的に変更します。

<!DOCTYPE html>
<html>
   <head>
      <title>使用JavaScript代码</title>
      <style>
         .myDiv {
            background-color: yellow;
         }
      </style>
   </head>
   <body>
      <h1>我的网页</h1>
      <div id="myDiv">
         <p>这里是一个div。</p>
      </div>
      <button onclick="myFunction()">点击这里</button>
      <script type="text/javascript">
          function myFunction() {
            var myDiv = document.getElementById("myDiv");
            myDiv.style.backgroundColor = "red";
         }
      </script>
   </body>
</html>

ログイン後にコピー

上記のコードでは、myDiv という名前の div タグと myFunction という名前の関数を定義します。ユーザーがボタンをクリックすると、myFunction 関数が DOM 操作を通じて myDiv ラベルの背景色を変更します。

4. 概要

HTML ページで JavaScript コードを使用すると、ページの対話性、ダイナミクス、実用性が向上します。この記事では、スクリプトタグを使用して JavaScript コードを導入する方法、HTML ページ内の JavaScript コードを配置する場所、JavaScript 変数、データ型、関数とイベント、DOM 操作について説明します。これらの知識ポイントを深く学習して習得することで、JavaScript をより適切に使用して、Web ページにさらに多くの機能と美しさを追加できるようになります。

以上がHTMLでJavaScriptコードを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。