JavaScript 勉強会、「JavaScript 第6版」の 3 章「型、値、変数」のスライド。

1. ᆺ䛸್
㛤Ⓨ㒊
䛶䜛䞊

2. 䜰䝆䜵䞁䝎
1. ᇶᮏᆺ䛾್
2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖
3. ᆺኚ᥮

3. 䜰䝆䜵䞁䝎
1. ᇶᮏᆺ䛾್
2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖
3. ᆺኚ᥮

4. ᆺ
● ᇶᮏᆺ
○ ᩘ್
○ ᩥᏐิ
○ ㄽ⌮್
○ null
○ undefined
● 䜸䝤䝆䜵䜽䝖ᆺ
○ ୖグ௨እ

5. ᩘ್
● ᩚᩘ䛸ᾋືᑠᩘⅬᩘ䜢༊ู䛧䛺䛔
● 64䝡䝑䝖ᾋືᑠᩘⅬᙧᘧ

6. ᩘ್䝸䝔䝷䝹
3
0xff
0377
3.14
6.02e23

7. ᩥᏐิ
● 䝸䝔䝷䝹䛿䛂’䛃䜒䛧䛟䛿䛂”䛃䜢౑䛖
○ GitHub䛷䛿 䛂’䛃: 56.626% 䛂”䛃: 43.374%
■ 䛂’䛃
● Backbone
● AngularJS
■ 䛂”䛃
● jQuery

8. ᩥᏐิ䝸䝔䝷䝹
’testing’
‘䜋䛢䜋䛢’ + ‘䜄䜘䜄䜘’
‘This string¥nhas two lines’
‘<p><a href=”#jquery”>jQuery</p>’
“<p><a href=¥”#jquery¥”>jQuery</p>”

9. ㄽ⌮್
● ண⣙ㄒ true 䛸 false 䛷⾲⌧

10. null 䛸 undefined
● null
○ 䛂್䛜䛺䛔䛃䛣䛸䜢♧䛩
○ 䝥䝻䜾䝷䝮䝺䝧䝹䛷ணᐃ䛹䛚䜚䛾ሙྜ䜢⾲䛩䜒䛾
● undefined
○ 䛂್䛜䛺䛔䛃䛣䛸䜢♧䛩
○ 䝅䝇䝔䝮䝺䝧䝹䛷ணᮇ䛫䛼䚸䜶䝷䞊䛾䜘䛖䛺ሙྜ䛻⾲䛩
䜒䛾

11. undefined
var hoge = ‘test’;
console.log(hoge); // test
var piyo;
console.log(piyo); // undefined

12. 䜸䝤䝆䜵䜽䝖 (1 / 2)
● 䝥䝻䝟䝔䜱䛾㞟ྜయ
● 䝥䝻䝟䝔䜱䛸䛿
○ ྡ๓䛸್䜢ᣢ䛱䚸್䛻௨ୗ䛾䜒䛾䜢ಖᣢ䛷䛝䜛
■ ᇶᮏᆺ䛾್
■ 䜸䝤䝆䜵䜽䝖 (㛵ᩘ䜔㓄ิ䜒ྵ䜐)

13. 䜸䝤䝆䜵䜽䝖 (2 / 2)
var point = {
x: 128,
y: 64
};
console.log(point.x); // 128

14. 䜰䝆䜵䞁䝎
1. ᇶᮏᆺ䛾್
2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖
3. ᆺኚ᥮

15. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (1 / 3)
● 䛣䛾䜸䝤䝆䜵䜽䝖䛷ᐃ⩏䛥䜜䛯䝥䝻䝟䝔䜱䛿
JavaScript 䝥䝻䜾䝷䝮୰䛾䛹䛣䛛䜙䛷䜒฼⏝䛷
䛝䜛

16. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (2 / 3)
● 䝥䝻䝟䝔䜱
○ undefined
○ Infinity
● 㛵ᩘ
○ isNaN()
○ parseInt()
● 䝁䞁䝇䝖䝷䜽䝍㛵ᩘ
○ Date()
○ String()
● 䜸䝤䝆䜵䜽䝖
○ Math
○ JSON

17. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (3 / 3)
● 䝤䝷䜴䝄䛾 JavaScript ⎔ቃ䛷䛿 Window 䜸䝤
䝆䜵䜽䝖䛜䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖
● Window 䜸䝤䝆䜵䜽䝖䛾䝥䝻䝟䝔䜱
○ document
○ frames
○ location
○ window

18. 䜰䝆䜵䞁䝎
1. ᇶᮏᆺ䛾್
2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖
3. ᆺኚ᥮

19. hoge 䛿ᩥᏐิ䛺䛿䛪䛺䛾䛻䞉䞉䞉䠛
var hoge = ‘256’;
console.log(hoge / 16); // 16
if (hoge) { console.log(‘Hello!’); } // Hello!
console.log(hoge.indexOf(‘56’)); // 1

20. 䝷䝑䝟䞊䜸䝤䝆䜵䜽䝖 (1 / 2)
var s = new String(‘ABC’);
console.log(s.toLocaleLowerCase()); // abc
var n = new Number(12300000);
console.log(n.toExponential()); // 1.23e+7

21. 䝷䝑䝟䞊䜸䝤䝆䜵䜽䝖 (2 / 2)
console.log(
‘ABC’.toLocaleLowerCase()); // abc
console.log(
12300000.toExponential()); // 1.23e+7

22. ᫂♧ⓗ䛺ᆺኚ᥮
Number(‘3’) // 3
String(false); // ‘false’
Boolean([]) // true
Object(3) // new Number(3)

