[Javascript] 생성자 함수와 자주쓰는 DOM, BOM 메소드

생성자 함수와 new

객체를 함수로 만들때 사용되는 함수로 new 키워드를 활용하여 빈 객체를 만들고 실행자 함수의 this를 활용하여 키값을 추가해주고 객체를 만들어 준다.

 

function create(name, age) {
  this.name = name;
  this.age = age;
}

let test = new create("동복이", 1);

console.log(test);

 

BOM(Browser Object Model) 

브라우저의 기능들을  객체로 사용할 수 있게 해주어 페이지에 동적인 기능을 추가 할 수 있다.

 

메소드	설명
alert()	문구와 같이 alert창을 띄움
onload()	문서 로딩이 끝난 후 실행
setTimeout()	시간 초를 설정하여 실행에 딜레이를 줌
clearTimeout()	설정된 시간초 초기화
setInterval()	일정한 간격으로 함수를 호출
prompt()	입력받는 alert 창 출력
eval()	문자열을 숫자로 바꿈
toString()	오브젝트를 문자열로 바꿈
getComputedStyle()	요소의 css 속성값을 변경할때 사용

 

DOM(Document Object Model)

문서를 객체의 모양으로  만들것으로 문서에 접근이 가능하게 해준다.

 

메소드	설명
document.getElementsById("id")	해당 아이디 요소 선택
document.getElementsByClassName("class")	해당 클래스에 속한 요소 선택
document.querySelecter()	선택된 요소 첫번째 하나만 선택
document.querySelecterAll()	선택된 요소 모두 선택
window.onresize = function(){}; window.addEventListener(“resize”, function() {});	브라우저 창 크기가 바뀌면 실행되는 이벤트
window.onscroll = function(){}; document.body.onscroll = function (){};	스크롤의 변화가 있으면 이벤트 실행
window.onclick  = function(){};	해당 태그를 클릭했을때 이벤트 실행
windows.ondbclick = function(){};	해당 태그를 더블클릭 했을때 이벤트 실행
window.onmousedown = function(){};	마우스를 누르자마자 실행되는 이벤트
window.onmouseup = function(){};	마우스를 누르고 땟을때 실행되는 이벤트
window.onmousemove = function(){};	마우스가 태그내에서 이동되는 동안 실행되는 이벤트
window.onmouseenter = function(){};	마우스를 태그에 올렸을때 실행되는 이벤트
window.onmouseleave = function(){};	마우스가 태그에서 빠져나갔을때 실행되는 이벤트
document.ondragstart = function(event){};	드래그가 시작될때 실행되는 이벤트
document.ondragend = function(event){};	드래그가 끝날때 실행되는 이벤트
document.ondragenter = function(event){event.target;};	드래그하고 태그위에 올려졌을때 실행되는 이벤트
document.ondragleave = function(event){event.target;};	드래그하는중 태그를 빠져나갔을때 실행되는 이벤트
document.ondragover = function(event){event.preventDefault;};	드래그 가능 여부 설정
document.ondragleave = function(event){event.target;};	드래그하다 마우스 버튼을 땔때 실행
window.onkeydown = function(){};	키보드를 누르자마자 이벤트 발생
window.onkeyup = function(){};	키보드를 누르고 떗을때 이벤트 발생
window.onkeypress = function(){};	키보드를 누르고 있을때 이벤트 발생
window.ontouchstart = function(){};	화면을 터치하는 순간 이벤트 실행
window.ontouchend = function(){};	화면을 터치하고 땔때 이벤트 실행
window.ontouchmove = function(){};	화면을 터치하고 이동할때 실행되는 이벤트
window.onclick = function(event){event.target}	클릭된 태그 가져오기 : 매개변수.target
window.onclick = function(event){event.type}	이벤트 타입 확인 : 매개변수.type
window.onclick = function(event){event.pageX}	마우스 x값 가져오기 : 매개변수.pageX
window.onclick = function(event){event.pageY}	마우스 y값 가져오기 : 매개변수.pageY
window.onkeydown = function(event){event.keyCode}	키보드 입력값을 ascii 코드로 변환 : 매개변수.keyCode
window.onclick = function(event){event.preventDefault();}	태그의 기본 기능 제거 : 매개변수.preventDefault();