return ์ผ๋ก ์ ์ฅ๋ ํจ์ sayHello()๋ ์ ์ฅ๋ง ๋ ์ํฉ์ด๋ผ console์ฐฝ์ ๋ํ๋์ง ์์ง๋ง, console.log()๋ ์ถ๋ ฅํ ์ ์๋ ๋ฉ์๋์ด๊ธฐ ๋๋ฌธ์ console์ฐฝ์ "์๋ !"์ด๋ผ๋ ๋ฌธ์์ด์ด ๋ํ๊ฒ ๋ฉ๋๋ค.
console.log๋ ํด๋ผ๋ก์ด๋ ์นด๋ฉ๋ผ์ฌ์ ๋ช
๋ นํ์ ๋ง์ ์ฌ์ง ํ์ฅ ๋์ค๊ณ ๋์ค์ ์ธ์๋ ์์ง๋ง,
return์ ๋์งํธ์นด๋ฉ๋ผ์ฌ์ ์ฐ๊ณ ๋์ ์ ์ฅํ๊ณ ์๋ค๊ฐ ๋์ค์ ํ์ํ ๋ ์ฌ์ง์ ๋ค์ ์ธ์ ์๋๊ฑฐ์ฃ .
console.log ํจ์๋ ๋ฐํ ๊ฐ์ด ์์ต๋๋ค. ๋จ์ํ ๋ณด์ฌ์ฃผ๊ธฐ๋ง์ ์ํ ํจ์๊ณ , return์ ์ด๋ค ํจ์์์ ๊ณ์ฐ๋ ๊ฐ์ ๋ฐํํด์ฃผ๋ ์ญํ ์ ํ๊ณ ์. ๊ทธ๋์ ํจ์์ return์ด ์กด์ฌํ ๊ฒฝ์ฐ ํด๋น ํจ์๊ฐ ๊ณ์ฐํ ๊ฐ์ ์ด๋ ํ ๋ณ์์ ์ ์ฅํด์ ํ์ํ ๊ฒฝ์ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค
return ๋ช
๋ น๋ฌธ์ ํจ์ ์คํ์ ์ข
๋ฃํ๊ณ , ์ฃผ์ด์ง ๊ฐ์ ํจ์ ํธ์ถ ์ง์ ์ผ๋ก ๋ฐํํฉ๋๋ค.๊ฒฐ๊ด๊ฐ์ ์ ์ฅ(ํธ์ถ ์ง์ ์ผ๋ก ๋ฐํ)์ ํ์ง๋ง ์ถ๋ ฅ(ํธ์ถ)์ ํ์ง ์์ต๋๋ค.๋ฆฌํด์ ํ๋ฉด function ์ ๋ฉ์ถฐ๋ฒ๋ฆฝ๋๋ค.
return์ ํจ์์์ ํจ์๊ฐ ์ฒ๋ฆฌํ ๋ฐ์ดํฐ๋ฅผ ํจ์๊ฐ ํธ์ถ๋ ์๋ฆฌ์ ์ ์กํด์ฃผ๋ ์ญํ ์ ํ๋ค๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค.
displays an interactive list of the properties of the specified JavaScript object.
๊ฐ์ฒด์์ ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ณ ์ถ์๋ ์ฌ์ฉ. ์ด๋ฒคํธ ๋ฆฌ์คํธ ๋ณผ๋ ์ฌ์ฉ.
console.dir(๋ณด๊ณ ์ถ์๊ฐ์ฒดํ๊ทธ)
mouseOver์ mouseEnter๋ ์ด๋ค ์์ ์์ผ๋ก ๋ง์ฐ์ค๊ฐ ๋ค์ด์ค๋ ์๊ฐ์ ๊ฐ์งํ๋ ๋ง์ฐ์ค ์ด๋ฒคํธ์ด๋ฉฐ, ์ด์ ๋ฐ๋๋ก ๋ง์ฐ์ค๊ฐ ์ด๋ค ์์ ๋ฐ์ผ๋ก ์ด๋ํ๋ ์๊ฐ์ ๊ฐ์งํ๋ ๋ง์ฐ์ค ์ด๋ฒคํธ๋ mouseOut๊ณผ mouseLeave๋ค.
์ผ๋ฐ์ ์ผ๋ก mouseOver๋ mouseOut์ ์ง์ ์ด๋ฃจ๊ณ , mouseEnter๋ mouseLeave์ ์ง์ ์ด๋ฃจ์ด ์ฌ์ฉํ๋ค.
์ฃผ๋ก ์๋์ ๊ฐ์ด ์ง์ ์ด๋ฃจ์ด ์ฌ์ฉํ๋ค.
mouseOver <-> mouseOut
mouseEnter <-> mouseLeave
๋ ์ด๋ฒคํธ๋ฅผ ์ ์ฌํ์ง๋ง ์ด๋ฒคํธ ์ ํ(event propagation)์ ์ทจ์ ๊ฐ๋ฅ์ฑ(cancelable)์ ํฐ ์ฐจ์ด๊ฐ ์๋ค.
mouseOver/mouseOut๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๋ฒ๋ธ๋ง์ด ์ผ์ด๋๋ฉฐ ์์ ์์๋ก ์ ํ๋๋ค. ๊ทธ๋ฆฌ๊ณ preventDefault ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ์ด๋ฒคํธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ ์ ์๋ค.
ํํธ mouseEnter/mouseLeave๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋ ๋ฒ๋ธ๋ง์ด ์ผ์ด๋์ง ์์ ์๊ธฐ ์์ ๋ง์ด ์ด๋ฒคํธ๋ฅผ ๋ฐ์ ์ ์๊ฒ ๋๋ค. ์ฆ target๊ณผ currentTarget์ด ํญ์ ์ผ์นํ๋ค. ๋ํ preventDefault ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ์ด๋ฒคํธ์ ๊ธฐ๋ณธ ๋์์ ์ทจ์ํ ์ ์๋ค. (bubbles: false; cancelable: false;)
๋ง์ฐ์ค์ฐํด๋ฆญ ์ด๋ฒคํธ
setInterval(sayHello, 5000); ๋ ๋งค์ด, ๋งค๋ถ๋ง๋ค ๋ฐ๋ณต๋๋ ์ผ์ ํด์ผํ ๋
์คํํ๋ ํจ์์. ์ฒซ๋ฒ์งธ ์ธ์์๋ ํจ์์ด๋ฆ์ ์ ๋ ๋๋ฒ์งธ์ธ์๋ ์๊ฐ์ ์ ์ด์ผํจ.
1์ด๋ 1000์
setTimeout(sayHello,1000);๋ ํจ์๋ฅผ ๋ฐ๋ก ์คํํ๊ณ ์ถ์ง์์๋
์ฌ์ฉํ๋ ํจ์์ ์์์๊ฐ์ setTimeout์ 1์ด ๋ค์ sayHello๋ฅผ ์คํ์ํจ๋ค๋ ์๋ฏธ์.
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์ ์ถ๊ฐํด์ฃผ๋๊ฒ
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
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
before : ์ ํํ ์์์ ์์ ๋ด์ฉ ์ฝ์
.
after : ์ ํํ ์์์ ๋ค์ ๋ด์ฉ ์ฝ์
.
prepend : ์ ํํ์์์ ์์์์ ์์ ๋ด์ฉ์ฝ์
. ์ฝํ
์ธ ๋ฅผ ์ ํํ ์์ ๋ด๋ถ์ ์์ ๋ถ๋ถ์์ ์ฝ์
.
append : ์ ํํ์์์ ์์์์ ๋ค์ ๋ด์ฉ์ฝ์
. ์ปจํ
์ธ ์ ์ ํ๋ ์์ ๋ด๋ถ์ ๋ ๋ถ๋ถ์์ ์ฝ์
.