ジャバスクリプトの１

数字を作って占いをする

準備

HTMLを準備しよう
br> 前回作ってある続きからです。
作る数は　×5 と５をかけて、０から５の整数になっています。
pタグの言葉を、今日の運勢としました。 

<!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(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
    </script>  
  </div>
</div>
</body>
</html>

数を文字に変える

このままでは、数が表示されて占いの結果が予示されません。
数字によって文字を表示したい。
そんなときは、ｉｆ文で条件分岐したらどうでしょう。（一つ目の方法）
　if ( 条件式１){
　　　 １が真なら、これを実行してif文から出る　
　} else if ( 条件式２ ){　　　　
　　　　２が真ならこれを実行してif文から出る
　}else{
　　　　それ以外はこれを実行してif文終了
　}
これを使ってみましょう。

条件分岐を書いてみよう

ここを書き換えます。

        button1.onclick = function(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
こんなふうになります，

        button1.onclick = function(){
//            let rnd = Math.random()*5;
//            rnd= Math.floor(rnd);
            let rnd = Math.floor( Math.random()*5 ); //上の2行を1行にしちゃった
            if(rnd==0){
                p1.innerHTML="大吉";
            }else if(rnd==1){
                p1.innerHTML="中吉";
            }else if(rnd==1){
                p1.innerHTML="吉";
            }else if(rnd==1){
                p1.innerHTML="小吉";
            }else{
                p1.innerHTML="小吉";
            }
        }


ボタンを押して、占いが変われば大丈夫です。
途中、2行を1行にしてみました。
次は、配列を使ってもうちょっとプログラムをかっこよくしよう。

条件分岐を書いてみよう

ここを書き換えます。

        button1.onclick = function(){
            let rnd = Math.random()*5;
            rnd = Math.floor(rnd);
            p1.innerHTML=rnd;
       }
こんなふうになります，

        button1.onclick = function(){
//            let rnd = Math.random()*5;
//            rnd= Math.floor(rnd);
            let rnd = Math.floor( Math.random()*5 ); //上の2行を1行にしちゃった
            if(rnd==0){
                p1.innerHTML="大吉";
            }else if(rnd==1){
                p1.innerHTML="中吉";
            }else if(rnd==1){
                p1.innerHTML="吉";
            }else if(rnd==1){
                p1.innerHTML="小吉";
            }else{
                p1.innerHTML="小吉";
            }
        }

今日の運勢1



ボタンを押して、占いが変われば大丈夫です。
途中、2行を1行にしてみました。
次は、配列を使ってもうちょっとプログラムをかっこよくしよう。

elseを使わなくても

これだけだったら if else を使わなくても出来そうだ。
それにこの方が藩王が良いみたい。 

     <p id="p1">今日の運勢1</p>
   <input id="button1" type="button" value="ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        let p1 = document.getElementById("p1");
        button1.onclick = function(){
            let rnd = Math.floor( Math.random()*5 );
            let uranai="大吉";
            if(rnd == 0 ){ uranai="大吉"}
            if(rnd == 1 ){ uranai="中吉"}           
            if(rnd == 2 ){ uranai="吉"}          
            if(rnd == 3 ){ uranai="小吉"}          
            if(rnd == 4 ){ uranai="凶"}          
            p1.innerHTML= uranai ;
        }
    </script>
どんな書き方でも良いけれど、もう一つ、if文を使わない方法、配列について次で学習しよう。
　 <