Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webページで学ぶJavaScript2013 第0回

520 views

Published on

  • Be the first to comment

Webページで学ぶJavaScript2013 第0回

  1. 1. Webページで学ぶ JavaScript 2013 第0回 tyage@KMC 5/14
  2. 2. おはようございます 
  3. 3. さっそくですが
  4. 4. Webページで学ぶ JavaScript 2013
  5. 5. 長いので
  6. 6. 「でぶ」と呼びましょう Webページで学ぶJavaScript 2013
  7. 7. 今日何します? ● 顔合わせ ● このプロジェクトのおさらい ● ところでみんな何したいの ● とりあえず始めてみよう
  8. 8. 今日何します? ● 顔合わせ ● このプロジェクトのおさらい ● ところでみんな何したいの ● とりあえず始めてみよう
  9. 9. このプロジェクトの 炎上元責任者です ● KMC: tyage ○ 副会長 ○ root ● Twitter: tyage ● 本名: tyage ● 所属: 工学部情報学科二回 ● 好きな食べ物 ○ JavaScript ○ 明石焼き ○ Webセキュリティ
  10. 10. ところで そこに座ってる方々は誰ですか
  11. 11. 自己紹介が苦手な人の ためのテンプレ ● KMC ID ○ これだけでよい
  12. 12. 今日何します? ● 顔合わせ ● このプロジェクトのおさらい ● ところでみんな何したいの ● とりあえず始めてみよう
  13. 13. でぶ ● Webページを使ってJavaScriptを学びます
  14. 14. でぶ ● Webページを使ってJavaScriptを学びます ● JavaScript以外のことも学びます
  15. 15. でぶ ● Webページを使ってJavaScriptを学びます ● JavaScript以外のことも学びます ● 暇になったら、JavaScriptで好きなことをやって いければいいかなと思っています ○ JavaScriptのコードを読む ○ JavaScriptの仕様を読む ○ Webページを作る ○ Webサーバーを建てる ○ ゲームを書く ○ アプリを書く ○ JavaScript処理系を書く ○ いっそJavaScript関係なくてもいいです
  16. 16. でぶ ● JavaScriptを読めるようになると ○ Webページの仕組みが少しわかる ○ ちょっとモテる
  17. 17. でぶ ● JavaScriptを読めるようになると ○ Webページの仕組みが少しわかる ○ ちょっとモテる ● JavaScriptを書けるようになると ○ Webページの仕組みがもっとわかる ○ 自分でかっこいいWebページが書ける ○ モテる
  18. 18. でぶ ● JavaScriptを読めるようになると ○ Webページの仕組みが少しわかる ○ ちょっとモテる ● JavaScriptを書けるようになると ○ Webページの仕組みがもっとわかる ○ 自分でかっこいいWebページが書ける ○ モテる ● JavaScriptを悟ると ○ Webを変えることができる ○ モテるかどうか気にならなくなる
  19. 19. 今日何します? ● 顔合わせ ● このプロジェクトのおさらい ● ところでみんな何したいの ● とりあえず始めてみよう
  20. 20. アンケート取ります ● JavaScript聞いたことある人
  21. 21. アンケート取ります ● JavaScript聞いたことある人 ● 何かしらプログラムを書いたことある人
  22. 22. アンケート取ります ● JavaScript聞いたことある人 ● 何かしらプログラムを書いたことある人 ● JavaScript書いたことある人 ○ 分からない人に教えてあげて下さい
  23. 23. アンケート取ります ● JavaScript聞いたことある人 ● 何かしらプログラムを書いたことある人 ● JavaScript書いたことある人 ○ 分からない人に教えてあげて下さい ● JavaScriptを悟った人 ○ お帰り下さい
  24. 24. 今日何します? ● 顔合わせ ● このプロジェクトのおさらい ● ところでみんな何したいの ● とりあえず始めてみよう
  25. 25. Google Chrome入ってます? ● http://www.google.co.jp/chrome/ ● Chromiumでもいいです ● 入ってない or 入れられない方 ○ Firefox or Safari or Opera or IE9~ならたぶんいける ○ 少し使い方違います
  26. 26. JavaScriptを動かしてみよう ● Chromeの場合 ● メニュー→ ● ツール→ ● JavaScriptコンソール ● (ショートカット:⌘+Alt+JとかF12とか) 他のブラウザの人ってどれくらいいます?
  27. 27. ここに呪文(プログラム)を 書いていきます
  28. 28. 計算をしてみよう 1 + 1は〜?
  29. 29. 計算をしてみよう 1 + 1は〜? => 2
  30. 30. 計算をしてみよう 1 + 1は〜? => 2 (78543 + 4324) / 82112 * (183295 - 43101) => 141483.04995615745
  31. 31. これは「プログラム」です
  32. 32. 文字を打ってみよう こんにちは!
  33. 33. 文字を打ってみよう こんにちは! => SyntaxError: Unexpected token ILLEGAL
  34. 34. 文字を打ってみよう こんにちは! => SyntaxError: Unexpected token ILLEGAL 文字列は ' か " で囲って使います
  35. 35. 文字を打ってみよう こんにちは! => SyntaxError: Unexpected token ILLEGAL 文字列は ' か " で囲って使います "こんにちは!" => "こんにちは!"
  36. 36. 文字を操作してみよう "私"+"と"+"小鳥"+"と"+"鈴"+"と" => "私と小鳥と鈴と" "この文字の長さを出します".length => 12
  37. 37. 配列を使ってみよう ["カツ丼", "寿司", "カレー", "天ぷら"] => ["カツ丼", "寿司", "カレー", "天ぷら"] [2013, 5, 14] => [2013, 5, 14] 配列は様々なデータのグループとか集合のようなも のだと思って下さい
  38. 38. ["カツ丼", "寿司", "カレー", "天ぷら"] "カツ丼" "寿司" "カレー" "天ぷら" これ全体のことを配 列と呼ぶ
  39. 39. ["カツ丼", "寿司", "カレー", "天ぷら"] "カツ丼" "寿司" "カレー" "天ぷら" これ全体のことを配 列と呼ぶ それぞれを 要素と呼ぶ
  40. 40. ["カツ丼", "寿司", "カレー", "天ぷら"] "カツ丼" "寿司" "カレー" "天ぷら" 0番目 の要素 1番目 の要素 2番目 の要素 3番目 の要素 これ全体のことを配 列と呼ぶ それぞれを 要素と呼ぶ
  41. 41. 配列を使ってみよう ["カツ丼", "寿司", "カレー", "天ぷら"][0] => "カツ丼" ["カツ丼", "寿司", "カレー", "天ぷら"][2] => "カレー" (配列の番号は0から始まります)
  42. 42. 配列を操作してみよう ["カツ丼", "寿司", "カレー", "天ぷら"].length => 4 (要素数を出してくれます) ["てんぷら", "かつどん", "すし", "かれー"].sort() => ["かつどん", "かれー", "すし", "てんぷら"] (あいうえお順に並べてくれる) [2013, 5, 14].join("/") => "2013/5/14" (配列の要素を/でくっつけてくれる)
  43. 43. 変数を使ってみよう 変数を使うとデータを使いまわしできます food = "たこ焼き" food + "大好き" => "たこ焼き大好き" food.length => 4
  44. 44. 変数を使ってみよう 書き換えることもできます food = "焼肉" food + "大好き" => "焼肉大好き" food.length => 2
  45. 45. 変数を使ってみよう 配列、数値等も使うことができます food = ["カツ丼", "寿司", "カレー"] food.push("たこ焼き") => ["カツ丼", "寿司", "カレー", "たこ焼き"] food.length => 4
  46. 46. 変数を使ってみよう 変数名を変えてみよう color = ["赤", "青", "黄"] color.length => 3 food.length => 4
  47. 47. 今日はここまで ● 第0回なので、雰囲気を掴む感じでした
  48. 48. 今日はここまで ● 第0回なので、雰囲気を掴む感じでした ● 次回どうします? ○ 火曜日のまま or 曜日変える
  49. 49. 今日はここまで ● 第0回なので、雰囲気を掴む感じでした ● 次回どうします? ○ 火曜日のまま or 曜日変える ● 僕はこれから銭湯に行ってきます
  50. 50. お疲れ様でした

×