Javascript - DOM, 이벤트처리

자바스크립트 .. 기본부터 진짜 빡세게 다시 공부해야지

프론트엔드로 취업했지만 사실 난 정말 기본도 없음 ..

 

회사 사람들에겐 절대 말 못해 🤫 살짝 X됐어 난~

 

 

 

🦷 자바스크립트의 특징이 무엇이냐 ...

객체 지향 프로그래밍 언어의 한 종류로서 웹 문서의 기능적인 측면을 담당!

자바스크립트만으로 웹 서버 구축도 쌉가능

입문용으론 쉽지만 궁극적으로는 까다로움

 

 

🦷 자바스크립트의 DOM (Document Object Model)

자바스크립트로 웹 페이지를 제어하도록 해줌

document.getElementsByTagName()	태그 이름으로 요소 찾기
document.querySelector()	선택자 이름으로 요소 찾기
document.getElementsByClassName()	클래스 이름으로 요소 찾기
document.getElementById()	ID 이름으로 요소 찾기

ex)

document.getElementByTagName(‘h1’)[1]; : 두 번째 h1 요소

document.querySelector(‘.tay’); : 클래스가 tay 요소

document.getElementsByClassName(‘tay’)[1]; : 클래스가 tay 요소 두 번째

document.getElementById(’tay’); : id가 tay인 요소

배열 형태인건 for문 활용 쌉가능~

 

 

🦷 자바스크립트의 이벤트 처리

- 이벤트는 웹 페이지에서 사용자가 행한 행위에 반응하는 것

- 일반적으로 빠르게 적용할 때는 인라인 방식 사용

- 체계적으로 이벤트 처리를 구현하려면 addEventListener() 방식 사용

 

addEventListener() 활용 예시

 

html에서 ..

<button id=“tay1”>tay1버튼</button>

<button id=“tay2”>tay2버튼</button>

요로코롬 버튼 id가 저렇게 구성되어 있을 때

클릭 이벤트를 만들려면

 

js에서 ..

var tayBtn1 = document.getElementById(‘tay1’);

if(tayBtn1){

   button.addEventListener(‘click’, function(event){

      alert(‘tay 1 버튼을 클릭’);

   });

}

var tayBtn2 = document.getElementById(‘tay2’);

if(tayBtn2){

   button.addEventListener(‘click’, function(event){

      alert(‘tay 2 버튼을 클릭’);

   });

}

이렇게 버튼 하나하나 addEventListender 로

클릭하면 어쩌구 출력되도록 구현해도 되지만

이런것보다 ...

 

function tayBtnClickEvent(event){

   switch(event.target.id){

      case ‘button1’:

         alert(‘버튼1’);

         break;

      case ‘button2’:

         alert(‘버튼2’);

         break;

   }

}

이렇게 event를 발생시킨 target의 id를 받아와서

분기처리하면 더 안정적이고 객체지향적

즉, 이미 만들어진 이벤트를 적용하는 방식