kaetsu.js #01

1
N. Shimizu (chiko@kaetsu.ac.jp / @chikoski)

kaetsu.js #01

2

JavaScript 勉強しようぜ！

• 最近のWeb開発には欠かせない！
• Node.js 使えばサーバもかけちゃう！
• スマホアプリもかけちゃう！

3

勉強するもの

• JavaScriptの基本的な文法
• オブジェクト指向プログラミング
• jQueryを使ったDOMの操作
• JSUnit + JSHintを使ったQC
• etc.

4

予習＋レビュー

5

今日の内容

• 変数
- 宣言、代入（束縛）、参照
- スコープ

• 制御構文：繰り返しと条件分岐
• 関数の宣言と利用

6

まず最初に

7

順次実行：順にプログラムが実行されること

var hoge;
hoge = 1;
hoge = hoge + 5;
window.alert("The result is " + hoge ); 順に実行される。

8

文：手続きの最小単位

var hoge; 文その1

hoge = 1; 文その2

hoge = hoge + 5; 文その3

window.alert("The result is " + hoge ); 文その4

9

状態を変えながら動くのがプログラム

• 状態：変数と値の結びつき
• 例：投入されたお金という状態の変化

100円投入 50円投入
0 100 150

返却

10

変数

11

変数：名前

• 変数とは名前のこと
• それが指す対象がなくてもよい

ほげ

ふが

12

宣言：名前の登録

• 使用する名前は宣言されなければならない
• var 文を利用して宣言を行う
登録
名前値スコー
var hoge; hoge プ

登録
var fuga; fuga
名前管理表

13

代入：名前と、対象とを結びつけること

• ＝演算子を使って行う
• 値：名前の指している対象のこと

hoge = 10; hoge 10

fuga = "abc" fuga "abc"

14

参照：変数の値を取り出すこと

• 式の途中で変数を利用すると参照が行われる
• 参照されると、変数は値に置き換わる

var hoge = 10;
(hoge + 10) * 3; // hogeが10に置き換わる

15

宣言と代入の例

var a;
a = 1;
console.log(a);
a = 10;
console.log(a);
console.log(a + 5);

16

undefined：
値がない変数を参照した場合の値

• 値がない変数を参照した場合、変数はundefined
という値に置き換わる

var fuga;

fuga + 10; // fugaはundefinedになる

17

型：値の種類

型意味値の例

undefined 未定義 undefined

null 未定義 null

number 数値 1, 2, 3.14, -10, -1.2345

string 文字列 "abc", "日本語", "文字列"

boolean 真理値 true, false
注：基本的なもののみ列挙

18

typeof 演算子

• 変数の型を返す演算子
• 使用例：typeof 1;
• 変数の型が文字列で取得できる

19

四則演算子

• 加減乗除：+ - * /
• 剰余：%
• 結果は型によって異なる
- 1+2→3
- 1 + "2" → "12"
- 1 + undefined → NaN

20

評価：式の値を決めること

• 評価には優先順位がある
• 四則演算に関しては、数学と一緒
• 変更したければ（）をつかう

21

代入：右辺の評価値に名前をつける

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

ここまでのまとめ

• 変数：名前のこと
• 代入：名前と対象を結びつけること
• 参照：名前と結びついているものをとりだすこと

23

制御構文

24

制御構文：処理の流れを変える文

• 3種類の処理の流れ
- 順次実行
- 条件分岐
- 繰り返し

• 条件分岐と繰り返しの書き方

25

条件分岐：このときだけ、こうしたい

• if 文を利用する
• （）の中に{}を行う条件を書く

if (このときだけ){
こうしたい
}

26

条件式：評価後、真理値になる式

if(true){ if( 10 > 0){ if(10 != 0){
1 + 1; 1 + 1; 1 + 1;
} } }

27

比較演算子

• 右辺と左辺を比較し、真理値を返す演算子
• 比較：大きい、ちいさい、等しい、など

28

比較演算子

演算子意味使用例

== 等しい a == 10

!= 等しくない a != 10

> 大きい a > 10

< 小さい a < 10

>= 以上 a >= 10

<= 以下 a <= 10

29

例：aが10より大きいとき、aから1を引く

