今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す)方法を現役エンジニアが解説【初心者向け】

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

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

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

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
 
これからプログラミングを始める方向けの無料動画講座もあります。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptを読み込む(呼び出す)方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

JavaScriptの読み込み方

JavaScriptプログラムを実行するには、次の2通りの方法があります。

1.HTMLファイルにJavaScriptファイル名を記述して外部ファイルごと読込む方法(外部スクリプト)

2.HTMLファイル内にJavaScriptコードをそのまま記述してしまう方法(インラインスクリプト)

1.外部スクリプト

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

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

<script type="text/javascript" src="techAcademy.js"></script>

HTMLファイルに上記のコードを1行記述することで、techAcademy.jsという名称のファイルに記述されたJavaScriptプログラムを実行することができます。

また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイル内<body>タグの最下部が一番確実です。

以下のようにHTMLファイル内に記述しましょう。

HTML

<html>
  <head></head>
  <body>
    <p>ここにHTMLの文章などが入ります</p>
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>

ここで、JSファイル読込み処理のsrcの値は、HTMLファイルとJSファイルの配置場所によって変化するので気を付けましょう。

例えば、HTMLファイルと同じディレクトリにjsというフォルダがあり、その中にtechAcademy.jsというファイルが配置されている場合、JSファイル読み込み処理は以下のように記述します。

<script type="text/javascript" src="js/techAcademy.js"></script>

2.インラインスクリプト

HTML内にJavaScriptを直接埋め込む方法です。

一般的にほとんど使う機会はありませんが、覚えておくと良いでしょう。

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

HTML

<script type="text/javascript">
  // タグ内にjavascriptコードを直接記述します。
  console.log("JavaScriptを実行しています");
</script>

上記のようなコードをHTMLファイルのbodyタグ内に記述することで、JavaScriptを動作させることができます。

 

大石ゆかり

JavaScriptもCSSのようにファイルに直接書いたり、外部のファイルから読み込んだり出来るんですね~♪

田島悠介

そうだよ。HTMLとJavaScriptは親和性が高いんだ。

大石ゆかり

せっかくなので、プログラミング言語らしいところが見てみたいです!

田島悠介

じゃあ、さっそく画面に今日の日付を表示するプログラムを書いてみよう!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

JavaScriptで動きのある画面を作る例として、ボタンを押すと今日の日付が表示されるプログラムをご紹介します。

画面実行イメージ

「今日は何日ですか?」のボタンを押下すると、テキストボックスにメッセージが表示されます。

JavaScript ( techAcademy.js )

// ボタンを押すと、ブロック内のプログラムが実行される
$("#btn1").on("click", function()  {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let message = `今日は${year}年${month}月${day}日です`
  // jQueryを使って画面にメッセージを表示する
  $("#tBox").val(message);
});

HTML ( jsLoad.html )

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="title">Hello TechAcademy !</p>
    <div id="area1">
      <button type="button" id="btn1">今日は何日ですか?</button>
      <br>
      <input type="text" id="tBox" class="font-main" />
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>

CSS ( sample.css )

.font-main {
  padding: 2px;
}

#btn1 {
  margin-bottom: 4px;
}

 

まとめ

今回はJavaScriptファイルをHTMLから読み込んで、実際に動きのある画面が実現できるプログラムをご紹介しました。

JavaScriptを使ったページを作るには、まずJSファイルの読み込みに成功する必要があります。

読み込みを成功させて、動きのあるリッチなサイトを作っていきましょう。

JavaScriptのwindow.openメソッドの使い方についても合わせてご覧ください。

 

監修してくれたメンター

寺谷文宏 ( Teratani Fumihiro )

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、
フロントエンドからサーバーサイドまで総合的な開発を得意としています。
TechAcademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

ボタンを押すだけで、今日の日付が表示されました。

田島悠介

JavaScriptを使えばこのぐらいは簡単に実現できるよ。

大石ゆかり

HTMLやCSSでは、そういうの出来ないですよね~。

田島悠介

そうだね。他にもJavaScriptのコンテンツがあるので、よかったら見てみてね。

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。