端端舝

IntroductiontoProgramming
with
JavaScript
JavaScript井日宎戶月
皿伕弘仿立件弘2016
儔飲湮悝馱悝窒ロ�悝褪
�呾辻褪悝戊奈旦3隙
KMC2隙 drafear
菴3隙

withJavaScript 赻撩畿賡
? id
- drafear(升日孔不丐, 升日孔丑奈)
? 垀扽
- 儔飲湮悝馱悝窒ロ�悝褪 �呾辻褪悝戊奈旦 3隙
? 𧘇庤
- 必奈丞(杻卞由朮伙必奈), 示玉必, 示市伕, twitter
? 統樓皿伕斥尼弁玄
- 仇木, �皿伕, ctf, 皺挸及C++, coq, 瞎心磁歹六郔羥趙掂𤩸頗
↗ヤ: 陔⻌汜皿伕斥尼弁玄
@drafear
2@drafear_ku @drafear_carryok @drafear_evolve @drafear_sl @gekimon_1d1a @cuigames

withJavaScript
? 悝窒悝褪
? id (⻌窒仄化凶日) or 靡ゴ
? 𧘇庤
? 疑五卅琌膽(忨𦲀)
赻撩畿賡
1. KMC 2隙汜
2. 陔⻌汜
3. KMC 3隙汜
4. KMC 4隙汜
5. KMC n隙汜
3

withJavaScript 仇及琌釱匹妏蚚允月皮仿它扒午巨犯奴正
? Google Chrome
- https://chrome.google.com
? Atom
- https://atom.io/
4

withJavaScript 踏゜及醴㻢
? JavaScript及價掛腔�恅毛穴旦正奈允月
? CSS匹疑五卅伊奶失它玄毛瞎戶月方丹卞卅月
5

withJavaScript 掛゜及囀⺍
? JavaScript
- 劐杅及旦戊奈皿
- 婬䔝
- 奶件弁伉丟件玄, 犯弁伉丟件玄 (++i, i++, --i, i--)
- 靜曰殿仄恅(剠癹伙奈皿, while恅, for恅, continue, break)
- 饜蹈
- elem.getElementsByTagName, elem.getElementsByClassName
- elem.querySelector, elem.querySelectorAll
- elem.children, elem.parentElement
- elem.dataset
6

withJavaScript 掛゜及囀⺍
? CSS
- 本伊弁正
- 奶件仿奶件示永弁旦午皮伕永弁示永弁旦
- flexbox
? HTML
- article, section (切斤勻午畿賡允月分仃)
- ul, li
7

withJavaScript 踏゜釬月手及
? 打伉仿毛給允必奈丞
- http://drafear.ie-t.net/js2016/gorilla/
8

withJavaScript 反元戶卞
? 踏隙反刓�匹允
? 踏隙毛�\曰埣尹木壬
- 棒隙眕蔥反㜭匹允
- JavaScript井日宎戶月皿伕弘仿立件弘反9賃皺歹曰
摽反JavaScript毛婡戶化中仇丹
? �\曰埣尹日木卅仁化手
- (2隙卞傾勻化燴賤仄化中凶分仁凶戶卞)
棒隙覧�隙毛偞仃化云曰引允及匹, ��湮桾痲匹允ㄐ
9

withJavaScript 化氏尤木
? 眕狟井日褰倛卅升毛母它件伕奈玉仄化仁分今中
- https://github.com/kmc-jp/js2016
10

withJavaScript 覧�
? 菴ㄡ隙及旦仿奶玉毛�化覧�仄化中五引允
12

withJavaScript 劐杅及旦戊奈皿
14
let a = 10;
let func = () => {
let b = 6;
if (a === 10) {
let c = 5;
let a = 5;
console.log(b); // 6
console.log(a); // 5
a = 30;
}
console.log(c); // error
};
func();
console.log(b); // error
main.js
? 旦戊奈皿 = �尹月��

15
let a = 10;
let func = () => {
let b = 6;
if (a === 10) {
let c = 5;
let a = 5;
a = 30;
}
};
func();
main.js

? let 午隅膽今木凶俴方曰手狟匹,
肮元 {} 囀手仄仁反公木方曰手 {} 互旮中午仇欠井日
公及劐杅毛掂戶引允
? 肮元靡ゴ及劐杅互恚杅丐木壬, {} 及旮今互輪中午仇欠�珂
? 珨楓俋卞隅膽今木凶劐杅毛弘伕奈田伙劐杅午中中引允
? 公木眕俋及劐杅毛伕奈市伙劐杅午中中引允
16

