1. overwatch 예제

• 블록 요소 + 가로 사이즈 명시 + margin:auto : 가운데 정렬

2-1. JS 개요

01. 표기법

dash-case(kebab-case) : html / css

• the-quick-brown-fox

snack_case : html / css

• the_quick_brown_fox

camelCase : js

• theQuickBrownFox

PascalCase : js

• TheQuickBrownFox

02. Zero-base Numbering

특별한 경우를 제외하곤 0부터 count

03. 주석

// 한 줄 메모
/* 여러 줄 메모 */

2-2. 자료형

01. String

let myName = "Heropy";
let hello = (backtick)hello ${myName}(backtick)

02. Number

정수 / 부동 소수점

03. Boolean

true, false 두 가지 값만 가지는 논리 데이터

04. Undefined

let undef;

값이 할당되지 않은 상태

05. Null

let empty = null;

어떤 값이 의도적으로 비어있음

06. Object (객체 데이터)

여러 데이터를 key:value 형태로 저장 { }

let user = {age = 23}; console.log(user.age);

07. Array (배열 데이터)

여러 데이터를 순차적으로 지정합니다. [ ]

let fruits = ['Apple', 'Banana']; console.log(fruits[1]);

2-3. 변수

var (not recommended)
let / const -> immutable 여부 차이

2-4. 함수

기명함수

function helloFunc() { console.log(1234); } helloFunc();

익명함수

let world = function () { console.log('World~'); world();

2-5. 조건문

let isShow = true;
if (isShow){ comsole.log('Show!');}
else { coosole.log('World');

2-6. DOM API

Document Object Model : HTML 요소
Application Progranmming Interface : 명령들
-> JS로 html을 제어할 때 쓰는 명령들

js가 html에 정상적으로 접근하기 위해선

1. script 태그를 body 태그 맨 마지막에 작성
2. defer 속성 시용

---

HTML 요소 1개 검색

const bowEl = document.querySelector('.box')

HTML 요소의 클래스 정보 객체 활용

bowEl.classList.(add/remove)('active'); let isContains = boxEl.classList.contains('active'); console.log(isContains);

HTML 요소에 적용할 수 있는 메소드

bowEl.addEventListener()

Arguments 추가 가능

bowEl.addEventListener(1, 2)

1 - 이벤트 (Event, 상황)

bowEl.addEventListener('click', 2)

2 - 핸들러 (Handler, 실행할 함수)

bowEl.addEventListener('click', function() { console.log('Click!');)

HTML 요소 모두 검색

const bowEl = document.querySelectorAll('.box')

찾은 요소들 반복해서 함수 실행

bowEl.forEach(function () {});

Getter / Setter

console.log(bowEl.textContent); -> getter
bowEl.textContent = 'HEROPY'; -> setter

3. 메소드 체이닝

메소드를 연달아 쓰는 기법