JS 걷기반 1회차 수업 및 실습으로 DOM과 이벤트에 대해 이해한 뒤에 사용해보고 변수같은 기본 개념을 익히는 시간을 가졌다.
1. DOM 조작하기
1-1. DOM(Document Objext Model)이란
: 자바스크립트로 HTML을 조작할 수 있게 가공해 놓은 데이터(Document === HTML, Object === 객체)
1-2. HTML에 있는 태그 가져오기 (선택자)
document.getElementsByTagName(선택자)document.getElementById(선택자)document.getElementsByClassName(선택자)document.querySelector(선택자): 이 함수 하나로id,class,tag모두 가져오기 가능. 하지만 서로 구분 가능하게 만들어줘야 하기 때문에 css 선택자와 동일한 방식으로 사용document.querySelectorAll(선택자);: 해당 선택자를 가진 요소들을 배열에 담아 통째로 가져오므로 제대로 접근하려면document.querySelectorAll[index];이런 방식으로 사용
1-3. 태그 내부의 내용 변경
document.querySelector(선택자).innerHTML = "새로운 innerHTML";: HTML 문법이 적용됨.document.querySelector(선택자).innerText = "새로운 innerText";document.querySelector(선택자).textContent = " 새로운 textContent";
1-4. 글자 색깔 변경
document.querySelector(".클래스명").style.color = "글자색깔";document.querySelector(".클래스명").setAttribute("style", "color:글자색깔;");
1-5. 이미지 주소 변경하기
document.querySelector(선택자).src = "이미지 주소"
2. 이벤트
2-1. 이벤트란?
: 사용자가 브라우저에서 하는 모든 행동들로 다양한 이벤트 종류들이 존재한다.
2-2. 이벤트 종류
- 키보드 이벤트
- keydown : 사용자가 키를 처음 눌렀을 때
- keyup : 키를 땔 때
- keypress : 사용자가 눌렀던 키의 문자가 입력되었을 때
- 마우스 이벤트
- click : 사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때
- dbclick : 두 번 눌렀다 땔 때
- mousedown : 마우스를 누르고 있을 때
- mouseup : 눌렀던 마우스 버튼을 땔 때
- mousemove : 마우스를 움직였을 때
- mouseover : 요소 위로 마우스를 움직였을 때
- mouseout : 요소 바깥으로 마우스를 움직였을 때
- 포커스 이벤트
- focus : 요소가 포커스를 얻었을 때
- blur : 요소가 포커스를 잃었을 때
2-3. 이벤트 등록하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="hello_id" class="hello_class"> 안녕하세요 </div>
<div class="test_class"> 자바스크립트1 </div>
<div class="test_class"> 자바스크립트2 </div>
<div class="test_class"> 자바스크립트3 </div>
<button class="btn"> 나는 버튼입니다 </button>
<!-- body 태그 끝나기 전 -->
<script src="script.js"></script>
</body>
</html>document.querySelectorAll('.test_class')[2].addEventListener(이벤트의종류, 이벤트발생시 실행 할 콜백함수);
document.querySelectorAll('.test_class')[2].addEventListener("click", function () {
document.querySelector('.test_class').style.color = "red";;
});
document.querySelectorAll('.test_class')[1].addEventListener("mouseover", function () {
document.querySelectorAll('.test_class')[1].style.color = "orange";
});
document.querySelectorAll('.test_class')[1].addEventListener("mouseout", function () {
document.querySelectorAll('.test_class')[1].style.color = "gray";
});
3. 변수
3-1. 변수란?
: 데이터(data)를 저자하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미한다.
3-2. 변수가 필요한 이유
- 재사용성
const button = document.querySelector(".btn");
button.addEventListener("click", function () {
// 여기에 코드 작성
button.innerHTML = "눌렀다!";
});- 데이터의 의미가 명확해 진다.
3-3. 변수의 종류
- var : 재선언, 재할당 가능. 호이스팅 발생
- let : 재할당 가능 -> 데이터 수정 가능
- const(constant : 변함없는) : 재할당 불가능 -> 데이터 수정 안됨
tip! 항상 const를 쓰고, 변경할 이유가 생기면 let으로 바꾸자
3-4. 변수의 범위
- 전역 변수 vs 지역 변수
- 전역 변수 : 블록 외부에서 선언된 변수로 어디서든 사용가능하다.- 지역 변수 : 블록 내부에서 선언된 변수로 괄호 안에서만 사용가능하다.
