JavaScriptをHTMLに適用する方法【2パターン】 TECH

JavaScriptを使いたいけど、どうやったら使えるようになるんだっけ。

そういったお悩みをお持ちの方に向けて、この記事では解説していきます。

JavaScriptとは

JavaScriptは、ウェブページにて複雑な機能をできるようにするインタープリタ型のスクリプト言語です。

JavaScriptは、様々な言語と組み合わせる事があります。

JavaScriptをHTMLに適用する方法は2パターンあります。順に解説します。

スタイルを記述したJavaScriptファイルをHTMLとは別に作成し、HTMLファイルからscriptタグ(src)を使って、JavaScriptファイルを指定して呼び出す方法です。

この方法はJavaScriptを別ファイルにするので、HTMLが見やすくなることやJavaScriptを使い回すことができるといったメリットがあります。

この方法を外部スクリプトと言います。

書き方は下記のような感じ。

<body>
  <script src="〇〇.js"><script>
</body>

console.log('Hello');

このように、bodyタグの中(</body>の直前)に書くのが一般的です。→JavaScriptファイルはファイルサイズが大きい事が多いので、後で読み込みたいため。

場合によっては、headタグの中で読み込む事もあります。(スタイルを含んだJavaScriptファイルなど)

ファイルの指定方法は、相対パスでも絶対パスでもOKです。

HTMLファイルで、scriptタグを使用してスタイルを記述する方法です。

この方法は、スクリプトの適用がすぐ出来る、ページの読み込みが多少速くなるなどあのメリットがあるかと思いますが、基本的にこのやり方はあまり使わない場合が多いです。

この方法をインラインスクリプトと言います。

書き方は下記のような感じ。

HTML

<head>
  <script>
    console.log('Hello');
  </script>
</head>

JavaScriptを適用する際には、注意しなければいけない事がいくつかあります。

HTMLからJavaScriptファイルを呼び出す時に、半角の文字・スペースを使っているか

外部スクリプトの指定方法は、絶対パスまたは相対パスを使う

JavaScriptの書き方、HTMLの書き方に間違いがあると適用されない

場合によって、JavaScriptが適用されないやJavaScriptが思ったように適用されてないとなる場合があります。

今回2パターン、JavaScriptの適用方法を紹介しましたが、最初に紹介したHTMLからJavaScriptファイルを呼び出す方法を使う事が多いので、そのやり方には慣れましょう。

JavaScriptが適用できるようになったら、DOM操作など文法を学んだり、アルゴリズムを考えたり、JavaScriptのフレームワークまたはライブラリを学んでいくようにしていくと良いでしょう。