Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScriptの歴史

Naomichi Yamakita
September 10, 2012
15

 JavaScriptの歴史

Naomichi Yamakita

September 10, 2012
Tweet

More Decks by Naomichi Yamakita

Transcript

  1. ݴޠͷಛੑ  ΠϯλϓϦλݴޠ  ίϯύΠϧ͕ෆཁ  ߏจ͕+BWBʹࣅ͍ͯΔ  ͨͩ͠+BWB+BWB4DSJQU 

    ະͩʹʮ͋ʔ)5.-ͱҰॹʹ+BWB΋मਖ਼͠ͱ͍ͯʯͱ͔ݴ͏ਓ͕͍Δ  ಈతܕએݴ  ؔ਺ܕϓϩάϥϛϯά  ΦϒδΣΫτࢦ޲  +BWB΍1)1͕ΫϥεϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δͷʹର͠ɺ +BWB4DSJQU͸ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δ
  2. ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲  +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  J1BENJOJ lJz͕খจࣈͳͷͰ l6ODBVHIU3FGFSFODF&SSPS OFXJQBEJTOPUEF fi OFEzͰͨ͠ ʢେจࣈɾখจࣈ͸۠ผ͞ΕΔ
  3. ϓϩτλΠϓΫΠζ  Կ৭ʹͳΔͰ͠ΐ͏ 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)
  4. %0.ʢ%PDVNFOU0CKFDU.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>
  5. Πϕϯτϋϯυϥͷ࢖͍ํ <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>
  6. ΠϕϯτϦεφͷ࢖͍ํ <!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>
  7. ೥୅த൫"+"9ͷొ৔  8FCٕज़΍௨৴ճઢͷൃలʹΑΓɺຊ֨తʹ8FCΞϓϦ͕ීٴ࢝͠ΊΔ  8FC  "+"9ʢඇಉظ੍ޚʣ͕ొ৔  %).5- 9.-)UUQ3FRVFTUΛ૊Έ߹Θٕͤͨज़

     (PPHMF.BQTͷొ৔  9.-)UUQ3FRVFTU  +BWB4DSJQUͷ)551௨৴ػೳΛ༻͍ͯɺಈతϑΝΠϧΛಡΈࠐΉ"1*  ΫϩευϝΠϯ੍໿ʹΑΓɺ֎෦αʔόͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸Ͱ ͖ͳ͍ʢͨͩ͠+40/1Λ࢖͑͹ಡΈࠐΈՄೳʣ
  8.  "+"9ϥΠϒϥϦ͕ଓʑͱొ৔͠ɺ࠶ͼ+BWB4DSJQU͕٭ޫΛཋͼ࢝ΊΔ  ୅දతͳϥΠϒϥϦ  QSPUPUZQFKTɺ:6*ɺK2VFSZ  ػೳ  Ϋϩεϒϥ΢βରԠ

     "+"9ػೳ  ηϨΫλΛ࢖ͬͨ%0.ૢ࡞  Ϧον6*ɺ69ͷఏڙ ೥୅ޙ൒"+"9ϥΠϒϥϦͷొ৔
  9. 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>
  10. ϒϥ΢βઓ૪࠶ͼ  3&45"1*ͷར༻͕ྲྀߦΓ࢝ΊΔ  GBDFCPPLɺ5XJUUFSɺBNB[POɺNJYJ  .P[JMMB'PVOEBUJPOʹΑΔ+BWB4DSJQUͷύϑΥʔϚϯεվળ  +BWB4DSJQUͷߴ଎Խڝ૪ʢ୹ظϦϦʔεαΠΫϧʣ͕࢝·Δ 

    )5.-΍$44ͷ࣮૷΋ணʑͱਐߦத  ֤ϒϥ΢β͕౥ࡌ͢Δ+BWB4DSJQUΤϯδϯ  $ISPNF7  'JSFGPY+ÅHFS.POLFZ  *OUFSOFU&YQMPSFS$IBLSB
  11. "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>
  12. +BWB4DSJQUͷ։ൃςΫχοΫ  ιʔείʔυͷѹॖ  $%/ͷར༻  σόοάߏจͷར༻  σόοάɺϓϩϑΝΠϦϯάπʔϧͷར༻ 

    $ISPNFσϕϩούʔπʔϧ  'JSFGPY'JSFCVH  ςετπʔϧͷಋೖ  26OJU  +FOLJOT