■JavaScript とは
クライアント側（Web ブラウザ側）で実行されるプログラミング言語です。
動的に Web ページの内容を書き換えたり、入力値をチェックなどを行うことが出来ます。
HTML だけでは動く Web ページはできませんが、JavaScript を使うと Web ページにさまざまな動きを入れることができるようになります。
■ブラウザのシェア
ブラウザによるJavaScriptの挙動の違いは、把握してませんし、ここでは説明しませんが、
一応、シェアくらいは確認しておきましょう。
2021年10月webブラウザシェア
■Web で JavaScript を試す
ウェブサイトで JavaScript を簡単に試すことができる環境があります。
たくさんあります。
まずは、Codepenをさわってみてください。
■JavaScript を書く場所
CSS を記載する時と似ていますが、
- head タグ内(又は body タグ内)に書く
- 別ファイルに書く
というやり方があります。
■JavaScript を書く場所(body タグ内記載)
まずは、簡単なサンプル(コンソールにログを出力する例)を見てみましょう。
<scriptから始まり</script>で終わっている部分です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>コンソールログ出力</h1>
<!-- ここから -->
<script type="text/javascript">
console.log("test");
</script>
<!-- ここまで -->
</body>
</html>
■JavaScript を書く場所(別ファイルに書く)
先程の例のここからからここまで部分を以下のように書き換えます。
script.js 内にconsole.log("test");を記述すれば、
先程の例と同じように動作します。
<script src="script.js"></script>
■JavaScript のサンプル１
JavaScript の構文基礎を学ぶ前に少し進んでサンプルを見てみましょう。
ブラウザで表示してみてください。
処理の流れを説明します。
- test という id を持つ要素を取得します。
- 1.で取得した要素のテキストを alert として表示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="test">あいうえお<h1>
<script type="text/javascript">
let element = document.getElementById('test');
alert(element.textContent);
</script>
</body>
</html>
さらに上の例を変更します。
ボタンを追加します。
処理の流れを説明します。
- ボタンをクリックすると
henkouという関数が呼ばれます。 -
henkouという関数内で、test という id を持つ要素を取得します。 - 2.で取得した要素のテキストを書き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="test">あいうえお<h1>
<button onClick=henkou()>クリックして！</button>
<script type="text/javascript">
function henkou() {
let element = document.getElementById('test');
element.textContent = 'かきくけこ';
}
</script>
</body>
</html>
さらに上の例を変更します。
テキストを追加します。
処理の流れを説明します。
- ボタンをクリックすると
henkouという関数が呼ばれます。 -
henkouという関数内で、test という id を持つ要素を取得します。また text1 という id をもつ要素を取得します。 - 2.で取得した test 要素のテキストを text1 に入力した内容で書き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="test">あいうえお<h1>
<button onClick=henkou()>クリックして！</button>
<input type="text" value="" id="text1" />
<script type="text/javascript">
function henkou() {
let element = document.getElementById('test');
let txt = document.getElementById('text1');
console.log(txt.value);
element.textContent = txt.value;
}
</script>
</body>
</html>
■JavaScript のサンプル２
style を変更する JavaScript を見てみましょう。
処理の流れを説明します。
- ボタンをクリックすると
henkouという関数が呼ばれます。 -
henkouという関数内で、test という id を持つ要素を取得します。 - 2.で取得した要素の
background-colorに何が指定されているか取得します。 - 3.で取得した値が red の場合は設定なしに変更し、設定なしの場合は red に変更しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="test">あいうえお<h1>
<button onClick=henkou()>背景を変えます。</button>
<script type="text/javascript">
function henkou() {
let element = document.getElementById('test');
let color = element.style.getPropertyValue("background-color");
if (color === 'red') {
element.style.setProperty("background-color", "");
} else {
element.style.setProperty("background-color", "red");
}
}
</script>
</body>
</html>
■scriptタグを書く場所
前半にscriptタグをbodyタグ内に記載する例を説明しました。
headタグ内にも記載できます。
どちらが良いのかということを調べてみると、bodyタグの最後に記載するのが
良いという意見が多いようです。
理由は、処理順序によるものでHTMLは上から下へ処理されるからというものです。
以下のサンプルコードはエラーになります。
なぜだか分かりますか。
<html lang="ja">
<head>
<meta charset="UTF-8">
<script>
let hello = document.getElementById('show');
hello.textContent = 'ハロー！';
</script>
</head>
<body>
<p id="show"></p>
</body>
</html>
scriptタグでid=showの要素にアクセスしていますが、その要素はまだ読み込まれていないので
エラーになるものです。
書き換えると、以下のようになり、エラーとならないはずです。
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="show"></p>
<script>
let hello = document.getElementById('show');
hello.textContent = 'ハロー！';
</script>
</body>
</html>
ちなみに、HTML内にJavascriptを書かず、dferを付けると全て読込後に
実行されるように調整できるようですね。
<script src="sample.js" defer></script>