ジャバスクリプトの１

スクリプトでアラートを出す
イベントハンドラー

準備

前回書いたHTMLを準備しよう

    <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 uranai = "超吉です";  
            p1.innerHTML = uranai;
       }
    </script>
p1を【おはよう】に button の言葉を【ボタンを教え下さい】に変えてあります。
他もちょっと変わっている。
これを使って、条件分岐というのを使ってみましょう。

条件分岐

ちょっとお遊び　ボタンが押されるたびに

    <p id="p1">おはよう</p>
   <input id="button1" type="button" value="４，ボタンを押して下さい">
    <script>
        let button1=document.getElementById("button1");
        button1.onclick = function(){
            let p1 = document.getElementById("p1");
            if( p1.innerHTML=="おはよう"){
                p1.innerHTML = "こんばんは";
                p1.style.color = "red";
                p1.style.backgroundColor = "yellow";
            }else{
                p1.innerHTML = "おはよう";
                p1.style.color = "blue";
                p1.style.backgroundColor = "red";
            }
       }
    </script>

おはよう



ｉｆ分と条件分岐

ifなんてのが出てきました、
if(p1.innerHTML=="おはよう"){
もし、p1の内部文章がこんにちは！だったら｛｝の中を実行しなさいというわけです。
＝は代入ですが
＝＝（ダブルイコール）は、同じかどうかの判別式で、同じだったらといういみです。。
！＝（ノットイコール）は、同じでなかったら、
＜＝　とか、＜　とか、　＞＝　とか、　＞とか、判別式には色々あります。

さらに次のelse,そうでないときは、次のかっこの中を実行しなさいというわけです。

    if(条件式１){ //これが本当なら
          //これをする
    }else{       //そうでなければ
       //これをする
    }
これを組み合わせると、おはよう→こんにちは→こんばんは
という風に変えることも出来ます。
どうするか考えて見え下さい。
if文はプログラムではよく使います。
ここに資料があります一つわざと反応しないのがあります、余裕があれば直しましょう。
b1.zip へのリンク

こんにちはも入れたいですね。
次の問題へ進む