17
let a = 10; // 弘伕奈田伙劐杅
let func = () => {
let b = 6;
if (a === 10) {
let c = 5;
let a = 5;
a = 30;
}
};
func();
main.js

withJavaScript
main.js
婬䔝
? 赻煦及憝杅囀匹赻煦赻旯毛網少仇午毛婬䔝午中中引允
18
// n及蕆�\ n! 毛А戶月
let fact = (n) => {
if (n === 0) {
return 1;
}
return n * fact(n-1);
};
console.log( fact(3) ); // 6
console.log( fact(10) ); // 3628800

withJavaScript 栳�
? Math.pow毛妏歹內卞 ? ?
毛�呾允月憝杅 power 毛
釬勻化心方丹
- ? ≡ 1, ? ≡ 0
- ??? ????? = ?, ? => ＃
? 媆嶲互豻勻凶源反 power 憝杅及詢厒趙毛蕉尹化心方丹
19
栳�

? ? =
1 ? = 0
? ? ? ??1
(? ≡ 1)
20
栳�
let power = (x, n) => { // ? ?
毛�呾允月
if (n === 0) return 1;
return power(x, n-1) * x;
};
main.js
�呾隙杅: ?隙最僅

? ?
=
1 ? = 0
? ? ? ??1 (?: ???)
? ?/2 2
(?: ????)
21
栳�
let square = (x) => { // ?2
毛�呾允月
return x * x;
};
let power = (x, n) => { // ? ? 毛�呾允月
if (n === 0) return 1;
if (n % 2 === 1) return x * power(x, n-1);
return square( power(x, n/2) );
};
main.js
�呾隙杅: log2 ? 隙最僅

withJavaScript 剠癹伙奈皿午break
? while (true) { �I燴; }
- �I燴毛蚗罫卞靜曰殿允
? break
- �I燴毛笢剿仄, while (true) {} 毛㠙仃月
22
// n! 毛�呾允月
let fact = (n) => {
let res = 1;
while (true) {
if (n === 0) break;
res *= n;
--n; // n -= 1; 午脹�
}
return res;
};
瞰
> fact(3)
6
> fact(0)
1
> fact(10)
3628800
瞰及�釬瞰

withJavaScript 奶件弁伉丟件玄, 犯弁伉丟件玄
? 奶件弁伉丟件玄
++a 引凶反 a++
a += 1 午幻廿脹�
? 犯弁伉丟件玄
--a 引凶反 a--
a -= 1 午幻廿脹�
23

withJavaScript while恅
? while (沭璃宒) { �I燴; }
- 棒午脹�
- 沭璃宒互淩(true) 匹丐月嶲 (珨窣及)�I燴毛靜曰殿允
- �I燴及芴笢匹沭璃宒互 �(false) 卞卅勻化手芴笢匹反㠙仃卅中
24
while (true) {
if ( !(沭璃宒) ) break;
�I燴;
}

withJavaScript while恅
? 瞰
25
// n! 毛�呾允月
let fact = (n) => {
let res = 1;
while (n > 0) {
res *= n;
--n; // n -= 1; 午脹�
}
return res;
};
main.js
> fact(3)
6
> fact(0)
1
> fact(10)
3628800
瞰及�釬瞰

withJavaScript continue
? while恅及 } 及忒ゴ引匹�I燴毛旦平永皿允月
? 孔勾丹, if恅午珨髯卞妏丹
- 棒及2勾反脹�
26
while (沭璃宒1) {
�I燴1;
if (沭璃宒2) continue;
�I燴2;
}
while (沭璃宒1) {
�I燴1;
if ( !(沭璃宒2) ) {
�I燴2;
}
}

? 2匹賃木月分仃賃勻凶�毛殿允憝杅 toOdd 毛
灍蚾仄化心引仄斤丹
- ??? ????? = ? => ＃
- 婬䔝匹反卅仁while恅毛蚚中化灍蚾仄化心方丹
27
栳�
> toOdd(8)
1
> toOdd(20)
5
> toOdd(7)
7
瞰及�釬瞰

? 2匹賃木月分仃賃勻凶�毛殿允憝杅 toOdd 毛
灍蚾仄化心引仄斤丹
28
栳�
// 2匹賃木月分仃賃勻凶�毛殿允
let toOdd = (n) => {
while (n % 2 === 0) {
n /= 2;
}
return n;
};
main.js

