JavaScriptの歴史

Transcript

1. +BWB4DSJQUͷྺ࢙ 
   %5
   $PSQ
   /BPNJDIJ
   :BNBLJUB
2. ΞδΣϯμ  +BWB4DSJQUͷ֓ཁͱྺ࢙
    ೥ͷτϨϯυ
    ࠷ޙʹೋݴ͘Β͍
3. +BWB4DSJQUͷ֓ཁͱྺ࢙
4. ஀ੜൿ࿩
     Πϯλʔωοτॳظʢ೥ʣ
    ΞϜϥʔɺ%"ɾ:0ɾ/&࣌୅
    ౰࣌ɺμΠφϛοΫͳίϯςϯπΛ࡞Δʹ͸ɺ$(*΍"DUJWF9
   $POUSPMɺ +BWB"QQMFU͕ඞཁͩͬͨ
    ͜ΕΒͷٕज़͸ॳ৺ऀʹෑډ͕ߴ͔ͬͨ
5. ஀ੜൿ࿩
    ʮ΋ͬͱखܰʹɺΠϯλϥΫςΟϒͳ ػೳΛ͍࣋ͨͤͨ͜ͱ͸Ͱ͖ͳ͍͔ʯ /FUTDBQF
   $PNNVOJDBUJPOT
   
6. ஀ੜൿ࿩
     /FUTDBQF
   $PNNVOJDBUJPOTࣾʹΑͬͯ-JWF4DSJQU͕։ൃ͞ΕΔ
    ౰࣌/FUTDBQF
   $PNNVOJDBUJPOTͱ4VO
   .JDSPTZTUFNʢݱ0SBDMFʣ͕ ఏܞ͍ͯͨ͜͠ͱʢ+BWB͕ྲྀߦͬͯͨ͜ͱʣ΋͋Γɺ໊শΛ+BWB4DSJQU ʹมߋ
    /FUTDBQF
   /BWJHBUPS
   Ͱॳొ৔
7. ݴޠͷಛੑ  ΠϯλϓϦλݴޠ
    ίϯύΠϧ͕ෆཁ
    ߏจ͕+BWBʹࣅ͍ͯΔ
    ͨͩ͠+BWB
   
   +BWB4DSJQU
    ະͩʹʮ͋ʔ)5.-ͱҰॹʹ+BWB΋मਖ਼͠ͱ͍ͯʯͱ͔ݴ͏ਓ͕͍Δ
    ಈతܕએݴ
    ؔ਺ܕϓϩάϥϛϯά
    ΦϒδΣΫτࢦ޲
    +BWB΍1)1͕ΫϥεϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δͷʹର͠ɺ +BWB4DSJQU͸ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δ
8. ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲  +BWB4DSJQU͕࣋ͭશͯͷσʔλ͸ʢϓϦϛςΟϒܕΛআ͖ʣΦϒδΣΫτ
    શͯͷؔ਺ΦϒδΣΫτ͸QSPUPUZQFϓϩύςΟΛ࣋ͭ var IPad = function() { this.vendor = "Apple"; }; 
 IPad.prototype = { name: "iPad", late: 2011, }; var NewIPad = function(late) { this.late = late; }; 
 NewIPad.prototype = new IPad(); NewIPad.prototype.name = "iPad mini"; var newIPad = new NewIPad(2012); console.log(newIPad.vendor); // (1) console.log(newIPad.late); // (2) console.log(newipad.name); // (3) "QQMF  J1BE
   NJOJ lJz͕খจࣈͳͷͰ
   l6ODBVHIU
   3FGFSFODF&SSPS
   OFXJQBE
   JT
   OPU
   EF fi OFEzͰͨ͠
   ʢେจࣈɾখจࣈ͸۠ผ͞ΕΔ
9. ϓϩτλΠϓΫΠζ  Կ৭ʹͳΔͰ͠ΐ͏ var Container = function(){}; Container.prototype = { color: "red" }; var container = new Container(); console.log(container.color); // (1) Container.prototype = { color: "blue" }; console.log(container.color); // (2) var container2 = new Container(); console.log(container2.color); // (3) Container.prototype.color = "yellow"; console.log(container.color); // (4) console.log(container2.color); // (5)
10. +BWB4DSJQU͕࣋ͭXJOEPXΦϒδΣΫτ  ΫϥΠΞϯταΠυ+BWB4DSJQU͸ϒϥ΢βΛૢ࡞͢Δ"1*Λఏڙ͍ͯ͠Δ
     OBWJHBUPS
     MPDBUJPO
     IJTUPSZ
     TDSFFO
     GSBNFT
     EPDVNFOUʢ%0.ʣ
     QBSFOU
    UPQ
    TFMG
