【JavaScript】基本文法
基本操作
出力
console.log('Hello,world');
文字列はクオーテーションで囲む。 セミコロンは必須ではないが推奨 JavaScriptのセミコロンを省くと起こること - Qiita
alertやdom上に出力するのは、配列などが正しく表示されないためデバッグには向かない。
計算
足し算、引き算、かけ、わり、あまり(%
console.log(7 + 2); //9 console.log(7 - 2); //5 console.log(7 * 2); //14 console.log(7 / 2); //3 console.log(7 % 2); //1
変数
var name = 'poyo'; //定義 console.log(name); //poyo name = 'hoge'; //上書き console.log(name); //hoge
基本的に型を宣言しない。なんでも入る。 varは「variable(変数)」からきている。
ES6以降はconst, letでの宣言が推奨されている。varの使用は非推奨
数値においては、演算子と等号を併用して計算結果を上書きできる。 またx+=1を「x++」 のように省略できる。(引き算も同じく これをインクリメント演算子と呼ぶ。 →数値の前に置くか、後に置くか問題 式と演算子 - JavaScript | MDN
var x = 1; x += 1; console.log(x); //2 x++; console.log(x); //3 x--; console.log(x); //2
文字列の連結
+を文字(String型)に使うことで連結になる。
var name = 'poyo'; console.log(name + 'fuga'); //poyofuga name += 'hoge' //連結して上書き console.log(name); //poyohoge
また数値と文字を連結させることもできる。
var name = 'poyo'; console.log(name + 1); //poyo1
条件分岐,If文
基本。ifの中括弧の後にセミコロンは不要。
x = -4; if (x > 3) { console.log('xは3より大きい'); } else if (x > 0) { console.log('xは正の数'); } else { console.log('xは0か負'); }
「!」で条件の否定も可能。
x = 1; if (!(x==0)) { console.log('xはゼロではない'); }
等号には「==」と「===」がある。→等号が二種類??
繰り返し処理
while文
x = 0; while(x < 5) {//xが5以下であるかぎり実行 console.log(x); x++; //ループする度に1足す } //0, 1, 2, 3, 4
whileは条件が成立し続ける限り実行されるループ。今回は5回ループ。 →よってループ条件がいずれ満たされなくなる状況にしないと永久機関に。
for文
for (変数定義 条件 変数の増減式) { 処理 } javaとかと一緒の書き方。
for (var i=0; i<5; i++){//0~4まで5回ループ console.log(i); } // 0,1,2,3,4
while文と違って、先に条件が壊れる処理を書いておくので永久機関になる心配はなし。
処理中断系
- ループ中断のBreak ループ中にifと併用して使う。ifの条件を満たした時に処理を中断し、ループから抜ける。
x = 0; while(x < 5) {//xが5以下であるかぎり実行 if (x === 3) break; //3と同値になったら処理中断 console.log(x); x++; //ループする度に1足す } //3で処理が止まるため //0, 1, 2
- ループスキップのContinue 該当の条件を満たした時に、処理をスキップさせる。
for (var i =0; i<=10; i++) {//0~10まで11回ループ if (i%3 === 0) continue;//3で割り切れる時スキップ console.log(i); } // 0,1,2,4,5,7,8,10
配列
var array = ['poyo','hoge','fuga']; //定義 console.log(array); //(3)["poyo", "hoge", "fuga"] console.log(array[0]); //"poyo" array[0] = 'java'; //上書き or 代入 console.log(array); //(3)["java", "hoge", "fuga"] array.push['swift']; //追加 console.log(array); //(4)["java", "hoge", "fuga", "swift"]
配列は変数の箱がたくさんくっついて存在するイメージ。 先頭から番号(=インデックス番号)がついており、それを使って呼び出したり代入したりする。 インデックス番号は0からスタート。
また以下のように、配列を空で指定してからインデックス番号で指定して各々代入可能。
var arrayEmpty = []; //空を定義 arrayEmpty[0] = 'pon';//代入 console.log(arrayEmpty); //["pon"]
※空の配列に対していきなり[1]で二番目などを指定すると、呼び出した配列の中身は「empty」となる。
連想配列 (※オブジェクト)
それぞれの値に「キー」という名前をつけてまとめる配列のこと。中括弧で囲う。
var fruit = {name: 'apple', color:'red', taste:'sweet'}; //定義 console.log(fruit.name); //apple console.log(fruit['name']); //apple fruit.shape = 'round'; //追加 fruit.name = 'grape'; //上書き
関数
function SayingKirby(word) { word += 'ぽよ'; return word; }//定義 console.log(SayingKirby('お腹すいた')); //お腹すいたぽよ
function 関数名(仮引数) { 処理 return 戻り値;(答えとして欲しいもの }