반응형
📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다.
HTML in JavaScript
1. document.getElementById()
document
- JavaScript가 HTML과의 상호작용을 가능하게 한다.
- 브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음)
document.getElementById()
- document의 함수 중 하나이다.
- HTML에서 id를 통해 element를 찾아낸다.
- 예시
// string을 전달받는 함수이므로 괄호 안에 ''를 쓴다.
document.getElementById('title'); // <h1 id="title">Olivia!</h1>
// log보다 더 자세히 출력되는 console.dir를 이용해 살펴보자.
const title = document.getElementById('title');
console.dir(title); // h1#title
2. HTML의 값 읽어오기
// HTML
<body>
<h1 class="hello" id="title>Olivia!</h1>
</body>
// JavaScript
const title = document.getElementById('title');
console.log(title.id); // hello
console.log(title.className); // title- HTML에서 JavaScript를 import했기 때문에 JS에서 HTML의 내용을 가져올 수 있다.
- JS에서의 document는 HTML이 해당 .js 파일을 load했기 때문에 존재하는 것이다.
- 그다음, 브라우저가 우리가 document에 접근할 수 있도록 해준다.
- 앞으로 우리가 진행할 작업들도 아래와 같은 방식으로 이루어진다.
- HTML에서 항목들을 가지고 와서
- JS를 통해 변경한다.
Searching for Elements
1. document.getElementsByClassName()
// HTML
<body>
<h1 class="hello">Hello World!</h1>
<h1 class="hello">Hello World!</h1>
<h1 class="hello">Hello World!</h1>
</body>
// JavaScript
const hellos = document.getElementsByClassName('hello');
console.log(hellos);
- 배열로 출력되므로, hellos.(something)으로 뭔가를 가져올 순 없다.
- 많은 elements를 가져와야 할 때 사용한다.
2. document.getElementsByTagName()
// HTML
<body>
<div class="hello">
<h1>Hello World!</h1>
</div>
</body>
// JavaScript
const title = document.getElementsByTagName('h1');
console.log(title);- 아직도 배열로 출력된다. 여전히 hellos.(something)으로 뭔가를 가져올 순 없다.
3. document.querySelector() || document.querySelectorAll() 👍🏼
// HTML
<body>
<div class="hello">
<h1>Hello World!</h1>
</div>
</body>
// JavaScript
const title = document.querySelector('.hello');
console.log(title);
- element를 CSS 방식으로 검색할 수 있다.
- 즉, hello라는 class 내부에 있는 h1을 가지고 올 수 있다는 것!
- .querySelector()는 단 하나의 element를 return한다.
- 여러 개의 return을 받고 싶다면 .querySelectorAll()을 사용한다.
4. document.querySelector('').style
- JS에서 HTML 요소의 style을 변경할 수 있다.
- [참고] 다만, 우리가 JS에서 작업할 일의 대부분은 event를 listen하는 것이다!
- 예시
- document.querySelector(’.hello h1’).style.color = ‘blue’;
- document.querySelector('.hello h1').style.fontSize = '12px';
Events
- 클릭하는 것, 마우스를 그냥 올려두는 것 등 어떤 사건을 발생시키는 것들이 모두 event다.
- JS는 모든 event들을 listen할 수 있다.
✨ [event의 실행]
1. element를 찾는다.
2. event를 listen한다.
3. 그 event에 반응한다.
1. eventListener
- event를 listen한다. 단, JS에게 무슨 event(ex. click)를 listen하고 싶은지 알려줘야 한다.
- 왜냐하면, 모든 이벤트를 다 감시하고, 알고 싶지는 않기 때문!
- 예를 들어 click 이벤트를 listen한다면, 지정한 해당 요소가 클릭되는지 지켜본 후 클릭되는 순간 지정한 함수 등을 호출하는 것을 말한다.
// HTML은 이전과 동일
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
console.log('title was clicked!');
}
title.addEventListener('click', handleTitleClick);
📢 [주의사항]
• 위의 코드에서 handleTitleClick을 인자로 넘겨줄 때, handleTitleClick()과 같이 작성하게 된다면 함수를 실행시켜 버리게 된다!
• 우리의 의도는 h1이 클릭되었을 때 자바스크립트가 해당 이벤트를 감지한 후, 대신 함수를 실행할 수 있도록 하는 것이므로, 바로 실행되지 않고 인자로만 넘어갈 수 있도록 ()를 없애고 함수명만 넘겨줘야 한다.
2. event를 사용하는 두 가지 방법
(1) addEventListener
(2) oneventname
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
console.log('title was clicked!');
}
// 1.
title.addEventListener('click', handleTitleClick);
// 2.
title.onclick = handleTitleClick;- 그렇다면 eventListener가 더 선호되는 이유?
⇒ 나중에 removeEventListener를 사용해 이벤트 리스너를 제거할 수 있기 때문이다.
3. window의 event를 listen 해보기
- JS에서 document를 기본적으로 제공하듯이 window도 기본 제공한다.
(1) resize 예시
function handleWindowResize() {
document.body.style.backgroundColor = 'tan';
}
window.addEventListener('resize', handleWindowResize);
// 웹페이지 크기를 resize할 경우, 설정해둔 tan으로 배경색이 변경된다!
(2) copy
function handleWindowCopy() {
alert('copier!');
}
window.addEventListener('copy', handleWindowCopy);
// 키보드 또는 마우스를 이용한 복사 이벤트를 감지해 해당 함수를 실행한다!
(3) online
[참고] online ↔ offline
function handleWindowOnline() {
alert('Welcome to Internet World!');
}
window.addEventListener('online', handleWindowOnline);
// wifi가 offline에서 online으로 연결되었는지를 감지해 해당 함수를 실행한다!
CSS in JavaScript
1. if-else를 활용해 h1의 color 변경하기
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
if(title.style.color === 'tomato') {
title.style.color = 'chocolate';
} else {
title.style.color = 'tomato';
}
}
title.addEventListener('click', handleTitleClick);
→ 위의 코드를 변수를 활용해 변경하기
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
const currentColor = title.style.color;
let newColor;
if(currentColor === 'tomato') {
newColor = 'chocolate';
} else {
newColor = 'tomato';
}
title.style.color = newColor;
}
title.addEventListener('click', handleTitleClick);
- 코드 해석
- currentColor는 getter로써, 최근 color값을 복사하는 역할을 한다. 그렇기에 의미론적으로 봤을 때 const를 선언하는 것이 적절하다.
- newColor는 setter로써, 변수에 대입된 색상값을 title.style.color에 최종적으로 할당하는 역할을 한다. 의미론적으로 봤을 때 값이 변경될 수 있으므로 let으로 선언하는 것이 적절하다.
- 프로그래밍 언어에서의 = (equal)은 오른쪽의 값 → 왼쪽에 대입한다는 의미이다.
- 따라서 newColor = title.style.color가 아니라 title.style.color = newColor인 이유는 newColor의 값을 title.style.color에 넣어주어야 하는 것이 맞기 때문이다!
→ 이렇게 대입해주지 않으면 그냥 newColor = '색상' 선언만 되고 끝! 인 상태이다. - 위의 내용을 토대로 순차적으로 코드를 이해해 보자면,
- click event 발생 및 handleTitleClick 함수 실행
- currentColor 변수 선언 후 title.style.color 값 복사 (getter)
- newColor 변수 확인
- currentColor 현재 값 확인
- 조건에 따라 newColor에 'tomato' 혹은 'chocolate' 값 대입
- 마지막으로 title.style.color에 newColor값 대입 (setter)
2. JS와 CSS를 분리하기
<!-- html -->
<div class="hello">
<h1>Hello World!</h1>
</div>/* CSS */
h1 {
color: chocolate;
}
.active {
color: tomato;
}// JavaScript
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
if(title.className === 'active') {
title.className = '';
} else {
title.className = 'active';
}
}
title.addEventListener('click', handleTitleClick);
→ 위의 코드 더 좋게 고쳐보기
(1) 'active'라는 string을 두 번 반복해서 사용하고 있다. 이는 error의 위험이 있다. active는 내가 임의로 정해준 클래스 명이기 때문에 나중에 바꿔버리거나, 오탈자가 있으면 동작하지 않기 때문이다.
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
const clickedClass = 'active';
if(title.className === clickedClass) {
title.className = '';
} else {
title.className = clickedClass;
}
}
title.addEventListener('click', handleTitleClick);⇒ 따라서 내가 정의한 이름을 한 번만 사용하도록 (여러 번 사용해서 오탈자가 날 위험을 줄이도록) 변수를 선언해 사용한다!
(2) 이미 className이 존재하는 상태라면? 또한 JS에서 className 그 자체를 바꿔버리는 것은 좋은 방법이 아니다.
// HTML
<div class="hello">
<h1 class="font">Hello World!</h1>
</div>
// JavaScript
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
const clickedClass = 'active';
if(title.classList.contains(clickedClass)) {
title.classList.remove(clickedClass);
} else {
title.classList.add(clickedClass);
}
}
title.addEventListener('click', handleTitleClick);⇒ className 그 자체를 바꿔버리지 않고, JS를 이용해 특정한 className만 변경하도록 한다! classList는 class들의 목록으로 작업할 수 있게끔 허용해 준다.
(3) 위의 작업을 더 편하게 하기 위해 toggle을 사용해 보자.
/* CSS */
h1 {
color: chocolate;
}
.active {
color: tomato;
}// JavaScript
const title = document.querySelector('div.hello:first-child h1');
function handleTitleClick() {
title.classList.toggle('active');
}
title.addEventListener('click', handleTitleClick);⇒ title의 classList에 active가 이미 있는지 확인해서 만약 있다면 toggle이 active를 제거해 준다. 만약 존재하지 않는다면, 추가해 준다!
✅ 주변 분들에게 해당 강의를 많이 추천받았는데, 직접 들어보니 왜 그렇게 추천했는지 알겠다. 머릿속에 애매하게 정리되어있던 자바스크립트가 이거는 이렇기 때문에 이렇다! 라고 깔끔하게 정리되는 느낌! 앞으로 배울 내용들을 바탕으로 간단한 개인 프로젝트도 만들어보면서 자바스크립트랑 더 친해지는 시간을 가져야겠다.
[관련 글 함께 보기]
- [노마드코더 / 바닐라JS] momentum 클론 코딩(2)_Login
- [노마드코더 / 바닐라JS] momentum 클론 코딩(3)_Clock, Quetes and Background
- [노마드코더 / 바닐라JS] momentum 클론 코딩(4)_To do and Weather
[참고 자료]
https://nomadcoders.co/javascript-for-beginners
바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders
Javascript for Beginners
nomadcoders.co
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [freeCodeCamp / 바닐라JS] 초보자를 위한 바닐라JS 프로젝트(1)_Color Flipper (1) | 2023.03.25 |
|---|---|
| [노마드코더 / 바닐라JS] momentum 클론 코딩(3)_Clock, Quetes and Background (1) | 2023.03.24 |
| [노마드코더 / 바닐라JS] momentum 클론 코딩(2)_Login (0) | 2023.03.23 |
| [JavaScript] .sort() 함수를 이용해 배열의 요소 정렬하기 (0) | 2023.02.15 |
| [JavaScript] var, let, const 간단하게 알아보기 (1) | 2022.12.28 |