11. ᴈ໌ظʢ೥ʙʣ  *OUFSOFU
    &YQMPSFS
    ʹ+4DSJQU͕౥ࡌ͞Εɺٸ଎ʹීٴ͕࢝·Δ
     +4DSJQU͸.JDSPTPGU͕+BWB4DSJQUΛϕʔεʹಠ࣮ࣗ૷ͨ͠ݴޠ
     ೥ɺ*OUFSOFU
    &YQMPSFS
    ͔Βຊ֨తͳ%ZOBNJD)5.-࣌୅΁ಥೖ
     )5.- $44 +BWB4DSJQUʢ%0.ʣΛ࢖ͬͨμΠφϛοΫίϯςϯπ
     ϒϥ΢βઓ૪ͷ࢝·Γ
     *OUFSOFU
    &YQMPSFS
    WT
    /FTDBQF
    /BWJHBUPS
12. %0.ʢ%PDVNFOU
    0CKFDU
    .PEFMʣ  +BWB4DSJQU͔Β)5.-΍9.-Λૢ࡞͢ΔͨΊͷ"1*
     %0.Λ࢖͏͜ͱͰɺ)5.-ʹಛఆͷཁૉ΍ଐੑΛ௥Ճͨ͠Γɺطଘͷଐੑ Λมߋ͢Δ͜ͱ͕Ͱ͖Δ
     %0.͸+BWB4DSJQUͷαϒηοτͰ͸ͳ͍ʢ࢓༷͕ಠཱ͍ͯ͠Δʣ <div id="foo"> <span>a</span> <span>b</span> <span>c</span> </div> 
 <script> var foo = document.getElementById("foo"); var elements = foo.getElementsByTagName("span"); console.log(elements[0].innerHTML); </script>
13. ΠϕϯτʢΠϕϯτϋϯυϥʣ  Ϣʔβ͕ൃੜͤ͞ΔΠϕϯτʹର͠ɺΠϕϯτϋϯυϥʢؔ਺ʣΛ࣮ߦ͢Δ
     ʮૹ৴Ϙλϯ͕ԡ͞ΕͨΒϑΥʔϜͷσʔλΛݕূ͢Δʯ
     ʮೖྗ͞ΕͨΩʔͷจࣈΛνΣοΫ͢Δʯ
     Πϕϯτϋϯυϥͷछྨ
     PODMJDL
     POLFZVQ
     PODIBOHF
     POMPBE
     POTFMFDU
    
14. Πϕϯτϋϯυϥͷ࢖͍ํ <script> function changeGreeting(value) { document.getElementById('greeting-message').innerText = value; } </script> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value="" onkeyup="changeGreeting(this.value)" /> </div> </form> <p id="greeting-message"></p>
15. ΠϕϯτʢΠϕϯτϦεφʣ  ԿΒ͔ͷΠϕϯτΛड͚औͬͯॲཧΛ࣮ߦ͢Δ
     Πϕϯτϋϯυϥ͸ͭͷཁૉʹରͭ͠ͷΠϕϯτ͔࣮͠ߦͰ͖ͳ͍͕ɺΠ ϕϯτϦεφ͸ෳ਺ͷΠϕϯτΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ <script> 
 // ಉ͡ཁૉʹෳ਺ͷϋϯυϥ͕ొ࿥͞ΕͯΔ৔߹ɺޙʹࢦఆͨ͠ํ͕༏ઌ͞ΕΔ window.onload = function() { console.log(‘Hello!’); 
 }; 
 window.onload = function() { conosle.log(‘good bye!’); 
 }; 
 </script>
