トレノキャンプ

JavaScript

2022.11.25

HTMLとJavaScriptを使いこなす！読み込みや呼び出し方法まとめ

2023.11.10

1．HTMLとJavaScriptの関係性
2. HTMLでJavaScriptを呼び出す方法
3. JavaScriptでHTML要素を取得する方法
4. JavaScriptでHTML要素を操作する方法
5. JavaScriptの変数をHTMLに渡す方法
6. JavaScriptが動かない原因と対処法

今回は、HTMLとJavaScriptの関係性について解説していきます。

本記事では、

「HTMLでJavaScriptを呼び出す方法は？」

「JavaScriptで HTML要素を取得、変更する方法は？」

「JavaScriptが動かないときの対処方法は？」

といった内容を、初級者エンジニア向けに詳しく解説していきます。

1. HTMLとJavaScriptの関係性

HTMLとJavaScriptは、Webサイトを構築するための言語です。

Webサイトの基本的なデザインをHTMLで作成し、JavaScriptを使ってWebサイトに「動き」をつけられます。

まずは、それぞれの言語がどのような役割をもっているのか、確認していきましょう。

①HTMLの基本

HTMLは「Hyper Text Markup Language」の略で、Webサイトを構築する言語です。

現在公開されているほとんどのWebサイトは、HTMLをベースに作成されています。

HTMLではタグと呼ばれる目印を使って、テキストをどのように表示するかをコンピューターに指示します。

HTMLは、Markup Languageの通りマークアップ言語であり、プログラミング言語ではありません。

そのためWebページに動きをつけたり、データベースを更新したりするなどの処理を行うことはできません。

②JavaScriptの基本

JavaScriptは、HTMLで作成したWebページに、動的な処理を加えられるスクリプト言語です。

例えば、Webページの一部分のみをリロードする、カーソルをあわせたときに画像を大きくする、といったことが可能です。

現在のユーザビリティーの高いページの多くは、JavaScriptを使用して構築されています。

③【補足】CSSの基本

CSSは「Cascading Style Sheets」の略で、HTMLと組み合わせて使用する言語です。

HTMLがWebページ内の要素の意味や情報構造を定義するのに対し、CSSはそれらをどのように装飾するかを定義します。

例えばWebページの文字の色や大きさ、背景などの表示スタイル、プリンタなどの機器で印刷する際の出力スタイル、音声で読み上げられる際の再生スタイルなどが指定できます。

2．HTMLでJavaScriptを呼び出す方法

HTMLのコードでJavaScriptを呼び出す方法は、一般的には次のふたつです。

　　・HTMLファイルにコードを埋め込む

　　・外部ファイルとして読み込む

それぞれについて以下で詳しく解説します。

①HTMLファイル内にコードを埋め込む

まずは、HTMLファイルにJavaScriptコードを埋め込んで呼び出す方法を見ていきましょう。

HTML内のbodyタグまたはheadタグの中に、scriptタグを入れてJavaScriptコードを記述します。

<body>タグ内に記述

次のサンプルコードは、ボタンをクリックするとポップアップを表示する単純なコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <button type="button" onclick="clickFunction()">
      クリックして下さい
    </button>
    <script>
      function clickFunction() {
        alert('クリックされました。');
      }
    </script>
  </body>
</html>

実行結果：

サンプルコードは、buttonのクリックイベントである”clickFunction”メソッドの内容を、<script>タグ内に記述しています。

<head>タグ内に記述

つぎに<head>タグ内にscriptを記述する方法を見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
    <script>
      function DisplayDate() {
        let now = new Date();
        //年を取得する
        let YYYY = now.getFullYear();
        //月を取得する
        let MM = now.getMonth()+1;
        //日を取得する
        let DD = now.getDate();
        
        alert(YYYY + "/" + MM + "/" + DD);
      }
    </script>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <button type="button" onclick="DisplayDate()">
      本日の日付を表示します。
    </button>
  </body>
</html>

実行結果：

サンプルコードは、ボタンをクリックするとシステム日付を表示します。

このように、JavaScriptはシンプルでコーディングしやすいので、簡単な処理であればHTML内に記述しても問題ありません。

しかしHTML内に記述すると、そのページ内でしか動作せず、違うページでも同様の処理をしたい場合、別ページにも同じコーディングをしないといけません。

このような重複コードを省くために、次に紹介する外部ファイル読み込み方法がよく使われます。

②外部ファイルとして読み込む

次は外部ファイルとして、JavaScriptファイルを読み込む方法を紹介します。

先ほどのシステム日付を表示するJavaScriptコード部分を外部ファイルとして作成します。

”main.js”という名前で新たにファイルを作成し、保存しましょう。

function DisplayDate() {
  let now = new Date();
  //年を取得する
  var YYYY = now.getFullYear();
  //月を取得する
  var MM = now.getMonth()+1;
  //日を取得する
  var DD = now.getDate();
  
  alert(YYYY + "/" + MM + "/" + DD);
}

