JavaScript復習①

ポートフォリオ作成に向けて、1月中に基礎学習を終わらせます。
HTML/CSSの復習を終わらせたので、次にJavaScriptの復習をProgate、ドットインストールを用いて行っていきます。
なお、記述する内容は自分が忘れがちな所、苦手な所です。
HTML/CSS編同様、自分用の備忘録的に投稿していくので(箇条書きで)、
読みづらいor間違えていることを書いている可能性もあるので、悪しからず。
(できるだけ他の方が見てもためになれば良いなとは思って投稿しますが・・・)
箇条書きで書いたことに関して、新たな発見、学び、気づき等あれば、
それぞれ個々に詳細を記述していこうと思います。

<h1>プログラムの実行</h1>

```JavaScript:JavaScriptファイル
console.log('出力したい文字列');
//出力したい文字列はダブルクォーテーションorシングルクォーテーションで囲む
```

<h1>変数の定義、命名ルール</h1>

```JavaScript:JavaScriptファイル
//　変数の定義
let name = 'Taro';
// let:変数の宣言 name:変数名 ’Taro':代入する値
```

<h4>変数の命名ルール</h4>

○良い例・・・ 英単語を用いる、2語以上の場合は大文字で区切る
× 悪い例 ・・・ 数字で始まる、ローマ字、日本語

<h1>定数の定義</h1>

```JavaScript:JavaScriptファイル
// 定数の定義
const name = 'Taro';
// const:定数の宣言 name:定数名 'Taro':代入する値
```

<h1>テンプレートリテラルを用いた連結</h1>

```JavaScript:JavaScriptファイル
const name = 'たろう';
console.log(`こんにちは、${name}さん`);
// 出力したい内容をバッククォーテーションで囲む(シングルクォーテーションやダブルクォーテーションではなく)
```

```:コンソール
こんにちは、たろうさん
```

<h1>if文のコード</h1>

```JavaScript:JavaScriptファイル
const number = 12;
if(number > 10) {
  console.log('numberは10より大きい');
}
```

```:コンソール
numberは10より大きい
```

<h1>比較演算子</h1>

```JavaScript:JavaScriptファイル
a === b // aとbが等しい
a !== b // aとbが異なる
```

<h1>elseのコード</h1>

```JavaScript:JavaScriptファイル
const number = 7;
if(number > 10) {
  console.log('numberは10より大きい');
} else {
  console.log('numberは10以下');
}
```

```:コンソール
numberは10以下
```

<h1>else if のコード</h1>

```JavaScript:JavaScriptファイル
const number = 7;
if(number > 10) {
  console.log('numberは10より大きい');
} else if (number > 5) {
  console.log('numberは5より大きい');
} else {
  console.log('numberは5以下');
}
```

```:コンソール
numberは5より大きい
```

<h1>なおかつ、または</h1>

```JavaScript:JavaScriptファイル
// x = 20 の時
console.log(x > 10 && x < 30);  // true
console.log(x < 10 || x > 30);  // false

// x = 5 の時
console.log(x > 10 && x < 30);  // false
console.log(x < 10 || x > 30);  // true
```

<h1>switch文</h1>

```JavaScript:JavaScriptファイル
const color = "赤"
switch (color){
  case "red";
    console.log("Stop!")
    break;
  case "yellow";
    console.log("Caution");
    break;
  case "green";
    console.log("Go!");
    break;
  default; //if文のelseに似たようなもの
    console.log("Wrong color")
    break;
}
```

switch文で条件を複数指定するときは、縦に続けて記述する。

```JavaScript:JavaScriptファイル
const color = "赤"
switch (color){
  case "red";
    console.log("Stop!")
    break;
  case "yellow";
    console.log("Caution");
    break;
  case "green";
  case "blue"; //縦に続けて記述
    console.log("Go!");
    break;
  default; //if文のelseに似たようなもの
    console.log("Wrong color")
    break;
}
```

<h1>while文</h1>

```JavaScript:JavaScriptファイル
let number = 1;
while (number <= 100) {
  console.log(number);
  number += 1;
}
```

```:コンソール
1
2
3
.
.
99
100
```

条件を満たせずに、処理が実行されないものを、実行するためには以下のように記述する。

```JavaScript:JavaScriptファイル
let hp = -50
  do {
    console.log(`${hp} HP left!);
    hp -= 15;
  } while (hp > 0);
```


<h1>for文</h1>

```JavaScript:JavaScriptファイル
for (let number = 1; number <= 100; number += 1) {
  console.log(number);
}

// let number = 1 ・・・ 変数の定義
// number <= 100 ・・・ 条件式
// number += 1 ・・・ 変数の更新
```

```:コンソール
1
2
3
.
.
99
100
```

<h1>for文でスキップさせる</h1>

```JavaScript:JavaScriptファイル
for (let i = 1; i <= 10; i++) {
  if(i === 4){
    continue;
  }
  console.log(i);
}
```

```:コンソール
//4がスキップされる
1
2
3
5
6
7
8
9
10
```

<h1>for文でストップさせる</h1>

```JavaScript:JavaScriptファイル
for (let i = 1; i <= 10; i++) {
  if(i === 4) {
    break;
  }
  console.log(i);
}
```

```:コンソール
1
2
3
```


<h1>配列を定数に代入する、インデックス番号、配列の要素更新</h1>

```JavaScript:JavaScriptファイル
const fruits = ["apple", "banana", "orange"];
console.log(fruits);
console.log(fruits[0]);
console.log(fruits[2]);
fruits[0] = "grape";
console.log(fruits[0]);

// 上記のfruitsの部分は定数名と言う
// インデックス番号はそれぞれ、"apple"が0、"banana"が1、"orange"が2
```

```:コンソール
["apple", "banana", "orange"]
apple
orange
grape
```

<h5>続きは<a href="https://qiita.com/SOH_engineer/items/e6c71a2ef16f8bc1b25a">JavaScript復習②</a>へ</h5>