16. ΠϕϯτϦεφͷ࢖͍ํ <!doctype html> <html> <head> </head> <body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value="" /> </div> </form> <p id="greeting-message"></p> </body> <script> var greetingMessage = document.getElementById('greeting'); greetingMessage.addEventListener('keyup', function(e) { document.getElementById('greeting-message').innerText = e.target.value; }, false); </script> </html>
17. %)5.-ͰͰ͖Δ͜ͱͷ୅දྫ  Ϛ΢εΛಈ͔͢ͱϙΠϯλʹˑ͕͖ͭ·ͱ͏
     ઇͷ݁থ͕߱Δ
     ʮӈΫϦοΫېࢭͰ͢ʂʂʂʯͱΞϥʔτΛग़͢͜ͱ͕Ͱ͖Δ
18. ණՏظͷ౸དྷ  ֤ϒϥ΢βϕϯμʔ͸ಠࣗͷ࢓༷Λ֦ு͢ΔͨΊɺϒϥ΢βؒͷޓ׵ੑ͸ߴ ͍΋ͷͱ͸ݴ͑ͳ͔ͬͨ
     ҰͭͷॲཧΛ࣮ߦ͍͚ͨͩ͠ͳͷʹɺϒϥ΢β͝ͱʹίʔυΛ෼ذͯ͠ هड़͢Δ͜ͱ΋͋Γɺ਺ଟ͘ͷόουϊ΢ϋ΢ΛੜΉ݁Ռʹ
     ηΩϡϦςΟϗʔϧ΋ͨ͘͞Μʂ
     ʮ+BWB4DSJQU͸Φϯ͸৘ऑͷۃΈʂʯ
     ઇ͕߱ΔαΠτ͕૿͑ɺ஍ٿͷؾީ͕௕ظʹ౉ͬͯפྫྷԽ
     ණՏظ࣌୅΁
     ೥ɺ&$."ʢඪ४Խن֨ʣ͕ެ։͞ΕΔ
19. ೥୅த൫
    "+"9ͷొ৔  8FCٕज़΍௨৴ճઢͷൃలʹΑΓɺຊ֨తʹ8FCΞϓϦ͕ීٴ࢝͠ΊΔ
     8FC
    
     "+"9ʢඇಉظ੍ޚʣ͕ొ৔
     %).5-
    
    9.-)UUQ3FRVFTUΛ૊Έ߹Θٕͤͨज़
     (PPHMF
    .BQTͷొ৔
     9.-)UUQ3FRVFTU
     +BWB4DSJQUͷ)551௨৴ػೳΛ༻͍ͯɺಈతϑΝΠϧΛಡΈࠐΉ"1*
     ΫϩευϝΠϯ੍໿ʹΑΓɺ֎෦αʔόͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸Ͱ ͖ͳ͍ʢͨͩ͠+40/1Λ࢖͑͹ಡΈࠐΈՄೳʣ
20.  "+"9ϥΠϒϥϦ͕ଓʑͱొ৔͠ɺ࠶ͼ+BWB4DSJQU͕٭ޫΛཋͼ࢝ΊΔ
     ୅දతͳϥΠϒϥϦ
     QSPUPUZQFKTɺ:6*ɺK2VFSZ
     ػೳ
     Ϋϩεϒϥ΢βରԠ
     "+"9ػೳ
     ηϨΫλΛ࢖ͬͨ%0.ૢ࡞
     Ϧον6*ɺ69ͷఏڙ ೥୅ޙ൒
    "+"9ϥΠϒϥϦͷొ৔
21. K2VFSZͷαϯϓϧίʔυ <!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script> <script> $(document).ready(function(){ $('#greeting').keyup(function(e){ $('#greeting-message').text(e.target.value); }); }); </script> </head> <body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value="" /> </div> </form> <p id="greeting-message"></p> </body> </html>
22. ϒϥ΢βઓ૪࠶ͼ  3&45
    "1*ͷར༻͕ྲྀߦΓ࢝ΊΔ
     GBDFCPPLɺ5XJUUFSɺBNB[POɺNJYJ
     .P[JMMB
    'PVOEBUJPOʹΑΔ+BWB4DSJQUͷύϑΥʔϚϯεվળ
     +BWB4DSJQUͷߴ଎Խڝ૪ʢ୹ظϦϦʔεαΠΫϧʣ͕࢝·Δ
     )5.-΍$44ͷ࣮૷΋ணʑͱਐߦத
     ֤ϒϥ΢β͕౥ࡌ͢Δ+BWB4DSJQUΤϯδϯ
     $ISPNF
    7
     'JSFGPY
    +ÅHFS.POLFZ
     *OUFSOFU
    &YQMPSFS
    $IBLSB
23. ೥ͷτϨϯυ
24. ೥͸+BWB4DSJQU
    .7$࣌୅ͷນ։͚  "+"9ϥΠϒϥϦ͕ొ৔͓͔ͨ͛͠ͰϑϩϯτΤϯυͷ։ൃ͸ָʹͳͬͨ
     ࠓޙ+BWB4DSJQUΛ࢖͏৔໘͸·͢·͢૿͑ͯ͘ΔͰ͋Ζ͏
     )5.-ɺ$44ɺ3&45
    "1*ʜ
     ෳࡶԽ͢ΔίʔυʹରԠ͢ΔͨΊ+BWB4DSJQUʹ΋.7$ͷ೾͕͖ͨʂ
