HTMLにJavaScriptを追加する方法-フロントエンドQ&A-php.cn

HTMLにJavaScriptを追加する方法

PHPz

リリース： 2023-05-27 09:02:37

オリジナル

1653 人が閲覧しました

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

I. 組み込みタグの使用

HTML 5 では、ページに JavaScript コードを埋め込むための組み込み <script> タグが導入されました。 <script> タグを 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 ダイアログボックスを <script> タグに追加しました。ヘッドに <script> タグを置く場合は、HTML ページが JavaScript コードによってブロックされないように、async または Lazy 属性を使用して JavaScript ファイルをロードする必要があることに注意することが重要です。。

II. 外部ファイルの使用

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

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

ログイン後にコピー

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

III. 配置

通常、

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 ファイルに追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>document.getElementById("myButton").addEventListener("click", function() { alert("已点击按钮"); });</pre><div class="contentsignin">ログイン後にコピー</div></div> このコードでは、addEventListener<p> メソッドを使用して、<code>myButton 要素のクリックイベントリスナーを追加します。ユーザーがボタンをクリックしたときにポップアップメッセージを表示します。 mouseover や keydown などの他のイベントタイプを使用して、よりインタラクティブな機能を実現することもできます。概要

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

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