본문 바로가기

Javascript/Javascript 기본16

생성자 함수를 사용해 객체생성 항상 필요한 속성과 함수는 틀처럼 미리 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 해당 정보값을 담기 위해 사용한다. ※ 생성자 함수 안에 객체의 속성과 함수를 정의할 때는 this 예약어 다음에 마침표와 속성 이름을 입력한다. function People(name,id,age,address){ this.name = name; this.id = id; this.age = age; this.address = address; } const member = new People('만수르','money',33,'이태원'); document.write(`${member.name}`); document.write(`id : ${member.id}`); document.write(`나이 : ${me.. 2020. 7. 24.
이미지 슬라이드 쇼 ⟨ ⟩ const slides = document.querySelectorAll("#container > img"); const prev = document.querySelector("#prev"); const next = document.querySelector("#next"); let current = 0; //현재 이미지의 index showSlide(current); //index를 참조해서 이미지를 출력해주는 함수 prev.addEventListener("click", prevSlide); //이전버튼을 눌렀을때 이벤트 next.addEventListener("click", nextSlide); //다음버튼을 눌렀을때 이벤트 /*showSlide함수는 먼저 모든 이미지의 display를 none.. 2020. 7. 24.
기념일 계산기 우리 만난지 며칠? 기념일 계산 100일 1년 const now = new Date(); const firstDay = new Date("2019-07-07"); const toNow = now.getTime(); //getTime() 함수는 밀리초를 반환한다. const toFirst = firstDay.getTime(); const passedTime = toNow - toFirst; const passedDay = Math.round(passedTime / (1000 * 60 * 60 * 24)); //밀리초를 날짜로 바꾸고 반올림 document.querySelector("#accent").innerText = `${passedDay}일`; calcDate(100); calcDate(365); /.. 2020. 7. 24.
객체 객체 : 자료를 저장하고 처리하는 기본 단위이고, 하나의 변수에 다양한 정보를 담기 위해 사용하는 자료형이다. 문서객체 모델(DOM) : 객체를 사용해 웹 문서를 관리하는 방식을 문서 객체 모델이라고 한다. 브라우저 객체 모델(BOM) : 웹 브라우저의 주소 표시줄이나 창 크기 등 웹 브라우저 정보를 객체로 다루는 것. ※ DOM과 BOM은 내장 객체에 포함된다. 메서드 : 객체 안에 정의된 함수. Window 객체 : 모든 객체를 품고 있는 최상위 객체이므로 window와 마침표를 빼고 사용해도 된다. ex) alert("window 객체의 alert 함수"); open(); // 새 브라우저 창(새 탭)을 여는 함수이다. Image 객체 : 웹 이미지를 만들기 위한 기본 틀. 이런 틀을 '프로토타입'.. 2020. 7. 23.