Slide 1

Slide 1 text

+BWB4DSJQUͷྺ࢙  %5$PSQ /BPNJDIJ:BNBLJUB

Slide 2

Slide 2 text

ΞδΣϯμ  +BWB4DSJQUͷ֓ཁͱྺ࢙  ೥ͷτϨϯυ  ࠷ޙʹೋݴ͘Β͍

Slide 3

Slide 3 text

+BWB4DSJQUͷ֓ཁͱྺ࢙

Slide 4

Slide 4 text

஀ੜൿ࿩  Πϯλʔωοτॳظʢ೥ʣ  ΞϜϥʔɺ%"ɾ:0ɾ/&࣌୅  ౰࣌ɺμΠφϛοΫͳίϯςϯπΛ࡞Δʹ͸ɺ$(*΍"DUJWF9$POUSPMɺ +BWB"QQMFU͕ඞཁͩͬͨ  ͜ΕΒͷٕज़͸ॳ৺ऀʹෑډ͕ߴ͔ͬͨ

Slide 5

Slide 5 text

஀ੜൿ࿩ ʮ΋ͬͱखܰʹɺΠϯλϥΫςΟϒͳ ػೳΛ͍࣋ͨͤͨ͜ͱ͸Ͱ͖ͳ͍͔ʯ /FUTDBQF$PNNVOJDBUJPOT

Slide 6

Slide 6 text

஀ੜൿ࿩  /FUTDBQF$PNNVOJDBUJPOTࣾʹΑͬͯ-JWF4DSJQU͕։ൃ͞ΕΔ  ౰࣌/FUTDBQF$PNNVOJDBUJPOTͱ4VO.JDSPTZTUFNʢݱ0SBDMFʣ͕ ఏܞ͍ͯͨ͜͠ͱʢ+BWB͕ྲྀߦͬͯͨ͜ͱʣ΋͋Γɺ໊শΛ+BWB4DSJQU ʹมߋ  /FUTDBQF/BWJHBUPSͰॳొ৔

Slide 7

Slide 7 text

ݴޠͷಛੑ  ΠϯλϓϦλݴޠ  ίϯύΠϧ͕ෆཁ  ߏจ͕+BWBʹࣅ͍ͯΔ  ͨͩ͠+BWB+BWB4DSJQU  ະͩʹʮ͋ʔ)5.-ͱҰॹʹ+BWB΋मਖ਼͠ͱ͍ͯʯͱ͔ݴ͏ਓ͕͍Δ  ಈతܕએݴ  ؔ਺ܕϓϩάϥϛϯά  ΦϒδΣΫτࢦ޲  +BWB΍1)1͕ΫϥεϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δͷʹର͠ɺ +BWB4DSJQU͸ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲Ͱ͋Δ

Slide 8

Slide 8 text

ϓϩτλΠϓϕʔεͷΦϒδΣΫτࢦ޲  +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Ͱͨ͠ ʢେจࣈɾখจࣈ͸۠ผ͞ΕΔ

Slide 9

Slide 9 text

ϓϩτλΠϓΫΠζ  Կ৭ʹͳΔͰ͠ΐ͏ 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)

Slide 10

Slide 10 text

+BWB4DSJQU͕࣋ͭXJOEPXΦϒδΣΫτ  ΫϥΠΞϯταΠυ+BWB4DSJQU͸ϒϥ΢βΛૢ࡞͢Δ"1*Λఏڙ͍ͯ͠Δ  OBWJHBUPS  MPDBUJPO  IJTUPSZ  TDSFFO  GSBNFT  EPDVNFOUʢ%0.ʣ  QBSFOU UPQ TFMG

Slide 11

Slide 11 text