次に、サンプルコードのようにHTMLファイルの<script>タグのsrc属性に外部ファイル名を指定します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
    <!-- 外部ファイルとしてJavaScriptファイルを読み込む -->
    <script src="main.js"></script>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <h2>外部JavaScriptを読み込む</h2>
    <button type="button" onclick="DisplayDate()">
      本日の日付を表示します。
    </button>
  </body>
</html>

実行結果：

このように、外部JavaScriptを読み込む方法であれば、HTMLファイルごとにJavaScriptを記述する必要はなくなるのでプログラムの共通化ができます。

またHTMLファイルとJavaScriptファイルを別々に保存するので、セキュリティ面からも優れています。

3．JavaScriptでHTML要素を取得する方法

JavaScriptからHTML要素を取得して参照や変更を行えます。

ここでは、HTML要素を取得するふたつの方法を確認していきましょう。

①ID属性値を利用する

ひとつめは、getElementByIdメソッドを使う方法です。

getElementByIdメソッドは、HTMLタグで設定したID属性値と一致するドキュメント要素を取得します。

サンプルコードで確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <!-- idを設定 -->
    <p id="pid">ID属性値を利用</p> 
    
    <button type="button" onclick="DisplayId()">
      HTML要素を取得します。
    </button>

    <script>
      function DisplayId() {
        //idを指定し、HTML要素を取得
        let pval = document.getElementById('pid'); 
        alert(pval.innerText); 
      }
    </script>
  </body>
</html>

実行結果：

サンプルコードは、id=”pid”のHTML要素を取得します。

取得したHTML要素からinnerTextメソッドでpタグ内のテキストを取り出し、ポップアップ表示しています。

②class属性値を利用する

HTML要素はgetElementsByClassNameメソッドを使い、class属性値からも取得できます。

サンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <!-- classを設定 -->
    <p id="pid" class="pclass">class属性値を利用</p> 
    
    <button type="button" onclick="DisplayClass()">
      HTML要素を取得します。
    </button>

    <script>
      function DisplayClass() {
        //classを指定し、HTML要素を取得
        let pval = document.getElementsByClassName("pclass"); 
        alert(pval[0].innerText); 
      }
    </script>
  </body>
</html>

実行結果：

getElementsByClassNameも、getElementByIdと同様にHTML要素を取得できますが、class名は複数の要素に付与されている可能性があるので、取得できる値が配列になります。

コーディングする際は注意しましょう。

4．JavaScriptでHTML要素を操作する方法

JavaScriptでHTML要素を取得する方法を学んだところで、次はHTML要素を操作する方法を学びましょう。

①HTML要素を生成する

まずはHTML要素を生成する方法を見ていきましょう。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    
    <button type="button" onclick="CreateHTML()">
      HTML要素を生成します。
    </button>

    <script>
      function CreateHTML() {
        //pタグを作成
        let objP = document.createElement('p');
        objP.innerText = 'pタグとbuttonタグを作成します';
        //ドキュメントに要素を追加
        document.body.appendChild(objP);

        //buttonタグを作成
        let objButton = document.createElement('button');
        objButton.innerText = 'ボタン';
        //ドキュメントに要素を追加
        document.body.appendChild(objButton);
      }
    </script>
  </body>
</html>

実行結果：

ボタンクリック前：

ボタンクリック後：

サンプルコードは、createElementメソッドを使用してpタグとbuttonタグ要素を生成し、appendChildメソッドでWebページに要素を追加しています。

②HTML要素を書き換える

次はHTML要素を書き換える方法を見ていきましょう。

HTML要素を書き換える場合は、まずは対象のHTML要素を取得します。その後、innerTextメソッドを使用してHTML要素を変更します。

サンプルコードで確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    
    <p id="pid">変更前のテキスト</p> 

    <button type="button" onclick="UpdateHTML()">
      HTML要素を書き換えます。
    </button>

    <script>
      function UpdateHTML() {
        //HTML要素を取得
        let pval = document.getElementById('pid'); 
        //テキストを変更
        pval.innerText = 'テキストを変更しました。';
      }
    </script>
  </body>
</html>

実行結果：

ボタンクリック前：

ボタンクリック後：

実行結果から、ボタンクリック後、テキストが変更されたことがわかりますね。

このように、JavaScriptからHTML要素を変更できるので、データ条件によって動的にデザインを変更したい場合などに便利です。

5．JavaScriptの変数をHTMLに渡す方法

ここでは、innerHTMLを使ってJavaScriptの変数をHTMLに渡す方法を紹介します。

次のサンプルコードは、JavaScript側でspanタグ要素を取得し、innerHTMLメソッドを使用して、JavaScript変数を設定しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLとJavaScriptを使いこなす</title>
  </head>

  <body>
    <h1>HTMLとJavaScriptを使いこなす</h1>
    <!-- spanタブにJavaScript変数を入れる -->
    <p>今日は、 <span id="today"></span> です。</p>

    <script>
      let now = new Date();
      //年を取得する
      let YYYY = now.getFullYear();
      //月を取得する
      let MM = now.getMonth()+1;
      //日を取得する
      let DD = now.getDate();
      //要素を取得し、innerHTMLで変数を設定する
      document.getElementById('today').innerHTML = YYYY + "/" + MM + "/" + DD ;
    </script>
  </body>
</html>

実行結果：