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

2013年新卒研修 JavaScript基礎

2013年新卒研修 JavaScript基礎

MIXI ENGINEERS

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  ˓ ^  ^ ^