Your SlideShare is downloading. ×
Webページで学ぶJavaScript2013 第0回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webページで学ぶJavaScript2013 第0回

246
views

Published on


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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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