javascript基礎文法


## HTMLファイルにjavasciptを挿入する方法

````html
  <script>

    'use strict'
    {  
      const x = 200;
      console.log(x);
    }
  </script>
````
javascriptのコード部分を`script`タグで囲う

### ※'use strict'について
`use strict`と記入すると、使用するコードは、strictモード（厳格モード）となる。
厳格モードになることで、非厳格モードよりも的確なエラーチェックが行われる。
例えば、下記の表のような非厳格モードで受け入れられていたミスをエラーに変換される。

|        チェック項目     | 非strict                          | strict                    |
|-------------------|----------------------------------|---------------------------|
| 宣言されていない変数への代入 | グローバル変数が作成される           | エラー                    |
| 書込み不可の変数への代入   | 何も起きない                       | エラー                    |
| 書き込み不可プロパティへの代入 | 何も起きない                       | エラー                    |
| 削除不可のプロパティの削除   | 何も起きない                       | エラー                    |
| プロパティ名の重複          | 最後に宣言したものがプロパティの値となる | エラー                    |
| 関数の引数名の重複         | 重複した引数がそれより前にある同名の引数を隠す。   | エラー   |
| 8進数標記                | 8進数として処理される               | エラー                    |

## 別ファイルからjsファイルを読み込む記法

````html
<script src="js/main.js"></script>
````
scriptタグにsrc属性をつけ、ファイルパスを記述する

## 文字列について

````js
//　ダブルコーテーション
console.log("hello world"); //
// シングルコーテーション
console.log('hello world');
````
文字列を扱う場合は、ダブルコーテーションもしくはシングルコーテーションで囲う


````js
console.log('it/s me'); //it's me
````
文字列内でコーテーションを使用したい場合は、エスケープ文字を使う

## 数値の扱いについて

### 四則演算
````js
// 足し算
console.log(10 + 3); //13
// 引き算
console.log(10 -3); //7
// 掛け算
console.log(10 * 3);// 30
// 割り算
console.log(10 / 3 ); //3.33333..５
// 余り
console.log(10 % 3); //1
// べき乗
console.log(10 ** 3); // 1000
````
文字列のようにシングルコーテーションやダブルコーテーションで囲わない

### 四則演算の省略形

````js
let price = 100;

// let price = price + 100の省略形
price +=100; 
console.log(price);//200
````
````js
let price = 100;

// let price = price - 100の省略形
price -= 100; 
console.log(price);//0
````
````js
let price = 100;

// let price = price * 100の省略形
price *= 100; 
console.log(price);//10000
````

````js
let price = 100;

// let price = price * 100の省略形
price /= 100; 

console.log(price);//1
```` 
### インクリメントとデクリメント

インクリメント＝　１ずつ増えてくこと
````js
let num = 100 ;
num ++ ;
console.log(num);// 101
````
デクリメント＝１ずつ減っていくこと
````js
let num = 100 ;
num -- ;
console.log(num);// 99
````
### 文字列と数値の組み合わせ

引き算(-),掛け算(*),割り算(/)の場合、文字列は数値として扱われる
````js
console.log('5' - 3);// 2

console.log('5' * 3);//15

console.log('5' / 3);// 1.66666..

````
一方で足し算（+）は、文字列として扱われ、結合される
````js
let price = '5' + 3;
console.log(price);// 53

//typeofは対象の値のデータ型を表す文字列を返す演算子
console.log(typeof price);// string
````

上記の`5`を数値として扱いたい場合は、`parseInt`関数を使用する
````js
// 使用法：parseInt(文字列,10) ※10は１０進数を表す
price = parseInt('5',10) + 3;
console.log(price);//8
console.log(typeof price);//number
````

※ 数字とは判断されない文字列にparseInt関数を使用すると、NAN（Not a number）となる
````js
let price = parseInt('hello',10)
console.log(price); //NAN
````

## 真偽値

falseとして判定される値は、`false`, `0` , `null`, `''` , `undefined`の５つ
false以外の値は、trueとして判定される

````js
console.log(Boolean(0)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined));//false
console.log(Boolean(''));// false
console.log(Boolean(false)); //false
console.log(Boolean('hello')); //true
console.log(Boolean(1)); //true
````

## 定数と変数

定数　
- 不変なものを格納するもの。格納された値を変えることはできない
- 宣言方法：　`const 変数名`

