今すぐ覚えられる!HTMLでJavaScriptを呼び出す方法【初心者向け】

初心者向けにHTMLでJavaScriptを呼び出す方法について解説しています。Webサイトを制作する上でHTMLやCSSを使えば静的なページは作れますが、動きを出して表現力を上げたいと思ったらJavaScriptを覚える必要があります。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、難しい技術になってきます。

そんな時に使用するプログラミング言語が「JavaScript」です。

今回は、そんなJavaScriptをHTMLかた呼び出す方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

JavaScriptの書き方

インラインスクリプト

まずはインラインスクリプトから解説していきます。インラインスクリプトとは、HTML内にJavaScriptを直接埋め込む方法です。

書き方は以下の通りです。

<p>サンプル</p>
<script type="text/javascript">
  //ここにjavascriptを書きます。
</script>

 

外部スクリプト

次に外部スクリプトをHTML内で読み込む方法です。Webデザインの現場ではこちらの方が一般的に使用されています。

書き方は以下の通りです。

<html>
  <head>
    <script type="text/javascript" src=“sample.js"></script>
  </head>
  <body>
  </body>
</html>

上のように書くとsample.jsがhtml内に適用されます。

 

実際に書いてみよう

それでは実際にJavaScriptを書いてみましょう。
今回はページにアクセスすると、「Hello」というアラートを表示するJavaScriptプログラムを作成していきたいと思います。

まずはインラインスクリプトから書いていきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>インラインスクリプトサンプル</p>
    <script type="text/javascript">
      alert("Hello”);
    </script>
  </body>
</html>

次に外部ファイルで読み込んでいきます。

sample.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="sample.js"></script>
  </head>
    <body>
      <p>外部で読み込むサンプル</p>
   </body>
</html>

sample.js

alert("Hello");

どちらの方法でも、ブラウザで確認してみて「Hello」とアラートが出たら成功です。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-16-15-35-03

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

まとめ

今回はJavaScriptをインラインスクリプト、外部ファイルでそれぞれ読み込む方法について解説していきました。インラインスクリプトは現在ではあまり良くない手法とされており、外部ファイルで読み込む方法が主流となっています。

事情がない限りは、少し面倒だと感じるかもしれませんが、外部ファイルに読み込んで記述するようにしましょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。