基礎の基礎 JavaScript 101

#Udemyで学んだJavaScriptのメモ

Udemyの講座でJavaScriptの基礎を学んだのでメモ用に記録。

UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → [リンク](https://www.udemy.com/course/the-complete-web-development-bootcamp/?deal_code=JPA8DEAL2PERCENTAGE&aEightID=s00000016735001) 

##varで変数を作成。

プログラミングには欠かせない変数。
JavaScriptでは、variablesの頭文字をとって var を使用するよ。

```JS:basic.js

var a = 10;

```

変数って難しい。って思われるかも知れないけど。要するに a という変数に10という数字を代入しましたよ。的なこと。

ちなみに今回 変数a に10を代入したので、次回変数aに代入する時は var の記載はなくても大丈夫みたい。



##簡単な関数とプロパティ

- alert() 　→ ウィンドウに出力する
- .console.log() 　→ コンソール内に出力する
- typeof() 　→ データ型を調べる
- prompt()  →　関数内の文字列を表示して、入力を要求する
- .length  →  その文字列の長さを出力
- .slice(x,y) → x番目からy番目の手前までの文字列を切り出す
- .toUpperCase() →　文字列を全て大文字にする
- .toLowerCase() →　文字列を全て小文字にする
- Math.ceil()  → 小数点以下の切り上げ
- Math.floor()  →　小数点以下の切り捨て
- Math.round()  → 四捨五入
- Math.random()  → ランダムな数を生成 0<=n<1 の少数16桁




##数字の取り扱い

|      演算子  |    処理   |
|:------------------:|:------------------:|
|              + |       足し算        |
|             - |       引き算        |
|              * |       掛け算        |
|             / |       割り算        |
|             % |      余った数を求める        |
|             == |      イコール       |
|             === |     イコール        |
|             !== |      ノットイコール      |
|             && |      AND     |
|           II   |      OR     |


※注意
"==" は、データ型が同じじゃなくても良い。
"==="は、データ型が同じでなければならない。

あと、ORのところ本当は" || "です。Markdownの都合上、" II "にしました。。

ちなみに、簡単に記述したい場合は下記。

```javascript:qiita.js

var number = 5;

// +1 したい場合

number++;

//  +3したい場合

number+=3;

// 　変数xの数だけ足していく場合

var x = 10;
number += x;


```

##JavaScriptで関数定義


例えば、30行くらいのコードがあって、ある処理をする時に毎回30行のコード書いてたら疲れちゃいますよね。指も痛くなるし、コードも長くなるし、時間ももったいない。

そんな時は、関数を作って、その30行のコードを関数にぶち込めば良いのです。

関数を作ると、なんと1行で処理できちゃうんですね。30行のコードが毎回1行に短縮される嬉しさ。嬉しきことこの上なし。

### -基本的な関数定義


```javascript:qiita.js

//短縮される前のコード

alert("こんにちは");
alert("きびなごです。");
alert("今日も");
alert("いい天気ですね！！");

//firstGreetingの関数を定義

function firstGreeting() {
   alert("こんにちは");
   alert("きびなごです。");
   alert("今日も");
   alert("いい天気ですね！！");
}

//関数使うとき

firstGreeting();


```

めっちゃ簡略化されましたよね。ちなみに、関数作るときは{}のかっこの後に ; （セミコロン）はいらないです。関数を使用する時は、いつも通りいりますけど。


### -Inputがある関数定義

ちなみに関数を使用するときに firstGreeting();のかっこ内にデータをinputすることもできます。これをどうやら引数と呼ぶみたい。


```javascript:qiita.js


//firstGreetingのデータ入力つき関数を定義

function firstGreeting(name) {
   alert("こんにちは");
   alert("きびなごです。");
   alert(name+"さん")
   alert("今日も");
   alert("いい天気ですね！！");
}

//関数使うとき

firstGreeting("もも太郎");


```

この場合は、関数内でfirstGreeting(name){}と定義し、firstGreeting("もも太郎")と使用することで、nameという変数に"もも太郎"を入れますよー。ってなるわけですね。説明下手か。。


### -Outputのある関数

上記のfirstGreeting関数は、関数内で処理が完結しました。

でも、実際に関数を使用していくと、関数で計算とかして、その計算結果を他の処理で使いたいってことあると思うんです。

そんな時は、戻り値（関数でできた数値等を関数外でも使えるようにする？）ものを使って、変数を作成することもできるのです。（説明が難しい）
これを戻り値というみたい。

例えば、自分の所持金 変数Moneyを使用して、150円の商品を買えるだけ買った後に、お釣りは何円かを計算する。


```javascript:qiita.js


//おつりを計算する関数を作成
// returnを使用して、戻り値がでるようにする

function change(Money){
   
   return Money % 150;
   
}

//1000円持っていた場合

change(1000);

//  ！！ここが大事！！
//  戻り値を使用すると、関数を代入して変数を作れる

var zankin =  change(1000);

//  この変数 zankin は他の計算にも使用することができるのがポイント
//  変数 chokinは定義してないけど、他の数式にも使えるのよね。

var zenZaisan = chokin + zankin; 


```


##JavaScriptでランダムな数字を生成する

次にランダムな数字を生成するコード。ランダムな数って結構使うみたいだから、ここで覚えちゃいます。

今回はサイコロの出目を想定して 1-6 の数字をランダムに生成できるようにします。



```JavaScript:randomNumbers.js

// 0-0.9999999999999999 までのランダムな数字を生成

var n = Math.random();

// 6 を掛けて +1 して、 1-6.99999999999999 のランダムな数字にする

n = n * 6 ;

// 小数点を切り捨てて、1-6 までの整数にする

n = Math.floor(n);



```

これでサイコロの目をランダムに生成するコードが完成しましたよと。


## IF ELSE 文で条件分岐


次にIF ELSE文を使って条件分岐です。

もし〜がTRUEであったら、処理Aを実行する。もし~がFALSEなら処理Bを実行する。といったものですね。

if（もし）と else（それ以外）を使用します。

例えば、test の点数で
31点以上　→ 合格です。
30点以下　→ 赤点です。
と表示する時は。


```JavaScript:testScore.js

// テストのスコアを入力してもらう

var test = prompt("テストの点数を入力してください。");

// 条件定義

if (test >= 31) {
  //　31点以上の場合
  console.log("合格です。");

}else{
  // 31点以上 に当てはまらない場合
  console.log("赤点です。");
}

```

##Arrays 配列


配列とはなんぞや。って感じでうよね。わかります。
普通 var a = 10; とかってやると、10しか変数aに格納することができません。しかし、配列を使うと var a = [10, 20, 30, 40] と複数の値を格納できるわけです。まぁ便利。


```JavaScript:qiita.js

var name = prompt("What is your name?（君の名は？）");

var arr = ["Taki-kun", "Totoro", "Oba-chan"];

//あなたの名前がarrに入っているかを確かめる

arr.includes(name);

//arrにいくつのデータが入っているかをみる

arr.length;

//新たなデータを配列の最後に加える

arr.push("koTotoro");

//すでにあるデータを配列の最後から出す

arr.pop;

//配列の2番目のデータを出す（配列の最初のデータは0番目のため）
arr[1];

```

## While文で条件がTRUEならループさせる

同じ処理を繰り返しやらなければならないときに、毎回コードを打つのって正直めんどくさいですよね。5回、6回ならまだしも、1000回とかなったら無理ゲーですよね。

そんなときに使うのがWhile文です。

条件がTRUEの間はその処理を繰り返します。


```JavaScript:qiita.js

var count = 1;

//count が10以下なら処理をループ

while (count <= 10){
   
   alert("Hi Again");

   // ここでcountに毎回 +1 している（※これがないと無限ループします）
   count++;
}



```



##For文で特定回数 ループさせる

While文は条件を指定して、その条件がTRUEである限り処理が続きました。For文もまぁ似たようなものなのですが、何回ループさせたいかを指定しやすい感じですかね。



```JavaScript:qiita.js

// （変数iの設定; 条件の指定; iを増加）

for (var i = 0; i<10; i++){
   console.log(i);
}


```


これにてJavaScriptの基礎の基礎終了。