Javascript

표기법

1. dash-case(kebab-case)
2. snake_case
3. camelCase
4. PascalCase

---

데이터 종류(자료형)

• String: 문자 데이터, 따옴표를 사용

let myName = "ABC";
let email = 'abc@abc.com';
let hello = `Hello ${myName}??`;

console.log(myName);    // ABC
console.log(email);	    // abc@abc.com
console.log(hello);	    // Hello ABC??

• Number: 숫자 데이터, 정수 및 부동 소수점 숫자

let num = 123;
let opacity = 1.57;

console.log(num);     // 123
console.log(opacity); // 1.57

• Boolean: 불린 데이터, true & false 두 가지 값밖에 없는 논리 데이터

let checked = true;
let isShow = false;

console.log(checked);  // true
console.log(isShow);   // false

• Undefined: 값이 할당되지 않은 상태

let undef;
let obj = {
	abc: 123
};

console.log(undef); // undefiend
console.log(obj.abc) // 123
console.log(obj.xyz) // undefined

• Null: 어떤 값이 의도적으로 비어있음을 의미

let empty = null;

console.log(empty); // null

• Object: 객체 데이터, 여러 데이터를  {Key: Value} 형태로 저장

let user = {
	// Key: Value
    name: 'ABC',
    age: 100,
    isValid: true
};

console.log(user.name); // ABC
console.log(user.age);  // 100
console.log(user.isValid); // true

• Array: 배열 데이터, 여러 데이터를 순차적으로 저장

let fruits = ['Apple', 'Cherry', 'Melon'];

console.log(fruits[0]);  // Apple
console.log(fruits[1]);  // Cherry
console.log(fruits[2]);  // Melon

---

변수: 데이터를 저장하고 참조(사용)하는 데이터의 이름: let, const, var

• let: 재사용이 가능(값<데이터>의 재할당 가능)

let a = 123;
console.log(a);  // 123

a = 999;
console.log(a);  // 999

• const: 데이터 재사용 불가(값<데이터>의 재할당 불가능)

const a = 123;
console.log(a); // 123
a = 999;
console.log(a); //TypeError: Assignment to constant variable.

---

예약어: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

ex) this, if, let, const ... 

---

함수: 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

// 함수 선언
function helloFunc() {
// 실행 코드
	console.log(123);
}

// 함수 호출
helloFunc();  // 123

function returnFunc() {
	return 123;
}

let a = returnFunc();
console.log(a);  // 123

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 abc = {
	name: 'abc',
    age: 100,
    // 메소드(Method)
    getName: function () {
    	return this.name;
    }
};

const hisName = abc.getName();
console.log(hisName);  // abc
console.log(abc.getName());  // abc

---

조건문: 조건의 결과에 따라 다른 코드를 실행하는 구문

let isShow = true;

if (isShow) {
	console.log('show!');
}else {
	console.log('hide?');
}

---

DOM API(Document Object Model<div, span, input ... > / Application Programming Interface)

// HTML 요소(Element) 1개 검색 / 찾기
const boxEl = document.querySelector('.box');

// HTML 요소에 적용할 수 있는 메소드
boxEl.addEventListener();

// 인수(Arguments)를 추가 가능
boxEl.addEventListener(1, 2);

// 1 - 이벤트(Event, 상황)
boxEl.addEventListner('click', 2);

// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
	console.log('Click!');
});

// HTML 요소(Element) 검색 / 찾기
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);      // false

// HTML 요소(Element) 모두 검색 / 찾기
const boxEls = document.quertSelectorAll('.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}`);
    console.log(index, boxEl);
});

const boxEl = document.querySelector('.box');

// Getter: 값을 얻는 용도
console.log(boxEl.textContent); 
// Setter: 값을 지정하는 용도
boxEl.textContent = 'ABC';
console.log(boxEl.textContent); // abc

---

메소드 체이닝

const a = 'Hello';
// split: 문자를 인수 기준으로 쪼개서 배열로 반환
// reverse: 배열 뒤집기
// join: 배열을 인수 기준으로 문자로 병합해 반환
const b = a.split('').reverse().join(''); // 메소드 체이닝

console.log(a);  // Hello
console.log(b);  // olleH