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

2013年新卒研修 JavaScript基礎

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

2013年新卒研修 JavaScript基礎

Avatar for MIXI ENGINEERS

MIXI ENGINEERS PRO

September 13, 2013
Tweet

More Decks by MIXI ENGINEERS

Other Decks in Technology

Transcript

  1. +4Ͱͭ͘ΕΔ΋ͷ w࢖͍΍͍͢6*ɺ͔͍͍ͬ͜6* wϒϥ΢βήʔϜ wJ04 "OESPJEͷωΠςΟϒΞϓϦ ʢ5JUBJOVNͳͲϑϨʔϜϫʔΫΛར༻ʣ wࠓޙग़Δ'JSFGPY04΍5BJ[FOͷω ΠςΟϒΞϓϦʢϑϨʔϜϫʔΫͳ͠ Ͱʣ w8JOEPXT̔ΞϓϦ

    wαʔόʔαΠυϓϩάϥϛϯά ʢωοτϫʔΫϓϩάϥϛϯάɺϑΝ ΠϧॲཧͳͲʣ wνϟοτͳͲϦΞϧλΠϜੑͷߴ ͍8FCΞϓϦ ΫϥΠΞϯταΠυ+4 ϒϥ΢β֦ு αʔόʔαΠυ+4 ʢ/PEFKTͳͲʣ ωΠςΟϒΞϓϦ 
  2. ߋ৽ੑ 69 ྑ ѱ ߴ ௿ ΢Σϒ wωΠςΟϒͷ"1*ʹ௚઀ΞΫηεͰ͖ΔͷͰ ࣗ༝౓͕ߴ͍ w୺຤ʹΠϯετʔϧ͢ΔͷͰɺωοτϫʔΫ

    ܦ༝ͰಡΈࠐΉ΋ͷ͕গͳ͘ɺىಈ͕ૣ͍ ʢΞϓϦʹΑͬͯ͸ΦϑϥΠϯͰ΋࢖͑Δʣ w৹͕ࠪ͋ΔͨΊ͙͢ʹϦϦʔεͰ͖ͳ͍ʢJ04ʣ wϢʔβʔ͕ΞϓϦΛΞοϓσʔτ͢Δͱ͸ ݶΒͳ͍ ˠόάΛमਖ਼ͯ͠΋͙͢ʹϢʔβʹಧ͚ΒΕͳ͍ ˠࡉ͔͍ݕূͱվળ͕ͮ͠Β͍ wϚϧνϓϥοτϑΥʔϜରԠͷίετ͕ߴ͍ ωΠςΟϒ ΞϓϦ 
  3. ߋ৽ੑ 69 ྑ ѱ ߴ ௿ ωΠςΟϒ w৹ࠪ͸ͳ͍ͷͰ͙͢ʹϦϦʔεͰ͖Δ wϢʔβ͕Πϯετʔϧ͠ͳͯ͘΋࠷৽൛͕ ൓ө͞ΕΔ

    wϚϧνϓϥοτϑΥʔϜରԠ͕༰қ wωΠςΟϒͷ"1*ʹ௚઀ΞΫηεͰ͖ͳ͍ ͷͰɺࣗ༝౓͕௿͍ w)5.- $44 +4 ը૾ͳͲຖճଟ͘ͷϑ ΝΠϧΛϩʔυ͢ΔͷͰىಈ͕஗͍ ΢Σϒ ΞϓϦ 
  4. 8FCͷ69ΛΑΓྑ͘͢ΔͨΊͷٕज़ w%FWJDF"1*͂ w .FEJB$BQUVSF"1*ʢΧϝϥ΍ϚΠΫʹΞΫηεʣ w $POUBDUT"1*ʢి࿩ாʹΞΫηεʣ wΦϑϥΠϯΞϓϦέʔγϣϯ w "QQMJDBUJPO$BDIF w

    /FUXPSL*OGPSNBUJPO"1* ʴϋʔυ΢ΣΞεϖοΫͷ޲্ɺ௨৴଎౓ͷ޲্ ʲࢀߟʳ೥ʹ͸ 8FCΞϓϦͷʮΦϑ ϥΠϯϑΝʔετʯ ͕ྲྀߦ͢ΔͷͰ͸ͳ ͍͔ʁʵ1VCMJDLFZ 
  5. w࢖͍΍͍͢6*ɺ͔͍͍ͬ͜6* wϒϥ΢βήʔϜ wJ04 "OESPJEͷωΠςΟϒΞϓϦ ʢ5JUBJOVNͳͲϑϨʔϜϫʔΫΛར༻ʣ wࠓޙग़Δ'JSFGPY04΍5BJ[FOͷω ΠςΟϒΞϓϦʢϑϨʔϜϫʔΫͳ͠ Ͱʣ w8JOEPXT̔ΞϓϦ wαʔόʔαΠυϓϩάϥϛϯά

    ʢωοτϫʔΫϓϩάϥϛϯάɺϑΝ ΠϧॲཧͳͲʣ wνϟοτͳͲϦΞϧλΠϜੑͷߴ ͍8FCΞϓϦ ΫϥΠΞϯταΠυ+4 ϒϥ΢β֦ு αʔόʔαΠυ+4 ʢ/PEFKTͳͲʣ ωΠςΟϒΞϓϦ ຊݚमͰ͸ΫϥΠΞϯταΠυ+4Λѻ͍·͢ 
  6. w पғͷਓͷαϙʔτ w ࣗಈͰKTIJOU͕࣮ߦ͞ΕΔ؀ڥΛ੔උ WJNTZOUBTUJD KTIJOUWJN FNBDTKTIJOUNPEF qZNBLFOPEFKTIJOU w CSPPLKT΍/BNFTQBDFKTͷֶश

    IUUQTHJUIVCDPNIJSPLJEBJDIJOBNFTQBDFKT IUUQTHJUIVCDPNIJSPLJEBJDIJCSPPL w "QQMJDBUJPO$BDIFͳͲ8FCͷ69ΛΑΓྑ͘ ͢ΔͨΊͷٕज़Λௐࠪ +4Ϛελʔͷਓ΍՝୊͕ૣ͘ऴΘͬͨਓ͸ ࣍ͷ͜ͱʹऔΓ૊ΜͰ͍ͩ͘͞ 
  7. +BWB4DSJQUͷ࢖༻ํ๏  )5.-λάʹ௚઀ຒΊࠐΉ  TDSJQUλάΛར༻͢Δ  ֎෦ϑΝΠϧΛಡΈࠐΉ <script  type=“text/javascript”  src=“helloworld.js”>

    </scirpt> <script  type=“text/javascript”>alert(‘hello’);</scirpt> <a  href=”javascript:alert(‘hello’);”>hello</a> 
  8. func%on'test'()'{' '''''var'message'='"a";' '''''if'(1)'{' '''''''''var'message'='"b";' '''''''''print('if_scope'<>'''+'message');' '''''}'' '''''print("test_func'<>'"'+'message);' '}' '' 'test();

    sub'test'{' '''''my'$message'='"a";' '''''if'(1)'{' '''''''''my'$message'='"b";' '''''''''print'"if_scope'<>'".$message."\n";' '''''}' '''''print'"test_scope'<>'".$message."\n";' '}' ''' 'test; Perl JS if_scope  -­‐>  b test_scope  -­‐>  a if_scope  -­‐>  b test_scope  -­‐>  b 
  9. %0.πϦʔ <UL> <LI> HogeHogeHoge <LI> <LI> HugaHugaHuga MogeMogeMoge  

       <ul>    <li>HogeHogeHoge</li>    <li>HugaHugaHuga</li>    <li>MogeMogeMoge</li> </ul> ̍ͭ̍ͭͷཁૉΛϊʔυͱ͍͍·͢ 
  10. ϊʔυͷؔ܎ <LI> <LI> <LI> previousSibiling nextSibiling <UL> <UL> <UL> <DIV>

    parentNode    firstChild childNodes [0] [1] [2] lastChild 
  11. %0.ૢ࡞ͷͨΊͷؔ਺ w HFU&MFNFOU#Z*E lJEz w HFU&MFNFOUT#Z$MBTT/BNF lDMBTT/BNFz  w HFU&MFNFOUT#Z5BH/BNF

    lUBH/BNFz w RVFSZ4FMFDUPS lDTTTFMFDUPSTz w RVFSZ4FMFDUPS"MM lDTTTFMFDUPSTz ˞RVFSZ4FMFDUPS͸ɺ*&Ҏલ͸ඇରԠ 
  12. ԋशʢ͢΂ͯ1$൛NJYJʣ  ্ʹฒΜͰ͍ΔϝχϡʔϘλϯʢϓϩϑΟʔϧɺ ༑ਓϦετɺͭͿ΍͖ɾɾɾʣͷ͏ͪͲΕ͔̍ͭ Λඇදࣔʹ͍ͯͩ͘͠͞ ώϯτɿIJEF ͰඇදࣔʹͰ͖·͢  ࠨӈͷΧϥϜΛ൒ಁ໌ʹ͍ͯͩ͘͠͞ʢߦͰʣ ώϯτɿΧϯϚ۠੾ΓͰෳ਺ͷηϨΫλΛࢦఆͰ͖·͢

    ɹɹɹɹDTTͷPQBDJUZଐੑͰෆಁ໌౓ΛࢦఆͰ͖·͢  ϑΟʔυʹදࣔ͞Ε͍ͯΔ༑ਓશһͷχοΫωʔ Ϝͷ຤ඌʹɺ Λ͚͍ͭͯͩ͘͞ ώϯτɿVOEFSTDPSFͷFBDI Λ࢖͍·͠ΐ͏ˠϦϑΝϨϯε 
  13. BEE&WFOU-JTUFOFS WBSBEPDVNFOUHFU&MFNFOU#Z*E lUFTUz  BBEE&WFOU-JTUFOFS lDMJDLz GVODUJPO F \ BMFSU

    lIPHFz  ^ GBMTF  BEE&WFOU-JTUFOFS UZQF FWFOU-JTUFOFS VTF$BQUVSF  
  14. Πϕϯτͷ఻೻ <UL> <LI> HogeHogeHoge <LI> <LI> HugaHugaHuga MogeMogeMoge ൃՐ ᶄόϒϦϯά

    ᶃΩϟϓνϟϦϯά EPDVNFOU ΦϒδΣΫτ υΩϡϝϯτͷ ϧʔτϊʔυ 
  15. <UL> <LI> HogeHogeHoge <LI> <LI> HugaHugaHuga MogeMogeMoge EPDVNFOU ΦϒδΣΫτ ֤MJʹผʑʹΠϕϯτϦ

    εφʔΛొ࿥͢ΔͷͰ͸ͳ ͘ɺ্ҐͷVMͻͱͭʹొ ࿥͢Ε͹0, EFMFHBUFʢҕৡʣ υΩϡϝϯτͷ ϧʔτϊʔυ ΠϕϯτϦεφʔ ΠϕϯτϦεφʔ ΠϕϯτϦεφʔ ΠϕϯτϦεφʔ 
  16. ՝୊ w ؆қΠΠωϘλϯΛͭͬͯ͘Έ·͠ΐ͏ w Ϙλϯ͕ԡ͞ΕͨΒݟͨ໨Λม͍͑ͯͩ͘͞ w ༨༟͕͋Ε͹ෳ਺ͷϘλϯʹ̍ͭͷΠϕϯτϦεφʔͰର Ԡ͍ͯͩ͘͠͞ʢK2VFSZͷPO ͰEFMFHBUFͯͩ͘͠͞ ͍ʣ

    w ౤ߘϑΥʔϜʹจࣈ͕ೖྗ͞ΕΔͨͼʹจࣈΧ΢ϯτ Λߋ৽͍ͯͩ͘͠͞ ˞͖ͭͮʢͭͿ΍͘ϘλϯΛԡͨ͠ΒϑΟʔυ͕දࣔ͞ΕΔͳͲʣ ɹ͸࠷ޙͷ՝୊Ͱ΍Γ·͢ 
  17. ؔ਺એݴจ BEE)PHF lCFGPSFz lCFGPSF)PHFz GVODUJPOBEE)PHF TUS \ SFUVSOTUS l)PHFz ^

    BEE)PHF lBGUFSz lBGUFS)PHFz w ؔ਺એݴจ͸ר্͖͛ΒΕΔͷͰɺؔ਺એݴจΑΓ্Ͱݺͼ ग़ͯ͠΋ਖ਼࣮͘͠ߦ͞Ε·͢ 
  18. ؔ਺Ϧςϥϧࣜ WBSBSSBZ<> BSSBZQVTI BEE'VHB  BSSBZ<> lUFTUz  UFTU'VHB WBSPCK\^

    PCKBEE'VHBBEE'VHB PCKBEE'VHB lUFTUz  UFTU'VHB ഑ྻ ΦϒδΣΫτ w ؔ਺Λ഑ྻʹ௥ՃͰ͖·͢ w ؔ਺ΛΦϒδΣΫτͷϓϩύςΟʹઃఆͰ͖·͢ 
  19. ؔ਺ΛҾ਺ʹͱΔؔ਺ K lCVUUPOz PO lDMJDLz GVODUJPO \ BMFSU lDMJDLFEz 

    ^  w ͜ͷΑ͏ʹɺ໊લͷແ͍ؔ਺Λແ໊ؔ਺΍ಗ໊ؔ਺ͱ͍͍·͢ w ࣄલʹొ࿥͓͖ͯ͠ɺඞཁʹԠͯ͋͡ͱ͔Βݺͼग़͞ΕΔؔ਺ ΛίʔϧόοΫؔ਺ͱ͍͍·͢ 
  20. ؔ਺Λฦؔ͢਺ WBSDSFBUF"EE4US'VODGVODUJPO TV⒏Y \ SFUVSOGVODUJPO TUS \ SFUVSOTUS TV⒏Y ^

    ^ WBSBEE)PHFDSFBUF"EE4US'VOD l)PHFz  WBSBEE'VHBDSFBUF"EE4US'VOD l'VHBz  BEE)PHF lUFTUz UFTU)PHF BEE'VHB lUFTUz UFTU'VHB 
  21. Ϋϩʔδϟ WBSDSFBUF"EE)PHF8JUI$PVOUGVODUJPO \ WBSDPVOU SFUVSOGVODUJPO TUS \ DPVOU  SFUVSOTUS

    l)PHFz DPVOU ^ ^ WBSBEE)PHFDSFBUF"EE)PHF8JUI$PVOU  BEE)PHF lUFTUz UFTU)PHF BEE)PHF lUFTUz UFTU)PHF  ࣗ෼ͷ֎ଆʹ͋Δ ม਺Λࢀর
  22. ଈ࣌ؔ਺ʢม਺ͷείʔϓʣ GVODUJPO \ WBSBlBBBz DPOTPMFMPH B BBB ^  DPOTPMFMPH

    B VOEFpOFE w ؔ਺Λఆٛͯ͠ଈ࣮ߦ͢Δ w άϩʔόϧۭؒΛԚછ͠ͳ͍ͨΊ͚ͩʹར༻ 
  23. ͦΕҎ֎ͷݺͼग़͠ WBSQFSTPO\ IFJHIU XFJHIU CNJGVODUJPO \ SFUVSOUIJTXFJHIU UIJTIFJHIU UIJTIFJHIU 

    ^ ^ XJOEPXCNJQFSTPOCNJάϩʔόϧม਺ʹ୅ೖ XJOEPXCNJ /B/ XJOEPXIFJHIUXJOEPXXFJHIU XJOEPXCNJ  
  24. ิ଍ɿແ໊ؔ਺಺ͷUIJT K lCVUUPOz PO lDMJDLz GVODUJPO \ BMFSU lDMJDLFEz 

    ^  w ͜Ε͚ͩͰ͸ɺແ໊ؔ਺͕ͲͷΑ͏ʹݺͼग़͞ΕΔ͔Θ͔Β ͳ͍ w ΠϕϯτϦεφʔͷ৔߹͸ɺΠϕϯτλʔήοτʢ͜ͷ৔߹ ͸ΫϦοΫ͞ΕͨϘλϯʣ͕UIJTʹೖΔ 
  25. WPJDF'PSN\ UFYUBSFBK lUFYUBSFBz TFU&WFOU-JTUFOFSGVODUJPO \ WBSTFMGUIJT K lCVUUPOz PO lDMJDLz

    GVODUJPO \ DPOTPMFMPH UIJTUFYUBSFBWBM  ✕ DPOTPMFMPH TFMGUFYUBSFBWBM  ˓ ^  ^ ^