๋…ธ๋งˆ๋“œ ๐Ÿš€ 10์ฃผ ์Šคํ„ฐ๋””_JS

jellyjojiยท2023๋…„ 4์›” 20์ผ
0

๋…ธ๋งˆ๋“œ์ฝ”๋”

๋ชฉ๋ก ๋ณด๊ธฐ
3/11

return vs console.log ์˜ ์ฐจ์ด

return ์œผ๋กœ ์ €์žฅ๋œ ํ•จ์ˆ˜ sayHello()๋Š” ์ €์žฅ๋งŒ ๋œ ์ƒํ™ฉ์ด๋ผ console์ฐฝ์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์ง€๋งŒ, console.log()๋Š” ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์†Œ๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์— console์ฐฝ์— "์•ˆ๋…•!"์ด๋ผ๋Š” ๋ฌธ์ž์—ด์ด ๋‚˜ํƒ€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

console.log๋Š” ํด๋ผ๋กœ์ด๋“œ ์นด๋ฉ”๋ผ์—ฌ์„œ ๋ช…๋ นํ•˜์ž ๋งˆ์ž ์‚ฌ์ง„ ํ•œ์žฅ ๋‚˜์˜ค๊ณ  ๋‚˜์ค‘์— ์“ธ์ˆ˜๋Š” ์—†์ง€๋งŒ,
return์€ ๋””์ง€ํ„ธ์นด๋ฉ”๋ผ์—ฌ์„œ ์ฐ๊ณ  ๋‚˜์„œ ์ €์žฅํ•˜๊ณ  ์žˆ๋‹ค๊ฐ€ ๋‚˜์ค‘์— ํ•„์š”ํ• ๋•Œ ์‚ฌ์ง„์„ ๋‹ค์‹œ ์“ธ์ˆ˜ ์žˆ๋Š”๊ฑฐ์ฃ .

console.log ํ•จ์ˆ˜๋Š” ๋ฐ˜ํ™˜ ๊ฐ’์ด ์—†์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋ณด์—ฌ์ฃผ๊ธฐ๋งŒ์„ ์œ„ํ•œ ํ•จ์ˆ˜๊ณ , return์€ ์–ด๋–ค ํ•จ์ˆ˜์—์„œ ๊ณ„์‚ฐ๋œ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๊ณ ์š”. ๊ทธ๋ž˜์„œ ํ•จ์ˆ˜์˜ return์ด ์กด์žฌํ•  ๊ฒฝ์šฐ ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ๊ณ„์‚ฐํ•œ ๊ฐ’์„ ์–ด๋– ํ•œ ๋ณ€์ˆ˜์— ์ €์žฅํ•ด์„œ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค

return

return ๋ช…๋ น๋ฌธ์€ ํ•จ์ˆ˜ ์‹คํ–‰์„ ์ข…๋ฃŒํ•˜๊ณ , ์ฃผ์–ด์ง„ ๊ฐ’์„ ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ง€์ ์œผ๋กœ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค.๊ฒฐ๊ด๊ฐ’์„ ์ €์žฅ(ํ˜ธ์ถœ ์ง€์ ์œผ๋กœ ๋ฐ˜ํ™˜)์„ ํ•˜์ง€๋งŒ ์ถœ๋ ฅ(ํ˜ธ์ถœ)์„ ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค.๋ฆฌํ„ด์„ ํ•˜๋ฉด function ์€ ๋ฉˆ์ถฐ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.
return์€ ํ•จ์ˆ˜์—์„œ ํ•จ์ˆ˜๊ฐ€ ์ฒ˜๋ฆฌํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋œ ์ž๋ฆฌ์— ์ „์†กํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค๊ณ  ๋ณด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

event , eventlistner

event
1-3-2

console.dir()

displays an interactive list of the properties of the specified JavaScript object.
๊ฐ์ฒด์•ˆ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๊ณ ์‹ถ์„๋•Œ ์‚ฌ์šฉ. ์ด๋ฒคํŠธ ๋ฆฌ์ŠคํŠธ ๋ณผ๋•Œ ์‚ฌ์šฉ.

