[패스트캠퍼스 FE MGS] Day8(7월 6일/수 - Javascript 기초)

1sol·2022년 7월 7일

패스트캠퍼스 FE MGS

목록 보기

8/11

Learn!!

본격적인 자바스크립트를 배우기전, 자바스크립트에는 어떤것들이 있는가?

표기법

데이터 종류

변수

함수

조건문

DOM API

1. 표기법

dash-case(kebab-case)
- HTML, CSS에서 주로 사용
snake_case
- HTML, CSS에서 주로 사용
camelCase
- 자바스크립트에서 주로 사용
ParcelCase
- 주로 자바스크립트의 new 생성자 함수 이름을 작성시에 사용
Zero-based Numbering
- 특수한 경우를 제외하고 0부터 숫자를 시작함.

2. 데이터 종류(자료형)

1) 원시 데이터

String(문자 데이터)
- 큰 따옴표, 작은 따옴표, 백틱 기호를 사용해서 데이터를 입력할 수 있다.
Number(숫자 데이터)
- 정수 및 부동소수점 숫자를 나타냄.
- 따옴표안에 적게 되면 문자로 인식함.
Boolean(불린 데이터)
- true, false, 두 가지 값밖에 없는 논리 데이터
Undefined
- 값이 할당되지 않은 상태를 나타냄
Null
- 어떤 값이 의도적으로 비어있음을 의미

2) 객체 데이터

Object(객체 데이터)
- 여러 데이터를 {Key:Value} 형태로 저장
Array(배열 데이터)
- 여러 데이터를 [] 대괄호 안에 순차적으로 저장한다.

3. 변수

데이터를 저장하고 참조(사용)하는 데이터의 이름
변수나 함수의 이름으로 예약어는 사용할 수 없다.
- this, if, break....
let : 재사용 O, 재할당 X, 블록 레벨의 유효범위
const : 재할당 X, 재사용 X, 블록 레벨의 유효범위
var : 재사용 O, 재할당 O, 함수 레벨의 유효범위
- 사용하지 않는것을 권장함

4. 함수

// 함수 선언
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, 6

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
return을 사용하여 특정한 값을 반환할수도 있음
이름이 있는 함수 : 함수 선언!
익명(이름이 없는) 함수 : 함수 표현!
Method(메소드) : 객체데이터 내부에서 하나의 속성부분에 함수라는 데이터를 할당하는것을 말함

5. 조건문

let isShow = true;

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

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문
조건이 true인 구문을 실행하고 그 외의 구문은 실행하지 않음
조건이 거짓인 경우 else가 있다면 else 구문으로 넘어감

6. DOM API (Document Object Model)

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

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

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

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

// 2 - 이벤트(Handler, 실행할 함수)
boxEl.addEventListener('click', function () {
  console.log('Click~!');
})

// 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}`);
  console.log(index, boxEl);
});