23. 䜸䝤䝆䜵䜽䝖䛛䜙ᇶᮏᆺ䜈䛾ኚ᥮
䛩䜉䛶䛾䜸䝤䝆䜵䜽䝖䛿ኚ᥮䝯䝋䝑䝗䜢 2 䛴䜒䛳䛶䛔
䜛
● toString()
● valueOf()

24. toString()
䜸䝤䝆䜵䜽䝖䜢⾲䛩ᩥᏐิ䜢㏉䛩
new Number(3).toString() // ‘3’
({x: 1, y: 2}).toString() // ‘[object Object]’
[1, 2, 3].toString // ‘1,2,3’

25. valueOf()
䛿䛳䛝䜚ᐃ⩏䛥䜜䛶䛔䛺䛔
ᇶᮏⓗ䛿䚸䜸䝤䝆䜵䜽䝖䜢ᇶᮏᆺ್䛻ኚ᥮䛩䜛䛾
䛜௙஦
new Number(3).valueOf(); // ᇶᮏ್ᆺ䛾 3
new String(‘abc’).valueOf(); // ᇶᮏ್ᆺ䛾 ‘abc’
({x: 1}).valueOf() // 䛭䛾䜎䜎䜸䝤䝆䜵䜽䝖䜢㏉䛩

26. 䜸䝤䝆䜵䜽䝖䛛䜙ᩥᏐิ䛻ኚ᥮ (1 / 2)
1. toString() 䛾ᐇ⾜䜢ヨ䜏䜛
2. valueOf() 䛾ᐇ⾜䜢ヨ䜏䜛
3. TypeError 䜢ᢞ䛢䜛

27. 䜸䝤䝆䜵䜽䝖䛛䜙ᩥᏐิ䛻ኚ᥮ (2 / 2)
var hoge = {
toString: function() {
return ‘toString’;
},
valueOf: function() {
return ‘valueOf’;
}
};
console.log(hoge); // toString

28. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (1 / 3)
1. valueOf() 䛾ᐇ⾜䜢ヨ䜏䜛
2. toString() 䛾ᐇ⾜䜢ヨ䜏䜛
3. TypeError 䜢ᢞ䛢䜛

29. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (2 / 3)
var hoge = {
toString: function() {
return 1;
},
valueOf: function() {
return 2;
}
};
console.log(hoge - 2); // 0

30. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (3 / 3)
var hoge = {
toString: function() {
return 1;
},
valueOf: function() {
return { a: 2 };
}
};
console.log(hoge - 2); // -1

31. 䛚䚷䜟䚷䜚

32. ᐟ㢟 (FizzBuzz ၥ㢟) + α (1 / 3)
1䛛䜙 x 䜎䛷䛾ᩘ䜢䝥䝸䞁䝖䛩䜛䝥䝻䜾䝷䝮䜢᭩䛡䚹
䛯䛰䛧3䛾ಸᩘ䛾䛸䛝䛿ᩘ䛾௦䜟䜚䛻䛂Fizz䛃䛸䚸
5䛾ಸᩘ䛾䛸䛝䛿䛂Buzz䛃䛸䝥䝸䞁䝖䛧䚸
3䛸5୧᪉䛾ಸᩘ䛾ሙྜ䛻䛿䛂FizzBuzz䛃䛸
䝥䝸䞁䝖䛩䜛䛣䛸䚹

33. ᐟ㢟 (FizzBuzz ၥ㢟) + α (2 / 3)
● x 䛿 HTML ୖ䛾䝣䜷䞊䝮䛛䜙ධຊ䛩䜛
● ≉ᐃ䛾䝪䝍䞁䜢ᢲୗ䛩䜛䛸䚸௨ୗ䛾ືస䜢䛩䜛
○ ṇ䛾ᩚᩘ䛜ධຊ䛥䜜䛯ሙྜ䚸HTML ୖ䛻 FizzBuzz 䛾
⤖ᯝ䜢ฟຊ䛩䜛

34. ౛

35. ᐟ㢟 (FizzBuzz ၥ㢟) + α (3 / 3)
● jQuery 䛺䛹䛾እ㒊䝷䜲䝤䝷䝸䛾౑⏝䛿⚗Ṇ
● IE, Firefox, Chrome 䛾᭱᪂䝞䞊䝆䝵䞁䛷ືస䛩䜜䜀OK䛷
䛩

36. 䝃䞁䝥䝹 (1 / 4)
<button type=”button” id=”btn”>
abc
</button>
var btn = document.getElementById(‘btn’);
btn.addEventListener(‘click’, function() {
// 䛂abc䛃䝪䝍䞁䛜ᢲ䛥䜜䛯㝿䛾ฎ⌮
});

37. 䝃䞁䝥䝹 (2 / 4)
<form id="fizzbuzz-form">
<button type="submit">
FizzBuzz
</button>
</form>
var form =
document.getElementById(‘fizzbuzz-form’);
form.addEventListener(‘submit’, function(e) {
// 䛂abc䛃䝪䝍䞁䛜ᢲ䛥䜜䛯㝿䛾ฎ⌮
// 䝤䝷䜴䝄䛾䝕䝣䜷䝹䝖䛾ືస䜢䜻䝱䞁䝉䝹
e.preventDefault();
});

38. 䝃䞁䝥䝹 (3 / 4)
<input type=”number” id=”num”>
</input>
var num =
document.getElementById(‘num);
// ධຊ䛥䜜䛯್䜢ྲྀᚓ
console.log(num.value);

39. 䝃䞁䝥䝹 (4 / 4)
<div id=”output-view”>
</div>
// ᕥ䛾 div せ⣲䛾୰䛻䛂abc䛃䛸䛔䛖
// HTML䜢ᇙ䜑㎸䜐
var outputView =
document.getElementById(‘output-view’);
outputView.innerHTML = ‘abc’;