Javascript 선행 학습

공부/Javascript

Javascript 선행 학습

도리암 2022. 2. 8. 00:29

표기법

dash-case(kebab-case) : 각 단어 사이를 dash(-)로 잇는 방법

snake_case : 각 단어 사이를 lodash(_)로 잇는 방법

camelCase : 첫 단어 제외 각 단어의 앞글자를 대문자로 작성하는 방법

PascalCase : 첫 단어 포함 각 단어의 앞글자를 대문자로 작성하는 방법

Zero-based Numbering : 0부터 번호매기기

자료형

자료형	의미	표현	예시
String	문자	'', "", ``(백틱 기호) 사용	`hello!`, 'Hello World!'
Number	숫자	정수, 부동소수점 숫자	123, 1.525
Boolean	논리	true, false	Truthy(참 같은 값) true, {}, [], 1, 2, 'false', -12, '3.14' Falsy(거짓 같은 값) false, '', null, undefined, 0, -0, NaN(Not-a-Number)
Undefined	값이 없음	의도되지 않은 Null 상태
Null	값이 없음	의도적으로 비어있음
Object	객체	{ }, Key : Value	let user = { name : 'Doriam', age: 27 } console.log(user.name); // Doriam
Array	배열	[ ], 여러 데이터를 순차 저장	let fruits = ['apple', 'banana', 'cherry']

변수

var : 함수 단위. 한번 선언되면 해당 함수 내에선 어디서든 호출 가능. 값(데이터)의 재할당 가능

let : 블록 단위, 함수 내 if문 블록 등 선언 된 블록 내에서만 사용 가능. 값(데이터)의 재할당 가능

const : 블록 단위, 값(데이터) 재할당 불가

var는 의도하지 않은 결과를 도출해 낼 수 있어 사용을 권장하지 않음.

함수

익명 함수 : 이름이 없는 1회성 함수. 대부분 데이터로 활용되거나 변수에 할당되어 사용됨

let fc = function ( ) { }

fc( ); // 호출

기명 함수 : 이름이 있는 다회성 함수.

function fc( ) { }

fc( ); // 호출

조건문

if ( 조건식 ) {

실행문

} else if ( 조건식 ) {

실행문

} else {

실행문

}

DOM API (Document Object Model, Application Programming Interface)

header 부분에 <script src="링크"></script>로 JS 파일을 링크하면 밑 부분은 읽지 않은채로 실행시켜서 오류가 발생.

-> 브라우저는 html문서 상단부터 하단으로 읽어가며 웹페이지를 작성하기 때문.

예시)

//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 boxEl = document.querySelector('.box');

// 요소의 클래스 정보 객체 활용!
boxEl.classList.add('active'); // active 클래스 추가
let isContains = boxEl.classList.contains('active'); // active 클래스가 클래스 리스트에 존재하는지 확인
console.log(isContains); // true

boxEl.classList.remove('active'); // active 클래스 삭제
isContains = box.classList.contains('active');
console.log(isContains); // false

// HTML 요소(Element) 모두 검색/찾기
const boxEls = document.querySelectorAll('.box'); // .box 클래스를 모두 찾아 반환
console.log(boxEls); // 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 bosEl = document.querySelector('.box');

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

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

메소드 체이닝(Method Chaining)

한 대상에 적용할 메소드를 체인 형식으로 묶어둔 것. 왼쪽부터 실행

const a = 'Hello~';

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

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