ᴈ໌ظʢ೥ʙʣ  *OUFSOFU&YQMPSFSʹ+4DSJQU͕౥ࡌ͞Εɺٸ଎ʹීٴ͕࢝·Δ  +4DSJQU͸.JDSPTPGU͕+BWB4DSJQUΛϕʔεʹಠ࣮ࣗ૷ͨ͠ݴޠ  ೥ɺ*OUFSOFU&YQMPSFS͔Βຊ֨తͳ%ZOBNJD)5.-࣌୅΁ಥೖ  )5.- $44 +BWB4DSJQUʢ%0.ʣΛ࢖ͬͨμΠφϛοΫίϯςϯπ  ϒϥ΢βઓ૪ͷ࢝·Γ  *OUFSOFU&YQMPSFSWT/FTDBQF/BWJHBUPS

Slide 12

Slide 12 text

%0.ʢ%PDVNFOU0CKFDU.PEFMʣ  +BWB4DSJQU͔Β)5.-΍9.-Λૢ࡞͢ΔͨΊͷ"1*  %0.Λ࢖͏͜ͱͰɺ)5.-ʹಛఆͷཁૉ΍ଐੑΛ௥Ճͨ͠Γɺطଘͷଐੑ Λมߋ͢Δ͜ͱ͕Ͱ͖Δ  %0.͸+BWB4DSJQUͷαϒηοτͰ͸ͳ͍ʢ࢓༷͕ಠཱ͍ͯ͠Δʣ
a b c

 var foo = document.getElementById("foo"); var elements = foo.getElementsByTagName("span"); console.log(elements[0].innerHTML);

Slide 13

Slide 13 text

ΠϕϯτʢΠϕϯτϋϯυϥʣ  Ϣʔβ͕ൃੜͤ͞ΔΠϕϯτʹର͠ɺΠϕϯτϋϯυϥʢؔ਺ʣΛ࣮ߦ͢Δ  ʮૹ৴Ϙλϯ͕ԡ͞ΕͨΒϑΥʔϜͷσʔλΛݕূ͢Δʯ  ʮೖྗ͞ΕͨΩʔͷจࣈΛνΣοΫ͢Δʯ  Πϕϯτϋϯυϥͷछྨ  PODMJDL  POLFZVQ  PODIBOHF  POMPBE  POTFMFDU

Slide 14

Slide 14 text

Πϕϯτϋϯυϥͷ࢖͍ํ function changeGreeting(value) { document.getElementById('greeting-message').innerText = value; }
Your greeting

Slide 15

Slide 15 text

ΠϕϯτʢΠϕϯτϦεφʣ  ԿΒ͔ͷΠϕϯτΛड͚औͬͯॲཧΛ࣮ߦ͢Δ  Πϕϯτϋϯυϥ͸ͭͷཁૉʹରͭ͠ͷΠϕϯτ͔࣮͠ߦͰ͖ͳ͍͕ɺΠ ϕϯτϦεφ͸ෳ਺ͷΠϕϯτΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ 
 // ಉ͡ཁૉʹෳ਺ͷϋϯυϥ͕ొ࿥͞ΕͯΔ৔߹ɺޙʹࢦఆͨ͠ํ͕༏ઌ͞ΕΔ window.onload = function() { console.log(‘Hello!’); 
 }; 
 window.onload = function() { conosle.log(‘good bye!’); 
 }; 


Slide 16

Slide 16 text

ΠϕϯτϦεφͷ࢖͍ํ
Your greeting

var greetingMessage = document.getElementById('greeting'); greetingMessage.addEventListener('keyup', function(e) { document.getElementById('greeting-message').innerText = e.target.value; }, false);

Slide 17

Slide 17 text

%)5.-ͰͰ͖Δ͜ͱͷ୅දྫ  Ϛ΢εΛಈ͔͢ͱϙΠϯλʹˑ͕͖ͭ·ͱ͏  ઇͷ݁থ͕߱Δ  ʮӈΫϦοΫېࢭͰ͢ʂʂʂʯͱΞϥʔτΛग़͢͜ͱ͕Ͱ͖Δ

Slide 18

Slide 18 text