console.dir(๋ณด๊ณ ์‹ถ์€๊ฐ์ฒดํƒœ๊ทธ)

mouseEnter mouseOver

mouseOver์™€ mouseEnter๋Š” ์–ด๋–ค ์š”์†Œ ์•ˆ์œผ๋กœ ๋งˆ์šฐ์Šค๊ฐ€ ๋“ค์–ด์˜ค๋Š” ์ˆœ๊ฐ„์„ ๊ฐ์ง€ํ•˜๋Š” ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ์ด๋ฉฐ, ์ด์™€ ๋ฐ˜๋Œ€๋กœ ๋งˆ์šฐ์Šค๊ฐ€ ์–ด๋–ค ์š”์†Œ ๋ฐ–์œผ๋กœ ์ด๋™ํ•˜๋Š” ์ˆœ๊ฐ„์„ ๊ฐ์ง€ํ•˜๋Š” ๋งˆ์šฐ์Šค ์ด๋ฒคํŠธ๋Š” mouseOut๊ณผ mouseLeave๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ mouseOver๋Š” mouseOut์™€ ์ง์„ ์ด๋ฃจ๊ณ , mouseEnter๋Š” mouseLeave์™€ ์ง์„ ์ด๋ฃจ์–ด ์‚ฌ์šฉํ•œ๋‹ค.

์ฃผ๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ์ง์„ ์ด๋ฃจ์–ด ์‚ฌ์šฉํ•œ๋‹ค.

mouseOver <-> mouseOut
mouseEnter <-> mouseLeave

MouseOver์™€ MouseEnter ์ฐจ์ด

๋‘ ์ด๋ฒคํŠธ๋ฅผ ์œ ์‚ฌํ•˜์ง€๋งŒ ์ด๋ฒคํŠธ ์ „ํŒŒ(event propagation)์™€ ์ทจ์†Œ ๊ฐ€๋Šฅ์„ฑ(cancelable)์— ํฐ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

mouseOver/mouseOut๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ ๋ฒ„๋ธ”๋ง์ด ์ผ์–ด๋‚˜๋ฉฐ ์ƒ์œ„ ์š”์†Œ๋กœ ์ „ํŒŒ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  preventDefault ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ด๋ฒคํŠธ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ทจ์†Œํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•œํŽธ mouseEnter/mouseLeave๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๋•Œ ๋ฒ„๋ธ”๋ง์ด ์ผ์–ด๋‚˜์ง€ ์•Š์•„ ์ž๊ธฐ ์ž์‹ ๋งŒ์ด ์ด๋ฒคํŠธ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์ฆ‰ target๊ณผ currentTarget์ด ํ•ญ์ƒ ์ผ์น˜ํ•œ๋‹ค. ๋˜ํ•œ preventDefault ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ์ด๋ฒคํŠธ์˜ ๊ธฐ๋ณธ ๋™์ž‘์„ ์ทจ์†Œํ•  ์ˆ˜ ์—†๋‹ค. (bubbles: false; cancelable: false;)

contextmenu

๋งˆ์šฐ์Šค์šฐํด๋ฆญ ์ด๋ฒคํŠธ