withJavaScript do ＃ while恅
? do { �I燴; } while (沭璃宒);
- 棒午脹� (�I燴卞continue毛漪引卅中�磁)
- 場隙反沭璃宒及淩�卞憝歹日內灍俴允月while恅
- 丐引曰妏歹卅中及匹仇氏卅及丐勻凶卅奈仁日中匹云�
- (癶籵及while恅手踏及午仇欠反
仇氏卅及丐勻凶卅奈仁日中卞卅月午佷中引允互w)
29
while (true) {
�I燴;
if ( !(沭璃宒) ) break;
}

withJavaScript for恅
? for (場ヽ趙�I燴; 輥適沭璃; 旦氾永皿�I燴) { �I燴; }
- 棒午脹� (�I燴卞continue毛漪引卅中�磁)
30
場ヽ趙�I燴;
while (輥適沭璃) {
�I燴;
旦氾永皿�I燴;
}
1. 場ヽ趙�I燴毛俴丹
2. 輥適沭璃互�卅日皺賸
3. �I燴毛俴丹
break 互灍俴今木凶�磁反�I燴毛笢剿仄, 皺賸
continue 互灍俴今木凶�磁反�I燴毛笢剿仄, 4 卞痄月
4. 旦氾永皿�I燴毛俴丹
5. 2卞𥽋月

? 凶中化中, 棒及倛匹妏歹木月
- i 毛 0 井日 n-1 引匹引歹允 (跪i 卞�允月�I燴毛俴丹)
- i 卞方日卅中�I燴毛 n隙灍俴允月仇午手丐月
31
for (let i = 0; i < n; ++i) {
�I燴;
}

? 瞰(3及捷杅毛�卞10�堤薯)
32
for (let i = 1; i <= 10; ++i) {
console.log(3*i);
}
main.js

? 瞰(嬝嬝)
33
for (let i = 1; i <= 9; ++i) {
for (let j = 1; j <= 9; ++j) {
console.log(`${i} ℅ ${j} ˊ ${i*j}`);
}
}
main.js

withJavaScript 饜蹈
? 恚杅及犯奈正毛㜳尹月手及
34
let ary = [1, 1, 4, 5, 1, 4];
console.log(ary[0]); // 1
console.log(ary); // [1, 1, 4, 5, 1, 4]
main.js

withJavaScript 饜蹈
? �及掂心堤仄(統桽)
? �及𤩸五𡥼尹(測⻌)
? 猁匼杅
35
let ary = [1, 1];
ary[1] = 5;
console.log(ary.length); // 2
console.log(ary); // [1, 5]
ary[2] = 10;
console.log(ary.length); // 3
console.log(ary); // [1, 5, 10]
main.js
ary[i]
ary[i] = hoge
ary.length

withJavaScript 饜蹈午for
? 瞰
36
// 饜蹈及跪猁匼及睿毛�呾允月
let calcSum = (ary) => {
let res = 0;
for (let i = 0; i < ary.length; ++i) {
res += ary[i];
}
return res;
};
main.js
> calcSum([10, 20, 3])
33
> calcSum([])
0
瞰及�釬瞰

withJavaScript 升丹匹手謎中�
for (let i = 0; i < ary.length; ++i)
vs
for (let i = 0; i < ary.length; i++)
37
? ++i 及源互昺反詢厒分勻凶
? i++ 勻化𤩸仁�互嗣中日仄中﹝卅氏匹支﹝
? i++) 及源互 shift平奈毛市民乓市民乓仄卅仁化𦤦戈井日井ㄐˋ
? 佌反 ++i 勻化𤩸仁橾漲
? hoge += fuga 及覜�匹劐杅靡𤩸中化井日 ++ 𤩸五凶中及井卅

? 饜蹈及笢及郔苤�毛А戶月憝杅 minElement 毛釬勻化心方丹
- ??? ?????????? = ??? => ＃
- 瞰) minElement([10, 50, 30, 8, 9]) ↙ 8
38
栳�

? 饜蹈及笢及郔苤�毛А戶月憝杅 minElement 毛釬勻化心方丹
39
栳�
let minElement = (ary) => {
let res = ary[0];
for (let i = 1; i < ary.length; ++i) {
res = Math.min(res, ary[i]);
}
return res;
};
main.js

