HTMLファイル内に配置されるJsの場所の違いを解説-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLファイル内に配置されるJsの場所の違いを解説

高洛峰

Mar 14, 2017 pm 06:11 PM

この質問は初心者にとって常に混乱を招きます。まず、HTML 内のどこに js を配置できるか、つまり head と body を理解します。ほとんどの人が頭の中に入れています。私はそれを学んでいるとき、混乱してそれを頭の中に入れてしまったのですが、なぜですか？今日は、これら 2 つの場所の違いについて話しましょう:
まず HTML コードの一部を見てください:

<html> 
<head> 
<title> New Document </title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 

<script type="text/javascript" src="test.js"></script> 

</head> 

<body> 
<div id="target"> 

</div> 
<button id="btn">按钮</button> 

</body> 
</html>

var test = function(){ 
var span = document.createElement("span"); 
span.innerHTML="添加"; 
document.getElementById("target").appendChild(span); 
} 

document.getElementById("btn").onclick=test;

このコードが head に配置されている場合、コードは実行されません。なぜ？
これはHTMLの実行順序についてですが、正確にはHTMLの実行順序ではなく、jsの実行順序です。 HTML が上からまで実行されると、test.js ファイルに入ります。前の文、つまり関数でラップされたものは実行されません。この時点では、最後の文が実行されます。ページに移動し、要素 ID が btn である要素を取得します。ただし、この時点では HTML ページはロードされていません。 ID btn の要素を取得することは絶対に不可能です。エラーが報告されます。このとき、次のコードに変更できると誰かが言いました:

document.body.onload = function(){ 
document.getElementById("btn").onclick=test; 
};

しかし、このように書くのは、

以上がHTMLファイル内に配置されるJsの場所の違いを解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTMLの汎用性：アプリケーションとユースケースApr 30, 2025 am 12:03 AM

HTMLは、Webページのスケルトンであるだけでなく、多くのフィールドでより広く使用されています。1。Webページ開発では、HTMLはページ構造を定義し、CSSとJavaScriptを組み合わせて豊富なインターフェイスを実現します。 2。モバイルアプリケーション開発では、HTML5はオフラインストレージおよびジオロケーション機能をサポートしています。 3.メールやニュースレターでは、HTMLは電子メールの形式とマルチメディア効果を改善します。 4。ゲーム開発では、HTML5のCanvas APIを使用して2Dおよび3Dゲームを作成します。