2018 웹 테크 콘서트 - JavaScript 천천히 시작하기

:".00/*/&!ZBNPPZBNPP!OBWFSDPN +BWB4DSJQU  4MPX4UBSUFS ੗߄झ௼݀౟ୌୌ൤द੘ೞӝ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN @yamoo9 ஘੺ೠঠޖि */4536$503

:".00/*/&!ZBNPPZBNPP!OBWFSDPN -&"3/ BEGINNER 0000000000 LEVEL 1-3 STEPS 1 ੗߄झ௼݀౟߸ࣻ৬ؘ੉ఠఋੑ ݫݽܻ
߸ࣻ ࢚ࣻ ఃਕ٘ ো࢑੗ ؘ੉ఠఋੑ   ఋੑѨࢎ ޙࢲё୓ݽ؛ ੽Ӕҗઑ੘

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߅झ ই੉మ ߹ఋੑ ߡࢽఋੑ Әചఋੑ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻ ؘ੉ఠ ं੗ఋੑ ޙ੗ఋੑ ֤ܻఋੑ WBSCPY աੋ GBMTF

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻ ؘ੉ఠ ं੗ఋੑ ޙ੗ఋੑ ܻࠛ঱ఋੑ աੋ GBMTF
WBSCPY ো࢑੗

ݫݽܻ ো࢑੗

ݫݽܻ ো࢑੗ CPY ݠन঱য ೐۽Ӓې߁঱য

:".00/*/&!ZBNPPZBNPP!OBWFSDPN աੋ WBSCPY ݺ۸ޙ ߸ࣻ ࢶ঱ ߸ࣻ  ੉ܴ ؀ੑ 
ো࢑੗ ؘ੉ఠ  ఋੑ ч