withJavaScript 本伊弁正及價渙
? .弁仿旦靡 { ＃ } 午𤩸中化五引仄凶互 .弁仿旦靡眕俋卞手
硌隅及帊源(本伊弁正)反中仁勾井丐曰引允
- id匹硌隅允月
?#id { ＃ }
- 正弘匹硌隅允月
?tag { ＃ }
41
index.html
<div class="class1">A</div>
<div id="id1">B</div>
<div>C</div>
style.css
div { border: 3px solid black; }
.class1 { background-color: red; }
#id1 { background-color: green; }

? 本伊弁正1 > 本伊弁正2
- 本伊弁正1及赽匹本伊弁正2卞穴永民允月手及
- 赽午反公及猁匼及眻狟及猁匼
42
index.html
style.css
.class1 > div {
border: 10px solid red;
}
<div class="class1">
<div>
<div>a</div>
<div>b</div>
</div>
<div>c</div>
</div>

? 本伊弁正1 > 本伊弁正2
- 本伊弁正1及赽匹本伊弁正2卞穴永民允月手及
- 赽午反公及猁匼及眻狟及猁匼
43
index.html
style.css
.class1 > div > div {
}
<div>
<div>a</div>
<div>b</div>
</div>
<div>c</div>
</div>

? 本伊弁正1 本伊弁正2
- 本伊弁正1及赽辧匹本伊弁正2卞穴永民允月手及
- 赽辧午反赽引凶反赽辧及赽 (赽, 赽及赽, 赽及赽及赽, ＃)
44
index.html
style.css
.class1 div {
}
<div>
<div>a</div>
<div>b</div>
</div>
<div>c</div>
</div>

? id支class靡匹載卅月沭璃毛偞隅仄化篇曰煋戈
45
index.html
style.css
.select > div {
width: 40px; height: 20px;
border: 1px solid black;
margin: 10px;
}
.select > div.selected {
background-color: rgb(200, 220, 255);
}
<div class="select">
<div>elem1</div>
<div class="selected">elem2</div>
<div>elem3</div>
<div>elem4</div>
</div>

? 本伊弁正1 + 本伊弁正2
- 眻摽及倗萊
46
index.html
style.css
div {
margin: 10px;
}
div + div {
}
<div>elem1</div>
<div>elem2</div>
<p>幻仆</p>
<div>elem3</div>
<div>elem4</div>
<div>elem5</div>

? 本伊弁正1 ~ 本伊弁正2
- 公木眕蔥及倗萊
47
index.html
style.css
div {
margin: 10px;
}
div ~ div {
}
<div>elem1</div>
<div>elem2</div>
<p>幻仆</p>
<div>elem3</div>
<div>elem4</div>
<div>elem5</div>

? 本伊弁正1 ~ 本伊弁正2
- 公木眕蔥及倗萊
48
index.html
style.css
h1 ~ h1 {
margin-top: 50px;
}
<h1>�堤仄1</h1>
<p>囀⺍1</p>
<h1>�堤仄2</h1>
<p>囀⺍2</p>
<h1>�堤仄3</h1>
<p>囀⺍3</p>
<h1>�堤仄4</h1>
<p>囀⺍4</p>
<h1>�堤仄5</h1>
<p>囀⺍5</p>

? 引午戶
- #id, .className, tagName
- 本伊弁正1 本伊弁正2
?赽辧
- 本伊弁正1 > 本伊弁正2
?赽(眻狟)
- 本伊弁正1 + 本伊弁正2
?眻摽及倗萊
- 本伊弁正1 ~ 本伊弁正2
?公木眕蔥及倗萊
- 本伊弁正.className, 本伊弁正#id
?載卅月篇曰煋心
49

withJavaScript 示永弁旦
? 皮伕永弁示永弁旦
- 猁匼及眻摽卞蜊俴互⻌曰引允
- width, height, margin, padding 及硌隅互匹五引允
- 筵盟毛硌隅仄卅仃木壬笒猁匼及100%午卅曰引允
50
https://nulab-inc.com/ja/blog/nulab/css-
basics-for-engineer-boxmodel/

? 奶件仿奶件示永弁旦
- 恅梒及珨窒及方丹卞孔月引中, 筵卞�K太引允
- width, height 及硌隅互匹五引六氏
- margin 反酘衵源砃卞仄井硌隅匹五引六氏
- padding 反ヽ渾籵曰卞�五引六氏
51
https://nulab-inc.com/ja/blog/nulab/css-
basics-for-engineer-boxmodel/

? 硌隅
- CSS 及 display 皿伕由氾奴匹硌隅匹五,
inline 引凶反 block 午硌隅仄引允
52

