1. 개요
(1) 표기법
- dash-case(kebab-case) : 대시(”-”) 기호법을 사용하는 표기법 (html,css에서 사용)
ex) the-quick-brown-fox-jumps-over-the-lazy-dog
하나의 단어로 인식하게 되고 뜨어쓰기를 대시(“-”)로 대신하게 된다. - snake_case : 언더바(”_”) 기호법을 사용하는 표기법 (html,css에서 사용)
ex) the_quick_brown_fox_jumps_over_the_lazy_dog - camelCase : 단어시작을 대문자를 사용함으로써 구분하는 표기법 (Js에서 사용)
ex) theQuickBrownFoxJumpsOverTheLazyDog - PascalCase : 첫단어의 시작도 대문자인점이 camelCase와 다르다 (Js에서 사용)
ex) TheQuickBrownFoxJumpsOverTheLazyDog
(2) Zero-based Numbering
- 0을 기반으로 번호를 매기는 방법이다.
- 특수한 경우를 제외하고 0부터 시작한다.
(3) 주석
- “//” : 한줄 주석
- “/* */” : 한줄 주석, 여러줄 주석
6. DOM API
Document Object Model, Application Programming Interface
(’Document’는 html문서를 의미하고 ‘Object Model’은 문서내의 span,div, ..와 같은 요소들을 의미한다)
(1) script
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js"></script>
</head>
<body>
<div class="box">Box!!</div>
</body>
</html>let boxEl = document.querySelector('.box');
console.log(boxEl);위와 같이 html과 js 파일을 생성하게 된다면 콘솔에 box클래스의 div태그가 나타날것 같지만 실제로는 그렇지 않다.
js파일을 연결하는 script 태그가 div 요소보다 위에 있어 div 요소를 읽기 전에 js파일을 읽어들이기 때문에 js에서는 div태그를 인식하지 못한다.
<body>
<div class="box">Box!!</div>
<script src="./main.js"></script>
</body>
하지만 만약에 js파일을 연결하는 script태그를 div요소 밑으로 옮긴다면 잘 찍히는 모습을 볼 수 있다.
이는 div요소를 읽고나서 js파일을 읽기 때문에 div요소를 인식할 수 있다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./main.js"></script>
</head>맨 밑으로 옮기는 방법 외에도 script 태그에 defer 속성을 주게 될경우에도 똑같이 잘 찍히는 모습을 확인할 수 있다.
(‘정보’에 해당하는 내용인 script 태그를 ‘구조’에 해당하는 body태그내에 넣는 것은 부적절하므로 head태그내에 defer속성과 함께 입력하는것이 적절하다)
(2) dom api
예제1
const boxEl = document.querySelector('.box');- HTML 요소(Element) 1개 검색
‘document’라는 객체의 querySelector()라는 메소드를 이용해서 CSS 선택자를 전달하면 해당 요소를 불러올 와 변수에 저장할 수 있다. 단, 가장 먼저 찾은 요소 1개를 저장한다.
boxEl.addEventListener();
boxEl.addEventListener(1, 2); // 인수 추가 가능
boxEl.addEventListener('click', 2); // 1. 이벤트(Event, 상황)
boxEl.addEventListener('click', function() { // 2. 핸들러(Handler, 실행함수)
console.log('Click~');
});- HTML 요소에 적용할 수 있는 메소드
- addEventListener()는 찾은 요소를 저장한 변수를 이용해서 이벤트를 적용할 수 있는 메소드이다.
- 메소드 내에 인수를 추가할 수 있다.
- 인수로
이벤트와핸들러(익명의 함수)를 추가할 수 있다. - 맨마지막 코드를 보면 ‘click’이벤트가 일어났을 때 익명의 함수를 실행하는데 이 함수는 콘솔에 ‘Click~’를 찍는다.
- 이러한 익명의 함수를 ‘Handler(핸들러)’라고도 한다.
예제2
// HTML 요소 1개 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용
boxEl.classList.add('active');
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // falseconst boxEl = document.querySelector('.box');위에서 봤듯이 document객체의 querySelector() 메소드를 이용해서 ‘box’클래스를 가진 요소를 가져와서 boxEl변수에 담는다.
boxEl.classList.add('active');가져온 요소의 클래스에 add()메소드를 이용해 ‘active’라는 이름의 새로운 클래스를 추가한다.
let isContains = boxEl.classList.contains('active');boxEl요소의 클래스들을 담은 객체에 ‘active’가 있는지, 즉 boxEl요소가 ‘active’ 클래스를 담고 있는지에 대한 여부를 ‘isContains’변수에 담는다. 결과적으로 존재하므로 ‘true’를 담게된다.
boxEl.classList.remove('active');boxEl 요소의 클래스들을 담은 객체에서 ‘active’라는 이름의 클래스를 제거한다. 결과적으로 boxEl요소는 ‘active’ 클래스가 사라지고 원래 존재하던 ‘box’라는 클래스만 존재하게 된다.
따라서 다시 ‘active’클래스를 갖고 있는지 에대한 여부를 ‘isContains’변수에 저장하게 된다면 해당 변수는 ‘false’를 담게 된다.
예제3
// HTML요소 모두 검색/찾기
// 유사배열 형태로 생성된다
const boxEls = document.querySelectAll('.box');
console.log(boxEls);
// forEach(): 찾은 요소들 반복해서 함수 수행
// 익명함수를 인수로 추가
boxEls.forEach(function() {});
// 첫번째 매개변수(boxEl): 반복중인 요소
// 두번째 매개변수(index): 반복중인 번호
boxEls.forEach(function(boxEl, index){});
// 출력
boxEls.forEach(function(boxEl, index) {
boxEl.classList.add(`order-${index-1}`);
console.log(index, boxEl);
});querySelectAll(): html 문서 내에서 선택자로 선택한 요소들 모두 찾아 ‘유사배열’형태로 반환한다.forEach(): 각 요소들에 대해 반복한다. 인자로 익명함수가 들어온다.boxEl.classList.add(order-{}’를 사용하게 될경우 내용에 변수를 사용해서 값을 넣을 수 있다.
예제4
const boxEl = document.querySelector('.box');
console.log(boxEl.textContent); // 1
boxEl.textContent = 'Heropy!!';
console.log(boxEl.textContent); // Heropy!!boxEl.textContent: boxEl 변수에 담긴 요소의 text 부분을 담고 있다. 값을 가져오는 것도 가능하지만 지정하는 것 또한 가능하다.boxEl.textContent=’Heropy!!’: boxEl 변수에 담긴 요소의 text 값을 ‘Heropy!!’로 지정한다.
7. 메소드 체이닝
가능한 경우에 한해 메소드 여러개를 이어서 사용할 수 있다.
const a = 'Hello~';
const b = a.split('').reverse().join('');
console.log(a); // Hello~
console.log(b); // ~olleHsplit(): 문자를 인수 기준으로 쪼개서 배열로 반환한다.reverse(): 배열을 뒤집는다.join(): 배열을 인수 기준으로 문자로 병합해 반환한다.
