#Udemyで学んだJavaScriptのメモ
Udemyの講座でJavaScriptの基礎を学んだのでメモ用に記録。
UdemyのAngelaさんの講座（英語だけどめっちゃわかりやすいです！） → リンク
##varで変数を作成。
プログラミングには欠かせない変数。
JavaScriptでは、variablesの頭文字をとって var を使用するよ。
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 "にしました。。
ちなみに、簡単に記述したい場合は下記。
var number = 5;
// +1 したい場合
number++;
// +3したい場合
number+=3;
// 変数xの数だけ足していく場合
var x = 10;
number += x;
##JavaScriptで関数定義
例えば、30行くらいのコードがあって、ある処理をする時に毎回30行のコード書いてたら疲れちゃいますよね。指も痛くなるし、コードも長くなるし、時間ももったいない。
そんな時は、関数を作って、その30行のコードを関数にぶち込めば良いのです。
関数を作ると、なんと1行で処理できちゃうんですね。30行のコードが毎回1行に短縮される嬉しさ。嬉しきことこの上なし。
-基本的な関数定義
//短縮される前のコード
alert("こんにちは");
alert("きびなごです。");
alert("今日も");
alert("いい天気ですね！！");
//firstGreetingの関数を定義
function firstGreeting() {
alert("こんにちは");
alert("きびなごです。");
alert("今日も");
alert("いい天気ですね！！");
}
//関数使うとき
firstGreeting();
めっちゃ簡略化されましたよね。ちなみに、関数作るときは{}のかっこの後に ; （セミコロン）はいらないです。関数を使用する時は、いつも通りいりますけど。
-Inputがある関数定義
ちなみに関数を使用するときに firstGreeting();のかっこ内にデータをinputすることもできます。これをどうやら引数と呼ぶみたい。
//firstGreetingのデータ入力つき関数を定義
function firstGreeting(name) {
alert("こんにちは");
alert("きびなごです。");
alert(name+"さん")
alert("今日も");
alert("いい天気ですね！！");
}
//関数使うとき
firstGreeting("もも太郎");
この場合は、関数内でfirstGreeting(name){}と定義し、firstGreeting("もも太郎")と使用することで、nameという変数に"もも太郎"を入れますよー。ってなるわけですね。説明下手か。。
-Outputのある関数
上記のfirstGreeting関数は、関数内で処理が完結しました。
でも、実際に関数を使用していくと、関数で計算とかして、その計算結果を他の処理で使いたいってことあると思うんです。
そんな時は、戻り値（関数でできた数値等を関数外でも使えるようにする？）ものを使って、変数を作成することもできるのです。（説明が難しい）
これを戻り値というみたい。
例えば、自分の所持金 変数Moneyを使用して、150円の商品を買えるだけ買った後に、お釣りは何円かを計算する。
//おつりを計算する関数を作成
// returnを使用して、戻り値がでるようにする
function change(Money){
return Money % 150;
}
//1000円持っていた場合
change(1000);
// ！！ここが大事！！
// 戻り値を使用すると、関数を代入して変数を作れる
var zankin = change(1000);
// この変数 zankin は他の計算にも使用することができるのがポイント
// 変数 chokinは定義してないけど、他の数式にも使えるのよね。
var zenZaisan = chokin + zankin;
##JavaScriptでランダムな数字を生成する
次にランダムな数字を生成するコード。ランダムな数って結構使うみたいだから、ここで覚えちゃいます。
今回はサイコロの出目を想定して 1-6 の数字をランダムに生成できるようにします。
// 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点以下 → 赤点です。
と表示する時は。
// テストのスコアを入力してもらう
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] と複数の値を格納できるわけです。まぁ便利。
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の間はその処理を繰り返します。
var count = 1;
//count が10以下なら処理をループ
while (count <= 10){
alert("Hi Again");
// ここでcountに毎回 +1 している（※これがないと無限ループします）
count++;
}
##For文で特定回数 ループさせる
While文は条件を指定して、その条件がTRUEである限り処理が続きました。For文もまぁ似たようなものなのですが、何回ループさせたいかを指定しやすい感じですかね。
// （変数iの設定; 条件の指定; iを増加）
for (var i = 0; i<10; i++){
console.log(i);
}
これにてJavaScriptの基礎の基礎終了。