? span 正弘反 display 及場ヽ�互 inline 匹允
? div 正弘反 display 及場ヽ�互 block 匹允
53
index.html
<span class="class1">A</span>
<span class="class1">B</span>
<span class="class1">C</span>
style.css
.class1 {
background-color: green;
}

54
index.html
<div class="class1">B</div>
<div class="class1">C</div>
style.css
.class1 {
}

55
index.html
<div class="class1">B</div>
<div class="class1">C</div>
style.css
.class1 {
display: inline;
}

? 奶件仿奶件示永弁旦午皮伕永弁示永弁旦及綃中
- 奻午狟互奶件仿奶件, 淩氏笢互皮伕永弁匹允
- 猁反, inline 反�g卞�戈分仃, block 反墿源倛薆郖毛汜傖允月
56
https://blog.codecamp.jp/block_inline

withJavaScript flexbox
? 祫詢及伊奶失它玄汁奈伙 flexbox 岸div互筵卞�K氏匹中月ㄐˋ
57
<div class="flex-container">
<div>猁匼1</div>
<div>猁匼2</div>
<div>猁匼3</div>
</div>
index.html
.flex-container {
width: 400px;
border: 1px solid blue;
display: flex;
}
.flex-container > div {
width: 80px;
height: 100px;
}
style.css

? 祫詢及伊奶失它玄汁奈伙 flexbox
- 仇氏卅覜元匹偞隅仄化中五引允
58
.flex-container {
width: 400px;
display: flex;
flex-direction: column;
}
style.css
奻井日狟卞

? flex-direction 砃五
59
row(default) row-reverse
column column-reverse
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

? flex-wrap 殏曰殿仄
60
nowrap(default)
wrap wrap-reverse

? justify-content 翋嵞源砃及豻啞及妏中源
61
flex-start(default) flex-end
center
space-aroundspace-between

? align-content 弁伕旦嵞源砃�极午仄化及豻啞及妏中源
62
center
flex-end
stretch(default)
flex-start

? align-content 弁伕旦嵞源砃�极午仄化及豻啞及妏中源
63
space-around
space-between

? align-items 跪俴匹及弁伕旦嵞源砃及豻啞及妏中源
64
stretch(default) center
flex-start flex-end
baseline

? 棒及桶尨毛允月手及毛釬勻化心方丹
65
栳�

66
栳�
<div class="top">
<div>猁匼1</div>
<div>猁匼2</div>
<div>猁匼3</div>
</div>
index.html
.top {
width: 140px;
height: 300px;
display: flex;
justify-content: space-around;
align-items: center;
}
.top > div {
width: 60px;
height: 40px;
background-color: red;
color: white;
}
style.css

withJavaScript 栳�(覧�)
? 正奶玄伙<h2>‵</h2>毛弁伉永弁允月午囀⺍<div>‵</div>及
桶尨準桶尨互ピ曰杸歹月方丹卞仄化心方丹
- index.html 手羥皊�摩仄化狟今中
67
<h2>正奶玄伙</h2>
<div>囀⺍</div>
index.html

withJavaScript 栳�(覧�)
? 正奶玄伙<h2>‵</h2>毛弁伉永弁允月午囀⺍<div>‵</div>及
桶尨準桶尨互ピ曰杸歹月方丹卞仄化心方丹
68
<h2 id="title">正奶玄伙</h2>
<div id="content">囀⺍</div>
index.html
document.getElementById("title").addEventListener("click", (e) => {
document.getElementById("content").classList.toggle("hide");
});
main.js
.hide {
display: none;
}
style.css

withJavaScript 珨啜趙仄方丹ㄐ
? 棒及灍蚾毛蕉尹月
- showHide 弁仿旦互偞隅今木凶猁匼及赽卞反
h2猁匼午 p猁匼互仇及�匹1勾內勾�K氏匹中月
- h2猁匼互弁伉永弁今木月午 p猁匼及桶尨/準桶尨互毀�允月
- p猁匼反 div猁匼午侔化中月互, "僇邈" 及砩庤毛厥切
犯白巧伙玄匹 margin 毛厥勾
69
<div class="showHide">
<h2>�堤仄</h2>
<p>囀⺍</p>
</div>
index.html

withJavaScript show / hide
? 午曰丐尹內 css
70
<h2>�堤仄</h2>
<p>囀⺍</p>
</div>
index.html
.showHide > h2 {
cursor: pointer;
}
.showHide > h2:hover {
text-decoration: underline;
}
.hide {
display: none;
}
style.css