変数　
- 可変なものを格納するもの。格納された値を変えることができる
- 宣言方法: `let 変数名`

定数の場合
````js
const price = 100;
price++; 
//constで宣言するとTypeError: Assignment to constant variable.となる
console.log(price);

````
変数の場合
````js
let price = 100;
price++; 
console.log(price); //101
````

## if文

### 基本的なif文の書き方
````js
const score = 20
if(score >= 80) {
 console.log('great');
}else if(score >= 60) {
  console.log('good');
}else {
  console.log('bad');
}// bad
````
上記のコードは、定数scoreの値で条件分岐をする場合の書き方
ポイントは以下の通り

- if(条件式){処理}という書き方をする
- `else if`は、条件を付け足す際に使用する
- `else`はどの条件にも当てはまらなかった場合の処理を書く際に使用する
- 条件を記載する箇所は、ブロック扱いとなるためセミコロン（；）はつけない。

### 条件演算子

条件が二つ（ifとelseのみ）の場合、以下のように省略した書き方を使うことができる
この省略されたものを**条件演算子**と呼ぶ

書き方：`条件式　　? trueの場合の処理　：　falseの場合の処理`

````js
const score = 80;
score >= 90 ? console.log('great') : console.log('good'); // great
````

## switch 文

````js
const signal = "blue" ;

if (signal === "red"){
  console.log("stop");
}else if(signal === "yellow"){
  console.log("caution");
}else if(signal === "blue"){
  console.log("go");
}else{
  console.log("Worng Signal");
}

````
上記のif文のように`===`が多様される処理の場合、下記のようなswitch文で簡潔に書くことができる
````js

const signal = "blue" ;

switch (signal){
  case "red" :
    console.log("stop");
    break;
  case "yellow" :
    console.log("caution");
    break;
  case "blue" :
    console.log("go");
    break;
  default:
    console.log("wrong signal");
}

````
switch文の書き方は以下の通り
````js
switch (変数){
    case 変数の値　:
        処理内容;
        break;
    default:// 上記の条件に当てはまらない場合の処理をさせる
        処理内容
}
````
注意すること
- caseの後のコロン（：）をつけ忘れることが多いので注意が必要
- breakがないと、ブロック内の処理が終了しなくなるので忘れないこと


## for文とテンプレートリテラル

for文は、繰り返しの処理を行う際に使用する構文
````js
for(let i = 1 ; i <=10 ; i ++ ){
   console.log(`hello${i}`);
 }
````

ポイント
- 初期値　；　条件式；　インクリメント値をセミコロンで区切る
- i は仮の変数で、for文のブロックないで使用できる。主に処理の回数をカウントするために使用される
- `console.log(｀hello${i}｀); `の部分では、テンプレートリテラルを使用している。

### テンプレートリテラルとは

文字列の中に変数を埋め込むことができる記法のこと
テンプレートリテラルは、以下のことに注意する必要がある

- 文字列全体を`｀｀`（バッククオート）で囲う
- 変数は`＄{}`で囲う 

## while文とdo while文

繰り返し処理の構文は、for文の他にもwhile文がある。
while文は、指定した条件が満たされている間、特定の処理を繰り返したい場合に使用する

例 hpが０未満になるまで処理を繰り返す処理
````js
let hp = 100 ;
while (hp > 0){
  console.log(`your hp is ${hp}`);
  hp -= 15
}
````
上記のコードの場合、`hp > 0`の条件式でtrueを返す場合、処理をするようになっている。
`hp -= 15`の部分がないと永遠に繰り返すため、while文を使うときは、デクリメントもしくはインクリメントをするような処理を組み込まないといけないことに注意する。

上記のコードの場合、`let hp = -100`だった場合、一回もブロック内の処理をすることができない。
ブロック内の処理を一回だけでもさせたい場合は、do while文を使用する。

````js
let hp = -100
do {
  console.log(`your hp is ${hp}`);
  hp -= 15
} while (hp > 0)
````
上記のようにすることで、ブロック内の処理をした後で、条件式の評価をするようになる。


## continueとbreak 

特定の条件になったら処理をスキップするような処理をしたい場合は、`continue`を使用する

````js
for(let i = 1 ; i <= 10 ; i++) {
  if(i % 3 === 0){
    continue;
  }
    console.log(i);//1,2,4,5,7,8,10
}
````
上記のコードの場合、３の倍数の時処理をスキップするようになる

