HTML での JS メソッドの使用の概要

今回は HTML で JS を使用する方法についてまとめました。HTML で JS を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

はじめに

JavaScript は、ブラウザーに組み込まれているスクリプト言語です。 JavaScript スクリプトが Web ページに埋め込まれ、ブラウザーが Web ページを読み込むと、スクリプトが実行されてブラウザーが動作し、さまざまな動的効果が実現されます

Web ページに JavaScript コードを埋め込む方法

1. <script> code> 要素はコードを直接埋め込みます

<script type="text/javascript">
    function sayHello() {
        alert("hello!");
    }
</script>

2, <script>要素は外部スクリプトを読み込みます

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

<script>元素直接嵌入代码

<script src="a.js" defer></script>
<script src="b.js" defer></script>

2、<script>元素加载外部脚本

<script src="a.js" async></script>
<script src="b.js" async></script>

<script>标签相关属性

type属性

• <script>标签默认就是JavaScript代码，嵌入javascript脚本时，type属性可以省略

• 如果type属性的值，浏览器不认识，就不会执行其中的代码，所以可以在<script>标签中嵌入任意的文本内容，只要加上一个浏览器不认识的type属性就行，浏览器不会执行也不会显示它的内容，但是这个<script>节点依然存在于DOM之中，可以使用<script>节点的text属性读取它的内容

defer属性

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

defer属性的运行流程：

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有defer属性的<script>元素

3. 浏览器继续往下解析HTML网页，同时并行下载<script>元素加载的外部脚本

4. 浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本

需要注意：

• 异步加载资源

• 按照顺序执行脚本

• 使用defer加载的外部脚本不应该使用document.write方法

async属性

rrreee

async属性的运行流程：

1. 浏览器开始解析HTML网页

2. 解析过程中，发现带有async属性的<script>标签

3. 浏览器继续往下解析HTML网页，同时并行下载<script>标签中的外部脚本

4. 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

5. 脚本执行完毕，浏览器恢复解析HTML网页

需要注意：

• 异步加载资源

• 并不会按照顺序执行JS，谁先下载完，谁就先执行

• 使用async加载的外部脚本不应该使用document.write方法

async和defer属性归纳

• 都能解决“阻塞效应”

• 都是异步加载资源，但执行顺序不一样

• 如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性

动态生成脚本

rrreee

• 不会阻塞页面渲染

• async设置为false可以保证b.js在a.js后面执行

• 在这段代码后面加载的脚本文件，会等在b.ja执行完成后再执行

相关知识点总结

1. 包含在<script>< script> タグ関連属性

   🎜🎜type 属性
   • 🎜<script> タグのデフォルトは JavaScript コードです。JavaScript スクリプトを埋め込む場合、type 属性は省略できます🎜
   • 🎜 type 属性の値がブラウザによって認識されない場合、コードは実行されません。そのため、ブラウザが行う type 属性を追加するだけで、任意のテキスト コンテンツを <script> タグに埋め込むことができます。ブラウザはコンテンツを実行または表示しませんが、この <script> ノードは DOM 内に存在します。<script> ノードでコンテンツを読み取ります🎜
   🎜defer 属性rrreee🎜defer 属性の実行プロセス:🎜
   1. 🎜ブラウザは HTML Web ページの解析を開始します 🎜
   2. 🎜解析プロセス中に、defer 属性を持つ <script> 要素が見つかりました🎜
   3. 🎜ブラウザは HTML Web ページの解析を続行し、同時に <script> 要素によってロードされた外部スクリプトを並行してダウンロードします🎜
   4. 🎜ブラウザは HTML Web ページの解析を完了し、ダウンロードしたスクリプトの実行に戻ります🎜
   🎜注: 🎜
   • 🎜リソースを非同期でロードします🎜
   • 🎜スクリプトを順番に実行します🎜 li>
   • 🎜defer を使用してロードされる外部スクリプトでは、document🎜.write メソッド🎜
   🎜async 属性rrreee🎜async 属性の実行プロセス: 🎜
   1. 🎜 ブラウザが解析を開始します HTML Web ページの解析プロセス中に🎜
   2. 🎜、< async 属性を持つ script> タグが見つかりました🎜
   3. 🎜 ブラウザは HTML Web ページの解析を続行し、同時に <script> 内の外部スクリプトをダウンロードします。 code> タグを並行して実行します🎜
   4. 🎜スクリプトのダウンロードが完了すると、ブラウザは HTML Web ページの解析を停止し、ダウンロードされたスクリプトの実行を開始します🎜
   5. 🎜スクリプトが実行されると、ブラウザは HTML Web ページの解析を再開します🎜
   🎜注: 🎜
   • 🎜リソースを非同期的に読み込みます🎜
   • 🎜 JS は順番に実行されません。最初にダウンロードした人が最初に実行されます🎜
   • 🎜 非同期を使用してロードされた外部スクリプトは、write メソッドを使用しないでください🎜
   🎜。非同期および遅延属性の導入
   • 🎜「ブロック効果」を解決できます🎜
   🎜それらはすべてリソースを非同期的に読み込みますが、順序は実行のタイミングが異なります🎜
2. 🎜スクリプト間に依存関係がない場合は、async属性を使用します🎜
🎜スクリプト間に依存関係がある場合は、defer属性を使用します🎜🎜 scripts🎜rrreee

• 🎜ページのレンダリングをブロックしません🎜
• 🎜 a.js の後に b .js が実行されるようにするには、async を false に設定します🎜
• 🎜このコードの後に​​読み込まれたスクリプトファイルはb.ja完了後に実行されます🎜

🎜関連知識ポイントまとめ🎜

1. 🎜 <script> タグ内に含まれる JavaScript コードは、上から順に解析されます🎜

2. コードがどの方法で埋め込まれたとしても、defer 属性と async 属性がない限り、ブラウザはページに表示される順序で <Script> タグを解析します<Script>标签在页面中出现的先后顺序对它们进行解析

3. 加载外部脚本的优点：可维护性、可缓存、适应未来

4. <script>

   外部スクリプトを読み込む利点: 保守性、キャッシュ可能性、将来への適応性

<script> 一番下に配置する理由 1. 「ブロック効果」を避けるため。 2. DOM 構造が生成される前に

DOM ノード

を呼び出さないようにしてください。これによりエラーが発生します

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連情報に注目してください。 PHP 中国語 Web サイトの記事をご覧ください。

推奨読書:
MySQL データベースへのアクセスが拒否された場合の対処方法

🎜🎜🎜🎜 六角形のボタンの特殊効果を実装する方法🎜🎜🎜

以上がHTML での JS メソッドの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。