Webページで学ぶJavaScript2013 第0回

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

Webページで学ぶ
JavaScript 2013

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

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

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

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

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

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

でぶ
● JavaScript以外のことも学びます

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

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

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

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

アンケート取ります
● 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

こんにちは！
文字列は ' か " で囲って使います

こんにちは！
文字列は ' か " で囲って使います
"こんにちは！"
=> "こんにちは！"

文字を操作してみよう
"私"+"と"+"小鳥"+"と"+"鈴"+"と"
=> "私と小鳥と鈴と"
"この文字の長さを出します".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回なので、雰囲気を掴む感じでした

● 次回どうします？
○ 火曜日のまま or 曜日変える

● 次回どうします？
○ 火曜日のまま or 曜日変える
● 僕はこれから銭湯に行ってきます

Webページで学ぶJavaScript2013 第0回

More Related Content

What's hot (6)

Viewers also liked (20)

Similar to Webページで学ぶJavaScript2013 第0回 (19)

More from 京大マイコンクラブ (20)