Webページで学ぶJavaScript2013 第1回
Transcript of Webページで学ぶJavaScript2013 第1回
![Page 1: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/1.jpg)
Webページで学ぶJavaScript 2013 第1回
tyage@KMC5/21
![Page 2: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/2.jpg)
本来なら
ここにイカした挨拶の言葉が入る
![Page 3: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/3.jpg)
記念すべき第1回目です
![Page 4: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/4.jpg)
前回来てない人はどれくらいいるんです?
![Page 5: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/5.jpg)
さっそく始めてみましょう(前回来た人は復習になりますね)
![Page 6: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/6.jpg)
ここから先は第0回のスライドを参照するのじゃ
![Page 7: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/7.jpg)
まだ時間あるよね?
![Page 8: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/8.jpg)
ほんとうはJavaScriptの歴史とか話したかったんですが
新しい呪文を習得しましょう
![Page 9: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/9.jpg)
第0回では、数値・文字列・配列・変数を習得
![Page 10: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/10.jpg)
次にやること
● 複数行実行しよう● 文を分けよう● 制御構文
○ if○ switch○ for○ while
![Page 11: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/11.jpg)
次にやること
● 複数行実行しよう● 文を分けよう● 制御構文
○ if○ switch○ for○ while
![Page 12: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/12.jpg)
複数行実行しよう
コンソールで複数行入力する場合にはShift + Enterを使います
ni = 1 + 1san = ni + 1 => 3
最後の行が出力されます
![Page 13: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/13.jpg)
複数行実行しよう
console.log を使えば出力することができます
ni = 1 + 1console.log(ni)san = ni + 1 => 2 3
![Page 14: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/14.jpg)
次にやること
● 複数行実行しよう● 文を分けよう● 制御構文
○ if○ switch○ for○ while
![Page 15: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/15.jpg)
文を分けよう
各文の末尾に ; を入れましょう
ni = 1 + 1 console.log(ni) san = ni + 1 => SyntaxError: Unexpected identifier
ni = 1 + 1; console.log(ni); san = ni + 1; => 2 3
![Page 16: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/16.jpg)
文を分けよう
改行する場合にも ; を入れましょう。(問題が発生する場合があります。)
ni = 1 + 1;console.log(ni);san = ni + 1; => 2 3
![Page 17: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/17.jpg)
次にやること
● 複数行実行しよう● 文を分けよう● 制御構文
○ if○ switch○ for○ while
![Page 18: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/18.jpg)
ifを使おう
![Page 19: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/19.jpg)
その前に
![Page 20: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/20.jpg)
真偽値を使おう
![Page 21: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/21.jpg)
真偽値を使おう
JavaScriptには真偽値というものがあります。
true(真)とfalse(偽)の2つのことをまとめて真偽値と読んでいます。
confirm("ニンゲンヤメマスカ?"); => true
isPeople = false; => false
![Page 22: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/22.jpg)
比較文
比較文は真偽値を返します
551 == 551 => true551 == 550 => false33 > 4 => true33 < 4 => false3*4 >= 12 => true"バナナ" == "おやつ" => false
(===というのもありますが、またあとで)
![Page 23: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/23.jpg)
and と orand(かつ)
false && false => falsetrue && false => falsetrue && true => true
or(または)
false || false => falsetrue || false => truetrue || true => true
![Page 24: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/24.jpg)
!! を使うと真偽値を反転できます
!(33 < 4) => true
"バナナ" != "おやつ" => true
![Page 25: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/25.jpg)
これを念頭に本題に戻ります
![Page 26: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/26.jpg)
ifを使おう
if: もし〜なら
if (true) {"今日は給料日よ!";} => "今日は給料日よ!"
if (false) {"今日は給料日よ!";} =>
![Page 27: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/27.jpg)
ifを使おう
gogoichi = "ある時";if (gogoichi == "ある時") {
console.log("551が" + gogoichi + "〜?");console.log("ワハハハハ('∀`)");
} => 551がある時〜?
ワハハハハ('∀`)
![Page 28: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/28.jpg)
ifを使おう
else を使えばない時の文を実行できる
gogoichi = "ない時";if (gogoichi == "ある時") {
"ワハハハハ('∀`)";} else {
"...";} => "..."
![Page 29: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/29.jpg)
ifを使おう
条件文いろいろ
if (gogoichi == "めっちゃある") {// 略
} else if (gogoichi == "ある") {} else if (gogoichi == "少しある") {} else {}
![Page 30: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/30.jpg)
switchを使おうswitch (gogoichi) {
case "めっちゃある":console.log("幸せの絶頂");
case "ある":console.log("幸せ");break;
case "少しある":console.log("平和");break;
default:console.log("死にたい");break;
}
![Page 31: Webページで学ぶJavaScript2013 第1回](https://reader033.fdocuments.net/reader033/viewer/2022060200/5598be331a28abd4208b45ba/html5/thumbnails/31.jpg)
switchを使おうyou = prompt("あなたは誰ですか?");switch (you) {
case "タコ":case "サンマ":
console.log("魚介なのですね");break;
case "きゅうり":console.log("野菜なのですね");break;
default:console.log("何者だ!");break;
}