ホームページ > 記事 > ウェブフロントエンド > JavaScriptとHTMLの組み合わせを詳しく解説

JavaScriptとHTMLの組み合わせを詳しく解説

不言オリジナル: 2018-05-07 15:51:182224ブラウズ

この記事では主に JavaScript と HTML を組み合わせる方法を例を使って紹介します。興味のある方は参考にしてください。

HTML の JavaScript スクリプトは < の間に配置する必要があります。 ;script> タグと 2cacc6d41bbb37262a98f745aa00fbf0 タグ、JavaScript スクリプトは HTML ページの 6c04bd5ca3fcae76e30b72ad730ca86d タグおよび 93f0f5c25f18dab9d176bd4f6de5d30e に配置できます。 ; タグ。
1. 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ
HTML ページに JavaScript スクリプトを挿入する必要がある場合は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用してください。 3f1c4e4b6b16bbbd69b2ee476dc4f83a と 2cacc6d41bbb37262a98f745aa00fbf0 は JavaScript に開始位置と終了位置を指示します。 3f1c4e4b6b16bbbd69b2ee476dc4f83a と 2cacc6d41bbb37262a98f745aa00fbf0 の間のコード行には JavaScript が含まれています:

<span style="font-size:18px;"><script type="text/javascript"> 
alert("欢迎来到JavaScript世界！！！"); 
</script></span>

上記のコードを理解する必要はありません。ブラウザは 3f1c4e4b6b16bbbd69b2ee476dc4f83a と 2cacc6d41bbb37262a98f745aa00fbf0 の間の JavaScript を解釈して実行することを理解してください。古いインスタンスでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグで type="text/javascript" を使用する場合があります。これはもう必要ありません。 JavaScript は、HTML5 だけでなく、最新のすべてのブラウザー

のデフォルトのスクリプト言語です。 JavaScript 言語を学習したばかりの方でも、すぐに使えます。

2. 6c04bd5ca3fcae76e30b72ad730ca86dのJavaScript
この例では、JavaScriptはページがロードされるときにHTMLの6c04bd5ca3fcae76e30b72ad730ca86dにテキストを書き込みます: サンプルコード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
> 
</head> 
 
<body> 
<p> 
JavaScript 能够直接写入 HTML 输出流中： 
</p> 
  
<script type="text/javascript"> 
document.write("<h1>This is a heading</h1>"); 
document.write("<p>This is a paragraph.</p>"); 
</script> 
  
<p> 
您只能在 HTML 输出流中使用 <strong>document.write</strong>。 
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。 
</p> 
</body> 
</html>

書き方は気にしません。 JavaScript コードと実行方法まず、実行結果を確認します:

3. JavaScript 関数とイベント

上の例の JavaScript ステートメントは、ページが読み込まれるときに実行されます。多くの場合、ユーザーがボタンをクリックしたときなど、イベントが発生したときにコードを実行する必要があります。 JavaScript コードを関数に入れると、イベントの発生時にその関数を呼び出すことができます。

4. 93f0f5c25f18dab9d176bd4f6de5d30e または 6c04bd5ca3fcae76e30b72ad730ca86d に JavaScript を挿入します

HTML ドキュメントには無制限の数のスクリプトを含めることができます。スクリプトは、HTML の 6c04bd5ca3fcae76e30b72ad730ca86d セクションまたは 93f0f5c25f18dab9d176bd4f6de5d30e セクションに配置できます。一般的な方法は、関数を 93f0f5c25f18dab9d176bd4f6de5d30e セクションまたはページの下部に配置することです。このようにして、ページのコンテンツを妨げることなく、同じ位置に配置できます。

5. 93f0f5c25f18dab9d176bd4f6de5d30e の JavaScript 関数

この例では、HTML ページの 93f0f5c25f18dab9d176bd4f6de5d30e セクションに JavaScript 関数を配置します。この関数は、ボタンをクリックすると呼び出されます:

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
</body> 
</html>

実行結果は次のとおりです:

ボタンをクリックした後の効果は次のとおりです:

この例では、HTML ページの 6c04bd5ca3fcae76e30b72ad730ca86d セクションに JavaScript 関数を配置します。この関数は、ボタンがクリックされたときに呼び出されます:

コード例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title>  
</head> 
 
<body> 
<h1>My First Web Page</h1> 
  
<p id="demo">A Paragraph.</p> 
  
<button type="button" onclick="myFunction()">点击这里</button> 
 
 
<script type="text/javascript"> 
function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
} 
</script> 
</body> 
</html>

操作の結果は、上記 5 つの結果と同じです。

ヒント:

e388a4556c0f65e1904146cc1a846bee 要素の作成後にスクリプトが確実に実行されるように、JavaScript をページコードの最後に配置します。
7. 外部 JavaScript スクリプトを外部ファイルに保存することもできます。外部ファイルには、複数の Web ページで使用されるコードが含まれることがよくあります。外部 JavaScript ファイルのファイル拡張子は .js です。外部ファイルを使用する必要がある場合は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの「src」属性に .js ファイルを設定してください。JavaScript コードの量が多い場合は、通常は外部 JavaScript メソッドを使用することをお勧めします。別のメソッドを使用して HTML ドキュメントに接続することもできます。 M 例 Html コード:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript脚本语言</title> 
<script type="text/javascript" src="/js/myScript.js"></script> 
</head> 
 
<body> 
<h1>My Web Page</h1>  
 
<p id="demo">A Paragraph.</p>  
 
<button type="button" onclick="myFunction()">点击这里</button>  
 
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> 
</body> 
</html>

eMyscript.js コード:

function myFunction() 
{ 
document.getElementById("demo").innerHTML="My First JavaScript Function"; 
}

操作の結果は上記と一致します。

ヒント: & & l & lt; 頭または & lt;実際の実行結果は、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグ内にスクリプトを記述した場合とまったく同じです。

外部スクリプトには 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを含めることはできません。

以上はJavaScriptとHTMLを組み合わせる方法です。皆さんの学習に役立つことを願っています。

JavaScriptとHTMLの組み合わせを詳しく解説

関連記事