setInterval vs setTimeout

  1. setInterval(sayHello, 5000); ๋Š” ๋งค์ดˆ, ๋งค๋ถ„๋งˆ๋‹ค ๋ฐ˜๋ณต๋˜๋Š” ์ผ์„ ํ•ด์•ผํ• ๋•Œ
    ์‹คํ–‰ํ•˜๋Š” ํ•จ์ˆ˜์ž„. ์ฒซ๋ฒˆ์งธ ์ธ์ˆ˜์—๋Š” ํ•จ์ˆ˜์ด๋ฆ„์„ ์ ๋„ ๋‘๋ฒˆ์งธ์ธ์ˆ˜๋Š” ์‹œ๊ฐ„์„ ์ ์–ด์•ผํ•จ.
    1์ดˆ๋Š” 1000์ž„

  2. setTimeout(sayHello,1000);๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ”๋กœ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์ง€์•Š์„๋•Œ
    ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ž„ ์˜ˆ์‹œ์™€๊ฐ™์€ setTimeout์€ 1์ดˆ ๋’ค์— sayHello๋ฅผ ์‹คํ–‰์‹œํ‚จ๋‹ค๋Š” ์˜๋ฏธ์ž„.

  3. getHourse().padStart(2,"0") ๋Š” getHourse๋กœ ์‹œ๊ฐ„์„ ๋ฐ›์•„์˜ค๊ณ 
    1์‹œ์ผ ๊ฒฝ์šฐ 01์ด ์•„๋‹Œ 1๋กœ ๋‚˜ํƒ€๋‚œ๋‹ค ๊ทธ๋ž˜์„œ 01๋กœ ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” ํ•จ์ˆ˜์ž„.
    padStart(2,"0") 2๋Š” ๋‘๊ธ€์ž๊ฐ€ ๋˜์ง€์•Š์œผ๋ฉด 0์„ ์•ž์— ์ถ”๊ฐ€ํ•œ๋‹ค ๋ผ๋Š” ์˜๋ฏธ์ž„.
    ๋’ค์— ์ถ”๊ฐ€ํ•˜๊ณ ์‹ถ์œผ๋ฉด padEnd๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด๋จ.

<h2 id="clock">00:00:00</h2>
    
const clock = document.querySelector("h2#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;

    // clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
    console.log("it worked");
}

setInterval(getClock, 1000);
// every 1 second 

// setTimeout(getClock, 2000);
// after 2 second

// padStart ์ˆซ์ž๊ฐ€ ํ•œ์ž๋ฆฌ์ผ๋•Œ ์•ž์— 0์„ ์ถ”๊ฐ€ํ•ด์ฃผ๋Š”๊ฒƒ

Math.floor()

rounds down and returns the largest integer less than or equal to a given number.
Math.floor() : ์†Œ์ˆ˜์  ์ดํ•˜๋ฅผ ๋ฒ„๋ฆผํ•œ๋‹ค.
Math.ceil() : ์†Œ์ˆ˜์  ์ดํ•˜๋ฅผ ์˜ฌ๋ฆผํ•œ๋‹ค.
Math.round() : ์†Œ์ˆ˜์  ์ดํ•˜๋ฅผ ๋ฐ˜์˜ฌ๋ฆผํ•œ๋‹ค.
-> ์ฒœ์žฅ round ๋ฐ”๋‹ฅ ์ด๋ ‡๊ฒŒ ์ƒ๊ฐํ•˜๋ฉด ๋จ.

console.log(Math.floor(5.95));
// Expected output: 5

Math.random()

a floating-point, pseudo-random number that's greater than or equal to 0 and less than 1, with approximately uniform distribution over that range

//10 ์ดํ•˜์˜ ๋ Œ๋ค ์ˆซ์ž ๊ตฌํ•˜๊ธฐ
Math.floor(Math.random()*10)
// random 5

append prepend

before : ์„ ํƒํ•œ ์š”์†Œ์˜ ์•ž์— ๋‚ด์šฉ ์‚ฝ์ž….
after : ์„ ํƒํ•œ ์š”์†Œ์˜ ๋’ค์— ๋‚ด์šฉ ์‚ฝ์ž….
prepend : ์„ ํƒํ•œ์š”์†Œ์˜ ์ž์‹์š”์†Œ ์•ž์— ๋‚ด์šฉ์‚ฝ์ž…. ์ฝ˜ํ…์ธ ๋ฅผ ์„ ํƒํ•œ ์š”์†Œ ๋‚ด๋ถ€์˜ ์‹œ์ž‘ ๋ถ€๋ถ„์—์„œ ์‚ฝ์ž….
append : ์„ ํƒํ•œ์š”์†Œ์˜ ์ž์‹์š”์†Œ ๋’ค์— ๋‚ด์šฉ์‚ฝ์ž…. ์ปจํ…์ธ ์˜ ์„ ํƒ๋œ ์š”์†Œ ๋‚ด๋ถ€์˜ ๋ ๋ถ€๋ถ„์—์„œ ์‚ฝ์ž….

0๊ฐœ์˜ ๋Œ“๊ธ€