JavaScript学習メモ

##デベロッパーツールの使い方

・デベロッパーツールの立ち上げ
GoogleChromeを開いてから`optionキー + commandキー + i`

・Consoleの改行
`shiftキー + Enterキー`




・ダイアログに出力

```javascript
alert(〇〇〇);    // 出力結果: ダイアログに()内の文字が出力
```




・コンソールに出力

```javascript
console.log("〇〇〇");    // 出力結果: コンソールに(" ")内の文字が出力
```




##識別子(変数名、関数名、メソッド名)のルール

1.半角のアルファベット 
2.頭文字に数字は使えないが _ と $ はオッケー
3.予約語は使えない（下記参照）
`break　case　catch　class　const　continue　debugger　default　delete　do　else　enum　export　extends　finally　for　function　if　import　implements　in　instanceof　interface　let　new　package　private　protected　public　return　static　super　switch　this　throw　try　typeof　var　void　while　with yield　null　true　false`




・コメントの記入

```javascript
//一行だけ
/* 複数行 */
```





・エスケープ

文字列の途中に " を表示させたい場合  →  \" と記入

```javascript
("〇〇〇 \" 〇〇〇")    // 出力結果: 〇〇〇"〇〇〇
```

文字列を改行させたい場合  →  \n  と記入

```javascript
("〇〇〇 \n 〇〇〇")    // 出力結果: 〇〇〇
                      //        　〇〇〇
```

・文字列の結合

```javascript
("〇〇〇"+"〇〇〇")    // 出力結果: 〇〇〇〇〇〇
```




・変数の代入

```javascript
var 変数名 = "数値、文字列など";
```




##関数


・関数の作成

```javascript
function 関数名(引数) {
        処理
}
```




・関数の呼び出し

```javascript
関数名();
```




・関数に結果をもどす

```javascript
function 関数名(引数) {
        処理
    return 戻り値
}
```




##配列


・配列の作成

```javascript
var 変数名 = [○,△,□,×];
```




・配列の呼び出し

```javascript
変数名[番号]    //例 console.log(変数名[番号]);    ※番号は0から 
```




・既存の配列の要素を使って新しい配列を作る場合sliceを使う
    
```javascript
変数名.slice(最初の番号,最後の番号)    // ※最初の番号だけ記載するとそれ以降の要素が全部よびだされる
```




・配列の要素追加するときはpushを使う

```javascript
変数名.push    //例 console.log(変数名.push(新しい要素));
```




・配列を順番に処理するときはforEachを使う

```javascript
変数名.forEach(引数){
        処理
}
```




・既存の配列の要素を全て新しい配列に作り直す場合mapを使う

```javascript
変数名.map(引数)    // ※returnで値を戻す必要あり
```




・要素を条件によって選別して新たな配列を返すときfilterを使う

```javascript
変数名.filter(関数の引数)    // ※returnで値を戻す必要あり
```




##for文


・for文の作成

```javascript
for (初回だけ実行する処理; ループ継続条件; 毎ループ後の処理) {
  毎ループごとに実行する処理
}
```




|記述|処理|
|---|---|
|変数名.length|配列の要素の数の取得|
|変数名++|インクリメント 1ずつ増やす|
|変数名--|デクリメント 1ずつ減らす|




##if文


・if文（条件分岐）    

```javascript
if ( 条件 ) {    // ※条件の前に!つけると反転。〜であるとき→〜でないとき
    条件を満たす場合に実行される処理を、この中に記述する
} else {
    条件を満たさない場合に実行される処理を、この中に記述する
}
```




・AND : 条件を追加したい場合 && をつかう。

```javascript
( A && B )    // AとBに当てはまるとき
```

・OR : 条件をどちらかに当てはまる場合にしたい場合は || をつかう。

```javascript
( A || B )    // AかBどちらかに当てはまるとき
```



##オブジェクト


・オブジェクトの作成

```javascript
var 変数名 = {
    プロパティ名1 : "値1",
    プロパティ名2 : "値2",
    プロパティ名3 : "値3"
}
```




・オブジェクトの使用（ドット記法）

```javascript
変数名.プロパティ名    // ※例 console.log(変数名.プロパティ名);
```




・もうひとつの方法（ブラケット記法）※動的に使える

```javascript
変数名[プロパティ名]    // ※例 console.log(変数名["プロパティ名"]);
```




・プロパティの値の変更したい場合

```javascript
変数名.プロパティ名 = "新しい値";
```




・プロパティを追加したい場合

```javascript
変数名.新しいプロパティ名 = "新しい値";
```




・プロパティを削除したい場合

```javascript
delete 変数名.プロパティ名;
```




・プロパティに関数を入れることも可能

```javascript
変数名.プロパティ名 = function() {
    処理
}
```




・同じオブジェクト内のプロパティを使うときはthisをつかう

```javascript
this.プロパティ名
```




・一度セットした値をリセットしたい場合

```javascript
変数名 = null;
```



##NaNについて
数字ではないという意味。isNaN()を使うと数値かどうかを判断できる

例

```javascript
if (isNaN(引数)){
    処理
}
```



ついでに : コンソールにundefinedと出る場合=定義されていないという意味




##非同期処理


・非同期処理について
setTimeoutを使うと指定した時間後に処理が実行される。

例

```javascript
setTimeout(function() {
    処理
},時間);    // ※1秒=1000ミリ秒
```

・clearTimeoutを使うと設定したタイマーをキャンセルできる

例

```javascript
var 変数名 = setTimeout(function() {
    処理
},時間);
clearTimeout(変数名);
```