もみじろぐ

とある男の、心のほんの一部

【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文と違って、先に条件が壊れる処理を書いておくので永久機関になる心配はなし。

処理中断系

  1. ループ中断のBreak ループ中にifと併用して使う。ifの条件を満たした時に処理を中断し、ループから抜ける。
x = 0;
while(x < 5) {//xが5以下であるかぎり実行
    if (x === 3) break; //3と同値になったら処理中断
    console.log(x);
    x++; //ループする度に1足す
}
//3で処理が止まるため
//0, 1, 2
  1. ループスキップの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 戻り値;(答えとして欲しいもの }