blog

日常・技術のことを記録する

JavaScriptはじめのいっぽ

プログラミング(JavaScript)

なんやかんやでJavaScriptを始めた、ほんとうに最初の記録
あとから見返して成長記録にしたい。
ボタンいっこ動かすのに、何回も教えてもらったよ、、、

1歩目のコード↓
ボタンが１つあって、押したらメッセージが表示される、というもの。

<html>
    <head>
        <script>
            function clicktest() {
                alert('このメッセージが画面に表示されます');
            }
        </script>
    </head>
    <body>
        <h1>JavaScript基礎</h1>
        <input type="button" onclick="clicktest()" value="このボタンをクリックしてください">
    </body>
</html>


やったことおおまかに

ボタン増やしたりfunctionまとめたりif分岐させたりして、コードの動きをなんとなく把握する

やったことちょっと詳しく

1.
上記のコードを実行して(動くんだあ～！)と感動する

2.
２つにボタンを増やして、ボタン押下時に表示するメッセージも２つに分ける(buttonステートメント,functionブロックを増やす)。
無事表示されたらおしまい。

3.
２つのボタンにそれぞれ引数を与えて、１つのfunction内でif分岐させて、ボタン押下時に表示するメッセージを変える。
無事表示されたらおしまい。

4.
１つのボタン、２つのラジオボタン(A,B)を配置する。どちらのラジオボタンを選択したかでボタン押下時に表示するメッセージを分ける。
ラジオボタンAを選択しボタン押下時、表示するメッセージを「エ～」にする。
ラジオボタンBを選択しボタン押下時、表示するメッセージを「ビ～」にする。
無事表示されたらおしまい。

きのうはここまで。
4.のコードはこんな感じになった。↓

<html>
    <head>
        <script>
            function clicktest() {
                // form要素を取得
                var element = document.getElementById( "target" ) ;

                // form要素内のラジオボタングループ(name="act")を取得
                var radioNodeList = element.act ;

                // 選択状態の値(value)を取得 (ラジオボタンAが選択状態ならvalue"エ～"が返る)
                var actval = radioNodeList.value ;

                    if ( actval == "" ) {
                    // 未選択状態ならなにもしない
                }
                    else if ( actval == "エ～"){
                        alert(actval);
                }
                    else if ( actval == "ビ～"){
                    alert(actval);
                }
            }
        </script>
    </head>
    <body>
        <h1>JavaScript基礎</h1>
        <form id="target">
            <input name="act" type="radio" value="エ～"> A
            <input name="act" type="radio" value="ビ～"> B
        </form>
        <input type="button" onclick="clicktest()" value="このボタンをクリックしてください">
    </body>
</html>


2～4で引っかかったところ、今後気をつけるところメモ

・ifの演算子間違えたので気をつける（==じゃなくて=でやってた。pythonも同じやろ！）

・html側のonclickで引数いれるのわからなかったので気をつける。「静的コード(html)に引数を渡せるのか？」と思ったが、onclickの中はもうScriptらしい。onclickの中にながーくfunctionを書くこともできるらしい（実務でそんな運用はしないが）。

・else if じゃなくてelseにしてたの気をつける →運用としてどの分岐にも入らないバグをキャッチするためにelseで広くとる考え方はアリっちゃアリらしい（今回は単純にミス）。そういうケースはexceptionでキャッチしたい派なので、やっぱりelse ifを使うよう気をつける。


今日はもう1段あがった課題をもらったのでやる。ありがたいが過ぎる