ホームページ > 記事 > ウェブフロントエンド > HTMLにJavaScriptを追加する方法

HTMLにJavaScriptを追加する方法

PHPzオリジナル: 2023-05-27 09:02:371643ブラウズ

HTML と JavaScript は、最も一般的に使用される 2 つのクライアント側テクノロジです。 HTML は Web ページの基礎ですが、JavaScript は Web サイトの対話性と動的な性質を強化します。 HTML コードを記述するときに、JavaScript コードを簡単に追加して、より多くの機能や効果を実現できます。この記事では、HTML に JavaScript を追加する方法について説明します。

I. 組み込みタグの使用

HTML 5 では、ページに JavaScript コードを埋め込むための組み込み 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが導入されました。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを HTML コードの先頭または末尾に配置し、その中に JavaScript コードを追加できます。例:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
  <script>
    alert("Hello World!");
  </script>
</body>
</html>

上記のコードでは、ページが表示メッセージを読み込むときに使用する単純な alert ダイアログボックスを 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに追加しました。ヘッドに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを置く場合は、HTML ページが JavaScript コードによってブロックされないように、async または Lazy 属性を使用して JavaScript ファイルをロードする必要があることに注意することが重要です。。

II. 外部ファイルの使用

JavaScript コードが長い場合、または複数のページで使用する必要がある場合は、それを別の .js ファイルに保存し、外部 を使用することをお勧めします。 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは参照用です。例:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
</body>
</html>

上記のコードでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a の src 属性を使用して、script.js## という名前のファイルを参照しました。タグ。外部 JavaScript ファイルの数。このアプローチにより、コードの保守性と再利用性が向上し、HTML コードの長さを短縮することもできます。

III. 配置

通常、

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは、HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e または # に配置されます。 #6c04bd5ca3fcae76e30b72ad730ca86d タグ。これを 93f0f5c25f18dab9d176bd4f6de5d30e に配置すると、ページコンテンツが読み込まれる前に JavaScript コードが実行されるようになり、ページのパフォーマンスと応答性が向上します。ただし、JavaScript コードが動的効果やインタラクティブ機能をページに実装する場合は、6c04bd5ca3fcae76e30b72ad730ca86d タグ内に配置する必要があります。 IV. イベントリスニング

JavaScript では、イベントリスニングは対話性と動的な特殊効果を実現する重要な方法です。たとえば、HTML にボタンを追加し、ボタンのクリックに応答する JavaScript コードにイベントリスナーを追加できます。例:

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Demo</title>
  <meta charset="UTF-8">
  <script src="script.js"></script>
</head>
<body>
  <h1>欢迎来到 JavaScript 世界</h1>
  <button id="myButton">点击我</button>
</body>
</html>

上記のコードでは、

属性を持つボタン要素を myButton として追加しました。次に、次のコードを JavaScript ファイルに追加します。 <pre class='brush:php;toolbar:false;'>document.getElementById("myButton").addEventListener("click", function() { alert("已点击按钮"); });</pre> このコードでは、

addEventListener

メソッドを使用して、myButton 要素のクリックイベントリスナーを追加します。ユーザーがボタンをクリックしたときにポップアップメッセージを表示します。 mouseover や keydown などの他のイベントタイプを使用して、よりインタラクティブな機能を実現することもできます。概要

上記は、HTML に JavaScript を追加する方法とテクニックです。 JavaScript コードを HTML ページに埋め込む場合でも、外部 JavaScript ファイルを参照する場合でも、Web サイト上で動的なインタラクティブな効果を簡単に実現できます。 JavaScript をさらに詳しく学びたい場合は、MDN ドキュメント、W3Schools、Codecademy などの優れたチュートリアルや学習リソースがいくつかあります。楽しく勉強してください！

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

JavaScript html JS 事件异步 alert

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS取り消し線CSS次の記事：CSS取り消し線CSS

続きを見る