BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTMLでJavaScriptを使用するためのコード例

2022-01-25 07:26:23

<script> タグ

　　HTML5 では、script は以下の主要な属性を持ちます：async、defer、charset、src、type

  • async（オプション）。

　　　　キーワード：非同期スクリプト、外部ファイル、今すぐダウンロード。

　　　　この属性がタグに含まれていると、スクリプト（外部ファイル）を直ちにダウンロードします。これは外部スクリプトファイルに対してのみ機能し、ダウンロード中にページ上の他の操作を行うことは可能です。　　 　　 　  

<script src="js/index2.js" async="async"></script> 　
  • defer（オプション）。

　　　　キーワード：遅延スクリプト、外部ファイル、遅延ロード。

　　　　この属性がタグに含まれている場合、スクリプトはその後、ページが完全に解析されるか表示されるまで待つことができます。外部ファイルに対してのみ有効で、deferを持つ2つのスクリプトが同時に存在する場合、前者は遅延により、後者に実行が制限されます。　 　 

<script src="js/index1.js" defer="defer"></script>
  • charset (オプション)。

　　　　キーワード：charset

　　　　ほとんどのブラウザはすでにこの値を無視しているので、ほとんど使われることはありません。

  • src（オプション）。

　　　　キーワード：外部参照

　　　　参照する外部ファイルのアドレスを示す。

  • タイプ（オプション）。

　　　　Keyword: MIME（スクリプト言語用コンテンツタイプ）

　　　　ブラウザの互換性を最大限に確保するため、typeの属性値は主にtext/javascriptのまま使用され、この属性が書かれていない場合、デフォルト値はtext/javascriptのままとされています。

注意：外部ファイルを参照する場合、タグに他のJSコードを追加しないでください。ブラウザはパース時にsrcで参照された外部スクリプトファイルのみをダウンロードし、テーブルに埋め込まれたコードは無視されます。

 script>タグの位置

　　通常、外部ファイル（CSSファイルやJavaScriptファイルなど）を含むタグの参照は、同じ場所、通常は <head> タグの中に記述します。

　　しかし、解析中に複数のJavaScript外部ファイルに遭遇すると、すべての外部ファイルが読み込まれるまで待たなければならず、ページが完全に表示されないため、通常は次のように<body>タグの一番下に記述することにしています。

　　前述の通り、<script>にはdefer属性がありますが、HTML5では埋め込みスクリプトが設定したdefer属性は無視されます、現在まだIE4~IE7のみがdefer属性をサポートしており、IE8以降はHTML5の標準に完全に従っているので、一番下の<body>のタグに <script> を入れるのはまだベストチョイスといえますね。

 外部ファイルを参照するメリット

  • メンテナンス性：JavaScriptのファイルをすべてまとめておくことで、HTMLコードに手を加えずに済むだけでなく、開発者がコードを書きやすく、メンテナンスもしやすくなります。
  • ブラウジングが高速化します。同じJavaScriptの外部ファイルを参照するHTMLページが複数ある場合、そのファイルは一度だけ読み込まれる（キャッシュされる）ので、ページの読み込みが速くなります。
  • セキュリティ 外部ファイルを参照することで、ユーザーがHTMLコードを閲覧しても、JavaScriptコードは表示されないため、タグ内に記述するよりも多少安全性が高くなります。 

<noscript> タグ

　　文字通り、NO-script、スクリプトなし、つまり、ブラウザがJavaScriptをサポートしていない場合にのみ、<noscript>タグ内のコンテンツが表示されることを意味します。

  • ブラウザはスクリプトをサポートしていません。
  • ブラウザはスクリプトをサポートしていますが、JavaScriptは無効になっています。

　　上記2項目のいずれかに該当する場合、<noscript>タグ内のコンテンツが表示されます。

　　上記のページでは、ブラウザがJavaScriptをサポートしていないか、無効にしている場合にのみ表示されるメッセージをユーザーに表示していますが、そうでなければ、ユーザーはこのメッセージを見ることはなく、ページ上の他の要素の表示に影響を与えることもありません。

概要

上記は、HTMLのサンプルコードでJavaScriptを使用するための小さな紹介です、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを与えてください、私はすぐにみんなに返信されます。また、Script Houseのウェブサイトをサポートしてくださる皆様に感謝いたします。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します