はじめに
初めてのJavaScript(オライリー本)が筆者にとって少しとっつきにくかったです。
そこで、本書のサポートページにあるコラム『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』から学び始めることにしました。その学習記録です。
学習すること
- ①「条件分岐」の復習
- ②正解になるまで繰り返しーwhile文
- ③下請けに出そうー値を返す関数
- ④乱数の発生ーMath.random()
- ⑤元請けの仕事は？
- ⑥random10()の改良ーMath.floor()
- ⑦関数は汎用に
- ⑧引き算も入れよう！
- ⑨ドリル
- ⑩まとめ
①「条件分岐」の復習ーダイアログを出して、答えを入力してもらうプログラム
example05-01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん</title>
<script type="text/javascript">
function keisan(){
var mondai = "3+4 ="; // 問題として表示する文字列を変数に代入
var kotae = 7; // 問題の答えを変数に代入
var x = prompt(mondai, ""); // 問題をダイアログを使って表示(prompt=「(入力を)促す」)
if (x != kotae){ //
alert("ざんねんでした。");
}
else {
alert("せいかいです。");
}
}
</script>
</head>
<body onload="keisan();"> //ページを開くとkeisan関数を実行
<h1>けいさんれんしゅう</h1>
</body>
</html>
②正解になるまで繰り返しーwhile文
応え合わせをするだけでなく、正解が入力されるまで終わらないようにしてみましょう。このような場合は、繰り返し行う操作を表現する方法が必要になります。
html.example05-02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん2</title>
<script type="text/javascript">
function keisan(){
var mondai = "3+4 =";
var kotae = 7;
var x = prompt(mondai,"");
while (x != kotae) { //正解が入力されるまで終わらない。
x = prompt("ざんねんでした。もういちど。" + mondai,"")
}
alert("せいかいです。");
}
</script>
</head>
<body onload="keisan();">
<h1>けいさんれんしゅう</h1>
</body>
</html>
③下請けに出そうー値を返す関数（乱数）
JavaScriptをはじめとするプログラミング言語には、ランダムな値をコンピュータのほうで適当に出してくれる機構（関数）が備わっています。これを使って、「10以下の数字」+「10以下の数字」という計算問題を自動的に作って表示するようにしましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん３</title>
<script type="text/javascript">
function keisan() {
var no1; // 第1項
var no2; // 第2項
var mondai;
var seikai;
var kotae;
no1 = random10(); //処理の始まり
no2 = random10();
seikai = no1 + no2; //正解(seikai)を計算して準備
mondai = no1 + " + " + no2 + " ="; //ダイアログボックスに表示する問題(mondai)を作る
kotae = prompt(mondai,""); //prompt=「ok/ｷｬﾝｾﾙ」ﾎﾞﾀﾝ。alert=「ok」ﾎﾞﾀﾝ。
while(kotae != null && kotae != seikai) { //条件①(ｷｬﾝｾﾙを押した?)&条件②(正解?)
kotae = prompt("ざんねんでした。もういちど:" + mondai, "")
}
if ( kotae != null) {
alert("せいかいです。"); // 正解の時のメッセージ、ここに来るのはkotaeがseikaiと等しいか、
} //「キャンセル」を押してkotaeにnullが入っているかのいずれかの時です。
}
function random10() {
var x = Math.random(); // 0 ≦ x ≦ 1
var i; // 戻す値(戻り値)
if (x < 0.1) {
i = 1;
}
else if (x < 0.2) {
i = 2;
}
else if (x < 0.3) {
i = 3;
}
else if (x < 0.4) {
i = 4;
}
else if (x < 0.5) {
i = 5;
}
else if (x < 0.6) {
i = 6;
}
else if (x < 0.7) {
i = 7;
}
else if (x < 0.8) {
i = 8;
}
else if (x < 0.9) {
i = 9;
}
else {
i = 10;
}
return i;
}
</script>
</head>
<body onload="keisan();">
<h1>けいさんれんしゅう</h1>
</body>
</html>
④乱数の発生ーMath.random()
random10()は、1以上10以下の整数を生成してくれます。Math.random()は、0以上1未満の少数を生成、JavaScriptの処理系があらかじめ用意してくれている「組み込み(built-in)」の関数なのです。
function random10() {
var x = Math.random(); // 0 ≦ x ≦ 1
var i ; //戻す値(戻り値)
⑤random10()の改良ーMath.floor()
さて上のふたつの例でrandom10()という関数を作りました。if...else if...の構文を使って書きましたが、じつはもっとずっと間単に書けます。
function random10() {
// 1以上10以下の整数を返す
return( Math.floor(Math.random()*10) + 1);
}
ここでは、Math.floor()という関数（メソッド）を使っています。この関数は、「引数として指定された数の小数以下を切り捨てた値」ーー言い換えると「引数を超えない最大の整数」を返してくれるものです。Math.floors(5.1)は5、Math.floor(9.8)は9というわけです。
⑥関数は汎用に
example05-04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん4</title>
<!-- random10 を randomIntに。引き算を入れる準備 -->
<script type="text/javascript">
function keisan() {
var no1,no2;
var mondai,seikai,kotae;
no1 = randomInt(100); //引数に渡した整数までの足し算練習ができます。
no2 = randomInt(100); //引数に渡した整数までの足し算練習ができます。
seikai = no1 + no2;
mondai = no1 + " + " + no2 + " =";
kotae = prompt(mondai, "");
while (kotae != null && kotae != seikai) {
kotae = prompt("ざんねんでした。もういちど:"+ mondai, "")
}
if ( kotae != null) {
alert("せいかいです。");
}
}
function randomInt(i){
// 1以上1以下の整数を返す
return( Math.floor(Math.random()*i) + 1);
}
</script>
</head>
<body onload="keisan();">
<h1>けいさんれんしゅう</h1>
</body>
</html>
⑦引き算も入れよう！
example05-04.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん4</title>
<!-- random10 を randomIntに。引き算を入れる準備 -->
<script type="text/javascript">
function keisan(){
var no1,no2; // 第１項、第２項
var mondai, seikai, kotae; // 問題、正解、生徒の答え
var enzan; // "+"か"-"
no1 = randomInt(10);
if(randomInt(2) == 1) { //足し算の場合(ランダムで±を決める)
enzan = " + ";
no2 = randomInt(10);
seikai = no1 + no2;
}
else { // 引き算の場合
enzan = " - ";
no2 = randomInt(no1);
seikai = no1 - no2;
}
mondai = no1 + enzan + no2 + " =";
kotae = prompt(mondai,"");
while (kotae != null && kotae !=seikai) {
kotae = prompt("ざんねんでした。もういちど:" + mondai, "")
}
if (kotae !=null ){
alert("せいかいです。");
}
}
function randomInt(i){
// 1以上1以下の整数を返す
return( Math.floor(Math.random()*i) + 1);
}
</script>
</head>
<body onload="keisan();">
<h1>けいさんれんしゅう</h1>
</body>
</html>
⑧ドリル
- ダイアログで「キャンセル」を押すまで、繰り返し問題を生成する。
- 正解のたびに「せいかいです」が表示されるのはうるさいので、正解の場合は何も表示しない。
example05-05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>けいさん５</title>
<script type="text/javascript">
function keisan(){
var no1,no2; // 第１項、第２項
var mondai, seikai, kotae; // 問題、正解、生徒の答え
var enzan; // "+"か"-"
while (true) { // 繰り返しやる
no1 = randomInt(10);
if(randomInt(2) == 1) { //足し算の場合(ランダムで±を決める)
enzan = " + ";
no2 = randomInt(10);
seikai = no1 + no2;
}
else { // 引き算の場合
enzan = " - ";
no2 = randomInt(no1);
seikai = no1 - no2;
}
mondai = no1 + enzan + no2 + " =";
kotae = prompt(mondai,"");
while (kotae != null && kotae != seikai) {
kotae = prompt("ざんねんでした。もういちど:" + mondai, "")
}
if (kotae == null ) { // キャンセルボタンで終了
break; //kotaeがnullに等しい場合(ﾀﾞｲｱﾛｸﾞﾎﾞｯｸｽの「ｷｬﾝｾﾙ」を押されたらループを抜ける
}
} // while(ture)
}
function randomInt(i){
// 1以上1以下の整数を返す
return( Math.floor(Math.random()*i) + 1);
}
</script>
</head>
<body onload="keisan();">
<h1>けいさんれんしゅう</h1>
</body>
</html>
⑨まとめ
- 繰り返しの処理をするWhileループを紹介しました。
JavaScriptの構文
- 変数の宣言ーvar<変数名>
- 値を返す関数ーreturn<値>
- While文ーwhile(<条件>){<処理部>}
JavaScriptの関数（メソッド）
- prompt()ーダイアログボックスを表示して答えをもらう。答えの初期値の指定も可能
- Math.random()ー乱数を生成
- Math.floor()ー小数点以下を切り捨て
⑩ 次回やること
だいぶ計算練習らしくなってきましたが， 今度はいつまでも繰り返すのではなく， たとえば利用者に何問やるか問題数を聞いてその数だけやるようにしてみましょう。 whileループを使ってもできますが， 今度は「forループ」を使います。 それから， これを機会に， 足し算引き算をする部分を別の関数として外に出す（下請けに出す）ことにしましょう。
おわり
今回はここまでです。