前回までの理解度の確認のため、小テストを行います。各自で資料等は見ずに5分程度、各自で取り組んでください。
出席は課題の提出をもって確認します。必ずやっておくようにしてください。
前回の課題では、前々回の課題からの発展で、クリックするボタンに応じて税率を指定して税込価格を計算し、計算結果をh1要素の内容に出力するものでした。また税率に応じてh1要素のスタイルも切り替えるようにしています。
計算自体や、ボタンからのJavaScriptの呼び出しは前々回のものと変わりません。HTMLの要素を取得し、この内容を書き換えたり、見た目を変更したりする部分を確認しています。たくさんの内容が組み合わさっていますので、もしここで躓いた場合、自分がどこでわからなくなったかを落ち着いて考えるようにしましょう。前々回のJavaScriptの書き方、そして前回の要素の変更の方法を丁寧に追いかけてください。
今回も前回の課題の解答例を示します。HTMLの記述は省略しますので前回の課題を参照してください。HTML自体は編集の必要はありません。従って問題は、calctax2.js（calcTax関数）の記述内容となります。
function calcTax(prc, rate) {
let ans = document.getElementById("answer");
if (rate == 8) {
ans.style.color = "#0000ff";
ans.style.backgroundColor = "#ccccff";
} else if (rate == 10) {
ans.style.color = "#ff0000";
ans.style.backgroundColor = "#ffcccc";
} else {
ans.style.color = "#000000";
ans.style.backgroundColor = "#ffffff";
}
ans.innerText = (prc + prc * rate/100);
}関数の引数などの外形は前回と変わりません。価格と税率、2つの引数を受け取っています。calcTax関数の中は、最初と最後の1行と、if文の3つのパートに分けて理解しましょう。
まずはdocument.getElementByIdを用いて、価格を表示するh1要素のElementオブジェクトを取得します。このElementを繰り返し使うので、ここでは変数ansに保持しています。
if文は、税率が8%のとき、10%のとき、それ以外のときで分岐しています。if 〜 if else 〜 elseの書き方は、前期で扱ったProcessingと同じです。
それぞれの分岐の中で、h1の文字色と背景色を指定しています。要素の見た目（CSSプロパティ）の変更の記述方法を確認しましょう。
最後の行が要素の内容を変更し、HTML文書に直接計算結果を表示する部分です。取得したh1要素のinnerTextを変更することで書き換えることができます。
JavaScriptに限らない話題ですが、プログラムを使って処理をする利点のひとつに、たくさんのデータをまとめて処理しやすい点があります。ここでは繰り返し処理を行うwhile文、for文の記述を学びます。少し書き方が異なる場合もありますが、Processingをはじめ他の言語でも共通する考え方ですので、確認してみましょう。
まずはもっとも素朴な繰り返し文であるwhile文の例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
</head>
<body>
<pre>
<script>
let i = 0;
while(i<10) {
document.write(".");
i++;
}
</script>
</pre>
</body>
</html>while文の書き方はif文と似ていて、whileの後のカッコ()に条件を書き、その後にブロックを書きます。この意味は、条件が満たされる限りブロックを繰り返す、となります。
今回のサンプルでは、while文の繰り返しが始まる前に変数iを用意し、0で初期化しています。そしてこのiが10未満の間繰り返す、としています。whileのブロックの中では、ドット.を表示した後、iを1増やしています。i++はiを1増やすという意味です。つまり、iが0から9までの10回、ドット.が表示されます。
繰り返しではこのように、何回繰り返すかを数える変数を用意して、その数を変化させながら、ある条件を満たさなくなるまで続ける、というような書き方をよく行います。あまりにもよく行うため、これをひとまとめに書く文が用意されています。それがfor文です。
上記のwhile文と同じ意味を持つfor文を以下に示します。（script要素のみ示します。）
<script>
for(let i = 0; i<10; i++) {
document.write(".");
}
</script>for文では、forの後のカッコ()の中をセミコロン;で区切って3つのことを書いています。whileとの比較からわかる通り、(最初に1度行う文; 繰り返す条件; 繰り返しごとに行う文)となっています。
以下のようなHTMLを作成してください。
これをブラウザで表示して実行すると何が起こるでしょうか。先に一度予想をしてから、実際にHTMLを作成して確かめてみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript課題</title>
<script>
function main() {
for(let i = 0; i<10; i++) {
let child = document.createElement("li");
child.innerText = "文字列" + i;
document.getElementById("list").appendChild(child);
}
}
</script>
</head>
<body onload="main()">
<ul id="list">
</ul>
</body>
</html>実際にやってみると、箇条書きulに、「文字列0」〜「文字列9」の合計10個のli要素が追加されます。これはfor文と、前回行った要素の追加の組み合わせで成り立っています。
プログラムはhead要素内のscriptに記述されたmain()という関数が本体で、これをbody要素のonloadにより呼び出しています。
実験1のHTMLのmain()の中だけを以下のように変更します。（script要素以外は省略します。）
<script>
function main() {
for (let i=0; i<3; i++) {
let input = window.prompt(i+"番目の数字を入力してください。","");
let child = document.createElement("li");
child.innerText = input;
document.getElementById("list").appendChild(child);
}
}
</script>
window.promptは、ダイアログボックスを開いてユーザにテキスト入力をさせ、値を受け取ります。引数は2つ取り、1つ目がユーザに問いかけるメッセージ、2つ目がテキスト入力欄の初期値です。返り値として入力された文字列を受け取ります。
ここでは、ダイアログボックスで数字を入力させ、受け取った値inputをそのまま箇条書きで出力することを、3回繰り返しています。
繰り返しの処理を使って、様々な計算を行うことができます。
先と同じHTMLのmain()を以下のように変更します。
<script>
function main() {
for (let i=0; i<10; i++) {
let child = document.createElement("li");
child.innerText = i*i;
document.getElementById("list").appendChild(child);
}
}
</script>繰り返して箇条書きに追加しているのはこれまでと同じです。今回は、繰り返しの中で回数を数えている変数iを使って、iの2乗を計算して表示しています。
このように、同じ計算を何度も行う際に繰り返しは有効です。
続いて同じHTMLのmain()を以下のように変更します。
<script>
function main() {
let sum = 0;
for (let i=0; i<3; i++) {
let input = window.prompt(i+"番目の数字を入力してください。","");
sum += Number(input);
let child = document.createElement("li");
child.innerText = input;
document.getElementById("list").appendChild(child);
}
alert("合計値は"+sum+"です");
}
</script>この例は実験2のプログラムとよく似ています。異なるのは強調表示をした3つの行です。
1つ目はまず、合計値を覚えておく変数sumを用意しています。2つ目はsumに入力された値を足しています。入力は文字列として受け取るので、明示的にNumber()により数値に変換しています。3つ目が、メッセージボックスに合計値を出力している部分です。
今回はあまり難しい計算を扱うことはできませんでしたが、このように繰り返しの処理を用いることで、様々な計算を行うことができます。
さらに高度なデータ処理には配列というデータ構造が極めて有効です。配列を使った繰り返し処理は、「プログラミングと数理」を履修すると学ぶことができます。
実験1のプログラムを修正して、偶数番目の箇条書きを赤文字で、奇数番目の箇条書きを青文字で表示するようにしてください。
実験4のプログラムを修正して、ユーザに5つの数字を入力させ、その平均値をメッセージボックスで表示するプログラムを作成してください。
実験4のプログラムを修正して、ユーザに5つの数字を入力させ、その最大値をメッセージボックスで表示するプログラムを作成してください。
（※ max()などのあらかじめ用意された関数は使わないものとします。自分で繰り返し処理の手順を考えてください。）