Webページで学ぶJavaScript 2013 第0回

tyage@KMC5/14

おはようございます　

さっそくですが

Webページで学ぶJavaScript 2013

長いので

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

今日何します？

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

今日何します？

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

このプロジェクトの炎上元責任者です

● KMC: tyage○ 副会長○ root

● Twitter: tyage● 本名: tyage● 所属: 工学部情報学科二回● 好きな食べ物

○ JavaScript○ 明石焼き○ Webセキュリティ

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

自己紹介が苦手な人のためのテンプレ

● KMC ID○ これだけでよい

今日何します？

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

でぶ

● Webページを使ってJavaScriptを学びます

でぶ

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

でぶ

● Webページを使ってJavaScriptを学びます● JavaScript以外のことも学びます● 暇になったら、JavaScriptで好きなことをやって

いければいいかなと思っています○ JavaScriptのコードを読む○ JavaScriptの仕様を読む○ Webページを作る○ Webサーバーを建てる○ ゲームを書く○ アプリを書く○ JavaScript処理系を書く○ いっそJavaScript関係なくてもいいです

でぶ

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

でぶ

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

● JavaScriptを書けるようになると○ Webページの仕組みがもっとわかる○ 自分でかっこいいWebページが書ける○ モテる

でぶ

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

● JavaScriptを書けるようになると○ Webページの仕組みがもっとわかる○ 自分でかっこいいWebページが書ける○ モテる

● JavaScriptを悟ると○ Webを変えることができる○ モテるかどうか気にならなくなる

今日何します？

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

アンケート取ります

● JavaScript聞いたことある人

アンケート取ります

● JavaScript聞いたことある人● 何かしらプログラムを書いたことある人

アンケート取ります

● JavaScript聞いたことある人● 何かしらプログラムを書いたことある人● JavaScript書いたことある人

○ 分からない人に教えてあげて下さい

アンケート取ります

● JavaScript聞いたことある人● 何かしらプログラムを書いたことある人● JavaScript書いたことある人

○ 分からない人に教えてあげて下さい

● JavaScriptを悟った人○ お帰り下さい

今日何します？

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

Google Chrome入ってます？

● http://www.google.co.jp/chrome/● Chromiumでもいいです● 入ってない or 入れられない方

○ Firefox or Safari or Opera or IE9~ならたぶんいける○ 少し使い方違います

JavaScriptを動かしてみよう

● Chromeの場合● メニュー→● ツール→● JavaScriptコンソール● （ショートカット：⌘+Alt+JとかF12とか）

他のブラウザの人ってどれくらいいます？

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

計算をしてみよう

1 + 1は〜？

計算をしてみよう

1 + 1は〜？

=> 2

計算をしてみよう

1 + 1は〜？

=> 2

(78543 + 4324) / 82112 * (183295 - 43101) => 141483.04995615745

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

文字を打ってみよう

こんにちは！

文字を打ってみよう

こんにちは！ => SyntaxError: Unexpected token ILLEGAL

文字を打ってみよう

こんにちは！ => SyntaxError: Unexpected token ILLEGAL

文字列は ' か " で囲って使います

文字を打ってみよう

こんにちは！ => SyntaxError: Unexpected token ILLEGAL

文字列は ' か " で囲って使います

"こんにちは！" => "こんにちは！"

文字を操作してみよう

"私"+"と"+"小鳥"+"と"+"鈴"+"と" => "私と小鳥と鈴と"

"この文字の長さを出します".length => 12

配列を使ってみよう

["カツ丼", "寿司", "カレー", "天ぷら"] => ["カツ丼", "寿司", "カレー", "天ぷら"]

[2013, 5, 14] => [2013, 5, 14]

配列は様々なデータのグループとか集合のようなものだと思って下さい

["カツ丼", "寿司", "カレー", "天ぷら"]

"カツ丼"

"寿司"

"カレー"

"天ぷら"

これ全体のことを配列と呼ぶ

["カツ丼", "寿司", "カレー", "天ぷら"]

"カツ丼"

"寿司"

"カレー"

"天ぷら"

これ全体のことを配列と呼ぶ

それぞれを要素と呼ぶ

["カツ丼", "寿司", "カレー", "天ぷら"]

"カツ丼"

"寿司"

"カレー"

"天ぷら"

0番目の要素

1番目の要素

2番目の要素

3番目の要素

これ全体のことを配列と呼ぶ

それぞれを要素と呼ぶ

配列を使ってみよう

["カツ丼", "寿司", "カレー", "天ぷら"][0] => "カツ丼"

["カツ丼", "寿司", "カレー", "天ぷら"][2] => "カレー"

（配列の番号は0から始まります）

配列を操作してみよう["カツ丼", "寿司", "カレー", "天ぷら"].length => 4（要素数を出してくれます）

["てんぷら", "かつどん", "すし", "かれー"].sort() => ["かつどん", "かれー", "すし", "てんぷら"]（あいうえお順に並べてくれる）

[2013, 5, 14].join("/") => "2013/5/14"（配列の要素を/でくっつけてくれる）

変数を使ってみよう

変数を使うとデータを使いまわしできます

food = "たこ焼き"

food + "大好き" => "たこ焼き大好き"

food.length => 4

変数を使ってみよう

書き換えることもできます

food = "焼肉"

food + "大好き" => "焼肉大好き"

food.length => 2

変数を使ってみよう

配列、数値等も使うことができます

food = ["カツ丼", "寿司", "カレー"]

food.push("たこ焼き") => ["カツ丼", "寿司", "カレー", "たこ焼き"]

food.length => 4

変数を使ってみよう

変数名を変えてみよう

color = ["赤", "青", "黄"]

color.length => 3

food.length => 4

今日はここまで

● 第0回なので、雰囲気を掴む感じでした

今日はここまで

● 第0回なので、雰囲気を掴む感じでした● 次回どうします？

○ 火曜日のまま or 曜日変える

今日はここまで

● 第0回なので、雰囲気を掴む感じでした● 次回どうします？

○ 火曜日のまま or 曜日変える

● 僕はこれから銭湯に行ってきます

お疲れ様でした