初めてのJavaScript その2

前回の続きとなります。
初めてのJavaScript その１ - Qiita

#三項演算子

index.html

<script>
var a, b, c;
if (条件) {
    a = b;
} else {
    a = c;
}
</script>

上記のような分岐処理を三項演算子で簡潔に書けます。
a = (条件) ? b : c;

#条件分岐のswitch文
if文の条件が3つか4つ以上の場合は、switch文を使いましょう！
switch文を使えばきれいに書けます。（if文の条件を4つ以上書くとほかの人からださいと思われます）

index.html

  <script>
        var color = "red";

        switch (color) {
            case "red":
                // colorがredの時の処理
                break;
            case "green":
            case "blue":
                // colorがgreenもしくはblueの時の処理
                break;
            case "yellow":
                // colorがyellowの時の処理
                break;
            default:
                // colorが上記の4つの色の*どれでもない*時の処理
                break;
        }
  </script>

注意：**break;**を書くのを忘れないようにお願いします！！
breakを書かないとどうなるか、どうぞご自身でお試ししていただきたいです！

#繰り返し処理
同じ処理を繰り返したい場合に使うwhile文とfor文です。
##while文

index.html

  <script>
        var i = 0;
        while (i < 10) {
            // ここの処理が10回行われます。
            i++;
        }
  </script>

##do while文

index.html

  <script>
        var i = 0;
        do {
            // ここの処理も10回行われます。
            i++;
        } while (i < 10);
  </script>

しかし、whileの条件判定が後でやるので、仮にiが最初から10以上の場合でも、一回だけdoの中の処理が行われます！

##for文

index.html

  <script>
        for (var i = 0; i < 10; i++) {
            if (i === 5) {
                //break;
                //continue;
            }
            // ここの処理が10回行われます。
        }
  </script>

for文の中のbreak文

index.html

  <script>
        for (var i = 0; i < 10; i++) {
            if (i === 5) {
                break; // iが5になったらfor文を終了するという意味
                //continue;
            }
            // ここの処理が5回行われます。
        }
  </script>

for文の中のcontinue文

index.html

  <script>
        for (var i = 0; i < 10; i++) {
            if (i === 5) {
                //break; 
                //continue; // iが5にの時**だけ**ここ以降の処理をスキップする。for文自体はiが10になるまで続く
            }
            // ここの処理が9回行われます。
        }
  </script>

#いろいろなダイアログを出してみよう
ここでやっとJavaScriptの実行結果がブラウザで見れますね

alert("どうも"); 　// どうも　と表示されたダイアログが表示されます。
var answer = confirm("ケーキ好きですか?");
上記の処理では、質問のダイアログが表示され、かつ「はい」と「いいえ」のボタンもある、ユーザーが推したボタンがどっちなのかをanswer で受け取ることができる。
var name = prompt("お名前は？");
上記の処理では、質問のダイアログ、かつ入力欄が表示される、ユーザーが入れた値をnameで受け取ることができる。

　ここで少し雑談を挟みます。
例えば、100回繰り返すfor文の処理の中で*alert("どうも");*を書いたとしましょう。
ユーザーからしたら迷惑ですよね。なのでわざとそういう処理を書いて、ユーザーに嫌がらせをするよくないサイトも世の中には存在します。それをブラウザがどんどん進化して防いでくれますし、
また、ブラウザにはJavaScrptやポップアップを禁止にできる設定もあります。
これもすべてはユーザーを守るためです！！
実際今後Webサイトを作る場合、こういうユーザーの環境を想定した上で実装しなければなりません！
やり方については今後お話しします。今は頭の片隅に置いておいてください。

#関数に関して
関数とは、ある量の処理をまとめて書くことです。

例えば：

index.html

  <script>
        function hello(input) {   // helloという関数です
            var output = input * 3 + 12 - 4  // いろいろな処理
            return output;  // 処理結果を関数の呼び出し元に返す、返す必要がない場合は、return文は必要ありません。
        }
        alert(2); // 14と表示される
        alert(3); // 17と表示される
  </script>

inputは引数と呼ばれます。outputは戻り値と呼びます。
引数は必要なければ不要ですし、また「,」で複数指定することも可能です
例：function hai(name, age) { // 省略}

関数は同じ処理を効率よくかつ綺麗に書くことを主な目的としています。
どうすればきれいなコードが書けるのか、常に考えてみてください

今回はここまで！　続きは次回で！！