【授業メモ】Math.randomと関数の使い方
Math.randomの使い方
Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返す。0は含むが、1は含まない。
★Math.round
Math.round()は、小数点以下を四捨五入する。整数を取得したい場合に利用。
★Math.ceil
Math.ceil()は、小数点以下を切り上げる。0.999なら1、3.21なら4という数値にする。
★Math.floor
Math.floor()は、小数点以下を切り捨てる。0.999なら0、3.21なら3という数値にする。
<!--0~10の数をランダムで表示させる ０はあるが1にはならない-->
var a = Math.random()* 10;
<!--0~10の数をランダムで表示させる 小数点以下四捨五入-->
var b = Math.round(Math.random()* 10);
<!--0~10までの数をランダムに表示させる 小数点以下切り上げ-->
var c = Math.ceil(Math.random()* 10);
<!--0~10までの数をランダムに表示させる 小数点以下切り捨て-->
var d = Math.floor(Math.random()* 10);
document.write(a + '<br>');
document.write(b + '<br>');
document.write(c + '<br>');
document.write(d + '<br>');
★任意の範囲で表示させるには
表示させたい範囲と、表示させたくない範囲の数を分けて考える
範囲外には、何を足したり引いたりすれば範囲内の数になってくれるかがポイント
//5〜10の乱数を発生 [11-5]と[5]を指定する
//6は0~10のうちの、表示させたい5~10の数字の数（5678910）
//5はいらない0~4の数（01234 5を足すと、範囲内の数字になるので、範囲外の数＋５をしている）
var a = Math.floor( Math.random() * 6 ) + 5 ;
document.write(a);
練習
//0～７のうち、３～７を表示させる
//３～７は数字が5個ナノで＊５、いらない０～２が３つあり、それに3を足すとほしい３以上になるので＋３
var b = Math.floor( Math.random() * 5 ) + 3 ;
//１０～２０のうち、１０～２０を表示
var c = Math.floor( Math.random() * 11 ) + 10 ;
//０～３を表示させる
var d = Math.floor( Math.random() * 4 ) ;
//1～4を表示させる
var e = Math.floor( Math.random() * 4 ) +1;
document.write('<p>' + a + '</p>');
document.write('<p>' + b + '</p>');
document.write('<p>' + c + '</p>');
document.write('<p>' + d + '</p>');
document.write('<p>' + e + '</p>');
文字列をランダムで表示させる
//1～4を表示させる
var a = Math.floor( Math.random() * 4 ) +1;
document.write('img/' + a + '.jpg');
★画像をランダムで表示させる
まずどこかに<img>タグを書いて、必要な部分をあてはめればok!
var a = Math.floor( Math.random() * 4 ) +1;
document.write('<img src="img/' + a + '.png">');
でも、document.writeだと毎回更新ボタンを押してファイルを読み込ませないと表示できない！
画像が増えたりファイルが長いと、毎回更新するのは非効率！！！
ひと部分だけ動かしたい場合には、Document Object Model (DOM)を使う！
ちなみに、画像でなくせめて更新ボタンを作って更新させる方法もある（下記関数）
関数の使い方
作業に名前を付けて、簡単に呼び出すことができる。functionで定義する。
（ちなみに関数は、値に付ける名前。varで定義。）
★任意の関数名をつけて、呼び出す
//hello（関数名は任意）をいう関数名をつけ、作業を囲う
function hello() {
document.write('こんにちは');
}
hello();//関数呼び出し
★ボタンタグを作ってボタンを押したら画像を更新できるようにするプログラム
ボタンダグは特殊なリセットが必要
ボタンをクリックしたら関数が呼び出されるようにする
とはいえ画像が表示されるとボタンは消えて、どのみち更新押さないといけない→DOMがあればボタンを表示させたまま関数を呼び出すことができる！
<style>
button { margin: 0; padding: 0; border: none; }
button:focus { outline: none; }
</style>
</head>
<body>
<button onClick="kuji();">ボタン</button>
<script>
function kuji() {
var a = Math.floor( Math.random() * 4 ) +1;
document.write('<img src="img/' + a + '.png">');
}
</script>
</body>
練習：昨日の九九表をfunctionで呼び出す
<body>
<button onClick="kuku();">ボタン</button>
<script>
function kuku() {
document.write('<table>');
document.write('<tr><th> </th>');
for (var x = 1; x <=9; x = x+1){
document.write('<th>' + x + '</th>');
}//th
document.write('</tr>');
for (var i = 1; i <= 9; i = i + 1 ) {
document.write('<tr>');
document.write('<th>' + i + '</th>');
for (var a = 1; a <= 9; a = a + 1) {
document.write('<td>' + a * i + '</td>');
}
document.write('</tr>');
}
document.write('</table>');
}//function
</script>
</body>