? js窒煦
- document.getElementsByClassName(className)
?公及弁仿旦靡毛厥勾猁匼毛饜蹈匹腕月
- elem.querySelector(selector)
?css及本伊弁正毛傾允午, 公及猁匼眕狟匹
公及本伊弁正卞穴永民允月郔場及猁匼毛腕月
71
<h2>�堤仄</h2>
<p>囀⺍</p>
</div>
index.html
let toggleShowHide = (e) => { ... } // show/hide ピ曰杸尹
let initShowHide = () => { // 弁伉永弁奶矛件玄毛偞隅允月
let elems = document.getElementsByClassName("showHide");
for (let i = 0; i < elems.length; ++i) {
elems[i].querySelector("h2").addEventListener("click", toggleShowHide);
}
};
initShowHide();
main.js

? js窒煦
- document.getElementsByClassName(className)
?公及弁仿旦靡毛厥勾猁匼毛饜蹈匹腕月
- document.getElementsByTagName(tagName)
?硌隅仄凶正弘靡及猁匼毛饜蹈匹腕月
- elem.querySelector(selector)
公及本伊弁正卞穴永民允月郔場及猁匼毛腕月
- elem.querySelectorAll(selector)
公及本伊弁正卞穴永民允月�化及猁匼毛饜蹈匹腕月
72

? js窒煦
- elem.parentElement
?笒猁匼
- e.currentTarget
?公及奶矛件玄互偞隅今木凶猁匼
73
<h2>�堤仄</h2>
<p>囀⺍</p>
</div>
index.html
let toggleShowHide = (e) => { // show/hide ピ曰杸尹
e.currentTarget.parentElement.querySelector("p").classList.toggle("hide");
};
let initShowHide = () => { // 弁伉永弁奶矛件玄毛偞隅允月
let elems = document.getElementsByClassName("showHide");
elems[i].querySelector("h2").addEventListener("click", toggleShowHide);
}
};
initShowHide();
main.js

? js窒煦
- elem.parentElement
?笒猁匼
- elem.children
?赽猁匼 (饜蹈)
- e.currentTarget
?公及奶矛件玄互偞隅今木凶猁匼
74

? 妏蚚瞰
75
<h2>�堤仄1</h2>
<p>囀⺍1</p>
</div>
<h2>�堤仄2</h2>
<p>囀⺍2</p>
</div>
<h2>�堤仄3</h2>
<p>囀⺍3</p>
</div>
index.html

? 妏蚚瞰
- div 反砩庤毛厥凶卅中
- html猁匼卞砩庤毛厥凶六月午
web矢奈斥毛挐隙允月皿伕弘仿丞卅升互
掂心支允中
- article反公木1勾匹黃蕾仄凶戊件氾件汁
公及窒煦分仃匹1勾及戊件氾件汁午仄化
辻夔允月
- header反目永母
- section反公木1勾匹黃蕾仄凶戊件氾件汁
卞反卅日卅中互, �堤仄毛勾仃日木月
1勾及梒支�
- 瞰尨卅升�仄仁反菴鞠隙眕蔥卞支曰引允
76
<article>
<header>
<h1>�堤仄</h1>
</header>
<section class="showHide">
<h2>�堤仄1</h2>
<p>囀⺍1</p>
</section>
<h2>�堤仄2</h2>
<p>囀⺍2</p>
</section>
<h2>�堤仄3</h2>
<p>囀⺍3</p>
</section>
</article>
index.html

withJavaScript 本伊弁正及價渙(婬𡧳)
? id支class靡匹載卅月沭璃毛偞隅仄化篇曰煋戈
77
index.html
style.css
.select > div {
margin: 10px;
}
}
<div>elem1</div>
<div class="selected">elem2</div>
<div>elem3</div>
<div>elem4</div>
</div>

? 1勾分仃腢亼匹五月手及毛釬勻化心方丹
- 珨啜趙反仄卅仁化手謎中匹允
? 匹五凶源反
- 犯扒奶件仄化心方丹
- 珨啜趙仄化心方丹
- 正皮戊件玄伕奈伙毛釬勻化心方丹
78
栳�
<div class="selected">A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
index.html
.select > div:hover,
text-decoration: underline;
}
style.css

