• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
kaetsu.js #01
 

kaetsu.js #01

on

  • 377 views

 

Statistics

Views

Total Views
377
Views on SlideShare
377
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    kaetsu.js #01 kaetsu.js #01 Presentation Transcript

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