htmlでのjsの読み込みと実行順序を詳しく解説-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

htmlでのjsの読み込みと実行順序を詳しく解説

高洛峰

Mar 12, 2017 pm 05:47 PM

htmljavascript

jsHTMLでのロード実行順序

1. ロード順序: タグ<script></script>の出現順序を紹介します。

ページ上のJavascriptコードはHTMLドキュメントの一部です。ページがロードされるときの実行順序は、導入されたタグ <script></script> 内の外部 JS が実行される順序です。ステートメントが表示され、実行される順序。このプロセスはドキュメントのロードの一部です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题 3</title> 
<script>
    alert("1-最先执行"); 
</script> 
</head> 
<body onload="alert(&#39;3-最后执行&#39;);"> 
<script>
    alert("2-接着执行"); 
</script> 
</body> 
</html>

2. 各スクリプト

で定義されたグローバル変数および関数は、後で実行されるスクリプトから呼び出すことができます。

変数への呼び出しは事前に宣言されている必要があります。宣言されていない場合、取得される変数値は未定義になります。

<script type="text/javscrpt">//<![CDATA[
  alert(tmp);  
//输出 undefined　var 
  tmp = 1;
  alert(tmp);  //输出 1//]]>
</script>

3. 同じスクリプト内で、関数定義は関数呼び出しの後に記述できますが、それが 2 つのコードにあり、関数呼び出しが最初のコードにある場合は、未定義関数エラーが報告されます。

<script type="text/javscrpt">//<![CDATA[
  aa();            //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
  aa();   //输出 1 
  function aa()
  {
    alert(1);
  }//]]>
</script>

document
.write() は、スクリプトドキュメントの場所に出力を書き込みます。ブラウザは、documemt.write() が配置されているドキュメントのコンテンツを解析した後、コンテンツの解析を続けます。 document.write() による出力その後、HTML ドキュメントの解析を続けます。

<script type="text/javascript">//<![CDATA[    
  document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
  document.write(&#39;<script type="text/javascript">&#39;);    
  document.write(&#39;alert(2);&#39;)    
  document.write(&#39;alert("我是" + tmpStr);&#39;);    
  document.write(&#39;<//script>&#39;);    //]]>
</script> 
<script type="text/javascript">//<![CDATA[    
  alert(3);    //]]>
</script>

test.js的内容是： 
var tmpStr = 1;    
alert(tmpStr);

Firefox と Opera のポップアップ値の順序は: 1、2、私は 1、3

IE のポップアップ値の順序は: 2、1、3、ブラウザはエラーを報告します: tmpStr は未定義です
その理由は、IE が document.write を実行しているときに、次の行を実行する前に SRC の Javascript コードがロードされるのを待たずに、最初に 2 がポップアップするためである可能性があります。
document.write('document.write("I am" + tmpStr)') を実行します。 tmpStr を呼び出すと、tmpStr が定義されていないため、エラーが報告されます。この問題を解決するには、HTML 解析を使用して
HTML タグ
を解析し、次の原則を実装してコードを分割して実現します:

以上がhtmlでのjsの読み込みと実行順序を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。