:".00/*/&!ZBNPPZBNPP!OBWFSDPN WBSNBY@WBMVF WBSMFDUVSF@UJUMF+BWB4DSJQUୌୌ൤द੘ೞӝ WBSBSF:PV#FHJOOFSUSVF ݺ۸ޙҳ࠙ ࣁ޷ ௒ۿ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN WBSNBY@WBMVF WBSMFDUVSF@UJUMF+BWB4DSJQUୌୌ൤द੘ೞӝ WBSBSF:PV#FHJOOFSUSVF ৢ߄ܲ߸ࣻ੉ܴ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN WBSNBYWBMVF WBSMFDUVSF@UJUMF+BWB4DSJQUୌୌ൤द੘ೞӝ WBSBSFZPVCFHJOOFSUSVF ੜޅػ߸ࣻ੉ܴ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻب୹ೞӝ ׀খ੄ё୓ܳ࠙ࢳೞৈ੸੺ೠ ߸ٜࣻܳ݅যࠁࣁਃ ݽন TIBQF ࢚࢝ DPMPS ਊب VTF
௼ӝ TJ[F ੤૕ NBUFSJBM ઁઑࢎ NBLFS

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ؘ੉ఠ ч

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻୡӝചؘ੉ఠೡ׼ var shape = 'ҳ୓'; // ݽন ➟ String
var meterial = 'ୌোҊޖ PVC'; // ੤ܐ ➟ String var color = 'োف'; // ࢚࢝ ➟ String var maker = '઺Ҵ OEM'; // ઁઑ ➟ String var use = 'పפझ ҕ'; // ਊب ➟ String var size = '67mm'; // ௼ӝ ➟ String

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻୡӝചؘ੉ఠೡ׼ var bundle = true; // ޘ਺ ਬޖ ➟
Boolean var count = 10; // ѐࣻ ➟ Number var used_it = false; // ઺Ҋ ਬޖ ➟ Boolean

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻࢶ঱➟ؘ੉ఠೡ׼ // ߸ࣻࢶ঱ ➟ undefined var shape, meterial, color,
maker, use,   size, bundle, count, used_it; // ࢶ঱ ੉റ ч ೡ׼ shape = 'ҳ୓'; used_it = false; count = 10;

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻࢶ঱ޘӝ // ߸ࣻ ࢶ঱ ޘӝ var shape = 'ҳ୓',
used_it = false, count = 10;

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻ੉ܴ୽جޙઁ పפझҕ 5FOOJTCBMM ঠҳҕ  #BTFCBMM

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻ੉ܴ୽جޙઁ ঠҳҕ  #BTFCBMM TIBQF TJ[F NFUFSJBM DPMPS NBLFS VTF
TIBQF TJ[F NFUFSJBM DPMPS NBLFS VTF పפझҕ 5FOOJTCBMM ߸ࣻ੉ܴ਷ױѐ੄ؘ੉ఠч݅ ೡ׼߉ਸࣻ੓णפ׮

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ߸ࣻ੉ܴ୽جޙઁ ߸ࣻ੉ܴ਷ױѐ੄ؘ੉ఠч݅ ೡ׼߉ਸࣻ੓णפ׮ var shape = 'ҳ୓'; var meterial
= 'ୌোҊޖ PVC'; var color = 'োف'; var maker = '઺Ҵ OEM'; var use = 'పפझ ҕ'; var size = '67mm'; var shape = 'ҳ୓'; var meterial = 'ੋઑоલ Ҋޖ'; var color = 'ೞন'; var maker = '઺Ҵ OEM'; var use = 'ঠҳ ҕ'; var size = '23cm';

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ؘ੉ఠ ч

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ؘ੉ఠఋੑ ؘ੉ఠఋੑ਷௼ѱਗदਬഋҗ  ё୓ਬഋਵ۽ҳ࠙ೡࣻ੓णפ׮ 0#+&$5 13*.*5*7&

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ё୓ PCKFDU ח઺Қഐ  ಴ӝߨਸࢎਊ೤פ׮ ؘ੉ఠఋੑ ؘ੉ఠఋੑ਷௼ѱਗदਬഋҗ  ё୓ਬഋਵ۽ҳ࠙ೡࣻ੓णפ׮ 0#+&$5 13*.*5*7&
TIBQF VTFE@JU DPVOU 10 false 'ҳ୓' TIBQF VTFE@JU DPVOU ࣘࢿ QSPQFSUJFT CBMM ߸ࣻ {}

:".00/*/&!ZBNPPZBNPP!OBWFSDPN var base_ball = { shape : 'ҳ୓', meterial :
'ੋઑоલ Ҋޖ', color : 'ೞন', maker : '઺Ҵ OEM', use : 'ঠҳ ҕ', size : '23cm', bundle : false, count : 1, used_it : true }; var tennis_ball = { shape : 'ҳ୓', meterial : 'ୌোҊޖ PVC', color : 'োف', maker : '઺Ҵ OEM', use : 'పפझ ҕ', size : '67mm', bundle : true, count : 10, used_it : false }; ё୓੿੄

:".00/*/&!ZBNPPZBNPP!OBWFSDPN console.log(base_ball.color);   // ঠҳ ҕ ࢚࢝: 'ೞন' console.log(base_ball.used_it);  
// ঠҳ ҕ ࢎਊ ਬޖ: true ё୓ࣘࢿ੽Ӕߑߨ ё୓੄ࣘࢿী੽Ӕೞחߑߨ਷  ё୓ࣘࢿੑפ׮ console.log(tennis_ball.color);  // పפझ ҕ ࢚࢝: 'োف' console.log(tennis_ball.count);  // పפझ ҕ ѐࣻ: 10

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ޙࢲё୓੽Ӕઑ੘ ޙࢲё୓ী੽Ӕೞחߑߨҗઑ੘ ೞחߑߨਸҕࠗ೧ࠇद׮ HPPHMKOC,T

:".00/*/&!ZBNPPZBNPP!OBWFSDPN EPDVNFOUPCKFDU GJHVSFPCKFDU

:".00/*/&!ZBNPPZBNPP!OBWFSDPN EPDVNFOUPCKFDU JNBHFPCKFDU IUNMPCKFDU CPEZPCKFDU IFBEJOHPCKFDU GJHVSFPCKFDU %0.ޙࢲ ё୓ ݽ؛
ೖӏযё୓ী  ੽ӔೞҊर਷ؘ যڌѱ೧ঠೡө

:".00/*/&!ZBNPPZBNPP!OBWFSDPN য় যڌѱೞחѢঠ ঌ۰઴ې EPDVNFOUё୓ܳ  ా೧ޙࢲё୓ী  ੽Ӕೡࣻ੓য

:".00/*/&!ZBNPPZBNPP!OBWFSDPN য়Ӓۧҵ  Ӓؘ۠௏٘ખ  ೧ࢳ೧઴ې ҳ࠙੉ੜউغ֎ যڌѱ׮ܲѢ૑ EPDVNFOUё୓ח  $44ࢶఖ੗ܳా೧ 
ޙࢲё୓ী੽Ӕ  ೡࣻ੓חߑߨਸ  ઁҕ೧ࠊࠊ document.querySelector('figure'); document.querySelectorAll('figure'); // ױࣻ(1ѐ) // ࠂࣻ(1ѐ ੉࢚)

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ইೞ Ӓۢখীࢲҕࠗೠ ߸ࣻܳࢎਊ೧ࢲ ޙࢲё୓ܳӝরೡ ࣻ੓ѷ֎ ݏই ೞաܳߓ਋ݶ ৌਸঌইӝࢂؘ
ӝ؀੉࢚੉ঠ ੜ೮য var ironman = document.querySelector('.hero-ironman'); var captain = document.querySelector('.hero-captain-america');

:".00/*/&!ZBNPPZBNPP!OBWFSDPN য়ঌѷয ё୓ࣘࢿਵ۽੽Ӕ ઑ੘ೡࣻ੓חѢҵ ੉ۧѱೞחѦѢঠ ݏ૑ ё୓חࣘࢿਸ о૓׮Ҋ೮঻૑ ޙࢲё୓ܳా೧ ࣘࢿਸࢎਊ੗о
߸҃ೡࣻ੓য // ੽Ӕ: ё୓੄ ࣘࢿ console.log( captain.id ); console.log( captain.className ); console.log( captain.nodeName );

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ইೞ ௿ېझࣘࢿਸ୶о ೞѢա ࣗਬೞҊ ੓ח૑ഛੋೡࣻ ੓ҳա Ӓې)5.-ޙࢲ ё୓חDMBTT-JTU ࣘࢿਸо૑Ҋ੓য
੉ܳ੉ਊ೧ઑ੘ೡ ࣻ੓૑ // ઑ੘: ऒ٘ ௿ېझ ୶о captain.classList.add('shield'); // Ѩష: ऒ٘ ௿ېझ ࣗਬ ৈࠗ ഛੋ console.log( captain.classList.contains('shield') );

