HTML_Basics に JavaScript コードを挿入する例-jsチュートリアル-php.cn

HTML_Basics に JavaScript コードを挿入する例

WBOY

リリース： 2016-05-16 15:56:56

オリジナル

1108 人が閲覧しました

JavaScript コードは、HTML ドキュメント内のどこにでも含めることができます。ただし、HTML ファイルに JavaScript を含める最良の方法は次のとおりです。

... セクション。
およびセクション。
次のセクションでは、JavaScript を別の方法で組み込む方法を見ていきます。

ユーザーがどこかをクリックしたときに、何らかのイベントでスクリプトを実行したい場合、スクリプトの先頭は次のようになります。

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

ログイン後にコピー

これにより、次の結果が生成されます:

... セクションの JavaScript:

スクリプトが実行するページコンテンツを生成するためにページの読み込みにスクリプトが必要な場合は、そのスクリプトをドキュメントのセクションに配置します。この場合、JavaScript で定義されたすべての機能を使用する必要はありません:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

ログイン後にコピー

の JavaScript:

次のように、JavaScript コードをに配置できます。

JavaScript 外部ファイル:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

ログイン後にコピー

JavaScript をより広範囲に使用し始めると、サイトの複数のページで同じ JavaScript コードを再利用する状況があることに気づくかもしれません。

複数の HTML ファイルに同じコードを保持することに制限はありません。 script タグは、JavaScript を外部ファイルに保存し、HTML ファイルに組み込むことができるメカニズムを提供します。

ここでは、script タグと src 属性を使用して外部 JavaScript ファイルを HTML コードに組み込む方法を示す例を示します。

外部ファイルソースから JavaScript を使用するには、拡張子を使用してすべての JavaScript コードを単純なテキストファイル「.js」に記述し、上記のようにファイルをインクルードする必要があります。

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

ログイン後にコピー

たとえば、filename.js の内容を次のファイルに保持し、filename.js ファイルをインクルードした後で HTML ファイルで SayHello 関数を使用できます。