Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

JavaScript 勉強会 ― 型と値

471 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

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’;

×