1. Webページで学ぶ
JavaScript 2013 第0回
tyage@KMC
5/14

2. おはようございます

3. さっそくですが

4. Webページで学ぶ
JavaScript 2013

5. 長いので

6. 「でぶ」と呼びましょう
Webページで学ぶJavaScript 2013

7. 今日何します？
● 顔合わせ
● このプロジェクトのおさらい
● ところでみんな何したいの
● とりあえず始めてみよう

8. 今日何します？
● 顔合わせ
● このプロジェクトのおさらい
● ところでみんな何したいの
● とりあえず始めてみよう

9. このプロジェクトの
炎上元責任者です
● KMC: tyage
○ 副会長
○ root
● Twitter: tyage
● 本名: tyage
● 所属: 工学部情報学科二回
● 好きな食べ物
○ JavaScript
○ 明石焼き
○ Webセキュリティ

10. ところで
そこに座ってる方々は誰ですか

11. 自己紹介が苦手な人の
ためのテンプレ
● KMC ID
○ これだけでよい

12. 今日何します？
● 顔合わせ
● このプロジェクトのおさらい
● ところでみんな何したいの
● とりあえず始めてみよう

13. でぶ
● Webページを使ってJavaScriptを学びます

14. でぶ
● Webページを使ってJavaScriptを学びます
● JavaScript以外のことも学びます

15. でぶ
● Webページを使ってJavaScriptを学びます
● JavaScript以外のことも学びます
● 暇になったら、JavaScriptで好きなことをやって
いければいいかなと思っています
○ JavaScriptのコードを読む
○ JavaScriptの仕様を読む
○ Webページを作る
○ Webサーバーを建てる
○ ゲームを書く
○ アプリを書く
○ JavaScript処理系を書く
○ いっそJavaScript関係なくてもいいです

16. でぶ
● JavaScriptを読めるようになると
○ Webページの仕組みが少しわかる
○ ちょっとモテる

17. でぶ
● JavaScriptを読めるようになると
○ Webページの仕組みが少しわかる
○ ちょっとモテる
● JavaScriptを書けるようになると
○ Webページの仕組みがもっとわかる
○ 自分でかっこいいWebページが書ける
○ モテる

18. でぶ
● JavaScriptを読めるようになると
○ Webページの仕組みが少しわかる
○ ちょっとモテる
● JavaScriptを書けるようになると
○ Webページの仕組みがもっとわかる
○ 自分でかっこいいWebページが書ける
○ モテる
● JavaScriptを悟ると
○ Webを変えることができる
○ モテるかどうか気にならなくなる

19. 今日何します？
● 顔合わせ
● このプロジェクトのおさらい
● ところでみんな何したいの
● とりあえず始めてみよう

20. アンケート取ります
● JavaScript聞いたことある人

21. アンケート取ります
● JavaScript聞いたことある人
● 何かしらプログラムを書いたことある人

22. アンケート取ります
● JavaScript聞いたことある人
● 何かしらプログラムを書いたことある人
● JavaScript書いたことある人
○ 分からない人に教えてあげて下さい

23. アンケート取ります
● JavaScript聞いたことある人
● 何かしらプログラムを書いたことある人
● JavaScript書いたことある人
○ 分からない人に教えてあげて下さい
● JavaScriptを悟った人
○ お帰り下さい

24. 今日何します？
● 顔合わせ
● このプロジェクトのおさらい
● ところでみんな何したいの
● とりあえず始めてみよう

25. Google Chrome入ってます？
● http://www.google.co.jp/chrome/
● Chromiumでもいいです
● 入ってない or 入れられない方
○ Firefox or Safari or Opera or IE9~ならたぶんいける
○ 少し使い方違います

26. JavaScriptを動かしてみよう
● Chromeの場合
● メニュー→
● ツール→
● JavaScriptコンソール
● （ショートカット：⌘+Alt+JとかF12とか）
他のブラウザの人ってどれくらいいます？

