챕터9 JS 선행
01. 개요
표기법
HTML과 CSS에서 사용하는 하나의 단어를 표기하는 방법
- dash-case(kebab-case)
- snake_case
JS에서 사용하는 하나의 단어를 표기하는 방법 - camelCase 낙타케이스.
- PascalCase 자바스크립트의 new라는 키워드를 가지고 있는 생성자 함수에서 함수의 이름을 명시할 때 사용.
- Zero-based Numbering 0기반 번호 매기기.
주석
// 한 줄 메모
/* 한 줄 메모
/여러 줄
메모 ****/
02. 데이터 종류
자바스크립트는 데이터를 기준으로 사고해야 함.
- String(문자 데이터) 따옴표(” “, ‘ ’)를 사용.
let myName = “helloworld”
let email = “helloworld123”
let hello =Hello ${myName} - Number(숫자 데이터) 정수 및 부동소수점 숫자를 나타냄.
let number = 123;
let opacity = 1.57; - Boolean(불린 데이터) true, false 두 가지 값 밖에 없는 논리 데이터
let checked = true;
let incorrect = false; - Undefinded 값이 할당되지 않은 상태
let undef;
let obj = { abc: 123 }; - Null 어떤 값이 의도적으로 비어있음을 의미
let empty = null; - Object(객체 데이터) 여러 데이터를 Key:Value 형태로 저장합니다. { }
let user = { key: value } - Array(배열 데이터) 여러 데이터를 순차적으로 저장합니다. [ ]
let fruits = [ apple, orange, pear ] // 0, 1, 2 순서
03. 변수, 예약어
변수 – 데이터를 저장하고, 참조(사용)하는 데이터의 이름.
let // 재사용이 가능한 변수 선언
const // 값(데이터)의 재할당 불가
보통 변수를 만들 때, 처음엔 const로 쓰다가 재할당이 필요할 때 let으로 바꿔줌.
예약어 – 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어. Reserved word. ex) this, if, break 등 editor가 찾아 주기 때문에 외울 필요x
04. 함수(function)
특정 동작(기능)을 수행하는 일부 코드의 집합(부분).
// 함수 선언
function helloFunc() {
// 실행 코드
console.log(1234); // 명령
}
// 함수 호출. 함수를 호출해야만 실행할 수 있음.
helloFunc(); // 1234
function returnFunc() {
return 123; // 함수를 사용하여 자바스크립트 데이터 내보내기
}
let a = returnFunc(); // 함수에서 반환된 값을 변수에 담기.
console.log(a); // 123 -> 변수 a를 출력함.
// 함수 선언!
function sum(a, b) {
// a와 b는 매개변수(Parameters)
return a + b;
}
// 재사용!
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let b = sum(7, 12);
let c = sum(2, 4);
console.log(a, b, c); // 3, 19, 6
// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
console.log('Hello~');
}
// 익명(이름이 없는) 함수
// : 보통 데이터로 활용되거나 아래처럼 변수에 담아 사용.
// 함수 표현!
let world = function () {
console.log('world~');
}
// 함수 호출!
hello(); // Hello~
world(); // World~
// 객체 데이터; 키와 값으로 이루어진 속성이 들어감.
const hiworld = {
// 속성(property)
name: 'HIWORLD', // name이라는 이름에 문자데이터
age: 85, // age라는 이름에 숫자데이터
// 메소드(Method). 속성부분에 함수가 할당되어 있는 경우, 속성이 아닌 메소드라고 함.
getName: function () { // 함수의 표현
return this.name; // this가 소속되어 있는 객체 데이터의 name의 값.
}
};
const hisName = hiworld.getName();
console.log(hisName); // HIWORLD
// 혹은
console.log(hiworld.getName()); // HIWORLD
05. 조건문
조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문 if, else
let isShow = true;
let checked = false;
if(isShow) {
console.log (‘Show!’); // Show!
} else {
Console.log(Hide?);
}
06. DOM API
Document(HTML) Object Model(div, span, input etc…)
Application Programming Interface. – 웹사이트가 동작하기 위해 입력하는 프로그래밍 명령들.
DOM API: 자바스크립트에서 HTML을 제어할 때 사용하는 여러 명령들.
script defer src=”./main.js> /script>
브라우저가 위에서부터 아래로 실행이 되는데, script태그가 head태그 안에 있으면 body태그 부분이 실행되기 전에 script태그가 실행되기 때문에, 찾지 못함. 이때, 가져온 JS파일을 HTML 문서 분석 이후에 실행하도록 지시하는 HTML 속성(Attribute)이다.
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');
// HTML 요소의 선택자 중 가장 먼저 찾아낸 1개를 반환함.
// HTML 요소에 적용할 수 있는 메소드; // 함수 원형
boxEl.addEventListener();
// 인수(Arguments)를 추가 가능! // 과정1
boxEl.addEventListener(1, 2); // 인수를 2개 사용 가능.
// 1 - 이벤트(Event, 상황) // 과정2
boxEl.addEventListener('click', 2);
// 2 - 핸들러(Handler, 실행할 함수) // 결과
boxEl.addEventListener('click', function() {
console.log('Click~!');
});
// HTML 요소(Element) 검색/찾기
const boxEl = document.querySelector('.box');
// 요소의 클래스 정보 객체 활용! (DOMAPI)
boxEl.classList.add('active'); // classList(DOMAPI)는 명시된 데이터를 찾아냄.
// add(): 추가메서드
// boxEl이라는 클래스 요소에 active라는 문자데이터를 추가하겠다.
let isContains = boxEl.classList.contains('active');
// contains(): 포함하는지 확인하는 메서드
console.log(isContains); // true
boxEl.classList.remove('active');
// 명시된 클래스(boxEl)의 데이터('active')를 제거
isContains = boxEl.classList.contains('active');
console.log(isContains); // false
// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);
// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {});
// 첫 번째 매개변수(boxEl): 반복 중인 요소. 이름은 지을 수 있음.
// 두 번째 매개변수(index): 반복 중인 번호.
boxEls.forEach(function (boxEl, index) {});
// 출력!
boxEls.forEach(function (boxEl, index) {
boxEl.classList.add(order-${index + 1});
// boxEl의 클래스 이름에 각 요소 이름 추가하기
console.log(index, boxEl);
});
const boxEl = document.querySelector('.box');
// textContent라는 DOMAPI를 사용하여 아래 2가지 용도로 사용 가능.
// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // 해당 값
// Setter, 값을 지정하는 용도
boxEl.textContent = 'HelloWorld?!';
console.log(boxEl.textContent); // HelloWorld?!
07. 메소드 체이닝
메소드를 이어 작성하는 방법.
const a = 'Hello~';
// split: 문자를 인수 기준으로 쪼개서 배열로 변환.
// reverse: 배열을 뒤집기.
// join: 배열을 인수 기준으로 문자로 병합해 반환.
const b = a.split('').reverse().join(''); // 메소드 체이닝...
console.log(a); // Hello~
console.log(b); // ~olleH
