狠狠撸

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

Recommended

More Related Content

More from Noritada Shimizu (20)

kaetsu.js #01