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

【初心者向け】

HTMLの<script>タグは、HTMLドキュメント内にスクリプトを宣言するために使用されます。このタグを使うことで、クライアント側（ブラウザ側）で動作するJavaScriptを定義できます。

<script>タグと</script>タグの間に記述したコードは、ブラウザによって解釈・実行されます。また、src属性を使えば、外部のJavaScriptファイルを読み込むことも可能です。

<script>タグの主な属性

属性値説明
asyncasyncスクリプトが非同期で実行されることを指定します。ページの読み込みをブロックせずにスクリプトを取得します。
charsetcharsetスクリプトが使用する文字エンコーディングを定義します。※HTML5では非推奨とされています。
deferdeferスクリプトがコンテンツを生成しないことを宣言します。そのため、ブラウザ（ユーザーエージェント）はスクリプトの実行完了を待たずに、残りのページの解析やレンダリングを続行できます。
srcURL外部スクリプトファイルのURI/URLを指定します。
typetext/javascript
application/ecmascript
application/javascript
text/vbscript		スクリプト言語をコンテンツタイプ（MIMEタイプ）として指定します。HTML5では省略した場合、「text/javascript」が既定値となります。

【初心者向け】 script タグでクライアント側のJavaScriptを定義する方法

使用例

次のコードを実行すると、<script>タグを使用してクライアント側のJavaScriptを定義する方法を確認できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML script Tag</title>
    </head>
    <body>
        <script>
            document.write("Simple Easy Learning: Tutorialspoint!")
        </script>
    </body>
</html>

補足：async属性とdefer属性の違い

async属性を付けたスクリプトは、ダウンロード完了後すぐに実行されるため、実行順序は保証されません。一方、defer属性を付けたスクリプトは、HTMLの解析が完了した後に順序どおり実行されます。DOM操作を行うスクリプトにはdefer属性が適しています。

  1. JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説

    HTMLキャンバス（canvas）への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト

  2. HTMLのdatalistタグの使い方！入力候補リストを作成する方法

    datalistタグとは？HTMLの<datalist>タグは、<input>要素に対して選択肢（候補リスト）を定義するためのタグです。テキストフィールドにユーザーが入力を始めると、あらかじめ用意された候補がドロップダウン形式で表示されるため、入力の手間を減らし、入力ミスを防ぐことができます。<datalist>タグを使用する際のポイントは以下の2点です。・<input>要素側にlist属性を指定し、その値と<datalist>要素のid属性を一致させる・選択肢は<datalist>〜</datalist>の中