79
栳�
let select = (e) => { // e.currentTarget 毛腢亼
let clearTargets = e.currentTarget.parentNode.children;
for (let i = 0; i < clearTargets.length; ++i) {
clearTargets[i].classList.remove("selected");
}
e.currentTarget.classList.add("selected");
};
let initSelect = () => { // select場ヽ趙
let elems = document.getElementsByClassName("select");
let chs = elems[i].children;
for (let j = 0; j < chs.length; ++j) {
chs[j].addEventListener("click", select);
}
}
};
initSelect();
main.js

? ul, li
- 預沭𤩸五
?赽猁匼卞反�唗互卅仁, ⻌木杸尹化手
砩庤腔卞劐歹日卅中
- 笢旯卞反0�眕奻及 li 及心
?ul 及眻狟卞 li 眕俋毛离中化反中仃卅中
80
栳�
<ul class="select">
<li class="selected">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
index.html

? ul, li
- 犯白巧伙玄分午, 玉永玄☆?★匹桶政
今木月及匹, ☆list-style: none★卞允月
- 犯白巧伙玄分午, 玉永玄☆?★及煦padding-left 互⻌勻化中月及匹,
padding 卞 0 毛硌隅允月
- 仇木手�仄仁反棒隙眕蔥支曰引允
81
栳�
<ul class="select">
<li class="selected">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
index.html
.select {
list-style: none;
padding: 0;
}
style.css

withJavaScript 必奈丞帊�
? 醱給卅及匹皿伊奶仄化仁木
- http://drafear.ie-t.net/js2016/gorilla/
? 馴𨬢允月午��T馴𨬢仄化仁月
? 給仄凶𤚗及馴𨬢薯煦馴𨬢薯奻翝
83

withJavaScript 匼第
? 甩奈玄午�反媼棒饜票云�日仄中及匹
氾件皿伊毛母它件伕奈玉仄凶午五卞勾中化五化月反內
? 卅井勻凶日仇切日井日奈
- https://github.com/kmc-jp/js2016/
? 打伉仿卞杸歹月手及反抻仄化仁木
84

withJavaScript 犯奴伊弁玄伉�婖
.
念岸岸 image
岫念岸岸 enemy.png
岫念岸岸 heart.png
岫弩岸岸 sword.png
念岸岸 index.html
念岸岸 main.js
弩岸岸 style.css
85

withJavaScript HTML�婖
86
div

withJavaScript 掖劓脹
87
body {
margin: 0;
background-color: #fdd;
}
style.css
body卞反啋〝margin互丐勻化
訄藹卅及匹秏仄化仄引云丹

withJavaScript 皿伊奶乩奈窒煦
88
div
<div class="player">
<div class="hp">
<img src=/slideshow/3-javascript2016/62274728/"image/heart.png" alt="hp">
<span></span>
</div>
<div class="atk">
<img src="image/sword.png" alt="atk">
<span></span>
</div>
</div>
index.html

89
.player {
display: flex;
width: 100vw;
height: 40px;
justify-content: center;
background-color: #ddd;
}
.player > div {
display: flex;
margin: 0 10px;
}
.player > div > img {
box-sizing: border-box;
width: 40px;
height: 40px;
padding: 5px;
}
style.css
<div class="hp">
<span></span>
</div>
<div class="atk">
<span></span>
</div>
</div>
index.html

90
.player {
display: flex;
width: 100vw;
height: 40px;
background-color: #ddd;
}
.player > div {
display: flex;
margin: 0 10px;
}
.player > div > img {
width: 40px;
height: 40px;
padding: 5px;
}
style.css
<div class="hp">
<span></span>
</div>
<div class="atk">
<span></span>
</div>
</div>
index.html
100vw = 皮仿它扒筵盟100%
100vh = 皮仿它扒磬盟100%
margin: [奻狟] [酘衵];

withJavaScript 𤚗窒煦
91
<div id="enemy" class="enemy">
<div>
<img src=/slideshow/3-javascript2016/62274728/"image/enemy.png" alt="enemy">
<div class="hp">
<span></span>
</div>
<div class="atk">
<span></span>
</div>
</div>
...
</div>
index.html

92
<div id="enemy" class="enemy">
<div>
<div class="hp">
<span></span>
</div>
<div class="atk">
<span></span>
</div>
</div>
<div>
<div class="hp">
<span></span>
</div>
index.html
<div class="atk">
<span></span>
</div>
</div>
<div>
<div class="hp">
<span></span>
</div>
<div class="atk">
<span></span>
</div>
</div>
</div>

withJavaScript HTML�婖
93
div

