JavaScript 개요
1. 표기법
- dash-case(kebab-case)
HTML,CSSthe-quick-brown-fox
- snake_case
HTML,CSS- the_quick_brown_fox
- camelCase
JStheQuickBrownFox
- PascalCase
TheQuickBrownFox
Zero-based Numbering
- 0 기반 번호 매기기
- 특수한 경우를 제외하고 0부터 숫자를 시작한다.
2. 데이터 종류(자료형)
Javascript는 화면을 제어할 수는 있지만 모두 데이터로 동작하는 것이므로 '데이터를 기준으로 사고'해야 한다.
String
- 따옴표를 사용
Number
- 정수 및 부동소수점 숫자를 나타낸다.
Boolean
true,false두 가지 값밖에 없는 논리 데이터이다.
Undefined
- 값이 할당되지 않은 상태를 나타낸다.
Null
- 어떤 값이 의도적으로 비어있음을 의미한다.
Object
- 객체 데이터
- 여러 데이터를 Key:Value 형태로 저장한다.
{ }
Array
- 여러 데이터를 순차적으로 저장한다.
[ ]
3. 변수와 예약어
변수
- 데이터를 저장하고 참조(사용)하는 데이터의 이름이다.
var,let,constvar는 권장사항이 아니므로let과const를 사용해서 선언하는 것을 추천한다.
let vs const
let: 값의 재할당 ⭕const: 값의 재할당 ❌- 대부분의 경우에는
const를 사용하고 값을 재할당해야 하는 경우가 발생하면let으로 고쳐서 사용하기!
예약어
- 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어이다.
4. 함수
- 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)이다.
- 매개변수와 인수
- 기명 함수(함수 선언)와 익명 함수(함수 표현)
- 객체 데이터 내부에서 하나의 속성 부분에 함수 데이터를 할당하는 것을 '메소드'라고 한다.
this:this가 소속되어 있는 객체 데이터를 의미한다.
5. 조건문
- 조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
if,else
6. DOM API
- Document Object Model(
div,span,input) / Application Programming Interface - '
js로html을 제어할 때 사용되는 명령들'로 이해하면 된다.
addEventListener
👩💻 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script defer src="./main.js"></script>
</head>
<body>
<div class="box">Box!!</div>
</body>
</html>let boxEl = document.querySelector('.box');
console.log(boxEl)
boxEl.addEventListener('click', function () {
console.log('click!');
});👉 실행 결과
querySelector
👩💻 예제
html 코드는 위(addEventListener)에서 사용했던 코드와 동일하다.
let boxEl = document.querySelector('.box');
console.log(boxEl)
boxEl.addEventListener('click', function () {
console.log('click!'); // 1
boxEl.classList.add('active'); // 2
console.log( // 3
boxEl.classList.contains('active')
);
boxEl.classList.remove('active'); // 4
console.log( // 5
boxEl.classList.contains('active')
);
// 1. box를 클릭하면 'click!!'을 출력
// 2. box에 'active'라는 클래스를 생성
// 3. active 클래스가 있는지 없는지 콘솔로 확인
// 4. box 부분의 active 클래스를 제거
// 5. active 클래스가 있는지 없는지 콘솔로 확인
});👉 실행 결과
querySelectorAll
👩💻 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script defer src="./main.js"></script>
</head>
<body>
<div class="box">1</div>
<div class="box">2<div>
<div class="box">3<div>
<div class="box">4</div>
</body>
</html>let boxEls = document.querySelectorAll('.box');
boxEls.forEach(function (boxEl, index) {
// 보간법을 사용하려면 백틱(`)을 사용해야 한다!!
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
});👉 실행 결과
textContent
- Getter: 값을 얻는 용도
- Setter: 값을 지정하는 용도
👩💻 예제
html 코드는 위(querySelectorAll)에서 사용했던 코드와 동일하다.
const boxEl = document.querySelector('.box');
// 제일 먼저 찾아진 요소 하나만 반환한다.
// 결과: 콘솔창에 문자 '1' 출력
console.log(boxEl.textContent);
// 첫 번째 box의 내용을 'Hello!!'로 변경한다.
boxEl.textContent = 'Hello!!'
console.log(boxEl.textContent);👉 실행 결과
7. 메소드 체이닝
- 메소드를 체인처럼 연결해서 사용할 수 있는 것이다.
🙋♀️