27. ここに呪文（プログラム）を
書いていきます

28. 計算をしてみよう
1 + 1は〜？

29. 計算をしてみよう
1 + 1は〜？
=> 2

30. 計算をしてみよう
1 + 1は〜？
=> 2
(78543 + 4324) / 82112 * (183295 - 43101)
=> 141483.04995615745

31. これは「プログラム」です

32. 文字を打ってみよう
こんにちは！

33. 文字を打ってみよう
こんにちは！
=> SyntaxError: Unexpected token ILLEGAL

34. 文字を打ってみよう
こんにちは！
=> SyntaxError: Unexpected token ILLEGAL
文字列は ' か " で囲って使います

35. 文字を打ってみよう
こんにちは！
=> SyntaxError: Unexpected token ILLEGAL
文字列は ' か " で囲って使います
"こんにちは！"
=> "こんにちは！"

36. 文字を操作してみよう
"私"+"と"+"小鳥"+"と"+"鈴"+"と"
=> "私と小鳥と鈴と"
"この文字の長さを出します".length
=> 12

37. 配列を使ってみよう
["カツ丼", "寿司", "カレー", "天ぷら"]
=> ["カツ丼", "寿司", "カレー", "天ぷら"]
[2013, 5, 14]
=> [2013, 5, 14]
配列は様々なデータのグループとか集合のようなも
のだと思って下さい

38. ["カツ丼", "寿司", "カレー", "天ぷら"]
"カツ丼"
"寿司"
"カレー"
"天ぷら"
これ全体のことを配
列と呼ぶ

39. ["カツ丼", "寿司", "カレー", "天ぷら"]
"カツ丼"
"寿司"
"カレー"
"天ぷら"
これ全体のことを配
列と呼ぶ
それぞれを
要素と呼ぶ

40. ["カツ丼", "寿司", "カレー", "天ぷら"]
"カツ丼"
"寿司"
"カレー"
"天ぷら"
0番目
の要素
1番目
の要素
2番目
の要素
3番目
の要素
これ全体のことを配
列と呼ぶ
それぞれを
要素と呼ぶ

41. 配列を使ってみよう
["カツ丼", "寿司", "カレー", "天ぷら"][0]
=> "カツ丼"
["カツ丼", "寿司", "カレー", "天ぷら"][2]
=> "カレー"
（配列の番号は0から始まります）

42. 配列を操作してみよう
["カツ丼", "寿司", "カレー", "天ぷら"].length
=> 4
（要素数を出してくれます）
["てんぷら", "かつどん", "すし", "かれー"].sort()
=> ["かつどん", "かれー", "すし", "てんぷら"]
（あいうえお順に並べてくれる）
[2013, 5, 14].join("/")
=> "2013/5/14"
（配列の要素を/でくっつけてくれる）

43. 変数を使ってみよう
変数を使うとデータを使いまわしできます
food = "たこ焼き"
food + "大好き"
=> "たこ焼き大好き"
food.length
=> 4

44. 変数を使ってみよう
書き換えることもできます
food = "焼肉"
food + "大好き"
=> "焼肉大好き"
food.length
=> 2

45. 変数を使ってみよう
配列、数値等も使うことができます
food = ["カツ丼", "寿司", "カレー"]
food.push("たこ焼き")
=> ["カツ丼", "寿司", "カレー", "たこ焼き"]
food.length
=> 4

46. 変数を使ってみよう
変数名を変えてみよう
color = ["赤", "青", "黄"]
color.length
=> 3
food.length
=> 4

47. 今日はここまで
● 第0回なので、雰囲気を掴む感じでした

48. 今日はここまで
● 第0回なので、雰囲気を掴む感じでした
● 次回どうします？
○ 火曜日のまま or 曜日変える

49. 今日はここまで
● 第0回なので、雰囲気を掴む感じでした
● 次回どうします？
○ 火曜日のまま or 曜日変える
● 僕はこれから銭湯に行ってきます

50. お疲れ様でした