패스트캠퍼스 프론트엔드 인강 9일차 카운터 프로젝트를 통해 DOM을 통한 자바스크립트와 html연동을 해보고, 단축평가논리계산법을 배웠다.
DOM이란
각 태그에 대한 정보를 지니고있는 자바스크립트 객체이다.
counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="number">0</h2>
<div>
<button id="increse">+1</button>
<button id="decrese">-1</button>
<script src="./counter.js"></script>
</div>
</body>
</html>DOM활용 예시
html에서 number, increase, decrease의 id값들을 자바스크립트에 가져올수있다.
index.js
const num = document.getElementById('number')
const increse = document.getElementById('increase')
const decrease = document.getElementById('decrease')만약 id값이 number인 태그에 쓰여진 글자를 알고싶다면?
number.innerText
만약 id값이 increase인 태그의 위치를 알고싶다면?
number.offsetTop
만약 decrease가 있는 태그의 id값을 알고싶을때는
decrease.id
등으로 DOM활용이 가능하다.
이벤트활용하기
이벤트에는 다양한 종류가있는데 여기서는 클릭이벤트만 써본다.
counter.js
increse.onclick = () =>{
console.log('increase가 클릭됨')
}
decrease.onclick = () =>{
console.log('decrease가 클릭됨')
}
콘솔창에 출력이 잘되는것을 확인하면 온클릭이벤트가 잘작동한다는것을 확인할수있다.
increse.onclick = () =>{
const current = parseInt(number.innerText, 10)
number.innerText = current + 1;
// console.log('increase가 클릭됨')
}
decrease.onclick = () =>{
const current = parseInt(number.innerText, 10)
number.innerText = current - 1;
// console.log('decrease가 클릭됨')
}parseInt는 문자열을 숫자로 변환할때 사용하고 10은 10진수로 해석하는것을 의미한다.
이를활용해 increase버튼을 클릭하면 +1, decrease버튼을 클릭하면 -1의 값을 계산해 나타낼수있다.
단축 평가 논리 계산법
논리연산자를 이용해 코드를 더 짧게쓰는법
const dog = {
name:'멍멍이'
}
function getName(animal){
if(animal){
return animal.name;
}
return undefined;
}
console.log(getName(dog));
console.log(getName());위코드는 animal이라는 매개변수가 주어질때 그 매개변수의 name값을 반환하고 만약없을경우 undefined라는 값을 반환하는 코드이다.
다음코드를 단축해보자
const dog = {
name:'멍멍이'
}
function getName(animal){
return animal && animal.name
}
console.log(getName(dog));
console.log(getName());왜이런지 이유를 알아보자
*** &&연산자는 앞에오는것이 true이거나 truthy값의 결과는 오른쪽
만약에 앞의 값이 falsy한 값이면 결과는 앞을따라간다.
꿀팁이고 리엑트를할경우 이를이용해 조건부랜더링?을할수있기때문에 이러한 문법을 알아두면좋다.
주로 특정값이 유효할때만 어떤값을 조회해야하는 상황에 사용
const object = {name:1}
const object = null
const name = object && object.name
console.log(name)*** ||연산자는 그 반대
프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스
성인 교육 서비스 기업, 패스트캠퍼스는 개인과 조직의 실질적인 '업(業)'의 성장을 돕고자 모든 종류의 교육 콘텐츠 서비스를 제공하는 대한민국 No. 1 교육 서비스 회사입니다.
www.fastcampus.co.kr
'Frontend' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 (0) | 2020.08.20 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 (0) | 2020.08.19 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션 (0) | 2020.08.17 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션 (0) | 2020.08.16 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 6회차 미션 (0) | 2020.08.15 |
