[SeSAC 새싹 UIUX 4기] Day36 Java Script 기초
UIUX 디자인 및 웹 퍼블리싱 SeSAC 새싹 마포 4기
2024.01.24 36일차 수업: Java Script 기초(3)
DOM ;Document Object Model
DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다.
좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미한다고 볼 수 있다.
Java Script
JavaScript는 카멜표기법을 사용한다
querySelector()
특정 tag , id, class를 제한하지 않고 css선택자를 사용하여 요소를 찾는다.
같은 tag , id 또는 class일 경우 첫번째 요소만 리턴한다.
const ul = document.querySelector('ul') // 'ul': 태그 선택자 호출
// 01 queryselector는 첫번째 요소만 가능하다.
const lst = document.querySelector(".list");
lst.style.color="seagreen";querySelectorAll()
querySelector와 사용 방법은 동일하며 선택자를 선택하여 배열과 비슷한 객체인 nodeList를 반환한다.
반환 객체가 nodeList이기에 배열처럼 반환한다.
const list = document.querySelectorAll('.list') // '.list' : 클래스 선택자 호출Java Script를 이용해서 스타일 지정하기
script를 사용해서 style을 바꾸면 inline으로 들어가기 때문에 css파일보다 우선순위가 높다.
<div class="wrap"> <h1 id="logo">타이틀</h1> </div> <script> //01 기본 document.querySelector('#logo').style.backgroundColor="#458"; document.querySelector('#logo').style.color="#afff"; //02 변수 사용하기 const title = document.querySelector('#logo') ; title.style.backgroundColor="#458"; title.style.color="#afff"; </script>// 01 queryselector는 첫번째 요소만 가능하다. const lst = document.querySelector(".list"); lst.style.color="seagreen"; // 02 querySelectorAll을 사용하면 모든 요소 선택 가능, // 하지만 [0], [1], .. 이런식으로 매번 index number를 지정해서 코드를 짜긴 어려움 const lst2 = document.querySelectorAll('.list'); lst2[0].style.color = 'skyblue'; lst2[1].style.color = 'skyblue'; lst2[2].style.color = 'skyblue'; // 03 그래서 쓰는게 forEach() 함수 */ const lst3 = document.querySelectorAll('.list'); lst3.forEach((li, index, arr)=>{ li.classList.add('list-style'); })
classList를 사용한 css 변경
classList 속성은 element의 현재 css class 목록을 반환.
classList.add("클래스명")
지정한 클래스 값을 추가
만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시list.classList.add('on');classList.remove("클래스명")
지정한 클래스 값을 제거
list.classList.remove('on');replace("oldClass", "newClass")
현재 존재하는 클래스를 새로운 클래스로 교체
list.classList.replace('on', 'on2');contains("클래스명")
contains() 메소드를 사용해 element의 class 목록에 특정 class가 있는지 확인
console.log(list.classList.contains('on'));toggle("클래스명")
toggle() 메소드를 사용해 class를 토글
하나의 인수만 있을 때: 클래스 값을 토글
즉, 클래스가 존재한다면 제거하고 false를 반환하고, 존재하지 않으면 클래스를 추가하고 true를 반환
두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거list.classList.toggle('on');
addEventListener()
이벤트의 기본 실행 과정
0. 이벤트 객체 발생
1. 캡처링 : 특정 요소에서 이벤트가 발생하려면, 이벤트가 DOM 최상위 요소부터 아래로 전파된다.
2. 타겟 : 이벤트가 타겟요소에 도착한 단계, 그래서 이벤트의 콜백함수를 실행시킨다.
3. 버블링 : 다시 DOM 트리 최상위 요소까지 타고 올라간다.
* 이벤트버블링옵션 true하면 아래로 타고 내려가고, false(기본값)하면 위로 타고 올라가는 것과는 무관함
Event
DOM에서 특정 이벤트가 발생되면 JavaScript 이벤트 객체에서 이를 확인할 수 있다.
EventListener
이벤트 리스너- 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트
이벤트 리스너를 이용하면 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다.
DOM 대상객체.addEventListener(이벤트명, 실행할 콜백함수, 이벤트버블링옵션)- 이벤트명 : 이벤트 명을 입력
- 함수명 : 해당 이벤트가 발생할 때 실행할 콜백 함수 입력
- 이벤트버블링옵션: 이벤트 버블링을 제어 하기 위한 옵션(생략 가능)
<div class='outerbox'>
<div class='middlebox'>
<div class='innerbox'>
</div>
</div>
</div>
<script>
const outerbox = document.querySelector('.outerbox');
const middlebox = document.querySelector('.middlebox');
const innerbox = document.querySelector('.innerbox');
outerbox.addEventListener('click', ()=>{
console.log('outerbox');
});
middlebox.addEventListener('click', ()=>{
console.log('middlebox');
});
innerbox.addEventListener('click', ()=>{
console.log('innerbox');
}, false); // innerbox만 클릭했지만, 버블링을 통해 middlebox와 outerbox까지도 click이라는 동작이 실행된다.
// 만약 이 버블링을 하고 싶지 않다 -> stopPropagation() 메서드를 사용하면 된다.
innerbox.addEventListener('click', (e)=>{
console.log('innerbox');
e.stopPropagation();
});
innerbox.addEventListener('click', (e)=>{
console.log(e);
console.log(e.type);
console.log('innerbox');
e.stopPropagation(); // stopPropagation()(;이벤트 전파 취소)은 이벤트 객체가 가지고 있는 메서드이기 때문에 이런식으로 사용해줘야 한다.
});
</script>자주 사용하는 이벤트
click
mouseenter
mouseover
dbclick
mouseleave
mouseout
focus
blur
reset
submit
scroll
resize
keydown
keyup
dragstart
drag
dragleave
drop
이벤트 속성
이벤트객체.target: 클릭한 요소
이벤트객체.currentTarget: 이벤트 리스너가 연결된 요소
outerbox.addEventListener('click', (e)=>{
console.log(e.target); // 클릭한 요소
console.log(e.currentTarget); // 이벤트 함수가 걸려있는 요소
})이벤트 메소드
이벤트객체.stopPropagation(): 이벤트 전파 취소
이벤트객체.preventDefault(): 대상이 가지고 있는 기본값 방지
data 속성
data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다.
속성의 이름이 data-로 시작하는 모든 속성은 데이터 속성이다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있다.
<ul class='tab_list_box'>
<li class='tab_list tab_active' data-num="0">마라탕</li>
<li class='tab_list' data-num="1">젤라또</li>
<li class='tab_list' data-num="2">치킨</li>
</ul>data-* 속성 예제
<div class="tab_area"> <div class='tab_title'> <ul class='tab_list_box'> <li class='tab_list tab_active' data-num="0">마라탕</li> <li class='tab_list' data-num="1">젤라또</li> <li class='tab_list' data-num="2">치킨</li> </ul> </div> //tab_title <div class='tab_content_container'> <div class='tab_content on'> 마라탕은 중국의 전통적인 요리로, 특히 중국 서부 지역에서 널리 소비되고 있는 매운 탕요리입니다. 마라탕은 마라(麻辣)라는 중국어 단어에서 유래되었으며, '마'는 마늘(麻), '라'는 라조(辣椒)를 나타냅니다. 이 요리는 매운 고추와 향신료를 기반으로 한 특별한 소스를 사용하여 만들어집니다. </div> <div class='tab_content'> 젤라또는 이탈리아의 전통적인 아이스크림으로, 우유, 설탕, 과일, 견과류 등의 식재료를 기반으로 만들어집니다. 젤라또는 일반적인 아이스크림보다 밀도가 높고 부드럽게 얼어져 있어 특별한 맛과 질감을 제공합니다. 이탈리아에서는 다양한 맛과 향을 가진 젤라또를 즐길 수 있습니다. </div> <div class='tab_content'> 치킨은 고기 중에서도 널리 소비되고 사랑받는 종류 중 하나로, 다양한 영양소를 제공하며 여러 가지 건강 이점을 가질 수 있습니다. 아래는 일반적인 닭고기, 특히 훈제된 또는 구운 치킨의 효능에 대한 몇 가지 특징입니다. </div> </div> //tab_content_container </div> <script> const titleBox = document.querySelector('.tab_list_box'); // title ul const title = document.querySelectorAll('.tab_list'); // title ul>li const content = document.querySelectorAll('.tab_content'); // content div // titleBox에 event 연결 titleBox.addEventListener('click', (e)=>{ // addEventListener에 들어오는 매개변수는 event객체 let selectedList = e.target; let dataNum = selectedList.dataset.num; titleUpdate(selectedList); contentUpdate(dataNum); }) // title update -> titleBox addEventListener에서 호출할거지만, 코드가 길어지니까 따로 작성 function titleUpdate(updateLi){ title.forEach((li)=>{ li.classList.remove('tab_active') }) updateLi.classList.add('tab_active') } function contentUpdate(num){ content.forEach((item)=>{ item.classList.remove('on'); }) content[num].classList.add('on') } </script>
