HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLでスクリプトを表示・実行する方法｜scriptタグの使い方と属性まとめ

HTMLにスクリプトを組み込むには？

Webページにスクリプトを追加するには、<script>タグを使用します。HTMLの<script>タグは、HTML文書内でJavaScriptなどのスクリプトを宣言するための要素です。

<script>タグは<head>内にも<body>内にも記述できます。外部ファイルからスクリプトを読み込む場合はsrc属性でパスを指定し、ページ内に直接コードを書く場合はタグの中にJavaScriptのコードを記述します。

<script>タグの主な属性一覧

属性値説明
asyncasyncスクリプトを非同期で実行することを指定します。スクリプトの読み込み中も、他の処理やページの表示をブロックしません。
charsetcharsetスクリプトが使用する文字エンコーディングを定義します（現在はほとんど使用されません）。
deferdeferスクリプトがドキュメントの内容を生成しないことを宣言します。そのため、ブラウザ（ユーザーエージェント）はページの残りの部分の解析と描画を中断せずに続行できます。
srcURL外部スクリプトのURI／URLを指定します。
typetext/javascript
application/ecmascript
application/javascript
text/vbscript		コンテンツタイプ（MIMEタイプ）としてスクリプト言語を指定します。HTML5では省略可能で、既定値は「text/javascript」です。
xml:spacepreserve非推奨 − コード内の空白文字を保持するかどうかを指定します。

サンプルコード

次のコードを実行すると、HTML内でスクリプトを表示（実行）することができます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML script Tag</title>
   </head>
   <body>
      <script>
         document.write("You're visiting tutorialspoint!")
      </script>
   </body>
</html>

実装時のポイント

外部のJavaScriptファイルを読み込む場合は、<code><script src="example.js"></script></code>のようにsrc属性にファイルへのパスを指定します。また、ページの表示速度を優先したい場合は、async属性またはdefer属性を付けることで、スクリプトの読み込みがレンダリングを妨げるのを防ぐことができます。特にdefer属性は、DOMの構築完了後にスクリプトを実行したい場合に便利です。

  1. HTMLでテキストに下線を引く方法をわかりやすく解説

    HTMLでテキストに下線を引く基本の方法HTMLでテキストに下線を引くには、<u>タグを使用します。<u>タグはかつてHTMLで非推奨とされましたが、HTML5で再び導入されました。現在では、単語のスペルミスのように、周囲のテキストとは意味的に異なることを示すために使用されています。下線を引くもう一つの方法として、style属性を使うやり方があります。style属性は要素に対してインラインスタイルを直接指定するもので、CSSのtext-decorationプロパティと組み合わせることで、<p>タグなどのHTML要素に下線を適用できます。ただし、style属性

  2. HTMLでblockquoteタグ（ブロッククォート）を使う方法をわかりやすく解説

    blockquoteタグとは <blockquote>タグは、他のソースから引用した長い文章（ブロックレベルの引用）を示すために使用されるHTML要素です。このタグで囲まれた部分は「引用セクション」として意味づけられ、多くのブラウザではインデント（字下げ）されて表示されます。 なお、<blockquote>タグの中に直接プレーンテキストを置くのは避け、<p>などのブロックレベル要素を含めてマークアップすることが推奨されています。 cite属性で引用元を指定する <blockquote>タグにはcite属性が用意されており、HTMLドキュメント内