JavaScript 基本の文法
目次：
１、基本的な文法
２、文字列と数値
３、変数
４、オブジェクト
５、条件判定のための型と式
６、関数
１、基本的な文法
・文の終わりにはセミコロン
console.log(’出力’);
・変数
変数の定義
var 変数名;
var name;
変数に値を代入
変数名 = 代入する値
変数の使い方は２通り
１、変数を定義してから値を入れる
２変数を定義すると同時に値を入れる
１
var name;
２
値の更新：
変数の一括定義
var name1, name2;
変数にはどんなデータでも入れられる
var str = 'string'; //文字列
var num = 100; //数値
var arr = ['a', 'b']; //配列
var obj = {a: 'b'}; //オブジェクト
var fun = function() {}; //関数
２、文字列と数値
文字列
文字列はシングルクオテーション（' '）またはダブルクオテーション（" "）で囲む。
文字列の結合
var name = '山田' + '太郎';
var lastName = '山本';
var firstName = '一郎';
var fullName = lastName + firstName;
数値
クオートは不要。
var x = 10;
四則演算
var result = 10 + 20;
console.log(result); //30
var x = 10;
var y = 20;
var result = x + y;
console.log(result); //30
自分自身に足し算する場合は？
var x = 10;
x = x + 5;
console.log(x); //15
↓
以下のようにもできる
var x = 10;
x++;
console.log(x); //15
X＋＋は、X = X ＋１と同じ。
反対に引き算は、Xーー
数値を文字列で計算してしまうと？
var x = '10';
var y = '20';
var result = x + y;
console.log(result); //1020
３、変数
配列では、複数のデータをまとめて扱うことができます。
配列を使わない例：
var fruit1 = 'みかん';
var fruit2 = 'りんご';
var fruit3 = 'ぶどう';
配列を使う例:
var fruit = ['みかん', 'りんご', 'ぶどう'];
配列の操作
配列を作ると、時自動的に値にインデックス（番号）が割り当てられます。
インデックスは0番から始まるので、１つめの要素のインデックスは0番になります。
var fruit = ['みかん', 'りんご', 'ぶどう'];
var orange = [0];
var grape = [2];
console.log(orange) // みかん
console.log(grape) // ぶどう
配列の要素を数えるときはlength
console.log(fruit.length);
インデックスは０から始まるのでした。
2番目の要素を取りたいときは1を、3番目の要素を取りたいときは2を指定する、つまりインデックスから１を引けばいいですね。
ということは、
最後の要素を取りたいときは・・・
インデックスの数 ー 1をすればいい。
var fruit = ['みかん', 'りんご', 'ぶどう'];
var lastIndex = fruit.length - 1;
var lastElement = fruit[lestIndex];
console.log(lestIndex) //ぶどう
４、オブジェクト
配列では、同じようなデータをまとめることができましたが、異なるデータをまとめることができませんでした。オブジェクトでは異なるデータをまとめることができます。
オブジェクトの定義
{プロパティ名１：値１, プロパティ名２：値２・・・};
オブジェクトを使わない例：
下記も同じですが、見やすさを重視して上記のような書き方がオススメです。
オブジェクトの操作
オブジェクト名 . プロパティ名
var person = {
age: 20,
gender: 'male'};
var name = person.name
入れ子になっているオブジェクトのプロパティの値も取得できます。
下記は、personオブジェクトのaddressのポストコードを取得
var person = {
age: 20,
gender: 'male',
address: {
postcode: '100-0001',
pref: '東京都',
city: '千代田区'
}
};
var postcode = person.address.postcode;
console.log(postcode); //100-0001
値の更新
プロパティの追加
var person = {
age: 20,
gender: 'male'};
person.kana = 'やまだたろう'
console.log(person.kana) //やまだたろう
５、条件判定のための型と式
論理型（真 OR 偽）
比較演算子
==、!= と ===、!==の違い（!=はNOT）
==、!= は片方が文字列、もう片方が数値でも同じ数字であればtrue
===、!==は型まで一致していないとtrueになりません。
console.log('10' == 10); //ture
console.log('10' === 10); //false
console.log('10' != 20); //ture
console.log('10' !== 20); //false
条件式
if（条件式）{
処理
}
if(age >= 20){
console.log('年齢は20歳以上です')
}
論理演算子
！「NOT」
&&「かつ」
| | 「または」
条件分岐（if〜else文）
if(y > 100){
console.log('yは100より大きいです');
} else if(y > 50){
console.log('yは50より大きいです');
} else {
console.log('yは50以下です')
}
繰り返し
while文
var i = 0;
while(i < 10){
console.log(i);
i++
}
i++で更新してあげないと無限ループになってしまうので、忘れずに書きましょう。
for文
whileと同じ繰り返し文。whileはいろんな繰り返しを柔軟に書けますが、for文は単純な処理を「何回繰り返す」文を簡潔に書けます。
for（初期化式; 条件式; 更新式）{
文;
};
for(var i = 0; i < 10; i++){
console.log(i); //1~9まで順番に出力される
}
配列の繰り返し
var fruit = ['みかん', 'りんご', 'ぶどう'];
for (var i = 0; i < 3; i++) {
}
６、関数
function 関数名（引数、引数・・・）{
文;
}
//関数の定義
function add() {
var a = 10;
var b = 20;
var result = a + b;
console.log(result);
}
//関数の呼び出し
add();// 30
オブジェクトのプロパティとして定義する
var person = {
name: '',
age: 20,
say: function(){
console.log('こんにちは');
}
};
person.say();// こんにちは
引数
//関数の定義
function add(a, b){
var result = a + b;
console.log(result);
}
//関数の呼び出し
add(1, 1); //2
add(10, 20); //30
戻り値
一つ前の「引数」では、足し算した値を出力するだけでしたが、結果を返すことによって「結果を返す」ことによって帰ってきた結果を自由に使うことができます。より汎用的な関数にすることができます。
/戻り値を使った関数
function add(a, b){
var result = a + b;
return result;
}
var result1 = add(1, 1);
console.log(result1); //2
var result2 = add(10, 20);
console.log(result2); //30
var result3 = add(result1, result2);
console.log(result3); //32
