初めてのJavaScript その2

前回の続きとなります。
[初めてのJavaScript その１ - Qiita](https://qiita.com/ichi-kato/items/6f3d52297bdfc077f59f)

#三項演算子

```html: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つ以上書くとほかの人からださいと思われます）

```html: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文
```html:index.html
  <script>
        var i = 0;
        while (i < 10) {
            // ここの処理が10回行われます。
            i++;
        }
  </script>
```

##do while文
```html:index.html
  <script>
        var i = 0;
        do {
            // ここの処理も10回行われます。
            i++;
        } while (i < 10);
  </script>
```
しかし、whileの条件判定が後でやるので、仮にiが最初から10以上の場合でも、一回だけdoの中の処理が行われます！

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

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

## for文の中のcontinue文
```html: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で受け取ることができる。

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

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

例えば：

```html: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) { // 省略}`


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

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