var a = 11;
if(a > 10){
a = a - 1;
}

30

論理和、論理積

• 二つの条件を結びつける演算
• 論理和
- 「もしくは」「どっちか一方が」「or」「または」
- 片方がtrueになれば、trueとなる
• 論理積
- 「ならびに」「両方とも」「and」「かつ」
- 両方trueでないと、trueにならない

31

論理和と論理積の演算子

• ||
- 論理和の演算子
- 例：a > 10 || a < 0

• &&
- 論理積の演算子
- 例：a > 0 && a < 10

32

a > 10 || a < 0 の値

a > 10 がtrue a > 10 がfalse

a < 0 がtrue true true

a < 0 がfalse true false

33

a > 10 &&a < 0 の値

a > 10 がtrue a > 10 がfalse

a < 0 がtrue true false

a < 0 がfalse false false

34

条件が成り立っているときと、そうでないときで
作業内容をわけるには

if(条件式）{
条件が成り立っているときにする作業内容
}else{
条件が成り立っていないときにする作業内容
}

35

条件が成り立たない場合に、別の条件分岐を書く
方法

if(条件式A){
条件式Aが成り立つ場合の作業内容
}else if(条件式B){
条件式Bが成り立つ場合の作業内容
}else{
条件式Aも条件式Bも成り立たない場合の作業内容
}

36

繰り返し文

• 「条件が成立の間、作業を繰り返す」
• while文が基本
- 条件式が成り立つ間、作業を繰り返す

- 簡単にwhile文を書くための記法がfor文

37

while文

while(条件式）{
条件が成り立っている間、繰り返す作業
}

38

1から100までを足すプログラム

var sum = 0;
var i = 1;
while(i < 101){
sum = sum + i;
i = i + 1;
}

39

1から100までを足すプログラム（その2）

var sum = 0;
var i = 100;
while(i > 0){
sum = sum + i;
i = i - 1;
}

40

制御構文のまとめ

• 条件分岐：if文、if-else文
• 繰り返し：while文
• 条件式の書き方
- 条件式：評価の結果、真理値となるような式

- 論理和、論理積

41

関数

42

関数：仕事をまとめたもの

• 何度も使うような仕事はまとめておくと便利
→関数化

• 関数としてまとめることの利点
- プログラムの見通しが良くなる

- 実際のやり方を知らなくても、その作業ができるようになる

43

function文：関数を定義するための文

• 関数定義：仕事をまとめて、関数とすること
• 定義と同時に名前をつけることもできる
• 引数と返り値
- 引数：関数に与えるパラメータ

- 返り値：関数を評価したときに得られる値

44

次の用な関数を定義するとする

• 引数を一つとる
• 引数に1を足した値を返り値とする
• 名前はaddOneとする

45

定義例

• functionに続けて関数名を書く function addOne(x){
• ()のなかに引数のリストを書く return x + 1;
• {}にまとめる仕事内容を書く }
• return文を使って返り値を返す

46

スコープ：名前の有効範囲

• 変数や関数の名前には有効範囲がある
- スコープ

- 宣言や定義された場所で自動的にきまる

• グローバルスコープとローカルスコープ

47

ローカルスコープ

• その関数の中でのみ有効であること
• 関数定義の中で宣言、定義された名前は自動的に
ローカルスコープに所属する

• 関数のそとでは利用できない

48

例：x , yとretはaddの中でのみ有効

function add(x, y){
var ret = x + y;
return ret;
}

49

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

グローバルスコープ

• プログラム全体で有効であること
• ローカルスコープではない名前はグローバルス
コープに所属する

51

関数のまとめ

• 関数：仕事をまとめたもの
• スコープ：名前の有効範囲
- グローバルスコープ

- ローカルスコープ

52

今日の課題：FizzBuzz問題を解こう！

53

FizzBuzz問題

• 問題の解説：http://ja.wikipedia.org/wiki/Fizz_Buzz
• 1から1000までの数字に対してFizzBuzzを出力し
よう

• jsdo.it 上に実装しよう

kaetsu.js #01

More Related Content

Similar to kaetsu.js #01 (20)

More from Noritada Shimizu (20)

kaetsu.js #01