ジャバスクリプトの1

数字を作って占いをする

準備

HTMLを準備しよう
はじめマラ掻くにはsub1.html へのリンク
前回作ってある続きからならこれをコピーしましょう。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<body>
<div>
  <h1>占いを作る</h1>
  <div>
   <p id="p1">おはよう</p>
   <input id="button1" type="button" value="4,ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
                
                //ここを書き換えます

       }
    </script> 
  </div>
</div>
</body>
</html> 

占いをどうやって作るか

占いを作るには、どうしたら良いんでしょう。
これが一番の問題です。これが分かれば、プログラミングは半分完成します。
少し時間を取って考えてみましょう。
占いの言葉を、例えば、大吉、中吉、吉,小吉、凶 と言葉を作る、
ボタンを押したらそのどれかを表示する
でもどうしたら良いんだろう。
くじを引くように、適当にどれかが出れば良いですね。
これで出来るかな。

占いの作り方 アルゴリズム


1 ボタンを押す
  ↓
2 0,1,2,3,4の5個の乱数を発生させる
  ↓
3 数字に応じて言葉を表示する

こんな風になります。
数字を発生するには、ランダムに数字を発生させるという命令を使います。
まず乱数発生から学習しましょう。

乱数発生

乱数を発生する命令があります。 それが Math.random(); です。
Math というプログラムセットの中に random()という乱数発生のプログラムがある、ということです。
使ってみましょう。

   <p id="p1">おはよう</p>
   <input id="button1" type="button" value="4,ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
            let rnd = Math.random();
            p1.innerHTML=rnd;
       }
    </script> 
    

おはよう

10この整数を作る

おや、表示されるのは小数です。
この乱数発生器は、0以上、1未満の16桁の小数を発生します。0は出るけど1は出ません。
それなら、

        button1.onclick = function(){
            let rnd = Math.random()*10;     //10倍して
            rnd = Math.floor(rnd);           //整数にして
            p1.innerHTML=rnd;
       }
    </script> 
    
発生した小数を10倍して、切り捨てをすれば、10個の整数ができます。
let rnd = Math.random(}*10;   //まず10倍
rnd = Math.floor(rnd); //つぎに整数にする
後ろから読むと、
rndという小数を、
Math.floor という命令で整数にして
前にある rnd という数に入れる。
というわけです。小数だったrnd が この操作によって 整数の rnd に入れ替わるのです。
rnd は ランダムから名前をつけましたが、これは、suu でも何でも良いのです。
(Javaスクリプトですでに使われてる言葉【予約後】はダメだけれど)

おはよう2

繰り返してみて下さい。
0は表示されますか、10は表示されますか。

5個数字を作ってみよう

上の例では、0から9までの10個の数字が作られました。
同じようにして、0から4までの5個の数字を作って下さい。
これが次の占いに使えます。
0から9って変ですね、1から10の方がわかりやすいんじゃないのと思うかもしれません。
でも、0から9までの10個の数の方が後々使いやすいのです。
1から10までにしたかったらどうしますか。
rnd = Math.floor(rnd)+1;
をみて、考えてみましょう。
0から4までの5つの数を作って次の課題へ進みましょう。(次2回がアリ増す)

            let rnd = Math.random()*5;     //これならどうだ
            rnd = Math.floor(rnd)+1;       //こうしたら1ふえるかな

sub1.html へのリンク ←これができあがり資料
b2.zip へのリンク←これを解凍すればできあがり
次の問題へ進む