Weitere ähnliche Inhalte Mehr von Noritada Shimizu Mehr von Noritada Shimizu (20) kaetsu.js #011. 1
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
kaetsu.js #01
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
2. 2
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
JavaScript 勉強しようぜ!
• 最近のWeb開発には欠かせない!
• Node.js 使えばサーバもかけちゃう!
• スマホアプリもかけちゃう!
3. 3
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
勉強するもの
• JavaScriptの基本的な文法
• オブジェクト指向プログラミング
• jQueryを使ったDOMの操作
• JSUnit + JSHintを使ったQC
• etc.
4. 4
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
予習 + レビュー
5. 5
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
今日の内容
• 変数
- 宣言、代入(束縛)、参照
- スコープ
• 制御構文:繰り返しと条件分岐
• 関数の宣言と利用
6. 6
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
まず最初に
7. 7
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
順次実行:順にプログラムが実行されること
var hoge;
hoge = 1;
hoge = hoge + 5;
window.alert("The result is " + hoge ); 順に実行される。
8. 8
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
文:手続きの最小単位
var hoge; 文その1
hoge = 1; 文その2
hoge = hoge + 5; 文その3
window.alert("The result is " + hoge ); 文その4
9. 9
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
状態を変えながら動くのがプログラム
• 状態:変数と値の結びつき
• 例:投入されたお金という状態の変化
100円投入 50円投入
0 100 150
返却
10. 10
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
変数
11. 11
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
変数:名前
• 変数とは名前のこと
• それが指す対象がなくてもよい
ほげ
ふが
12. 12
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
宣言:名前の登録
• 使用する名前は宣言されなければならない
• var 文を利用して宣言を行う
登録
名前 値 スコー
var hoge; hoge プ
登録
var fuga; fuga
名前管理表
13. 13
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
代入:名前と、対象とを結びつけること
• =演算子を使って行う
• 値:名前の指している対象のこと
hoge = 10; hoge 10
fuga = "abc" fuga "abc"
14. 14
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
参照:変数の値を取り出すこと
• 式の途中で変数を利用すると参照が行われる
• 参照されると、変数は値に置き換わる
var hoge = 10;
(hoge + 10) * 3; // hogeが10に置き換わる
15. 15
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
宣言と代入の例
var a;
a = 1;
console.log(a);
a = 10;
console.log(a);
console.log(a + 5);
16. 16
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
undefined:
値がない変数を参照した場合の値
• 値がない変数を参照した場合、変数はundefined
という値に置き換わる
var fuga;
fuga + 10; // fugaはundefinedになる
17. 17
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
型:値の種類
型 意味 値の例
undefined 未定義 undefined
null 未定義 null
number 数値 1, 2, 3.14, -10, -1.2345
string 文字列 "abc", "日本語", "文字列"
boolean 真理値 true, false
注:基本的なもののみ列挙
18. 18
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
typeof 演算子
• 変数の型を返す演算子
• 使用例:typeof 1;
• 変数の型が文字列で取得できる
19. 19
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
四則演算子
• 加減乗除:+ - * /
• 剰余:%
• 結果は型によって異なる
- 1+2→3
- 1 + "2" → "12"
- 1 + undefined → NaN
20. 20
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
評価:式の値を決めること
• 評価には優先順位がある
• 四則演算に関しては、数学と一緒
• 変更したければ()をつかう
21. 21
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
代入:右辺の評価値に名前をつける
var a, b, c; // a, b, c3つの名前を宣言
a = 10; // aに10を代入
b = a + 10; // bにa+10、つまり10+10の結果を代入
c = b * a; // cにb*a、つまり20*10の結果を代入
a = a + 10; // aにa+10つまり10+10の結果を代入
22. 22
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
ここまでのまとめ
• 変数:名前のこと
• 代入:名前と対象を結びつけること
• 参照:名前と結びついているものをとりだすこと
23. 23
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
制御構文
24. 24
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
制御構文:処理の流れを変える文
• 3種類の処理の流れ
- 順次実行
- 条件分岐
- 繰り返し
• 条件分岐と繰り返しの書き方
25. 25
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
条件分岐:このときだけ、こうしたい
• if 文を利用する
• ()の中に{}を行う条件を書く
if (このときだけ){
こうしたい
}
26. 26
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
条件式:評価後、真理値になる式
if(true){ if( 10 > 0){ if(10 != 0){
1 + 1; 1 + 1; 1 + 1;
} } }
27. 27
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
比較演算子
• 右辺と左辺を比較し、真理値を返す演算子
• 比較:大きい、ちいさい、等しい、など
28. 28
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
比較演算子
演算子 意味 使用例
== 等しい a == 10
!= 等しくない a != 10
> 大きい a > 10
< 小さい a < 10
>= 以上 a >= 10
<= 以下 a <= 10
29. 29
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
例:aが10より大きいとき、aから1を引く
var a = 11;
if(a > 10){
a = a - 1;
}
30. 30
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
論理和、論理積
• 二つの条件を結びつける演算
• 論理和
- 「もしくは」「どっちか一方が」「or」「または」
- 片方がtrueになれば、trueとなる
• 論理積
- 「ならびに」「両方とも」「and」「かつ」
- 両方trueでないと、trueにならない
31. 31
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
論理和と論理積の演算子
• ||
- 論理和の演算子
- 例:a > 10 || a < 0
• &&
- 論理積の演算子
- 例:a > 0 && a < 10
32. 32
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
a > 10 || a < 0 の値
a > 10 がtrue a > 10 がfalse
a < 0 がtrue true true
a < 0 がfalse true false
33. 33
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
a > 10 &&a < 0 の値
a > 10 がtrue a > 10 がfalse
a < 0 がtrue true false
a < 0 がfalse false false
34. 34
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
条件が成り立っているときと、そうでないときで
作業内容をわけるには
if(条件式){
条件が成り立っているときにする作業内容
}else{
条件が成り立っていないときにする作業内容
}
35. 35
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
条件が成り立たない場合に、別の条件分岐を書く
方法
if(条件式A){
条件式Aが成り立つ場合の作業内容
}else if(条件式B){
条件式Bが成り立つ場合の作業内容
}else{
条件式Aも条件式Bも成り立たない場合の作業内容
}
36. 36
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
繰り返し文
• 「条件が成立の間、作業を繰り返す」
• while文が基本
- 条件式が成り立つ間、作業を繰り返す
- 簡単にwhile文を書くための記法がfor文
37. 37
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
while文
while(条件式){
条件が成り立っている間、繰り返す作業
}
38. 38
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
1から100までを足すプログラム
var sum = 0;
var i = 1;
while(i < 101){
sum = sum + i;
i = i + 1;
}
39. 39
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
1から100までを足すプログラム(その2)
var sum = 0;
var i = 100;
while(i > 0){
sum = sum + i;
i = i - 1;
}
40. 40
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
制御構文のまとめ
• 条件分岐:if文、if-else文
• 繰り返し:while文
• 条件式の書き方
- 条件式:評価の結果、真理値となるような式
- 論理和、論理積
41. 41
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
関数
42. 42
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
関数:仕事をまとめたもの
• 何度も使うような仕事はまとめておくと便利
→関数化
• 関数としてまとめることの利点
- プログラムの見通しが良くなる
- 実際のやり方を知らなくても、その作業ができるようになる
43. 43
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
function文:関数を定義するための文
• 関数定義:仕事をまとめて、関数とすること
• 定義と同時に名前をつけることもできる
• 引数と返り値
- 引数:関数に与えるパラメータ
- 返り値:関数を評価したときに得られる値
44. 44
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
次の用な関数を定義するとする
• 引数を一つとる
• 引数に1を足した値を返り値とする
• 名前はaddOneとする
45. 45
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
定義例
• functionに続けて関数名を書く function addOne(x){
• ()のなかに引数のリストを書く return x + 1;
• {}にまとめる仕事内容を書く }
• return文を使って返り値を返す
46. 46
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
スコープ:名前の有効範囲
• 変数や関数の名前には有効範囲がある
- スコープ
- 宣言や定義された場所で自動的にきまる
• グローバルスコープとローカルスコープ
47. 47
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
ローカルスコープ
• その関数の中でのみ有効であること
• 関数定義の中で宣言、定義された名前は自動的に
ローカルスコープに所属する
• 関数のそとでは利用できない
48. 48
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
例:x , yとretはaddの中でのみ有効
function add(x, y){
var ret = x + y;
return ret;
}
49. 49
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
subの中では、sは有効ではない
addの中では、dは有効ではない
function add(x, y){ function sub(x , y){
var s = x + y; var d = x - y;
return s; return d;
} }
50. 50
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
グローバルスコープ
• プログラム全体で有効であること
• ローカルスコープではない名前はグローバルス
コープに所属する
51. 51
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
関数のまとめ
• 関数:仕事をまとめたもの
• スコープ:名前の有効範囲
- グローバルスコープ
- ローカルスコープ
52. 52
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
今日の課題:FizzBuzz問題を解こう!
53. 53
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)
FizzBuzz問題
• 問題の解説:http://ja.wikipedia.org/wiki/Fizz_Buzz
• 1から1000までの数字に対してFizzBuzzを出力し
よう
• jsdo.it 上に実装しよう