第8回：11月24日
JavaScript(2)
JavaScriptによるHTML/CSSの操作
1｜小テスト
前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。
出席は課題の提出をもって確認します。必ずやっておくようにしてください。
- 小テスト
前回の課題の復習
- JavaScriptの初歩的な書き方は理解していますか？
前回の課題では、JavaScriptのプログラムを記述し、HTMLから呼び出しました。2つのボタンを用意し、クリックするボタンによって2種類の関数呼び出しを切り替えて、メッセージボックスに結果を表示しました。
新しい言語を用いるにあたって新しく理解しなければならない手順が多いため、これ以前のHTMLやCSSも含めて操作・記述方法をよく確認しておきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let price = 1000;
</script>
<script src="calctax.js"></script>
</head>
<body>
<h1><script>document.write(price);</script></h1>
<button onclick="calcTax(price,8);">テイクアウト</button>
<button onclick="calcTax(price,10);">イートイン</button>
</body>
</html>前回の課題のHTMLファイルに必要な部分は教材に記載されています。この文書内で利用する変数（price）はhead内で宣言され、bodyの2つのボタンをクリックするとそれぞれ税率を変えて計算結果を出力します。ボタンからの呼び出しはすでにonclick属性を用いて記述されています。作成する関数は、税率に沿って税込金額を計算し、メッセージボックスに表示させるところまでです。このような関数を、calctax.jsに記述してあげればよいことになります。以下に解答例を示します。
function calcTax(prc, rate) {
alert(prc + prc * rate/100);
}2つの変数を受け取り、計算結果をalertしています。とてもシンプルですね。引数の名前はプログラムが理解できる範囲で自由に決めて構いません。
JavaScript自体を知っている人にはとても簡単だっと思います。しかしここまでできるためには、HTMLとJavaScriptを組み合わせ、それぞれに正しく記述してあげる必要があります。
- 前回の課題を確認する
2｜JavaScriptによるHTML/CSSの操作
JavaScriptの大きな役割は、環境やユーザの操作に従ってコンテンツを動的に変化させることです。前回の例でも、変数priceに価格を決めたものを、h1要素に表示をしていました。ここでは、本文に直接document.write()で出力していました。
<h1><script>document.write(price);</script></h1>document.write()を用いれば、直接にその場に出力をすることができます。今回はテキスト（数字）を出力しただけですが、出力する文字列にHTMLタグを入れ込めば要素を追加することもできます。
JavaScriptでは、このような直接の出力以外に、HTMLの要素を操作する仕組みが備わっています。
HTML要素の内容の変更
実験1：以下のようなHTMLファイルを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let count = 1;
function changeText () {
let h1str = document.getElementById("str");
count++;
h1str.innerText = "文字列" + count;
}
</script>
</head>
<body>
<h1 id="str">文字列1</h1>
<button onclick="changeText();">変更！</button>
</body>
</html>作成したHTMLファイルをブラウザで開いてみましょう。ボタンをクリックするたびに表示される見出しが「文字列1」、「文字列2」と順に変更されていきます。このサンプルで重要なのは、document.getElementById()とinnerTextです。
document.getElementById()は、引数に与えた文字列をidとして持つHTML要素をElementオブジェクトとして取得します。オブジェクトというのは、JavaScriptで扱うためのデータ型（クラス）の変数として、プログラム内で操作できる変数（プロパティ）や命令（メソッド）が束ねられたものです。ElementオブジェクトはHTML要素を指し示します。
ここではlet h1strで宣言された変数に、"str"というidを持った要素（今回のHTMLならばh1要素）をElementオブジェクトとして代入しています。Elementオブジェクトの持つinnerTextというプロパティは、その要素が内容として含む文字列を表します。このサンプルではこのinnerTextを直接新しい文字列で置き換えています。
HTML要素の追加
実験2：次に、以下のようなHTMLファイルを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let count = 1;
function addItem () {
let child = document.createElement("li");
count++;
child.id = "li" + count;
child.innerText = "文字列" + count;
document.getElementById("list").appendChild(child);
}
</script>
</head>
<body>
<ol id="list">
<li>文字列1</li>
</ol>
<button onclick="addItem();">追加！</button>
</body>
</html>今度は、document.createElement()を使って新しいHTML要素を作成しています。作成されたElementオブジェクトをchildという変数に格納し、idとinnerTextを設定しています。
作成されたElementオブジェクトは、そのままでは表示されません。現在表示されているHTML文書に「追加」することで実際に表示されます。追加を行っているのがdocument.getElementById("list").appendChild(child);の部分です。
この1文には、2つの命令が組み合わされています。まずは先ほどと同様に指定したidを持つ要素を取り出すdocument.getElementById("list")の部分。そしてここで取得した要素（Elementオブジェクト）に新しい要素を追加する.appendChild(child)の部分。これを繋げて1文に書いています。オブジェクト指向によるプログラミングでの独特の記述方法ですが、JavaScriptではこのような書き方をよく行います。
このように、appendChildを用いることで、親要素に対して新しい子要素を追加することができます。
Document Object Model (DOM)
このようにJavaScriptでは、HTMLの要素の階層構造を、Elementオブジェクトの親子関係で表現しています。こうしたHTML文書（ドキュメント）をプログラムで利用する仕組みをDOMと言います。
先に利用したElementオブジェクトのほかに、Documentクラスの実体であるdocumentというオブジェクトも使っていました。これは「そのHTML文書」を表すオブジェクトです。
またHTML文書ではなく、ブラウザのウィンドウへアクセスするためにWindowというクラスも用意されています。
CSSプロパティの変更
Elementクラスのオブジェクトは、innerTextのほかにもその要素を操作する手段を提供しています。
実験3：以下のようなHTMLファイルを作成してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let count = 1;
function changeText () {
let h1str = document.getElementById("str");
count++;
h1str.innerText = "文字列" + count;
if (count%2 == 0) {
h1str.style.color = "#ff0000";
h1str.style.backgroundColor = "#ffcccc";
} else {
h1str.style.color = "#0000ff";
h1str.style.backgroundColor = "#ccccff";
}
}
</script>
</head>
<body>
<h1 id="str">文字列1</h1>
<button onclick="changeText();">変更！</button>
</body>
</html>これは実験1と同じHTMLに対し、要素を操作するchangeText()だけ変更されたものです。
具体的には、クリックされた回数を数えるcountの値が偶数の時、奇数の時で表示色を切り替える処理が追加されています。
if (count%2 == 0)という部分は、入門プログラミングで扱ったProcessingとまったく同じ書き方で、countを2で割ったあまりがゼロの時、という条件文です。この時、Elementオブジェクトであるh1strのstyleというプロパティを通じて、CSSの値を変更しています。
styleの続きは、CSSのプロパティ名をキャメルケースにした変数に新しい値を代入することで見た目を変更しています。キャメルケースというのは、例えばCSSでbackground-colorというようにハイフンで区切っていた単語をbackgroundColorというように単語の区切りを大文字表記する記述方法です。代入する値はCSSで指定していた値をそのまま文字列として与えています。
この例ではcountがボタンをクリックするたびに1ずつ増えるので、赤、青と交互に色が変わります。
3｜課題
以下のHTMLファイルを用意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
let price = 1000;
</script>
<script src="calctax2.js"></script>
</head>
<body onload="calcTax(price,0);">
<h1 id="answer">0</h1>
<button onclick="calcTax(price,0);">リセット</button>
<button onclick="calcTax(price,8);">テイクアウト</button>
<button onclick="calcTax(price,10);">イートイン</button>
</body>
</html>前回の課題と同様、HTMLファイル内のscriptで変数priceを宣言しています。
今回は新たに「リセット」のボタンを用意し、税率0として元の値段を表示するようにしました。また、最初の読み込み時に金額をh1に表示する部分も同じ関数呼び出しで行えるように、body要素にonloadというイベントハンドラを追加しました。
新しくcalctax2.jsという外部JavaScriptファイルを作成し、税率が0、8、10%の時に計算結果がh1要素に出力されるようにしてください。計算結果を表示するh1要素にはanswerというidを設定しています。
それぞれのボタンは前回と同じように、クリックするとcalcTaxという関数を指定した税率で呼び出しています。
今回「テイクアウト」をクリックした場合は、下図のようにh1要素部分に青く計算結果を表示します。
また「イートイン」をクリックした場合には、下図のようにh1要素部分に赤く計算結果を表示します。
「リセット」をクリックすると、元の白黒で税抜き価格を表示します。
このように動くように、calctax2.jsファイルを作成してください。
※ヒント：税率が8の時、10の時、それ以外の時で場合分けして色を指定すればよいものとします。
- 課題指示の通り「リセット」「テイクアウト」「イートイン」のボタンで、事前に与えられた金額の税込価格を計算してh1要素に出力するJavaScriptのプログラムを作成してください。
- priceの値を適当に変えても計算が正しいことを確認してください。
- もしゆとりがあれば、3種類の色分け表示のCSSを、colorとbackground-color以外のCSSプロパティも利用して自由に変更してみてください。
- jsファイルに記述したプログラムと、priceを変化させた時の動作のスクリーンショットをレポートにまとめ、Classroomへ提出してください（11/29(水) 23:59まで）