ණՏظͷ౸དྷ  ֤ϒϥ΢βϕϯμʔ͸ಠࣗͷ࢓༷Λ֦ு͢ΔͨΊɺϒϥ΢βؒͷޓ׵ੑ͸ߴ ͍΋ͷͱ͸ݴ͑ͳ͔ͬͨ  ҰͭͷॲཧΛ࣮ߦ͍͚ͨͩ͠ͳͷʹɺϒϥ΢β͝ͱʹίʔυΛ෼ذͯ͠ هड़͢Δ͜ͱ΋͋Γɺ਺ଟ͘ͷόουϊ΢ϋ΢ΛੜΉ݁Ռʹ  ηΩϡϦςΟϗʔϧ΋ͨ͘͞Μʂ  ʮ+BWB4DSJQU͸Φϯ͸৘ऑͷۃΈʂʯ  ઇ͕߱ΔαΠτ͕૿͑ɺ஍ٿͷؾީ͕௕ظʹ౉ͬͯפྫྷԽ  ණՏظ࣌୅΁  ೥ɺ&$."ʢඪ४Խن֨ʣ͕ެ։͞ΕΔ

Slide 19

Slide 19 text

೥୅த൫"+"9ͷొ৔  8FCٕज़΍௨৴ճઢͷൃలʹΑΓɺຊ֨తʹ8FCΞϓϦ͕ීٴ࢝͠ΊΔ  8FC  "+"9ʢඇಉظ੍ޚʣ͕ొ৔  %).5- 9.-)UUQ3FRVFTUΛ૊Έ߹Θٕͤͨज़  (PPHMF.BQTͷొ৔  9.-)UUQ3FRVFTU  +BWB4DSJQUͷ)551௨৴ػೳΛ༻͍ͯɺಈతϑΝΠϧΛಡΈࠐΉ"1*  ΫϩευϝΠϯ੍໿ʹΑΓɺ֎෦αʔόͷϑΝΠϧΛಡΈࠐΉ͜ͱ͸Ͱ ͖ͳ͍ʢͨͩ͠+40/1Λ࢖͑͹ಡΈࠐΈՄೳʣ

Slide 20

Slide 20 text

 "+"9ϥΠϒϥϦ͕ଓʑͱొ৔͠ɺ࠶ͼ+BWB4DSJQU͕٭ޫΛཋͼ࢝ΊΔ  ୅දతͳϥΠϒϥϦ  QSPUPUZQFKTɺ:6*ɺK2VFSZ  ػೳ  Ϋϩεϒϥ΢βରԠ  "+"9ػೳ  ηϨΫλΛ࢖ͬͨ%0.ૢ࡞  Ϧον6*ɺ69ͷఏڙ ೥୅ޙ൒"+"9ϥΠϒϥϦͷొ৔

Slide 21

Slide 21 text

K2VFSZͷαϯϓϧίʔυ </ script> <script> $(document).ready(function(){ $('#greeting').keyup(function(e){ $('#greeting-message').text(e.target.value); }); });
Your greeting

Slide 22

Slide 22 text

ϒϥ΢βઓ૪࠶ͼ  3&45"1*ͷར༻͕ྲྀߦΓ࢝ΊΔ  GBDFCPPLɺ5XJUUFSɺBNB[POɺNJYJ  .P[JMMB'PVOEBUJPOʹΑΔ+BWB4DSJQUͷύϑΥʔϚϯεվળ  +BWB4DSJQUͷߴ଎Խڝ૪ʢ୹ظϦϦʔεαΠΫϧʣ͕࢝·Δ  )5.-΍$44ͷ࣮૷΋ணʑͱਐߦத  ֤ϒϥ΢β͕౥ࡌ͢Δ+BWB4DSJQUΤϯδϯ  $ISPNF7  'JSFGPY+ÅHFS.POLFZ  *OUFSOFU&YQMPSFS$IBLSB

Slide 23

Slide 23 text

೥ͷτϨϯυ

Slide 24

Slide 24 text

