Languages/Java Script

[Js] ν™œμš© | youtube μž¬μƒμ‹œκ°„ κ΅¬ν•˜κΈ° | μƒν™œμ½”λ”© javascript

μ •λ³΄λ³΄μ•ˆπŸŒ 2021. 2. 10. 19:35
λ°˜μ‘ν˜•

λͺ¨λ“  ν¬μŠ€νŒ…μ€ μΈν”„λŸ° [μƒν™œμ½”λ”©] μžλ°”μŠ€ν¬λ¦½νŠΈ κ°•μ˜μ˜ λ‚΄μš©μ„ λ‹΄κ³  있으며

μΆœμ²˜λŠ” μ•„λž˜μ˜ μ£Όμ†Œλ‘œ "egoing Lee"λ‹˜μ˜ μžλ£Œμž…λ‹ˆλ‹€. 

상업적인 μ˜λ„κ°€ μ•„λ‹Œ κ³΅λΆ€ν•œ 것을 μ •λ¦¬ν•΄λ†“λŠ” λͺ©μ μœΌλ‘œ ν¬μŠ€νŒ… ν•œ κ²ƒμž…λ‹ˆλ‹€.

 

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

μ›ΉλΈŒλΌμš°μ € Javascript (μžλ°”μŠ€ν¬λ¦½νŠΈ) - μΈν”„λŸ°

μƒν™œμ½”λ”© μžλ°”μŠ€ν¬λ¦½νŠΈ κ°•μ’Œ μž…λ‹ˆλ‹€. μ›ΉλΈŒλΌμš°μ €λ₯Ό 직접 μ œμ–΄ν•  수 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ 레퍼런슀λ₯Ό 곡뢀해 λ΄…λ‹ˆλ‹€. μ΄ˆκΈ‰ μ›Ή 개발 ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄ JavaScript 온라인 κ°•μ˜ μžλ°”μŠ€ν¬λ¦½νŠΈ κ°•μ’Œ

www.inflearn.com


 

유튜브둜 μ—¬λŸ¬ κ°•μ˜λ₯Ό λ³Ό λ•Œλ₯Ό κ°€μ •ν•΄λ³΄μž. μ—¬λŸ¬ κ°•μ˜μ˜ 총 μ‹œκ°„μ΄ μ–Όλ§ˆμΈμ§€ 계산해보고 싢을 λ•Œκ°€ 있기 λ§ˆλ ¨μ΄λ‹€.

κ·Έ λ•Œ, μ•„λž˜μ™€ 같은 μ½”λ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ λœλ‹€!


μ‹€μŠ΅ν•œ 유튜브 μ‚¬μ΄νŠΈλŠ” μ•„λž˜μ™€ κ°™λ‹€.

https://www.youtube.com/playlist?list=PLuHgQVnccGMA0lO0qip6Phh6UL73TS0es

 

μ‹€μŠ΅ μ—°μŠ΅μ„ ν•˜κ³  μ‹Άλ‹€λ©΄, μ•„λž˜ μ£Όμ†Œλ₯Ό μ‚¬μš©ν•˜λ©΄ λœλ‹€.

https://jsbin.com/menuziqute/1/edit?html,output

 

JS Bin

Sample of the bin:

jsbin.com

 

μ‹€μŠ΅ 예제 μ½”λ“œ

var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
/* 각 λ™μ˜μƒμ˜ μ‹œκ°„μ„ κ°€μ Έμ˜€κΈ° μœ„ν•œ ꡬ문으둜,
pl-videoλΌλŠ” 클래슀의 ν•˜μœ„μ— pl-video-time 클래슀 ν•˜μœ„μ˜ timestamp클래슀 μ•ˆμ—μ„œ
span νƒœκ·ΈλΌλŠ” 값듀을 κ°€μ Έμ™€μ„œ timesλΌλŠ” λ³€μˆ˜ μ•ˆμ— μœ μ‚¬ λ°°μ—΄ ν˜•μ‹μœΌλ‘œ κ°€μ Έμ˜¨ 값을 λŒ€μž…ν•œλ‹€.*/ 

var duration = 0;	// μ‹œκ°„μ˜ 합을 κ΅¬ν•˜κΈ° μœ„ν•œ λ³€μˆ˜λ‘œ, μ΄ˆκΈ°ν™”ν•œ 것이닀.

for(var i=0; i<times.length; i++){	// κ΅¬ν•˜κ³ μž ν•˜λŠ” μ˜μƒμ˜ μ‹œκ°„μ„ λͺ¨λ‘ ν•©μΉ˜κΈ° μœ„ν•œ λ°˜λ³΅λ¬Έμ΄λ‹€.

   var t = times[i];	// 각 λ™μ˜μƒμ˜ μ‹œκ°„μ„ λ³€μˆ˜ t에 λŒ€μž…ν•œλ‹€.
   t = t.innerText;	// νƒœκ·Έλ₯Ό λΊ€ λ¬Έμžμ—΄λ§Œ tλ³€μˆ˜μ— λ‹΄μ•„μ€€λ‹€. 즉, 각 λ™μ˜μƒ μ‹œκ°„λ§Œ κ°€μ Έμ˜¨λ‹€.
   t = t.split(':')	// λΆ„:초 ν˜•μ‹μœΌλ‘œ μ €μž₯λ˜μ–΄ 있기 λ•Œλ¬Έμ— split을 μ‚¬μš©ν•˜μ—¬ μ‹œκ°„κ³Ό 뢄을 κ΅¬λ³„ν•œλ‹€.
   min = t[0];		// λΆ„λ§Œ minλ³€μˆ˜μ— λ„£λŠ”λ‹€.
   sec = t[1];		// 초만 secλ³€μˆ˜μ— λ„£λŠ”λ‹€.
   
   duration = duration + parseInt(sec) + parseInt(min)*60
   /* λ™μ˜μƒ μ‹œκ°„μ„ ν•©μ³μ£ΌλŠ” ꡬ문으둜,
      secκ³Ό minμ•žμ— parseIntλ₯Ό λ°”κΎΈλŠ” μ΄μœ λŠ” λ¬Έμžμ—΄λ‘œ μ €μž₯된 λΆ„κ³Ό μ‹œκ°„μ„ 숫자둜 λ°”κΏ”μ£ΌλŠ” 것이닀.
      λ˜ν•œ, min에 60을 κ³±ν•œ μ΄μœ λŠ” 초둜 λ°”κΏ”μ„œ durationλ³€μˆ˜μ— λ™μ˜μƒμ˜ μ‹œκ°„μ„ 초둜 μ €μž₯ν•˜κΈ° μœ„ν•΄μ„œμ΄λ‹€.*/
}

console.log(duration/60/60);	
/* 총 μ‹œκ°„μ„ 초둜 κ΅¬ν–ˆκΈ° λ•Œλ¬Έμ— 60을 λ‚˜λˆ μ„œ μ‹œκ°„μœΌλ‘œ λ°”κΏ”μ€€λ‹€.
   60을 ν•œ 번 λ‚˜λˆ„λ©΄ 뢄을 κ΅¬ν•˜κ²Œ λœλ‹€.*/

[ μ‹€ν–‰ κ²°κ³Ό ]

μœ„μ™€ 같이 총 17μ‹œκ°„μΈ 것을 μ•Œ 수 μžˆλ‹€.

 

λ°˜μ‘ν˜•