特定の条件を満たしたら、処理を終了させたい場合は、`break`を使用する
````js
for(let i = 1 ; i <= 10 ; i++) {
  if(i % 4 === 0){
    break;
  }
    console.log(i);// 123
}
````
上記の場合、変数iが４になったら処理を終了するようになる

`continue`と`break`はどちらも条件式とセットで使用する必要がある。


## 関数について

特定の処理をまとめることができるもの。
関数は以下のように、定義することができる。
````js
functon 関数名()　{
    処理内容
}
````
例　挨拶をする関数

````js
function hello() {
  console.log("こんにちは。田中太郎です");
  console.log("今日はいい天気ですね！");
}
````
関数を呼びだいしたい場合は、以下のようにする
````js
// 関数名();
hello();
````

### 引数
上記の関数は、名前を名乗る部分を都度変えることができれば汎用的になりそうです。
名前の部分を変えたい場合は、以下のようにすると良い。
````js
function hello(name) { //仮引数
  console.log(`こんにちは。${name}です`);　// テンプレートリテラル
  console.log("今日はいい天気ですね！");
}

hello("田口山田");//実引数
````
関数を呼び出す際に、値を関数に渡すことができる。この値を**引数**という。
引数は、関数を宣言する際に、（）内に定義することができる。この引数を**仮引数**という。
関数内の処理で使う変数を仮変数で書いておくことで、実際に値を渡された際に、代入するだけで処理ができるようになる。

関数を呼び出す際に、（）内に仮引数に代入する値を指定することができる。
この値を**実引数**という。

仮引数は、カンマ（,）で区切ることで何個も指定することができる。
仮引数が複数個ある場合、実引数は、仮引数と同じように定義する必要がある。

例　挨拶と名前の内容を引数で変えられる関数
````js
function hello(greet,name) {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}
````
上記の関数は、１番目の仮引数として挨拶の文言を入れる`greet`を定義し、２番目の仮引数として名前を入れる`name`を宣言している。
この場合、関数を呼び出す際は、`hello("挨拶の文言","名前")`とする必要がある。

例えば 実引数を逆にしてみたら以下のような結果が出力されることになる。
````js
function hello(greet,name) {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}
hello("田口山田","こんばんは");
//出力内容
//田口山田。こんばんはです。
//今日はいい天気ですね。
````
このように、引数は、順番ごとに区別されるため、実引数は、仮引数に習って設定する必要がある。


### 引数の初期値

仮引数を宣言する際に、何も値が渡されなかった場合に備えて、あらかじめ引数を設定しておくことができる。
この値は、実引数が渡された場合、上書きされる。

引数の初期値は以下のように設定することができる。
````js
function hello(greet = "こんにちは",name = "田中") {
  console.log(`${greet}。${name}です`);
  console.log("今日はいい天気ですね！");
}
````

### 返り値

返り値とは、関数が呼び出し元に対して渡す値のこと。

````js
function sum(a,b){
return a + b ;
}
let total = sum(10,9)
console.log(total);//19
````

`return 処理内容　;`とすることで、値を呼び出し元に渡すことができる。
また、`return`は、関数の処理の終了を表す性質もある。
returnの下に、何かしらの処理を書いても、実行されないので注意。
````js
function sum(a,b){
return a + b ;
console.log("合計金額は？");//実行されない
}
let total = sum(10,9)
console.log(total);//19
````

## 無名関数

無名関数とは、その名の通り関数名を定義せずに、宣言する関数のこと。
書き方は以下の通り
````js
const sum = function(a,b,c) {
    return a + b ;
};
let total = sum(4,5,6) + sum(7,8,9);
console.log(total);//39
````
無名関数は、定数もしくは変数の中に代入する形で関数を宣言する。
無名関数は、定数や変数を宣言するのと同じ扱いのため、最後にセミコロンをつける

## アロー関数

````js
const sum = function(a,b,c) {
    return a + b + c ;
};
let total = sum(4,5,6) + sum(7,8,9);
console.log(total);//39
````
上記のような関数は下のように短く書くことができる。
````js
const sum = (a,b,c) => a + b + c ;
````
上記の関数は、アロー関数という。`function` `return` `{}`を省略することができる。

````js
const double = function(a){
    return a * 2 ;
};
let total = double(4);
console.log(total);//8
````
また、上記のような引数が一つの関数は以下のように`（）`も省略することができる。

````js
const double = a => a * 2 ;
````