Webページで学ぶJavaScript2013 第0回

470 views
389 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
470
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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. お疲れ様でした

×