೥͸+BWB4DSJQU.7$࣌୅ͷນ։͚  "+"9ϥΠϒϥϦ͕ొ৔͓͔ͨ͛͠ͰϑϩϯτΤϯυͷ։ൃ͸ָʹͳͬͨ  ࠓޙ+BWB4DSJQUΛ࢖͏৔໘͸·͢·͢૿͑ͯ͘ΔͰ͋Ζ͏  )5.-ɺ$44ɺ3&45"1*ʜ  ෳࡶԽ͢ΔίʔυʹରԠ͢ΔͨΊ+BWB4DSJQUʹ΋.7$ͷ೾͕͖ͨʂ

Slide 25

Slide 25 text

.7$ϑϨʔϜϫʔΫͷൺֱ  ଓʑͱ.7$ϑϨʔϜϫʔΫ͕ొ৔͍ͯ͠Δ 5IF5PQ+BWBTDSJQU.7$'SBNFXPSLT3FWJFXFE IUUQDPEFCSJFGDPNUIFUPQKBWBTDSJQUNWDGSBNFXPSLTSFWJFXFE

Slide 26

Slide 26 text

 ༗ྗީิ͸#BDLCPOFKT  ࠷ۙ(PPHMF͕ϦϦʔεͨ͠"OHVMBS+4΋஫໨ג ओཁϑϨʔϜϫʔΫ

Slide 27

Slide 27 text

"OHVMBS+4ͷαϯϓϧίʔυ
Your greeting

{{yourName}}

Slide 28

Slide 28 text

"OHVMBS+4σϞϯετϨʔγϣϯ  6*όΠϯσΟϯά  IUUQQIQVOJUBOHVMBSKTVJ@CJOEJOHT  ίϯτϩʔϥΛ࢖͏  IUUQQIQVOJUBOHVMBSKTMPPQ@ fi MUFS  5XJUUFS"1*ͷར༻  IUUQQIQVOJUBOHVMBSKTUXJUUFS

Slide 29

Slide 29 text

͜Ε͔Βͷ+BWB4DSJQU  αʔόαΠυ+BWB4DSJQUʢ/PEFKTɺ(PPHMF"QQT4DSJQU౳ʣͷར༻  ΫϥΠΞϯταʔόαΠυશͯΛ+BWB4DSJQUԽ͢Δ͜ͱ΋Մೳ

Slide 30

Slide 30 text

࠷ޙʹೋݴ͘Β͍

Slide 31

Slide 31 text

+BWB4DSJQU௒ΠΠ͡ΌΜʂ  ϑΥʔϜͷσʔλνΣοΫ͸+BWB4DSJQUʹҰ೚͠Α͏ʂ  ةݥɻ+BWB4DSJQU͸ແޮʹͰ͖Δ͜ͱΛ๨Εͯ͸ͳΒͳ͍  αʔόαΠυͰݕূ͍ͯ͠ͳ͍ͱɺࢥΘ͵ηΩϡϦςΟϗʔϧΛಥ͔Ε ΔՄೳੑ͕͋Δ  αʔόαΠυͷݕূΛඞਢͱ͠ɺ+BWB4DSJQUͷݕূ͸͋͘·Ͱิॿతͳ ΋ͷͱߟ͑Δ΂͖  1$ɺεϚʔτϑΥϯɺΨϥέʔʹରԠͪ͠Ό͓͏ʂ  ࢒೦ͳ͕ΒΨϥέʔʢώϡʔνϟʔϑΥϯʣ͸+BWB4DSJQUʹඇରԠ  ೔ຊ͸ະͩΨϥέʔׂ͕ʂ

Slide 32

Slide 32 text

+BWB4DSJQUͷ։ൃςΫχοΫ  ιʔείʔυͷѹॖ  $%/ͷར༻  σόοάߏจͷར༻  σόοάɺϓϩϑΝΠϦϯάπʔϧͷར༻  $ISPNFσϕϩούʔπʔϧ  'JSFGPY'JSFCVH  ςετπʔϧͷಋೖ  26OJU  +FOLJOT