簡単にJavaScriptの文法をまとめました。 変数 if 四則演算 for 関数 配列

1. JavaScript文法基礎まとめ

2. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
2
文法の基礎を
まとめました

3. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 3
目次
• 変数
• 四則演算など
• 条件分岐 if
• 関数
• 繰り返し for
• 配列

4. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
4
変数

5. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 5
変数について
• 変数とは
– 値を入れるための「入れ物」
– 値（数字など）を変化させたい場合に使用する
– 「 var 変数 」 で、変数の宣言（作成）
– 「 変数 ＝ 値 」で、変数に値を代入
• 記述例
var 変数 = 値 ;
var 変数 = ‘文字’ ; // 文字はシングルクォート ‘’ で囲む
var 変数 = 値, 変数 = ‘文字’； // カンマ, で複数宣言

6. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 6
ポイント
= 値
代入
「＝」は、代入という意味です。
「＝」の左側は「入れ物」、「＝」の右側は「値」となります
数学の X=Y とは違います
XとYが等しいというイメージを捨てましょう
入れ物

7. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 7
変数名のルール
• 使用できる文字は半角英字 数字 ＿ ＄のみ
• 先頭は半角英字 ＿ ＄のみ
• 半角英字の大文字・小文字は区別
– 例
• Abc と abc と abC は別の名前
• 3data はNG、data3 はOK
• $123 はOK、_abc はOK

8. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 8
値の変更
• 変数内の値の変更
変数 = 数字;
変数 = 変数 + 数字;
– 記述例
• 足し算 num = num + 1 ;
• 引き算 num = num − 1 ;
• かけ算 num = num ＊ 1 ;
• 割算 num = num / 1 ;

9. 文字表示の特長
• 変数と文字の文字連結表示
– プラス（＋）で連結する
– 文字は ‘ ’ で囲う
– ‘文字’ + 変数 + ‘文字’
• 記述例
var n = 1;
n = n + 1;
A.style.marginLeft = n + ‘px’;

10. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
10
四則演算
など

11. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 11
値の変更
• 算術演算子
演算子 意味 使用例
+ 加算 a = 6 + 2; // 7
- 減算 a = 6 - 2; // 4
* 乗算 a = 6 * 2; // 12
/ 除算 a = 6 / 2; // 3
% 剰余 a = 7 % 2; // 1

12. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 12
値の変更
• 算術演算子の省略形（代入演算子）
a = a + 2;
a += 2;
同じ意味
＋ ー / ＊ % で同様に記述できる

13. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 13
値の変更
• 他の算術演算子（＋＋インクリメント, ーーデクリメント）
a = a + 1;
a += 1;
a++;
同じ意味
＋ と ー で同様に記述できる

14. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 14
値の変更
• a++ と ++a の違い
var a = 1;
a = ++a;
console.log( 'aは‘ + a); // 2
var b = 1;
var c = b++;
var d = b;
console.log( 'cは' + c); // 1
console.log( 'dは' + d); // 2

15. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
15
条件分岐
if

16. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 16
条件分岐（if文）
if (条件式１) {
実行したい処理；
}
else if (条件式２) {
実行したい処理；
}
else{
実行したい処理；
}

17. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 17
条件分岐（if文）
if (条件式１) {
実行したい処理；
}
else if (条件式２) {
実行したい処理；
}
else{
実行したい処理；
}
条件式１が成立したとき、
｛ ｝の中を実行する
条件式１が成立せず、
条件式２が成立したとき、
｛ ｝の中を実行する
条件式１と条件式２が
成立しないとき、｛ ｝の
中を実行する

18. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 18
条件式の設定方法
• 比較演算子
A == B （等しい）’3’ == 3
A === B （厳密に等しい）3 === 3
A > B （より大きい）
A < B （より小さい）
A >= B （以上）
A <= B （以下）
A != B （等しくない）
A !== B （厳密に等しくない）’3’ !== 3

19. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 19
条件分岐（if文）
if (パソコンの価格 ＜ ５万円) {
パソコンを購入；
}
else{//条件を満たしていないとき
お店から出る；
}
• 普段からifは使っています

20. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
20
関数

21. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 21
function：処理をまとめる
• ユーザーが事前に設定できる、命令文です。
実行処理の再利用、一元管理するのに有効です。
関数は、「作ること」と「使うこと」は別になりますので、
勘違いしないよう気をつけてください。
function 関数名(引数1,引数2,・・){
実行したい処理；
・・・
return 戻り値;
}

22. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
22
繰り返し
for

23. Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 23
for文の確認
• for文とは
– 特定の回数、繰り返し処理することができる
for( 変数初期化; 繰り返し条件; 変数の増減式) {
繰り返したい処理;
}

24. Copyright Ⓒ Yoshihiro Takahashi 2012 All
Rights Reserved.
24
配列

25. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 25
曜日を簡単に表示する
• 配列を利用
– CDケースみたいなもの・・・です。

26. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 26
配列
• オブジェクトを作成します。
var a = new Array();
例 a[0] = 100;
a[1] = 200;
a[2] = 300;

27. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 27
配列の特徴
• []の中に変数が使える
a[ 変数 ]

28. Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 28
配列
• 記述例
var a = new Array();
a[0] = ‘ABC’;
a[1] = ‘DEF’;
a[2] = ‘GHI’;
var a = new Array(‘ABC’, ‘DEF’, ‘GHI’);