์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

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) ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” '๊ฐ์ฒด๋ฅผ ์ด๋ ‡๊ฒŒ ๋งŒ๋“ค๊ฒ ์Šต๋‹ˆ๋‹ค'์— ๋Œ€ํ•œ ์ •์˜, ์ฆ‰'์„ค๊ณ„๋„'..
becky(์ง€์€)
'์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก