JavaScript

• dash-case(kebab-case)

프로그래밍의 표기법중 하나

• snake_case

언더바가 들어가 있는 형태

• camelCase

첫단어는 소문자 두번째는 첫글자가 대문자

• ParcelCase

카멜과 유사하지만 첫번째 단어의 첫글자가 대문자이다.

참고로 자바스크립트도 숫자를 0부터 새기 시작한다.

변수 선언시에는 let을 사용한다.

net Date라는 함수로 getDate를 얻게 되는데 0번째가 일요일이다.

주석

데이터 종류

• String

// String(문자 데이터)
// 따옴표를 사용합니다. 큰거 작은거를 구분하지 않는다.
let myName = "tonyhan18";
let email = 'ourclub7279@gmail.com';
// `기호를 사용할 수 있다. 이 문자열에 추가적인 내용을 보간할 수 있다.
let hello = `Hello ${myName}?!`

console.log(myName); // tonyhan18
console.log(email); // ourclub7279@gmail.com
console.log(hello); // Hello tonyhan18?!

• Number

// Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타냅니다.
let number = 123;
let opacity = 1.57;

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

• Boolean

// Boolean(불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터입니다.
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // false

• Undefined

// Undefined
// 값이 할당되지 않은 상태를 나타냅니다.
let undef;
let obj = { abc: 123 };

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

• Null

// Null
// 어떤 값이 의도적으로 비어있음을 의미합니다.
let empty = null;

console.log(empty); // null

• Object

// Object(객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장합니다. { }
let user = {
 // Key: Value,
 name: 'HEROPY',
 age: 85,
 isValid: true
};

console.log(user.name); // HEROPY
console.log(user.age); // 85
console.log(user.isValid); // true

• Array

// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장합니다. [ ]
let fruits = ['Apple', 'Banana', 'Cherry'];

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

변수

var, ket, const가 존재하는데 가급적 var은 사용금지

// 값(데이터)의 재할당 가능! 
let a = 12;
console.log(a); // 12
a = 999;
console.log(a); // 999


// 값(데이터)의 재할당 불가! 
const a = 12;
console.log(a); // 12
a = 999;
console.log(a); // TypeError: Assignment to constant variable

변수이름으로 예약어 사용금지

함수

/* 함수 선언과 호출 */
function helloFunc() {
 // 실행 코드
 console.log(1234);
}
// 함수 호출
helloFunc(); // 1234



/* 함수를 변수에 저장 */
// 아래와 같이 변수에 저장도 가능
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, 

기명함수와 익명함수

// 기명(이름이 있는) 함수
// 함수 선언!
function hello() {
 console.log('Hello~');
}

// 익명(이름이 없는) 함수 -> 대충변수에 저장해서 사용한다.
// 함수 표현!
let world = function () {
 console.log('World~');
}

// 함수 호출!
hello(); // Hello~
world(); // World~

멤버 함수

// 객체 데이터
const heropy = {
 name: 'HEROPY',
 age: 85,
 // 메소드(Method)
 getName: function () {
 return this.name;
 }
};

const hisName = heropy.getName();
console.log(hisName); // HEROPY
// 혹은
console.log(heropy.getName()); // HEROPY

조건문

let isShow = true;
if (isShow) {
 console.log('Show!'); 
} else {
 console.log('Hide?');
}

DOM API

자바스크립트에서 html을 제어하는 여러가지 명령들

위와 같이 작성하면 null이 나온다.
이것을 해결하기 위해 scrip부분을 아래로 내리자

하면 성분이 그대로 찍히는 것을 확인할 수 있다.

물론 defer 속성으로 이러한 문제를 해결할 수 있다.

이러한 문제가 생기는 이유는 브라우저는 순차적으로 읽기 때문에 main.js를 만나는 순간 box class를 찾게된다. 그래서 null 문자가 나온것이다.

// HTML 요소(Element)중 처음 찾은 1개만 반환
const boxEl = document.querySelector('.box');

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

// 인수(Arguments)를 추가 가능! 1번에는 이벤트 2번은 핸들러
boxEl.addEventListener(1, 2);
// 1 - 이벤트(Event, 상황)
boxEl.addEventListener('click', 2);
// 2 - 핸들러(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
 console.log('Click~!');
});

실재로 box를 누르면 콘솔에 click이 출력된다.

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

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active');
//active라는 클래스가 있는지 확인한다.
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true

//active라는 클래스를 제거해버린다.
boxEl.classList.remove('active');
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

실재로 클래스에 active라는 클래스가 추가된것을 확인할 수 있다.

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가!
boxEls.forEach(function () {});

// 첫 번째 매개변수(boxEl): 반복 중인 요소.
// 두 번째 매개변수(index): 반복 중인 번호
// 두개다 이름을 직접 지을 수 있지만 보통 두 번째는 그냥 index 사용
boxEls.forEach(function (boxEl, index) {});

// 출력!
boxEls.forEach(function (boxEl, index) {
 boxEl.classList.add(`order-${index + 1}`);
 console.log(index, boxEl);
});

index 0번 부터 시작해서 쭉 찾아온것을 확인할 수 있다.

add를 이용해서 클래스를 추가한 모습이다.

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

// Getter, 값을 얻는 용도
console.log(boxEl.textContent); // Box!!

// Setter, 값을 지정하는 용도
boxEl.textContent = 'tonyhan18';
console.log(boxEl.textContent); // tonyhan18

위와 같이 1이 출력된다음 내용이 바뀐것을 확인할 수 있다.

메소드 체이닝

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

뭐 대충 위와 같이 함수를 타고 타서 출력한다.