TypeScript実践力を身につける!コードスニペットで学ぶ型付けとインターフェース
- 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>
実行結果:
実行結果から、“システム日付の変数“が正しくHTMLに渡されているのがわかりますね。
6.JavaScriptが動かない原因と対処法
ここからはJavaScriptが動かない原因と対処法について解説していきます。
①JavaScriptが無効になっている
ChromeやEdgeなどの主要ブラウザは、初期状態でJavaScriptは有効になっています。
しかし何らかの理由でJavaScriptが無効になっていると、JavaScriptは動作しません。
動作しない場合は、ブラウザの設定でJavaScriptが有効になっているか確認してみましょう。
今回はChromeの設定画面で解説します。
はじめに①のボタンをクリックし、②の「設定」を選択。
続いて③の「プライバシーとセキュリティ」をクリックします。
「サイトの設定」をクリックしましょう。
続いて「JavaScript」をクリックします。
「サイトがJavaScriptを使用できるようにする」が選択されていると、JavaScriptは有効になっています。
②JavaScriptでエラーが発生している
JavaScriptが動かない場合、コードでエラーが発生している可能性があります。
ブラウザのデベロッパーツールを使って、エラーの有無を確認してみましょう。
意図しない結果が表示された場合、上図のようにブラウザ上で右クリックし、「検証」をクリックします。
Chromeのデベロッパーツールが表示されたら、「ソース」タブをクリックし、下側のコンソール画面でエラー内容を確認し、対応します。
今回は、14行目の“Data()“メソッドが未定義、とエラー表示されているので、”Date()“と修正しましょう。
※掲載された社名、製品名は、各社の商標及び登録商標です。