際際滷

IntroductiontoProgramming
with
JavaScript
JavaScriptから兵める
プログラミング2016
奨脅寄僥垢僥何秤�麪Э�
�麻�C親僥コ�`ス3指
KMC2指 drafear
及１指

withJavaScript 徭失�B初
? id
- drafear(どらふぃあ, どらふぁ�`)
? 侭奉
- 奨脅寄僥垢僥何秤�麪Э� �麻�C親僥コ�`ス 3指
? 箸龍
- ゲ�`ム(蒙にパズルゲ�`), ボドゲ, ボカロ, twitter
? 歌紗プロジェクト
- これ, �プロ, ctf, �K冑のC++, coq, �Mみ栽わせ恷�m晒�i��
☆楳: 仟秘伏プロジェクト
@drafear
2@drafear_ku @drafear_carryok @drafear_evolve @drafear_sl @gekimon_1d1a @cuigames

withJavaScript
? 僥何僥親
? id (秘何してたら) or 兆念
? 箸龍
? 蒙室(あれば)
徭失�B初
1. KMC 2指伏
2. 仟秘伏
3. KMC 3指伏
4. KMC 4指伏
5. KMC n指伏
3

withJavaScript 兵める念に´
? ブラウザとエディタの�h廠を屁えよう
- Internet Explorerとメモ､でも�_�kできるけどTSURAI
- 鯵はこれでやるんだ��って繁は秘れなくておｋ
4

withJavaScript この�v恙で聞喘するブラウザとエディタ
? Google Chrome
- https://chrome.google.com
? Atom
- https://atom.io/
5

withJavaScript atom 兜豚�O協
? パッケ�`ジのインスト�`ル
- Ctrl + , キ�`で�O協鮫中を�_きます
- Install をクリックします
- 仝less-than-slash々を�碧�靴�, Install してみましょう
? ラピッドコ�`ディング疾りに歌紗された圭
- autocomplete-plus を disable しましたが,
宴旋なので packages から�碧�靴� enable しましょう
6

withJavaScript エディタの聞い圭
? Ctrl + Z 圷に��
? Ctrl + Y 圷に��垢��
? Ctrl + C コピ�`
? Ctrl + V ペ�`スト(�Nり原け)
? Ctrl + X �x�k��貲个衄，� or カ�`ソル佩俳り函り
- 俳り函り???�茅してコピ�`
? Ctrl + ● or ◎ 佩秘れ紋え
? Ctrl + G 峺協した佩へ卞��
? Ctrl + F 猟忖双�碧�, 猟忖双崔�Q
? Shift + Tab インデントを1貧げる
7

withJavaScript おねがい
? 蛍からないところがあれば, ちょっとした並でも,
念に�h苧があったかもしれないところでも
�h�]せずにどんどん�いて和さい�
8

withJavaScript 廣吭
? 岑らないことがたくさん竃てくるかもしれませんが
畠何�える駅勣はありません
? こんなのあったな�`くらいでおｋです
? 駅勣になれば�{べれば措いので
? 嶷勣な�朕は、やってるうちに�えます
9

withJavaScript 書晩の朕��
? HTML, (CSS,) JavaScriptの叨護を尖盾する
? 弼？僥ぶ
- HTML
?鮫�が�Nれる
?ボタンを�O崔できる
- JavaScript
?�篳�, �v方, オブジェクトの古廷を尖盾する
?方�､販鍔崛个累`いを尖盾する
?�g�なイベント�I尖, HTML勣殆のテキスト�筝釮�任④�
? C＄＄kie Clicker のようなゲ�`ムを恬る
10

withJavaScript やっと云�}
? HTML, CSS, JavaScript の叨護
- HTMLで麼に��夛と光勣殆の吭龍を�峰し (糠�Mみ)
- CSSでレイアウトやデザインを佩い (扉原け)
- JavaScriptでWebペ�`ジを�啜弔覆發里砲垢� (�咾��)
11

withJavaScript やっと云�}
と冱っても蛍からないと房うので
�g�Hに乾っていきましょう
12

withJavaScript 書晩恬るもの
? C＄＄kie Clicker のようなもの
- http://drafear.ie-t.net/js2016/cc/
13

withJavaScript その念に
恬り兵める念に
まずは JavaScriptの児�A を
茶�していきましょう
14

withJavaScript てんぷれ
? 參和から�r侘をダウンロ�`ドしてください
- https://github.com/kmc-jp/js2016
? ダウンロ�`ドできたら main.js を�_いて和さい
? 鮫中にフォルダをドラッグ&ドロップするとサイドバ�`が竃る
15

withJavaScript Hello, World!!
16
alert("Hello, World!!");
main.js
? main.js に參和のように�峰して index.html をChromeで�_くと

withJavaScript ��徨
? ".html" とは�
- ファイル兆の恷瘁の仝 . 々參週の猟忖双を��徨といいます
?a.png なら png
?hoge.fuga.piyo なら piyo
- ��徨はファイルの�N�を�R�eするもの
?png png侘塀の鮫�ファイル
?gif gif侘塀の鮫�ファイル
?html HTMLファイル
?txt テキストファイル
17

withJavaScript ��徨が燕幣されない��
? "win8 ��徨燕幣" などでggって和さい
- コントロ�`ルパネルの仝ファイルとフォルダ�`の�碧��廛轡腑鵑�筝釗�
仝燕幣々タブから、仝鞠�hされている��徨は燕幣しない々のチェックを翌す
18

withJavaScript Hello, World!!
alert("K");
alert("M");
alert("C");
main.js
? alert("坪否") で坪否を燕幣します
? alert を3つ�Kべてみます
- K, M, Cの�に燕幣される
?プログラムは貧から�に�g佩される
19

withJavaScript
main.js
console.log
? 3指の竃薦を�るのに匯？ [OK] を兀していくのは中宜
- console.log を聞おう
- Chrome貧で F12 を兀すと竃てくる�_�k宀ツ�`ル坪の
consoleに竃薦される
?ユ�`ザ�`には�えない
20
console.log("K");
console.log("M");
console.log("C");

withJavaScript セミコロンとエラ�`
? セミコロン
- 1つの凋綜ごとに, おしりにセミコロンを崔きます
?崔きたくない繁は仝js 徭�咼札潺灰蹈�携襦垢覆匹�ggって和さい
? エラ�`
- JavaScriptでエラ�`が�k伏した��, コンソ�`ルに燕幣されます
?コンソ�`ル宴旋�
21
main.js
console.log("K");
console.log("M");
console.log("C");

withJavaScript �篳�
? �篳�
- �篳�箸�, 1つの�､��zめる�のことです
- let �篳�� = 兜豚��;
?貧のように�峰すると, その�篳�鯤荒辰任④襪茲Δ砲覆蠅泙�
?�篳�獷砲魯▲襯侫．戰奪箸覆匹�垢┐泙�
- �篳�� = ��;
?�篳��､鰉吁xの�､派��④靴泙�
?この荷恬を旗秘といいます
?方僥のイコ�`ルとは�`います
22

? �篳�
- �篳�箸�, 1つの�､��zめる�のことです
- let �篳�� = 兜豚��;
?貧のように�峰すると, その�篳�鯤荒辰任④襪茲Δ砲覆蠅泙�
?�篳�獷砲魯▲襯侫．戰奪箸覆匹�垢┐泙�
? console.log(�篳��)
- その�篳�琳佗蹐鬟灰鵐秋`ルに竃薦します
23
main.js
let a = 810;
console.log(a);

? �篳�
- �篳�� = ��;
?�篳��､鰉吁xの�､派��④靴泙�
?この荷恬を旗秘といいます
?方僥のイコ�`ルとは�`います
24
main.js
let a = 50;
a = 810;
console.log(a);

withJavaScript 膨�t處麻
25
? 膨�t處麻
- 仝+々仝-々仝*々仝/々でそれぞれ才, 餓, �e, 斌を箔められます
?箭) a = a + 4; (aに4を怎す)
- 仝%々で�絇を箔めます
?箭) a = b % 5; (bを5で護った噫りをaに旗秘する)
- 仝+々仝-々仝*々仝/々仝%々仝=々などを處麻徨といいます
main.js
let a = 4;
let b = 7;
let c = a + a * b;
console.log(c);

26
? 膨�t處麻
- ( )坪の處麻が��枠されます
main.js
let a = 4 * (8 + 3);
console.log(a);

27

? 處�
- a, b, c, d を1指ずつと
�m卷 (, ), +, -, *, /, % を聞って10を恬って和さい
28
main.js
let a = 3;
let b = 4;
let c = 6;
let d = 9;
let result = ;
console.log(result);
fill in here

? 處�
- a, b, c, d を1指ずつと
�m卷 (, ), +, -, *, /, % を聞って10を恬って和さい
- これをプログラムで盾くのに�d龍がある圭は
頁掲、署袗晩の仝�室プログラミング��氏々にご歌紗和さい��
29
main.js
let a = 3;
let b = 4;
let c = 6;
let d = 9;
let result = (b + c) % (a + d);
console.log(result);

? 麿にも盾はたくさんあります (住�Q隈�tなどによる嶷�}あり)
30
9 - 6 + 4 + 3
9 % 6 + 4 + 3
9 + 4 - 6 + 3
(9 - 4) * 6 / 3
(9 * 4 - 6) / 3
9 % 4 + 6 + 3
4 + 9 - 6 + 3
(4 * 9 - 6) / 3
9 - (6 - 4) + 3
9 - 6 % 4 + 3
9 + (4 - 6) + 3
9 + 4 % 6 - 3
4 - 6 + 9 + 3
4 % 6 + 9 - 3
6 * (9 - 4) / 3
6 + 9 % 4 + 3
4 + (9 - 6) + 3
4 + 9 % 6 + 3
4 - (6 - 9) + 3
9 - 6 + 3 + 4
9 % 6 + 3 + 4
9 + 3 - 6 + 4
9 % 3 + 6 + 4
3 + 9 - 6 + 4
9 - (6 - 3) + 4
9 + (3 - 6) + 4
9 - 3 % 6 + 4
3 - 6 + 9 + 4
6 % (9 + 3) + 4
6 % (9 * 3) + 4
6 + 9 % 3 + 4
6 - 9 % 3 + 4
6 % (3 + 9) + 4
6 % (3 * 9) + 4
3 + (9 - 6) + 4
3 + 9 % 6 + 4
3 - (6 - 9) + 4
9 - 6 + (4 + 3)
9 - 6 + (3 + 4)
9 % 6 + (4 + 3)
9 % 6 + (3 + 4)
9 + 4 + 3 - 6
9 % 4 + 3 + 6
4 + 9 + 3 - 6
9 + 3 + 4 - 6
9 % 3 + 4 + 6
3 + 9 + 4 - 6
9 + (4 + 3) - 6
9 + (3 + 4) - 6
4 + 3 + 9 - 6
3 + 4 + 9 - 6
4 + (9 + 3) - 6
4 % (9 + 3) + 6
4 % (9 - 3) + 6
4 % (9 * 3) + 6
4 + 9 % 3 + 6
4 - 9 % 3 + 6
4 + (3 + 9) - 6
4 % (3 + 9) + 6
4 % (3 - 9) + 6
4 % (3 * 9) + 6
3 + (9 + 4) - 6
3 + 9 % 4 + 6
3 + (4 + 9) - 6
9 + 4 - (6 - 3)
9 + 4 + (3 - 6)
9 + 4 - 3 % 6
(9 - 4) * (6 / 3)
9 % 4 + (6 + 3)
9 % 4 + (3 + 6)
4 + 9 - (6 - 3)
4 + 9 + (3 - 6)
4 + 9 - 3 % 6
9 + 3 - (6 - 4)
9 + 3 - 6 % 4
9 + 3 + (4 - 6)
9 - 3 + 4 % 6
9 % 3 + (6 + 4)
9 % 3 + (4 + 6)
3 + 9 - (6 - 4)
3 + 9 - 6 % 4
3 + 9 + (4 - 6)
9 + (6 + 4) % 3
9 - (6 - 4 - 3)
9 - (6 % 4 - 3)
9 + (4 + 6) % 3
9 + (4 - 6 + 3)
9 + (4 % 6 - 3)
9 + 4 % 6 % 3
9 + (6 + 3) % 4
9 - (6 - 3 - 4)
9 + (3 + 6) % 4
9 + (3 - 6 + 4)
9 - (3 % 6 - 4)
9 - (6 - (4 + 3))
9 - (6 - (3 + 4))
9 + (4 + 3 - 6)
9 + (4 + 3) % 6
9 + (4 - 3) % 6
9 + 4 % 3 % 6
9 + (3 + 4 - 6)
9 + (3 + 4) % 6
9 - (3 - 4) % 6
9 + (4 - (6 - 3))
9 + 4 % (6 - 3)
9 + (4 + (3 - 6))
9 + 4 % (3 - 6)
9 + (4 - 3 % 6)
9 + 4 % (3 % 6)
9 + (3 - (6 - 4))
9 + 3 % (6 - 4)
9 + (3 - 6 % 4)
9 + 3 % (6 % 4)
9 + (3 + (4 - 6))
9 + 3 % (4 - 6)
9 - (3 - 4 % 6)
(6 + 4) % 3 + 9
(4 + 6) % 3 + 9
4 - 6 + 3 + 9
4 % 6 - 3 + 9

? 麿にも盾はたくさんあります (住�Q隈�tなどによる嶷�}あり)
31
4 % 6 % 3 + 9
(6 + 3) % 4 + 9
(3 + 6) % 4 + 9
3 - 6 + 4 + 9
4 + 3 - 6 + 9
(4 + 3) % 6 + 9
(4 - 3) % 6 + 9
4 % 3 % 6 + 9
3 + 4 - 6 + 9
(3 + 4) % 6 + 9
4 - (6 - 3) + 9
4 % (6 - 3) + 9
4 + (3 - 6) + 9
4 % (3 - 6) + 9
4 - 3 % 6 + 9
4 % (3 % 6) + 9
3 - (6 - 4) + 9
3 % (6 - 4) + 9
3 - 6 % 4 + 9
3 % (6 % 4) + 9
3 + (4 - 6) + 9
3 % (4 - 6) + 9
(6 + 4) % (9 + 3)
(6 + 4) % (9 * 3)
6 + 4 + 9 % 3
6 + 4 - 9 % 3
(6 + 4) % (3 + 9)
(6 + 4) % (3 * 9)
(4 + 6) % (9 + 3)
(4 + 6) % (9 * 3)
4 + 6 + 9 % 3
4 + 6 - 9 % 3
(4 + 6) % (3 + 9)
(4 + 6) % (3 * 9)
4 - 6 + (9 + 3)
4 - 6 + (3 + 9)
4 % 6 + (9 - 3)
4 % 6 - (3 - 9)
6 + 3 + 9 % 4
6 / 3 * (9 - 4)
3 + 6 + 9 % 4
3 - 6 + (9 + 4)
3 - 6 + (4 + 9)
6 + (9 % 4 + 3)
6 + (9 % 3 + 4)
6 - (9 % 3 - 4)
6 + 4 % (9 + 3)
6 + 4 % (9 - 3)
6 + 4 % (9 * 3)
6 + (4 + 9 % 3)
6 + (4 - 9 % 3)
6 + 4 % (3 + 9)
6 + 4 % (3 - 9)
6 + 4 % (3 * 9)
6 + (3 + 9 % 4)
4 + 3 + (9 - 6)
4 + 3 + 9 % 6
4 + 3 - (6 - 9)
3 + 4 + (9 - 6)
3 + 4 + 9 % 6
3 + 4 - (6 - 9)
4 + (9 - 6 + 3)
4 + (9 % 6 + 3)
4 - (6 - 9 - 3)
4 + (9 + 3 - 6)
4 + (9 % 3 + 6)
4 - (9 % 3 - 6)
4 + (3 + 9 - 6)
4 + (9 - (6 - 3))
4 + (9 + (3 - 6))
4 + (9 - 3 % 6)
4 - (6 - 3 - 9)
4 + (3 - 6 + 9)
4 - (3 % 6 - 9)
4 - (6 - (9 + 3))
4 + 6 % (9 + 3)
4 + 6 % (9 * 3)
4 + (6 + 9 % 3)
4 + (6 - 9 % 3)
4 - (6 - (3 + 9))
4 + 6 % (3 + 9)
4 + 6 % (3 * 9)
4 + (3 + (9 - 6))
4 + (3 + 9 % 6)
4 + (3 - (6 - 9))
3 + (9 - 6 + 4)
3 + (9 % 6 + 4)
3 - (6 - 9 - 4)
3 + (9 + 4 - 6)
3 + (9 % 4 + 6)
3 + (4 + 9 - 6)
3 + (9 - (6 - 4))
3 + (9 - 6 % 4)
3 + (9 + (4 - 6))
3 - (6 - 4 - 9)
3 - (6 % 4 - 9)
3 + (4 - 6 + 9)
3 - (6 - (9 + 4))
3 + (6 + 9 % 4)
3 - (6 - (4 + 9))
3 + (4 + (9 - 6))
3 + (4 + 9 % 6)
3 + (4 - (6 - 9))

32
? 膨�t處麻
- 匯何の處麻徨は仝a = a [處麻徨] b々を福待して
仝a [處麻徨]= b々と��韻泙�
?箭) a = a * 4; ? a *= 4; (aを4蔚する)
main.js
let a = 31;
a += 15;
console.log(a);

withJavaScript コメント
33
? コメント
- コメントは廣�であり, プログラムとして�g佩されません
- 仝//々參週のその佩の猟忖はコメントとなります
- 仝/*々と仝*/々で�譴泙譴寝新屬魯灰瓮鵐箸箸覆蠅泙�
- atomでは, コメント晒したい佩を�x�kし, Ctrl + / を兀せば
コメント晒(コメントアウト)できます
main.js
/* コメ
ント */
let a = 10; // コメント
// a *= 3;
console.log(a);

withJavaScript �v方
? �v方
- 匯�Bの返�Aきをまとめたものを�v方といいます
- (��1, ��2, ´, ��n) => { �I尖 }
- �v方に局されるものを哈方といいます
34
(匯�)�g哈方(argument)といいます
main.js
// 及匯哈方と及屈哈方の才をコンソ�`ルに竃薦する
let printSum = (a, b) => {
console.log(a + b);
};
// 15 + 21 を竃薦する (36が竃薦される)
printSum(15, 21);
(匯�)��(parameter)
といいます

withJavaScript
main.js
�v方
? �v方
- (��1, ��2, ´, ��n) => { �I尖 }
- �v方は return 猟により�､魴気垢海箸�任�,
卦される�､� ��, 卦り��, 卦抜�� などと柵びます
35
// 及匯哈方と及屈哈方の�eを卦抜する
let mul = (a, b) => {
return a * b;
};
// 6 * 5 を竃薦 (30が竃薦される)
console.log( mul(6, 5) );

withJavaScript コンソ�`ルからの�g佩
? コンソ�`ルからも JavaScript を�g佩できます
36

withJavaScript 處�
1. a, b を鞭け函って, a �C b を卦す�v方 sub を��い討澆泙靴腓�
- 哈方は a, b の2つ
2. aを鞭け函って, aを2蔚した�� を卦す�v方
double を��い討澆泙靴腓�
- 哈方は a の1つ
3. xを鞭け函ってx3を�麻する�v方 cube を��い討澆泙靴腓�
- 哈方は x の1つ
37

1. a, b を鞭け函って, a �C b を卦す�v方 sub を��い討澆泙靴腓�
1. aを鞭け函って, aを2蔚した�� を卦す�v方
double を��い討澆泙靴腓�
- 2a と��覆い茲Δ砲靴泙靴腓�
38
main.js
let double = (a) => {
return 2 * a;
};
main.js
let sub = (a, b) => {
return a - b;
};

3. xを鞭け函ってx3を�麻する�v方 cube を��い討澆泙靴腓�
- x^3 と��覆い茲Δ砲靴泙靴腓�
39
main.js
let cube = (x) => {
return x * x * x;
};

withJavaScript 猟忖双
? 猟忖双
- 猟忖双は "猟忖双" (ダブルクォ�`テ�`ション)
または｀猟忖双¨ (シングルクォ�`テ�`ション)
または `猟忖双` (バッククォ�`ト) で�譴�
?箭) let str = "kmc";
- 仝+々處麻徨で猟忖双を�B�Yできる
40
main.js
let str1 = "to";
let str2 = "kyoto";
let str3 = str1 + str2;
console.log(str3); // tokyoto と燕幣

withJavaScript
main.js
オブジェクト
? オブジェクト
- オブジェクトは燕のようなものです
- { key1: value1, key2: value2, ´, keyn: valuen }
- obj.key または obj["key"] でアクセスできます
41
let human = {
name: "drafear",
age: 21
};
console.log(human.name); // drafear
console.log(human["age"]); // 21

withJavaScript
main.js
オブジェクト
? オブジェクト
- { key1: value1, key2: value2, ´, keyn: valuen }
- obj.key または obj["key"] でアクセス
42
let human = {
name: "drafear",
age: 21,
skillLevel: {
js: 0,
"c++": 1,
},
talk: () => {
console.log("Hello!");
}
};
console.log(human.skillLevel.js); // 0
console.log(human.skillLevel["c++"]); // 1
human.talk(); // Hello!
console.log(human); // Object { name: ... }

withJavaScript
main.js
オブジェクト
? console.log の��夛
- 寄悶こんなかんじ
43
let console = {
log: (...) => { ... }
};

? 坪�eを箔める�v方 dot を恬って和さい
44
main.js
let a = { x: 4, y: 3 };
let b = { x: -10, y: 5 };
let result = dot(a, b);
console.log(result); // -25

? 坪�eを箔める�v方 dot を恬って和さい
45
main.js
let dot = (v1, v2) => {
return v1.x * v2.x + v1.y * v2.y;
};
let a = { x: 4, y: 3 };
let b = { x: -10, y: 5 };
let result = dot(a, b);
console.log(result); // -25

withJavaScript C＄＄kie Clicker恬っていきましょ�`
46

withJavaScript Start HTML
? というわけでHTMLを乾っていきます
47

withJavaScript 蛍護�
? 嘔クリック ★ [Split Down] で屈蛍護して
貧に index.html, 和に main.js を�iみ�zみましょう
48

withJavaScript Hello, World
49
? main.js を畠�肇して, index.htmlの仝坪否々を
仝Hello, World!!々に��Qえてみましょう

withJavaScript Hello, World
? Chromeで�_くと, "Hello, World!!" と燕幣されました��
? めでたい��１１１１１
50

withJavaScript
index.html
Hello, Worldを廾�しよう
? Hello, World!! を<h1>゛</h1>で�譴爐函�!?
51
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>タイトル</title>
</head>
<body>
<h1>Hello, World!!</h1>
<script src=/Drafaer/kmc-javascript2016/"main.js"></script>
</body>
</html>

withJavaScript Hello, Worldを廾�しよう
? でかくなった��
? <***> をタグといいます
- <***>: �_兵タグ
- </***>: �K阻タグ(�]じタグ)
? <h1> をh1タグと柵びます
- <h1>: �_兵タグ
- </h1>: �K阻タグ(�]じタグ)
52

withJavaScript Hello, Worldを廾�しよう
? <タグ兆>坪否</タグ兆>
- タグと坪否で1つのHTML勣殆となります
? 勣殆には吭龍があり, h1タグは�竃しを吭龍します
- h2, h3, ´, h6 もあります
53

withJavaScript 鮫�を�Nってみよう
? C＄＄kieとなるものを宙きましょう
- 宙けたら image というディレクトリを恬って
その嶄に cookie.png で隠贋しましょう
54
＆ root
�＆ image
�� cookie.png
� index.html
� main.js
� style.css

? <img src=/Drafaer/kmc-javascript2016/"鮫�ファイルへのパス" alt="旗紋テキスト">
- srcで峺協した鮫�を燕幣します
- 鮫�が�つからなかった��牢桄罐謄⑤好箸魃輅召靴泙�
- 旗紋テキストの峺協は駅�です
- �]じタグは音勣です
55
index.html
...
<body>
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie">
<script src=/Drafaer/kmc-javascript2016/"main.js"></script>
</body>
...

withJavaScript やったぜ。
56

? 奉來
- <img src=/Drafaer/kmc-javascript2016/"´">のsrcは奉來といいます
- <タグ兆奉來1="奉來��1" 奉來2="奉來��2">坪否</a>
- 峺協できる奉來はタグごとに�Qまっています
? パス
- srcに峺協する枠は、�~��パスまたは��パスで��④泙�
- �~��パスとは、https://www.google.co.jp/ のような、
�~��議なものを峺します
- ��パスとは、書のディレクトリから��議に峺協する圭隈です
57

withJavaScript ��パス
＆ root
�＆ a
�� b
�� c
�＆ d
�� e
� f
58
1. ファイルbからファイルcを峺協 ./c または c
2. ファイルfからファイルbを峺協 a/b
3. ファイルbからファイルfを峺協 ../f
4. ファイルbからファイルeを峺協 ../d/e
5. ファイルbからファイルcを峺協 ./.././a/../a/./c
☆＆はディレクトリです
? 仝 . 々は徭蛍徭附のディレクトリ
? 仝 .. 々は�Hディレクトリ
? パスは仝ディレクトリ1/´/ディレクトリn/ファイル兆々で燕す
Point

withJavaScript 方を燕幣しよう
? imgタグの瘁に～0 を秘れましょう
59
index.html
...
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie">～0
...

withJavaScript ポインタ�`も恬ろう
? 揖��にポインタ�`も宙きましょう
- 宙き岷せよ
60
＆ root
�＆ image
�� pointer.png
�� cookie.png
� index.html
� main.js
� style.css

withJavaScript ぽいんた�`も�Nるぜ
? bodyの嶄を肝のように�筝釮靴泙�
- </body>念の<script ...></script>は火しておいて和さい
? div勣殆は��奪灰鵐謄覆�, とりあえずは
岷瘁に個佩される腎のタグだと深えてもらえたらおｋです
61
index.html
<div>
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie">～0
</div>
<div>
<img src="image/pointer.png" alt="Pointer">～1
</div>

withJavaScript ぽいんた�`も�Nるぜ
? それっぽくなってきた
62

withJavaScript 傚��
? 貧返く�}を宙けるようになりたい繁は
頁掲、輿袗晩の仝お�}かき��プロジェクト2016々に
ご歌紗和さい��
- お念が歌紗しろよ
63

withJavaScript クリックイベント
? クッキ�`をクリックしたらalertが竃るようにします
? まず, クッキ�`の勣殆をJavaScriptからアクセスしやすいように
id奉來を尅ってやります
64
index.html
<div>
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie" id="cookie">～0
</div>
<div>
<img src="image/pointer.png" alt="Pointer">～1
</div>

withJavaScript
main.js
Event
? main.js をいじっていきます
- document.getElementById("勣殆id")
?idが匯崑する勣殆を卦します
- elem.addEventListener("event兆", (e) => { �I尖 });
?勣殆elemが [event兆] された�r {�I尖} を�g佩します
?event兆は click や keydown や mouseover など弼？あります
?e には恣クリックされたか嘔クリックされたかなどの秤�鵑�襪蠅泙�
65
let elemCookie = document.getElementById("cookie");
elemCookie.addEventListener("click", (e) => {
alert("clicked!!");
});

withJavaScript
main.js
Event
? 匯佩で��海箸發任④泙�
66
document.getElementById("cookie").addEventListener("click", (e) => {
alert("clicked!!");
});

withJavaScript Event
1. "click" を "mouseover" に�笋┐討澆茲�
- 勣殆にマウスを嶷ねるとイベントが�k伏
2. "click" を "dragstart" に�笋┐討澆茲�
- 勣殆をドラッグし兵めるとイベントが�k伏
3. "click" を "dblclick" に�笋┐討澆茲�
- 勣殆をダブルクリックするとイベントが�k伏
67

withJavaScript クッキ�`を��く�
? 坪何議にクッキ�`の方とポインタ�`の方を隔つようにして
クッキ�`がクリックされた�rにポインタ�`の方だけクッキ�`が
��えるようにします
68
main.js
let cookieAmount = 0; // クッキ�`侭隔方
let pointerAmount = 1; // ポインタ�`侭隔方
let bake = () => { // クッキ�`を��く
};
bake();
});
fill in here

withJavaScript クッキ�`を��く�
? 坪何議にクッキ�`の方とポインタ�`の方を隔つようにして
クッキ�`がクリックされた�rにポインタ�`の方だけクッキ�`が
��えるようにします
69
main.js
let bake = () => { // クッキ�`を��く
cookieAmount += pointerAmount;
};
bake();
});

withJavaScript 郡啌させる
? これではHTMLに(鮫中に)郡啌されないので
郡啌させられるようにします
- span勣殆は岷瘁に個佩されない��奪灰鵐謄覆世反爾┐討�い届造気�
- idを�篳�獷藩�犬砲靴討い泙垢�, 揖じにする駅勣はありません
70
index.html
<div>
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie" id="cookie">
～<span id="cookieAmount">0</span>
</div>
<div>
<img src="image/pointer.png" alt="Pointer">
～<span id="pointerAmount">1</span>
</div>

withJavaScript 郡啌させる
? これでおｋ
- 勣殆の textContent を的ればタグで�譴泙譴訊佗蹐離謄⑤好箸�笋錣�
71
let bake = () => { // クッキ�`を��く
cookieAmount += pointerAmount;
update();
};
let update = () => { // �篳��､鮖㍍罎坊貫海垢�
document.getElementById("cookieAmount").textContent = cookieAmount;
document.getElementById("pointerAmount").textContent = pointerAmount;
};
bake();
});
main.js

withJavaScript ��けた�
? ��けた��
72

withJavaScript
index.html
ぽいんた�`�Iいたい
? ポインタ�`を�Iえるようにします�
73
<div>
<img src=/Drafaer/kmc-javascript2016/"image/cookie.png" alt="Cookie" id="cookie">
～<span id="cookieAmount">0</span>
</div>
<div>
<img src="image/pointer.png" alt="Pointer">
～<span id="pointerAmount">1</span>
<button id="btnBuyPointer">�秘 (50 Cookie)</button>
</div>

withJavaScript
main.js(壅��)
訳周蛍瓷
? if (訳周) { �I尖 }
- 訳周が撹羨した�rのみ�I尖を佩う
- 肝指�しくやります
74
/* ポインタ�`を1��50クッキ�`で�Iう */
let buy = () => {
if (cookieAmount >= 50) { // クッキ�`を50��參貧隔っているか
cookieAmount -= 50;
pointerAmount += 1;
update(); // ポインタ�`とクッキ�`の侭隔方を鮫中に郡啌
}
};
document.getElementById("btnBuyPointer").addEventListener("click", (e) => {
buy();
});

withJavaScript 頼撹�
75

withJavaScript
main.js
おまけ
? �ｶ�筝�rに3ヶ侭もいじらないといけないのは
つらいのでまとめます
76
let pointerPrice = 50;
let buy = () => {
if (cookieAmount >= pointerPrice) { // まとめる
cookieAmount -= pointerPrice; // まとめる
pointerAmount += 1;
update();
}
};
document.getElementById("btnBuyPointer").textContent =
`�秘 (${pointerPrice} Cookie)`; // まとめる(�秘ボタンのテキスト)
document.getElementById("btnBuyPointer").addEventListener("click", (e) => {
buy();
});

withJavaScript
main.js
おまけ
? テンプレ�`ト猟忖双
- 猟忖双嶄に��gに�篳��､鯊颪痾zめる
- バッククオ�`ト ` ` で�譴鵑昔鍔崛儘个�${´}の何蛍を,
{ }坪のコ�`ドを�g佩した�Y惚で崔き�Qえる
- �g佩して�Y惚を誼ることを�u��垢襪箸い�
77
let a = 10;
let b = 5;
console.log(`${a} + ${b} = ${a + b}`); // 10 + 5 = 15
console.log("${a} + ${b} = ${a + b}"); // ${a} + ${b} = ${a + b}

withJavaScript 書瘁の嚠協
? 5/15(晩) 13:00 ゛ 16:00
- CSSでデザインする
- じゃんけんを恬る
? 5/22(晩) 13:00 ゛ 16:00
- JavaScriptの児�Aをマスタ�`する
- CSSでレイアウトを僥ぶ
- ゴリラを宜すゲ�`ムを恬る
? 5/29(晩) 13:00 ゛ 16:00
- 畽�指
- atomの宴旋なプラグイン�B初 78

際際滷

KMC JavaScriptから兵めるプログラミング2016 及匯指

More Related Content

KMC JavaScriptから兵めるプログラミング2016 及匯指