25. .7$ϑϨʔϜϫʔΫͷൺֱ  ଓʑͱ.7$ϑϨʔϜϫʔΫ͕ొ৔͍ͯ͠Δ 5IF
    5PQ
    
    +BWBTDSJQU
    .7$
    'SBNFXPSLT
    3FWJFXFE
    IUUQDPEFCSJFGDPNUIFUPQKBWBTDSJQUNWDGSBNFXPSLTSFWJFXFE
26.  ༗ྗީิ͸#BDLCPOFKT
     ࠷ۙ(PPHMF͕ϦϦʔεͨ͠"OHVMBS+4΋஫໨ג
    ओཁϑϨʔϜϫʔΫ
27. "OHVMBS+4ͷαϯϓϧίʔυ <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/ angular-1.0.1.min.js"></script> </head> <body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" ng-model="yourName" placeholder="Input greeting!"> </div> </form> <p>{{yourName}}</p> </body> </html>
28. "OHVMBS+4
    σϞϯετϨʔγϣϯ  6*όΠϯσΟϯά
     IUUQQIQVOJUBOHVMBSKTVJ@CJOEJOHT
     ίϯτϩʔϥΛ࢖͏
     IUUQQIQVOJUBOHVMBSKTMPPQ@ fi MUFS
     5XJUUFS
    "1*ͷར༻
     IUUQQIQVOJUBOHVMBSKTUXJUUFS
29. ͜Ε͔Βͷ+BWB4DSJQU  αʔόαΠυ+BWB4DSJQUʢ/PEFKTɺ(PPHMF
    "QQT
    4DSJQU౳ʣͷར༻
     ΫϥΠΞϯταʔόαΠυશͯΛ+BWB4DSJQUԽ͢Δ͜ͱ΋Մೳ
30. ࠷ޙʹೋݴ͘Β͍
31. +BWB4DSJQU௒ΠΠ͡ΌΜʂ  ϑΥʔϜͷσʔλνΣοΫ͸+BWB4DSJQUʹҰ೚͠Α͏ʂ
     ةݥɻ+BWB4DSJQU͸ແޮʹͰ͖Δ͜ͱΛ๨Εͯ͸ͳΒͳ͍
     αʔόαΠυͰݕূ͍ͯ͠ͳ͍ͱɺࢥΘ͵ηΩϡϦςΟϗʔϧΛಥ͔Ε ΔՄೳੑ͕͋Δ
     αʔόαΠυͷݕূΛඞਢͱ͠ɺ+BWB4DSJQUͷݕূ͸͋͘·Ͱิॿతͳ ΋ͷͱߟ͑Δ΂͖
     1$ɺεϚʔτϑΥϯɺΨϥέʔʹରԠͪ͠Ό͓͏ʂ
     ࢒೦ͳ͕ΒΨϥέʔʢώϡʔνϟʔϑΥϯʣ͸+BWB4DSJQUʹඇରԠ
     ೔ຊ͸ະͩΨϥέʔׂ͕ʂ
32. +BWB4DSJQUͷ։ൃςΫχοΫ  ιʔείʔυͷѹॖ
     $%/ͷར༻
     σόοάߏจͷར༻
     σόοάɺϓϩϑΝΠϦϯάπʔϧͷར༻
     $ISPNF
    σϕϩούʔπʔϧ
     'JSFGPY
    'JSFCVH
     ςετπʔϧͷಋೖ
     26OJU
     +FOLJOT