:".00/*/&!ZBNPPZBNPP!OBWFSDPN Ӓۢ$44झఋੌਸ ઁযೞ۰ݶযڌѱ ೧ঠೞ૑ ખঌ۰઻ જই TUZMFࣘࢿਸࢎਊ  ೞݶظ઱੄ೡѤ ױਤܳо૓ч਷
ޙ੗۽ࢸ੿೧ঠ೧ // CSS ࣘࢿ ч ੍ӝ: width, display, transform, ... captain.style.width; // CSS ࣘࢿ ч ॳӝ captain.style.marginLeft = "20px";

:".00/*/&!ZBNPPZBNPP!OBWFSDPN Ӓۧҳա $44݅ঌݶࣚऔѱ ޙࢲё୓ܳઑ੘ೡ ࣻ੓ѷযજই ੉୊ۢ $44झఋੌࣘࢿਸ ѐ߹੸ਵ۽ઑ੘ೞח Ѫ੉оמ೧ captain.style.opacity
= 0.568; captain.style.filter = 'grayscale(1)'; captain.style.transform = 'scale(1.22) translateY(35px)';

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ৬਋ $44୊ۢ੘ࢿೞח Ѫ੉оמ೧ ৮੹ಞೞ֎ $44ࣘࢿࢸ੿ਸ ೠؘޘযࢲઑ੘  ೞחѪبоמ೧ ࠊࠊ
captain.style.cssText = ` opacity: 0.568; filter: grayscale(1); transform: scale(1.22) translateY(35px); `;

:".00/*/&!ZBNPPZBNPP!OBWFSDPN /&95BEGINNER 0000000011 LEVEL 2-3 STEPS 2 ੗߄झ௼݀౟ೣࣻ৬੉߮౟ੋఠۑ࣌ ೣࣻ ઑѤޙ
߈ࠂޙ ো࢑୊ܻ ੉߮౟  ੉߮౟х૑߂௒ߔೣࣻ

:".00/*/&!ZBNPPZBNPP!OBWFSDPN ҳਘभࢎੌী ׮द݅աਃ ԙ?P?

2018 웹 테크 콘서트 - JavaScript 천천히 시ᄌ...

2018 웹 테크 콘서트 - JavaScript 천천히 시작하기

More Decks by yamoo9

Other Decks in Education

Featured

Transcript