r

数字を作って占いをする

準備

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="４，ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
                
                //ここを書き換えます

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

占いをどうやって作るか

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

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

１　ボタンを押す
　　↓
２　０，１，２，３，４の5個の乱数を発生させる
　　↓
３　数字に応じて言葉を表示する

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

乱数発生

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

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

おはよう

１０この整数を作る

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

 $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

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

5個数字を作ってみよう

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

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

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

感想、エラー報告のお願い

ぜひ、ご協力お願い申し上げます。

ジャバスクリプトの１

準備