JS/jQueryのはなし

じげん制作勉強会での資料です。

Transcript

1. JS/jQueryͷ͸ͳ͠ @͛͡Μ੍࡞ษڧձʢ2014-05-23ʣ
2. JS/jQueryΛ࢖͍͜ͳͨ͢Ίʹ େ੾ͳ͜ͱΛ࿩͠·͢
3. ࠓ೔͓࿩͢͠Δ͜ͱ • JavaScriptͷείʔϓͷ͜ͱ • JavaScriptͷ this ͷ͜ͱ • ·ͱΊ
4. είʔϓͱ͸Կ͔ʁ
5. είʔϓͱ͸ ม਺͕ఆ໊ٛͨ͠લͰ࢖͑Δൣғͷ͜ͱ
6. είʔϓͱ͸ JavaScriptͰ͸େ͖͘ҎԼͷ2ͭʹ෼͚ΒΕΔ • άϩʔόϧείʔϓ Ͳ͔͜ΒͰ΋ࢀরͰ͖Δείʔϓ • ϩʔΧϧείʔϓ ಛఆͷൣғ಺ͰࢀরͰ͖Δείʔϓ ͔͜͜Β͸ɺม਺ͷείʔϓΛݟ͍͖ͯ·͢ɻ
7. είʔϓ var greeting = 'Hello, '; function greet(name) { var message = greeting + name; isGreeted = true; alert(message); } greet('World'); // ← ? console.log(message); // ← ? console.log(isGreeted); // ← ?
8. είʔϓ var greeting = 'Hello, '; function greet(name) { var message = greeting + name; isGreeted = true; alert(message); } greet('World'); // ← 'Hello, World' ͱΞϥʔτ console.log(message); // ← ະఆٛΤϥʔ console.log(isGreeted); // ← true
9. άϩʔόϧม਺ͱϩʔΧϧม਺ var greeting = 'Hello, '; // ←άϩʔόϧม਺ function greet(name) { var message = greeting + name; // ←ϩʔΧϧม਺ isGreeted = true; // ←άϩʔόϧม਺ alert(message); }
10. ϩʔΧϧม਺Λ࡞Δʹ͸ 1. function ͷதͰม਺એݴ͢Δ 2. var Λ༻͍ͯม਺એݴ͢Δ ͷ྆ํ͕ඞͣඞཁ
11. ΋͏Ұ౓ݟͯΈΑ͏ var greeting = 'Hello, '; function greet(name) { // ← functionͷதͰ… var message = greeting + name; // ← var Λ༻͍ͯม਺એݴʂ isGreeted = true; alert(message); }
12. Α͘࢖͏ςΫχοΫ ଈ࣌ؔ਺Ͱғ͍είʔϓΛ࡞Δ (function(){ // ← functionͷதͰ… var hoge; // ← var એݴ 㱺 ϩʔΧϧม਺ʂ })();
13. Α͘࢖͏ςΫχοΫ ΋ͪΖΜjQueryΛ࢖ͬͨҎԼͷΑ͏ͳॻ͖ํͰ΋OK $.ready(function(){ // ← functionͷதͰ… var hoge; // ← var એݴ 㱺 ϩʔΧϧม਺ʂ }); $(function(){ // ← functionͷதͰ… var hoge; // ← var એݴ 㱺 ϩʔΧϧม਺ʂ });
14. είʔϓͷޮՌ ม਺ͷিಥ͕ආ͚Δ ಉ͡ม਺໊͕͋ͬͯ΋ɺผͷείʔϓͰ͋Ε͹ ผͷม਺ͱͳΔͨΊɺؒҧͬͯ࢖༻தͷม਺Λ ॻ͖׵͑ͯ͠·ͬͨΓͱ͍ͬͨࣄނΛ๷͗΍͍͢
15. άϩʔόϧม਺͸࢖Θͳ͍!!! • άϩʔόϧม਺͸୭Ͱ΋ಡΈॻ͖ग़དྷͪΌ͏Α • ࣗ෼͔͠࢖͍ͬͯͳ͍ͱࢥ͍ͬͯͨάϩʔόϧม਺͸ ผͷਓ΋࢖ͬͯΔ͔΋͠Εͳ͍
16. άϩʔόϧม਺͸࢖Θͳ͍!!! • ͦͷάϩʔόϧม਺ͰɺผͷεΫϦϓτͷڍಈʹӨڹ͢Δ͔΋ • ͦͷάϩʔόϧม਺͸ɺผͷεΫϦϓτ͔Β ॻ͖׵͑ΒΕΔ͔΋ • ͦͷϖʔδʹ͸͍ΖΜͳਓ͕ॻ͍ͨJS͕ಡΈࠐ·Ε͍ͯΔ ͔ͩΒ
17. άϩʔόϧม਺͸࢖Θͳ͍!!!
18. μϝɻθολΠɻάϩʔόϧม਺ʂ
19. ʢ΋ͪΖΜάϩʔόϧม਺Λ࢖Θͳ͚Ε͹ͳΒͳ͍έʔε΋͋Δ ͷͰɺͦͷ࣌͸༻๏ɾ༰ྔΛकͬͯ࢖༻͠·͠ΐ͏ʣ
20. this ͱ͸Կ͔ʁ
21. this ͱ͸ • JavaScriptͰࣗಈతʹఆٛ͞ΕΔϚδοΫม਺ • Ͳ͜Ͱ this Λ࢖͏͔ʢ΋͘͠͸ݺͼग़͞ΕํʣʹΑΓɺ ࢦ͢಺༰͕ҟͳΔ
22. jQuery Ͱͷ this ͷྫ $('a').on('click', function() { var link_to = $(this).attr('href'); return window.confirm( link_to + '΁Ҡಈ͠·͔͢ʁ' ) }); • ͜ͷ this ͸ΫϦοΫ͞Εͨ a λάࣗ਎Λࢦ͍ͯ͠Δ
23. ؔ਺಺Ͱͷ this 4ύλʔϯΛ཈͑Ε͹OK • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this • ؔ਺Λ new ͨ࣌͠ͷ this • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this • ͦΕҎ֎ͷ this
24. ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this var user = { name: 'ଠ࿠', greet: function() { alert('Hello, ' + this.name + '!'); } }; user.greet(); // 'Hello, ଠ࿠!' ͱΞϥʔτ͞ΕΔ
25. ؔ਺Λ new ͨ࣌͠ͷ this function User(name) { this.name = name; } var user = new User('ଠ࿠'); alert(user.name); // 'ଠ࿠' ͱΞϥʔτ͞ΕΔ
26. .call()ɺ.apply() ΍ .bind() ͷࡍͷ this ΍΍͍͜͠ͷͰงғؾ͚ͩ var user = { name: 'ଠ࿠', greet: function() { alert('Hello, ' + this.name + '!'); } }; user.greet.call({name: 'Ֆࢠ'}); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ user.greet.apply({name: 'Ֆࢠ'}); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ var userHanakoGreet = user.greet.bind({name: 'Ֆࢠ'}); userHanakoGreet(); // 'Hello, Ֆࢠ!' ͱΞϥʔτ͞ΕΔ
27. ͦΕҎ֎ͷ this function setOnClick() { this.onclick = function() { alert('Click͞Ε·ͨ͠!'); }; } setOnClick(); • ͜ͷ this ͸άϩʔόϧΦϒδΣΫτΛࢦ͍ͯ͠Δ • ϒϥ΢βͷάϩʔόϧΦϒδΣΫτ͸ window ΦϒδΣΫτ • this.onclick ͸ window.onclick ͱಉ͡ҙຯ
28. ΋͏׬ᘳͰ͢Ͷʁ
29. ͜ͷ this ͸Կʁ (function(){ this; // →ʁ });
30. ౴͑ (function(){ this; // →window(άϩʔόϧΦϒδΣΫτ) });
31. ͜ͷ this ͸Կʁ var obj = { hoge: function() { this; // →ʁ } }; obj.hoge();
32. ౴͑ var obj = { hoge: function() { this; // →obj } }; obj.hoge();
33. ͜ͷ this ͸Կʁ $("li").each(function() { this; // →ʁ });
34. ౴͑ $("li").each(function() { this; // → li ΦϒδΣΫτ }); jQuery಺Ͱͷ࣮૷Πϝʔδ each: function(callback) { for (var i = 0; i < elements.length; i++) { callback.call(elements[i]); // ← } }
35. ظ଴ͨ͠ಈ࡞ʹͳΔʁ // ը૾͕ϩʔυ͞Εͯ $('img').hide().on('load', function() { // 1ඵޙʹϑΣʔυΠϯ setTimeout(function() { $(this).fadeIn(); }, 1000); });
36. ظ଴ͨ͠ಈ࡞͸͠ͳ͍ʂ
37. ͳͥʁ
38. ͜ͷ৔߹ $('img').hide().on('load', function() { setTimeout(function() { $(this).fadeIn(); }, 1000); }); • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this • ؔ਺Λ new ͨ࣌͠ͷ this • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this • ͦΕҎ֎ͷ this
39. ෮श͠·͢ • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this → ͦͷΦϒδΣΫτ ࣗ਎ • ؔ਺Λ new ͨ࣌͠ͷ this → new͞ΕͨΦϒδΣΫτࣗ਎ • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this → Ҿ਺Ͱࢦఆ ͨ͠ΦϒδΣΫτ • ͦΕҎ֎ͷ this → άϩʔόϧΦϒδΣΫτʢwindowʣ
40. ͜ͷ this ͸ window $('img').hide().on('load', function() { setTimeout(function() { $(this).fadeIn(); }, 1000); });
41. ͜͏͢Ε͹OK $('img').hide().on('load', function() { var $img = $(this); // ← ม਺ʹ୅ೖͯ͠ setTimeout(function() { $img.fadeIn(); // ← ࢖͏ }, 1000); });
42. ·ͱΊ
43. ·ͱΊ ϩʔΧϧείʔϓ͸େਓͷ਎ͩ͠ͳΈ 1. function ͷதͰ 2. varΛ༻͍ͯม਺એݴ͠Α͏ (function(){ var i_am_free = 'ࣗݾදݱʂ'; })();
44. ·ͱΊ this ͳΜͯා͘ͳ͍ • ΦϒδΣΫτϝιουݺͼग़࣌͠ͷ this → ͦͷΦϒδΣΫτ ࣗ਎ • ؔ਺Λ new ͨ࣌͠ͷ this → new ͞ΕͨΦϒδΣΫτࣗ਎ • .call()ɺ.apply() ΍ .bind() ͷࡍͷ this → Ҿ਺Ͱࢦఆ ͨ͠ΦϒδΣΫτ • ͦΕҎ֎ͷ this → άϩʔόϧΦϒδΣΫτʢwindowʣ
45. ·ͱΊ this ͳΜͯා͘ͳ͍ $('img').hide().on('load', function() { var $img = $(this); // ←ม਺ʹ୅ೖͯ͠͏·͘෇͖߹͓͏ setTimeout(function() { $img.fadeIn(); }, 1000); });
46. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