ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTML は JavaScript の結果をどのように呼び出しますか?
HTML は JavaScript の結果をどのように呼び出しますか?
- PHPzオリジナル
- 2023-04-25 17:30:551392ブラウズ
Web 開発では、動的な効果やユーザー インタラクション機能を提供するために JavaScript が広く使用されています。ただし、JavaScript コードを有効にするには、HTML ファイル内で呼び出す必要があります。この記事では、HTML で JavaScript を呼び出す方法とサンプル コードを紹介します。
1. ドキュメント ヘッダー
HTML ドキュメントで JavaScript を呼び出す前に、ドキュメント ヘッダーで JavaScript コードを次のように宣言する必要があります:
<head> <script type="text/javascript"> // JavaScript代码 </script> </head>
wheretype 属性は必須であり、スクリプト言語のタイプを指定するために使用されます。text/javascript は JavaScript コードを表します。 HTML5 を使用している場合は、type 属性を省略できます。
2. 内部 JavaScript コード
JavaScript コードを HTML ファイルに直接記述し、<script> タグに保存できます (例:
<!DOCTYPE html>
<html>
<head>
<title>调用JavaScript的例子</title>
<meta charset="utf-8" />
</head>
<body>
<h1>内部JavaScript的例子</h1>
<script>
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
showMessage();
</script>
</body>
</html>
上記の例では、showMessage() 関数を使用して、ウェルカム メッセージを含むダイアログ ボックスをポップアップ表示します。コードの最後の行でこの関数を呼び出し、ページが読み込まれた直後にダイアログ ボックスが表示されます。
3. 外部 JavaScript ファイル
JavaScript コードが長い場合、または繰り返し使用する必要がある場合、通常は外部ファイルに保存され、HTML ファイル内で参照されます。たとえば、上記の例の JavaScript コードを myscript.js という名前のファイルに保存できます。
HTML ファイルで、<script> タグを使用して、次のようにこのファイルを参照します。
<!DOCTYPE html> <html> <head> <title>调用JavaScript的例子</title> <meta charset="utf-8" /> <script src="myscript.js"></script> </head> <body> <h1>外部JavaScript的例子</h1> </body> </html>
ファイル名は myscript.js## です。 #、HTML ファイルと同じディレクトリに配置されます。 <script> タグの src 属性は、外部ファイルのパスを指定するために使用されます。
<!DOCTYPE html>
<html>
<head>
<title>event handling example</title>
<meta charset="utf-8" />
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
</script>
</head>
<body>
<h1>事件处理器调用JavaScript的例子</h1>
<button onclick="showMessage()">点击这里发送欢迎消息</button>
</body>
</html>この例では、ボタン要素 # に ## を追加します。 onclick 属性。この属性の値は showMessage() 関数です。ボタンをクリックすると、ブラウザによってこの機能が実行され、ダイアログ ボックスが表示されます。 2.DOM イベント モデル
DOM イベント モデルでは、イベント リスナーを追加してユーザー インタラクション イベントに応答します。たとえば、次のコードは、要素の上にマウスを置くとメッセージをポップアップ表示します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM事件模型的例子</title>
<script type="text/javascript">
function showMessage() {
alert("你好，欢迎访问我的网站！");
}
var myButton = document.getElementById("myButton");
myButton.addEventListener("mouseover", showMessage);
</script>
</head>
<body>
<h1>调用JavaScript的例子</h1>
<button id="myButton">鼠标悬停在此处弹出欢迎消息</button>
</body>
</html>
この例では、DOM メソッド
addEventListener() を使用してイベント リスナーを追加します。これは前のものと同じです onclick方法が異なります。 mouseover はイベント タイプ、showMessage はイベント応答関数です。 概要
この記事では、内部 JavaScript コード、外部 JavaScript ファイル、JavaScript を呼び出すイベント ハンドラーなど、HTML で JavaScript を呼び出すさまざまな方法を紹介します。これらのメソッドを使用すると、Web 開発者は JavaScript を使用して、より優れた動的効果とインタラクティブなエクスペリエンスを実現できます。
以上がHTML は JavaScript の結果をどのように呼び出しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。