Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

JavaScript 勉強会 ― 型と値

467 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Login to see the comments

  • Gehören Sie zu den Ersten, denen das gefällt!

JavaScript 勉強会 ― 型と値

  1. 1. ᆺ䛸್ 㛤Ⓨ㒊 䛶䜛䞊
  2. 2. 䜰䝆䜵䞁䝎 1. ᇶᮏᆺ䛾್ 2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 3. ᆺኚ᥮
  3. 3. 䜰䝆䜵䞁䝎 1. ᇶᮏᆺ䛾್ 2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 3. ᆺኚ᥮
  4. 4. ᆺ ● ᇶᮏᆺ ○ ᩘ್ ○ ᩥᏐิ ○ ㄽ⌮್ ○ null ○ undefined ● 䜸䝤䝆䜵䜽䝖ᆺ ○ ୖグ௨እ
  5. 5. ᩘ್ ● ᩚᩘ䛸ᾋືᑠᩘⅬᩘ䜢༊ู䛧䛺䛔 ● 64䝡䝑䝖ᾋືᑠᩘⅬᙧᘧ
  6. 6. ᩘ್䝸䝔䝷䝹 3 0xff 0377 3.14 6.02e23
  7. 7. ᩥᏐิ ● 䝸䝔䝷䝹䛿䛂’䛃䜒䛧䛟䛿䛂”䛃䜢౑䛖 ○ GitHub䛷䛿 䛂’䛃: 56.626% 䛂”䛃: 43.374% ■ 䛂’䛃 ● Backbone ● AngularJS ■ 䛂”䛃 ● jQuery
  8. 8. ᩥᏐิ䝸䝔䝷䝹 ’testing’ ‘䜋䛢䜋䛢’ + ‘䜄䜘䜄䜘’ ‘This string¥nhas two lines’ ‘<p><a href=”#jquery”>jQuery</p>’ “<p><a href=¥”#jquery¥”>jQuery</p>”
  9. 9. ㄽ⌮್ ● ண⣙ㄒ true 䛸 false 䛷⾲⌧
  10. 10. null 䛸 undefined ● null ○ 䛂್䛜䛺䛔䛃䛣䛸䜢♧䛩 ○ 䝥䝻䜾䝷䝮䝺䝧䝹䛷ணᐃ䛹䛚䜚䛾ሙྜ䜢⾲䛩䜒䛾 ● undefined ○ 䛂್䛜䛺䛔䛃䛣䛸䜢♧䛩 ○ 䝅䝇䝔䝮䝺䝧䝹䛷ணᮇ䛫䛼䚸䜶䝷䞊䛾䜘䛖䛺ሙྜ䛻⾲䛩 䜒䛾
  11. 11. undefined var hoge = ‘test’; console.log(hoge); // test var piyo; console.log(piyo); // undefined
  12. 12. 䜸䝤䝆䜵䜽䝖 (1 / 2) ● 䝥䝻䝟䝔䜱䛾㞟ྜయ ● 䝥䝻䝟䝔䜱䛸䛿 ○ ྡ๓䛸್䜢ᣢ䛱䚸್䛻௨ୗ䛾䜒䛾䜢ಖᣢ䛷䛝䜛 ■ ᇶᮏᆺ䛾್ ■ 䜸䝤䝆䜵䜽䝖 (㛵ᩘ䜔㓄ิ䜒ྵ䜐)
  13. 13. 䜸䝤䝆䜵䜽䝖 (2 / 2) var point = { x: 128, y: 64 }; console.log(point.x); // 128
  14. 14. 䜰䝆䜵䞁䝎 1. ᇶᮏᆺ䛾್ 2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 3. ᆺኚ᥮
  15. 15. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (1 / 3) ● 䛣䛾䜸䝤䝆䜵䜽䝖䛷ᐃ⩏䛥䜜䛯䝥䝻䝟䝔䜱䛿 JavaScript 䝥䝻䜾䝷䝮୰䛾䛹䛣䛛䜙䛷䜒฼⏝䛷 䛝䜛
  16. 16. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (2 / 3) ● 䝥䝻䝟䝔䜱 ○ undefined ○ Infinity ● 㛵ᩘ ○ isNaN() ○ parseInt() ● 䝁䞁䝇䝖䝷䜽䝍㛵ᩘ ○ Date() ○ String() ● 䜸䝤䝆䜵䜽䝖 ○ Math ○ JSON
  17. 17. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 (3 / 3) ● 䝤䝷䜴䝄䛾 JavaScript ⎔ቃ䛷䛿 Window 䜸䝤 䝆䜵䜽䝖䛜䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 ● Window 䜸䝤䝆䜵䜽䝖䛾䝥䝻䝟䝔䜱 ○ document ○ frames ○ location ○ window
  18. 18. 䜰䝆䜵䞁䝎 1. ᇶᮏᆺ䛾್ 2. 䜾䝻䞊䝞䝹䜸䝤䝆䜵䜽䝖 3. ᆺኚ᥮
  19. 19. hoge 䛿ᩥᏐิ䛺䛿䛪䛺䛾䛻䞉䞉䞉䠛 var hoge = ‘256’; console.log(hoge / 16); // 16 if (hoge) { console.log(‘Hello!’); } // Hello! console.log(hoge.indexOf(‘56’)); // 1
  20. 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. 21. 䝷䝑䝟䞊䜸䝤䝆䜵䜽䝖 (2 / 2) console.log( ‘ABC’.toLocaleLowerCase()); // abc console.log( 12300000.toExponential()); // 1.23e+7
  22. 22. ᫂♧ⓗ䛺ᆺኚ᥮ Number(‘3’) // 3 String(false); // ‘false’ Boolean([]) // true Object(3) // new Number(3)
  23. 23. 䜸䝤䝆䜵䜽䝖䛛䜙ᇶᮏᆺ䜈䛾ኚ᥮ 䛩䜉䛶䛾䜸䝤䝆䜵䜽䝖䛿ኚ᥮䝯䝋䝑䝗䜢 2 䛴䜒䛳䛶䛔 䜛 ● toString() ● valueOf()
  24. 24. toString() 䜸䝤䝆䜵䜽䝖䜢⾲䛩ᩥᏐิ䜢㏉䛩 new Number(3).toString() // ‘3’ ({x: 1, y: 2}).toString() // ‘[object Object]’ [1, 2, 3].toString // ‘1,2,3’
  25. 25. valueOf() 䛿䛳䛝䜚ᐃ⩏䛥䜜䛶䛔䛺䛔 ᇶᮏⓗ䛿䚸䜸䝤䝆䜵䜽䝖䜢ᇶᮏᆺ್䛻ኚ᥮䛩䜛䛾 䛜௙஦ new Number(3).valueOf(); // ᇶᮏ್ᆺ䛾 3 new String(‘abc’).valueOf(); // ᇶᮏ್ᆺ䛾 ‘abc’ ({x: 1}).valueOf() // 䛭䛾䜎䜎䜸䝤䝆䜵䜽䝖䜢㏉䛩
  26. 26. 䜸䝤䝆䜵䜽䝖䛛䜙ᩥᏐิ䛻ኚ᥮ (1 / 2) 1. toString() 䛾ᐇ⾜䜢ヨ䜏䜛 2. valueOf() 䛾ᐇ⾜䜢ヨ䜏䜛 3. TypeError 䜢ᢞ䛢䜛
  27. 27. 䜸䝤䝆䜵䜽䝖䛛䜙ᩥᏐิ䛻ኚ᥮ (2 / 2) var hoge = { toString: function() { return ‘toString’; }, valueOf: function() { return ‘valueOf’; } }; console.log(hoge); // toString
  28. 28. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (1 / 3) 1. valueOf() 䛾ᐇ⾜䜢ヨ䜏䜛 2. toString() 䛾ᐇ⾜䜢ヨ䜏䜛 3. TypeError 䜢ᢞ䛢䜛
  29. 29. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (2 / 3) var hoge = { toString: function() { return 1; }, valueOf: function() { return 2; } }; console.log(hoge - 2); // 0
  30. 30. 䜸䝤䝆䜵䜽䝖䛛䜙ᩘ್䛻ኚ᥮ (3 / 3) var hoge = { toString: function() { return 1; }, valueOf: function() { return { a: 2 }; } }; console.log(hoge - 2); // -1
  31. 31. 䛚䚷䜟䚷䜚
  32. 32. ᐟ㢟 (FizzBuzz ၥ㢟) + α (1 / 3) 1䛛䜙 x 䜎䛷䛾ᩘ䜢䝥䝸䞁䝖䛩䜛䝥䝻䜾䝷䝮䜢᭩䛡䚹 䛯䛰䛧3䛾ಸᩘ䛾䛸䛝䛿ᩘ䛾௦䜟䜚䛻䛂Fizz䛃䛸䚸 5䛾ಸᩘ䛾䛸䛝䛿䛂Buzz䛃䛸䝥䝸䞁䝖䛧䚸 3䛸5୧᪉䛾ಸᩘ䛾ሙྜ䛻䛿䛂FizzBuzz䛃䛸 䝥䝸䞁䝖䛩䜛䛣䛸䚹
  33. 33. ᐟ㢟 (FizzBuzz ၥ㢟) + α (2 / 3) ● x 䛿 HTML ୖ䛾䝣䜷䞊䝮䛛䜙ධຊ䛩䜛 ● ≉ᐃ䛾䝪䝍䞁䜢ᢲୗ䛩䜛䛸䚸௨ୗ䛾ືస䜢䛩䜛 ○ ṇ䛾ᩚᩘ䛜ධຊ䛥䜜䛯ሙྜ䚸HTML ୖ䛻 FizzBuzz 䛾 ⤖ᯝ䜢ฟຊ䛩䜛
  34. 34.
  35. 35. ᐟ㢟 (FizzBuzz ၥ㢟) + α (3 / 3) ● jQuery 䛺䛹䛾እ㒊䝷䜲䝤䝷䝸䛾౑⏝䛿⚗Ṇ ● IE, Firefox, Chrome 䛾᭱᪂䝞䞊䝆䝵䞁䛷ືస䛩䜜䜀OK䛷 䛩
  36. 36. 䝃䞁䝥䝹 (1 / 4) <button type=”button” id=”btn”> abc </button> var btn = document.getElementById(‘btn’); btn.addEventListener(‘click’, function() { // 䛂abc䛃䝪䝍䞁䛜ᢲ䛥䜜䛯㝿䛾ฎ⌮ });
  37. 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. 38. 䝃䞁䝥䝹 (3 / 4) <input type=”number” id=”num”> </input> var num = document.getElementById(‘num); // ධຊ䛥䜜䛯್䜢ྲྀᚓ console.log(num.value);
  39. 39. 䝃䞁䝥䝹 (4 / 4) <div id=”output-view”> </div> // ᕥ䛾 div せ⣲䛾୰䛻䛂abc䛃䛸䛔䛖 // HTML䜢ᇙ䜑㎸䜐 var outputView = document.getElementById(‘output-view’); outputView.innerHTML = ‘abc’;

×