UI ์์์ ๋ง๋๋ ๋ฒ 1. ๋ฏธ๋ฆฌ html/css ๋์์ธ ๋ง๋ค๊ธฐ 2. ํ์ํ ๋ ๋ณด์ฌ๋ฌ๋ผ๊ณ js ์งฌ ์๋ฆผ์ฐฝ์ ๋ฒํผ .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:none; } ๋ฒ์ธ: ์๋ฆผ์ฐฝ ๋ซ๊ธฐ ๋ฒํผ ๋ง๋๋ ๋ฒ ์๋ฆผ์ฐฝ์ ์๋ฆผ์ฐฝ๋ซ๊ธฐ๋ฒํผ .alert-box { background-color: skyblue; padding:20px; color:white; border-radius: 5px; display:block; } ์๋ฆผ์ฐฝ์ ๋ซ๊ธฐ๋ฒํผ ์ด๊ธฐ๋ฒํผ
์๋ฐ์คํฌ๋ฆฝํธ
Class inheritance ์์์ ์ฐ๋ ์ด์ : ์ค๋ณต์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ธฐ ์ํจ. ์ฆ, ๋ถ๋ชจํด๋์ค๋ฅผ ์ผ์ผ์ด ์ฐ์ง์๊ณ , ๋ฐ๋ ค์ ์๋ก์ด ๊ธฐ๋ฅ์ ์์ class์ ์ถ๊ฐํด ์ฃผ๊ณ ์ถ์๋ ํํ : ์์ํด๋์ค์ธ PersonPlus ๋ ๋ถ๋ชจํด๋์ค์ธ Person์ ์์ฑ์ ๊ฐ์ง๊ณ ์์ ๊ณต์ ํ๋ค ๋ฐ๋ผ์, ๋ถ๋ชจํด๋์ค Person์ ์์ฑ์ ์์ ํ๋ค๋ฉด, ์์ํด๋์ค PersonPlus ์์ฑ๋ ์์ ๋จ //๋ถ๋ชจํด๋์ค class Person { constructor(name, first, second){ this.name =name; this.first=first; this.second=second; } sum=()=>{ return (this.first+this.second); } } //์์ํด๋์ค class PersonPlus exte..
ํ์ฌ์๊ฐ์ ๋ธ๋ผ์ฐ์ ์ ๋ํ๋ด๋ ์ฝ๋์
๋๋ค. h1์ now ๊ฐ ๊ฐ์ง ์๊ฐ์ ๋ณด๋ฅผ ํ์ํฉ๋๋ค const h1 = document.querySelector('h1') const now = new Date(); console.log(now) const hour = now.getHours() const minu = now.getMinutes() const seco = now.getSeconds() const nowTime = `${hour}:${minu}:${seco}` h1.textContent = nowTime; ์คํ๋๋ ํ๋ฉด์
๋๋ค. ์๋ก๊ณ ์นจ์ ๋๋ฅด๋ฉด ์ด๊ฐ ๊ณ์ ๋ฌ๋ผ์ง๋๋ค.
์์ฑ์ ํจ์๋ฅผ ์ด์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ ๊ณตํ์ง ์๋ ์ ํ์ ๋ฐ์ดํฐ๋ฅผ ์ฐฝ์กฐํด๋ผ ์ ์๋ค. ์์ฑ์ ํจ์๋ '๊ฐ์ฒด๋ฅผ ์ด๋ ๊ฒ ๋ง๋ค๊ฒ ์ต๋๋ค'์ ๋ํ ์ ์์ผ๋ฟ์ด๋ฉฐ, ์ค์ ๊ฐ์ฒด๊ฐ ์์ฑ๋๊ธฐ ์ํด์๋ new ์ฐ์ฐ์ ํตํด ๊ฐ์ฒด๋ฅผ ๋ฐํํด์ผ ํฉ๋๋ค. ๊ฐ์ฒด ์์ฑ์ new ์ฐ์ฐ์๋ฅผ ์ด์ฉํฉ๋๋ค. // Dog ๊ฐ์ฒด ์ค๊ณ(์์ฑ์ ํจ์) function Dog(){ this.name = "๋ฝ๋ฏธ" this.breed ="์คํผ์ธ " } // Dog ๊ฐ์ฒด ์์ฑ(new ์ฐ์ฐ์) //Dog ๋ผ๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ณ , myDog ๋ผ๋ ์ด๋ฆ์ ๋ถ์ด๊ฒ ๋ค const myDog = new Dog(); console.log(myDog.name) console.log(myDog.breed) ์์ฑ์ ํจ์๋ '๊ฐ์ฒด๋ฅผ ์ด๋ ๊ฒ ๋ง๋ค๊ฒ ์ต๋๋ค'์ ๋ํ ์ ์, ์ฆ'์ค๊ณ๋'..