kaetsu.js #01

323
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
323
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

kaetsu.js #01

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

×