ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML の script タグについて学ぶ
HTML の script タグについて学ぶ
- 青灯夜游転載
- 2020-07-06 10:24:274734ブラウズ
Web ページの作成について少し学習した学生は、Web ページ内の JS コードを script タグに記述する必要があることを知っていますが、なぜこれを行うのでしょうか?この記事ではscriptタグについて紹介します。
script タグ
当初、Netscape はブラウザで js を使用して HTML ファイルを表示したいと考えていましたが、他のブラウザでのこのファイルの表示効果に影響を与えたくないため、script タグを作成しました
タグで属性を追加できることは誰もが知っています。script タグには次の属性があります:
- async はスクリプトをすぐにダウンロードすることを意味し、インターフェイス内の他の操作を妨げないようにします
- src は、このスクリプトを実行する外部ファイルを示します。オプション
- charset src で指定された外部ファイルの文字セット
- defer スクリプトは、ドキュメントが解析されて表示されるまで遅延されます。は完了しています。オプションの
- 言語は廃止されました。
- タイプは重要です。言語属性を置き換えるために使用されます。デフォルトは text/javascript であるため、通常、このパラメータを指定する必要はありません。
<script type="text/javascript">
// 属性设置
function SayHi(){
alert("Hi");
}
</script>
<!-- 注意下面的写法 /> 这么写本身没有问题，但是不能在html中使用这种语法，因为这样会打乱html的解析 --> <script type="text/javascript" src="2.js"/> // 必须写成下面的样子 <script type="text/javascript" src="2.js"></script>
注:
- インタプリタがスクリプト タグ内のコードを評価するまで、ページ上の残りのコンテンツはブラウザによってロードまたは表示されません
- src が含まれるタグ内に js コードがある場合は無視されますので、src を記述する場合はコードを記述しないでください。 埋め込み js を少なくしてください
- これにより、メンテナンスが容易になり、js が 1 か所にまとめられます。2 つのページで同じ js を使用する場合、キャッシュされる可能性があります スクリプト タグの場所
本来はヘッダーにタグを配置する必要がありますが、ヘッダーに配置しているため、jsの読み込み時にページが描画されません（bodyに読み込まれるまでページの描画が開始されません）。そうすると、ページが長時間表示されます。バイ、それでは本文の最後に置きます
<body> ... <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> </body>
スクリプトにdefer属性を追加した後、それをヘッダーに置くと、理論的には目的を達成できます遅延実行の可能性がありますが、ブラウザごとに遅延のサポートが異なるため（実行順序が不確実である、埋め込まれた JS が遅延をサポートしていないなど）、上記の記述方法
に従って、本文の終わり。 async 属性は、スクリプトの非同期読み込みの問題を解決するためのものでもあります。埋め込み js スクリプトもサポートしていません。本来、defer との違いは、defer は順番に読み込みを行うのに対し、async は読み込みを行わないことです。どちらの属性もスクリプトの連続実行と DOMContentLoaded 前の実行を保証できないため、ブラウザが完全にサポートするまではこの属性を使用しないことをお勧めします。
tag
ブラウザが js を無効にしている場合、またはブラウザが js をまったくサポートしていない場合 (もちろん、これは現在ではほとんどありません)、スムーズにデグレードする必要があるため、noscript タグ
が必要です 上記の状況が発生した場合に noscript で内容を表示する機能です 以下の例を参照してください
<html> <head> <script src="2.js"></script> </head> <body> <noscript> <p>本页面需要浏览器支持（启用）JavaScript</p> </noscript> </body> </html>
ブラウザが JS を有効にしている場合、このタグの内容は表示されないことに注意してください。
推奨チュートリアル:
HTML チュートリアル以上がHTML の script タグについて学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。