UI 만들기
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2 id="number">0</h2>
<div>
<button id="increase">+1</button>
<button id="decrease">-1</button>
</div>
<script src="src/index.js"></script>
</body>
</html>결과물
위와 같은 결과물이 잘 나왔다. h2와 button태그에 id값을 설정해 주었는데, 이렇게 id값을 설정해주면 JavaScript 에서 쉽게 해당 DOM을 선택 할 수 있다. 여기서 DOM이란, 각 태그에 대한 정보를 지니고 있은 JavaScript객체입니다.
DOM 선택하기
우선 DOM을 선택해 보자. index.js를 다음과 같이 수정해보자.
const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
console.log(number);
console.log(increase);
console.log(decrease);결과
각 DOM에 내장 되어 있는 기능들은 정말 다양하지만 그중 중요한것 몇가지만 사용해 보자.
const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
console.log(number.innerText); // 내용
console.log(increase.offsetTop); // top 위치
console.log(decrease.id); // id
이벤트 설정하기
이제 DOM이벤트를 설정해 보자. 버튼들이 클릭 됐을 때 콘솔에 텍스트를 출력하는 이벤트를 설정해보자.
const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
increase.onclick = () => {
console.log("increase 가 클릭됨");
};
decrease.onclick = () => {
console.log("decrease 가 클릭됨");
};버튼들을 클릭했을 때 콘솔에 우리가 설정한 텍스트들이 출력되는지 확인해 보자.
DOM에 이벤트를 설정 할떄는 on이벤트이름 값에 함수르 설정해주면 됩니다. DOM 이벤트의 종류는 정말 다양하다.
이제 버튼들이 클릭될 때 숫자값을 올리거나 내려보자.
const number = document.getElementById("number");
const increase = document.getElementById("increase");
const decrease = document.getElementById("decrease");
increase.onclick = () => {
const current = parseInt(number.innerText, 10);
number.innerText = current + 1;
};
decrease.onclick = () => {
const current = parseInt(number.innerText, 10);
number.innerText = current - 1;
};parseInt 는 문자열을 숫자로 변환해주는 함수이다.
두번째 10을 넣어준 것은, 10진수로 숫자를 받아오겠다는 의미이다.
'공부내용정리 > JavaScript' 카테고리의 다른 글
| 자바스크립트의 Scope에 대한 이해 (0) | 2021.04.27 |
|---|---|
| spread와 rest (0) | 2021.04.26 |
| 비구조화 할당 (구조분해) 문법 (0) | 2021.04.21 |
| 조건문 더 스마트 하게 쓰기 (0) | 2021.04.20 |
| 단축 평가(short-circuit evaluation)논리 계산법 (0) | 2021.04.20 |