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) 생성자 함수는 '객체를 이렇게 만들겠습니다'에 대한 정의, 즉'설계도'..