HTML・CSS:Javascriptを埋め込んだり外部のスクリプトを読み込むscriptタグ

scriptタグとは

scriptタグとは、別ファイルで用意しておいたJavascriptファイルを読み込む際に使用したり、HTML内に直接Javascriptを書き込んだりする際に使用します。基本的には別ファイルであらかじめ書いておくほうが良いと思います。(HTML内がごちゃごちゃするのと、同じ機能を使いたいときに何度も同じ文章を書かないといけなくなるため)

Javascriptを読み込む方法

<script src="Javascriptの場所指定" type="text/javascript"></script>

HTMLのバージョンが上がったことによりtypeの指定は特別必要ないのですが、前のバージョンに合わせて使用するほうが確実かもしれません。

Javascriptの場所指定と書いている場所には、自分が保存した場所を相対パスで指定してあげると良いと思います。基本的にはscriptのファイルはHTMLをまとめているフォルダ内に一緒に入れておきましょう。相対パスが分からないよという方はこちらの記事を参照ください。↓

Javascriptはいくつでも読み込める

javascriptファイルはいくつでも読み込むことができます。こんな感じで複数書けるので無理矢理ひとつのファイルで終わらせる必要もありません。↓

<script src="Javascriptの場所指定"></script>
<script src="Javascriptの場所指定"></script>

scriptタグを書く場所

基本的にscriptタグはHTMLの上から順番に読み込まれる仕組みになっています。なのでjavascriptファイルがいくつもある場合は優先度の高い順から書くようにしましょう。
また動かしたい要素がscriptタグの下にある場合、動作が上手くいかなくなります。なので、基本的にはボディ内の一番下の辺りに書いておくことが多いようです。

下に読み込まれる順番を書いておきます。

  1. ヘッダー部分に書いてあるjavascript
  2. ボディ内の上から順番に
  3. フッター部分に書いてあるjavascript

ヘッダー部分に書き込む必要があるscriptタグとしては、Google関連(アドセンスだったりコンソールだったり)です。

HTML内でスクリプトを直接書く

scriptタグを使って直接javascriptをHTML内に記述することも可能です。こんな感じで↓

<script>
System.out.println("Hello World");
</script>

この書き方はインラインで書く、みたいに言われます。
これはHello Worldを表示させるプログラムですが、普通ならばid”◎◎”の付いたボタンが押されたときにハローワールドを言わせる、みたいな感じで使用します。
しかし、このようにHTML内にプログラムを書くと次また同じことをさせたいときにまた同じプログラムを書かねばならず非効率的です。なので基本的には別ファイルでjavacriptファイルを作成して読み込ませるのが良いと思います。

タイトルとURLをコピーしました