ホームページ  >  記事  >  ウェブフロントエンド  >  HTML で JavaScript を使用する方法

HTML で JavaScript を使用する方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-06-15 11:37:573038ブラウズ

HTML では、「<script>JavaScript代码</script>」コードをページに追加するだけで、script タグ内で JavaScript を使用できます。 script タグは、クライアント スクリプトを定義するために使用されます。この要素には、スクリプト ステートメントを含めることも、src 属性を通じてスクリプト ステートメントを指定することもできます。バージョン、Dell G3 コンピューター。

推奨学習:

html ビデオ チュートリアル

1. スクリプト要素を使用します

<script>
    //JavaScript代码
</script>

HTML 4.01 では、3f1c4e4b6b16bbbd69b2ee476dc4f83aの 6 つの属性を定義しています

async (オプション)

は、スクリプトをすぐにダウンロードする必要があることを示しますが、他のリソースや読み込まれる他のスクリプトのダウンロードなど、ページ上の他の操作を妨げません。外部スクリプト ファイルにのみ有効です

//异步脚本
<script type="text/javascript" defer="defer" src="first.js"></script>
<script type="text/javascript" defer="defer" src="second.js"></script>
//指定async属性的目的是不让页面等待这两个脚本下载和执行,从而异步加载页面其他内容。
//但是不保证它们的先后顺序,也就是第二个脚本可能在第一个脚本之前执行。
  • charset (オプション、ほとんど使用されません)

    コードの文字値を指定します。ほとんどのブラウザは無視します、ほとんど使用されません
  • #defer (オプション)

    は、ドキュメントが完全に解析されて表示されるまでスクリプトを遅延できることを示します。外部ファイルに対してのみ有効です。

    #
    //延迟脚本
    <script type="text/javascript" defer="defer" src="first.js"></script>
    <script type="text/javascript" defer="defer" src="second.js"></script>
    //添加defer属性之后,直到遇到</html>才会执行,也就是最后最后执行就是它了
  • 言語 (廃止)
    コードの記述に使用されるプログラミング言語を示すために使用されます。廃止されました

# src (オプション)
    実行するコードを含む外部ファイルを表します

  • <script type="text/javascript" src="first.js"></script>
    //外部文件first.js将被加载到当前页面中
    //注意注意呀,此时在<script>和</script>之间不再包含额外的JavaScript代码,因为这些额外的代码将会被忽略,不执行!!!
    <script type="javascript" src="www.somewhere.com/file.ja"></script>
    //也就是说src还可以包含来自外部域的.js文件,而不仅仅是自己编写的。功能更加强大。
    //注意注意呀,外部域的.js文件可能不可控,所以要么你是它的所有者、要么他的所有者值得信赖、要么就不要使用!!!

  • type (オプション)

    は言語の代替と見なすことができます。一般的に使用されるのは type=text/javascript ですが、必ずしもこれを指定する必要はありません。

    3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 に含まれるものについて上から順に説明します。解釈された 3f1c4e4b6b16bbbd69b2ee476dc4f83a 要素内のすべてのコードが評価されるまで、ページ上の他のコンテンツはロードおよび表示されません。
  • 2. タグの位置


    従来のアプローチ

    すべての 3f1c4e4b6b16bbbd69b2ee476dc4f83a は、目的のために 93f0f5c25f18dab9d176bd4f6de5d30e に配置されます。外部ファイル .css と .js を同じ場所に配置します。
  • ただし、これにより、すべての JavaScript コードがダウンロードされて解釈される前に、6c04bd5ca3fcae76e30b72ad730ca86d 内のページ コンテンツがレンダリングされなくなります。なんと、JavaScript コードがたくさんある場合はどうなるでしょうか? ! !一見するとブラウザ ウィンドウが空白のように見えますが、これは何ですか?

    ベスト プラクティス
  • すべての JavaScript 参照を 6c04bd5ca3fcae76e30b72ad730ca86d 要素のコンテンツの後に配置します



    <!DOCTYPE html>
    <html>
        <head>
            <title> 位置很重要</title>
        </head>
        <body>
            <!--放置页面内容-->
            <script type="text/javascript" src="first.js"></script>
            <script type="text/javascript" src="second.js"></script>
        </body>
    </html>

    3. 埋め込みコードまたは外部ファイルの選択
  • もちろん、HTML に JavaScript を埋め込んでも問題ありません。ただし、ベスト プラクティスは、可能な限り外部ファイルを使用して JavaScript コードを含めることです。これには次のような利点があります。


  • 保守性
HTML タグに触れることなく、フォルダー内の .js ファイルを保守することがはるかに簡単になります

#キャッシュ可能

2 つのページで同じ .js ファイルが使用されている場合、ページの読み込みを高速化するためにファイルは 1 回だけダウンロードされます

以上がHTML で JavaScript を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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