94
.enemy {
display: flex;
width: 100vw;
}
.enemy > div {
display: flex;
width: 110px;
margin: 50px 30px;
padding: 1px;
}
style.css
.enemy > div:hover {
padding: 0;
cursor: pointer;
}
.enemy > div > img {
width: 100px;
height: 100px;
}
.enemy > div > div {
display: flex;
}
.enemy > div > div > img {
width: 30px;
height: 30px;
padding: 4px;
}

withJavaScript 侚氏分𤚗毛準桶尨卞允月窒煦
? !important
- 肮元皿伕由氾奴及硌隅互恚杅預垀匹俴歹木化中凶�磁�珂今木月
95
.hide {
display: none !important;
}
style.css

withJavaScript JavaScript窒煦
96
// 皿伊奶乩奈午𤚗及夔薯�(場ヽ�)
let player = { hp: 1000, atk: 20 };
let enemy = [
{ hp: 80, atk: 100 },
{ hp: 1000, atk: 50 },
{ hp: 50, atk: 30 },
];
main.js

97
// creature(player/enemy)互汜五化中月井
let isAlive = (c) => { ... }
// 皿伊奶乩奈互𤚗卞馴𨬢允月
let attack = (e) => {
... // 皿伊奶乩奈互侚氏匹中凶日睡手仄卅中
... // 皿伊奶乩奈及馴𨬢
... // 𤚗及馴𨬢
update(); // 賒醱卞毀茬
};
// 賒醱卞毀茬允月
let update = () => { ... }
// 郔場卞允月�I燴
let init = () => {
... // 𤚗毛弁伉永弁仄凶午五及奶矛件玄偞隅. attack毛公及引引網少.
update();
};
init();
main.js

98
// 郔場卞允月�I燴
let init = () => {
let chs = document.getElementById("enemy").children;
for (let i = 0; i < chs.length; ++i) {
enemy[i].elem = chs[i];
enemy[i].atkElem = enemy[i].elem.querySelector(".atk > span");
enemy[i].hpElem = enemy[i].elem.querySelector(".hp > span");
chs[i].addEventListener("click", attack);
chs[i].dataset.index = i;
}
player.elem = document.getElementById("player");
player.hpElem = player.elem.querySelector(".hp > span");
player.atkElem = player.elem.querySelector(".atk > span");
update();
};
main.js

99
// 賒醱卞毀茬允月
let update = () => {
// player
player.hpElem.textContent = player.hp;
player.atkElem.textContent = player.atk;
// enemy
for (let i = 0; i < enemy.length; ++i) {
if ( !isAlive(enemy[i]) ) {
enemy[i].elem.classList.add("hide");
}
else {
enemy[i].hpElem.textContent = enemy[i].hp;
enemy[i].atkElem.textContent = enemy[i].atk;
}
}
};
main.js

100
// 皿伊奶乩奈互侚氏匹中凶日睡手仄卅中
if ( !isAlive(player) ) return;
// 皿伊奶乩奈及馴𨬢
let idx = e.currentTarget.dataset.index;
enemy[idx].hp -= player.atk;
if ( !isAlive(enemy[idx]) ) {
player.atk += enemy[idx].atk;
}
// 𤚗及馴𨬢
...
// 賒醱卞毀茬
update();
};
main.js

101
...
// 𤚗及馴𨬢
for (let i = 0; i < enemy.length; ++i) {
// 汜五化中月𤚗分仃馴𨬢仄化仁月
if ( isAlive(enemy[i]) ) {
player.hp -= enemy[i].atk;
}
}
// 皿伊奶乩奈及hp及郔苤�反0
if (player.hp < 0) {
player.hp = 0;
}
// 賒醱卞毀茬
update();
};
main.js

102
// creature互汜五化中月井
let isAlive = (c) => {
return c.hp > 0;
};
main.js

withJavaScript 俇傖ㄐ云③木�匹允ㄐㄐ
103

withJavaScript 踏摽及軑隅
? 5/29(゜) 13:00 ‵ 16:00
- 覧�隙
- 睡井毛釬欠丹
? 6/5(゜) 13:00 ‵ 16:00
- 弁仿旦毛悝少
- 旌仃必奈毛釬月
? 6/12(゜) 13:00 ‵ 16:00
- JavaScript及�井卅晞瞳憝杅及畿賡
- CSS3卞方月��g卅犯扒奶件及畿賡
104

端端舝

菴3隙 JavaScript井日宎戶月皿伕弘仿立件弘2016

More Related Content

菴3隙 JavaScript井日宎戶月皿伕弘仿立件弘2016