JavaScript_Study

console.log() / Semicolon(;) / 주석(Comment) / 추상화(Abstraction)

불 대수 / 자료형(Data Type) / 할당 연산자(Assignment Operator) / 복합 할당 연산자(Compound Assignment Operator) / 증가(Increment), 감소(Decrement) 연산자

변수(Variable) / 상수 (Constant)

함수 / 매개변수(parameter) / 여러 개의 parameter / optional parameter / return문

typeof / 연산자 우선 순위 / 형 변환(Type Conversion) / Falsy / 암시적 형 변환 / 산술 연산자 / 비교 연산자 / 같음 비교 연산

템플릿 문자열(Template String) / null vs. undefined

if문(if statement) / else if문 / switch문 / if문 vs. switch문

for 반복문(loop statement) / while 반복문(while statement) / for 반복문 vs. while 반복문 / break / continue

객체(Object) / 점 표기법 / 대괄호 표기법 / property 수정 / property 추가 / property 삭제 / in 연산자 / method

Date 객체 / getTime method / Date.now method / setTime method / Date 객체의 형변환

for...in 반목문

배열(Array) / Indexing / 자료형 확인 / 자료형 길이 / 요소 추가 및 수정 / 요소 삭제 / splicing method / 기타 method / 다차원 배열

for...of 반복문

지수 표기법 / n진법 / toFixed / toString / Math 객체 / 절댓값 / 최대값 / 최소값 / 거듭제곱 / 제곱근 / 반올림 / 버림 / 올림 / 난수 / 계산 오차 수정

문자열 길이 / 요소 접근 / 요소 탐색 / 대소문자 변환 / 양 끝 공백 제거 / 부분 문자열 접근 / for...of 반복문 활용 / 문자열 <-> 배열 변환 / 문자열 vs. 배열

기본형 vs. 참조형 / 참조형 복사하기

var / hoisting

태그 선택하기 / 이벤트

1. HTML 속성 다루기 브라우저가 콘텐츠를 화면에 보여주기 위해 HTML 문서를 해석할 때 DOM 객체가 만들어진다. 이 때, HTML 태그들이 가지고 있는 각각의 속성들은 요소 노드의 property가 된다. 대부분의 HTML 속성들은 이름 그대로 요소 노드

1. 스타일 다루기 1.1 style property 가장 간단한 방법은 아래 예시와 같이 style property를 이용하는 것이다. 다만, style property를 사용했을 때의 단점도 존재한다. 태그에 직접적으로 값이 적용되기 때문에, 스타일 우선순위

1. 비표준 속성 다루기 자바스크립트로 HTML 태그를 다루다보면, 아래 예시와 같이 비표준 속성을 사용하게 되는 경우가 생긴다. 위 HTML 코드에서, b 태그들의 field 속성과 button 태그들의 status 속성은 비표준 속성이다. 위 css 코드의 [

1. 이벤트 핸들러 등록하기 1.1 elem.onclick 이벤트 핸들러를 등록하는 방법에는 DOM 요소에 접근한 다음 onclick 프로퍼티를 활용하는 방법과, HTML 태그에 onclick 프로퍼티를 활용하는 방법이 존재한다. 기본적으로, 프로퍼티에 어떤 값을

1. 이벤트 버블링 하나의 요소에 이벤트가 발생하게 되면, 이 요소에 할당된 이벤트 핸들러가 동작하고 끝나는 게 아니라, 부모 요소의 핸들러도 함께 동작을 하게 되는데, 이를 이벤트 버블링이라고 한다. 이 과정은 최상단의 window 객체를 만날 때까지 반복된다.

1. 브라우저의 기본 동작 event 객체에 preventDefault method를 활용하면, 브라우저의 기본 동작을 막을 수 있다. 아래 예시 코드의 경우, 링크를 클릭했을 때 다른 주소로 이동되지 않고, 경고창을 띄울 수 있다. 아래 예시와 같이, if 문을

1. 마우스 버튼 이벤트 왼쪽 클릭, 휠 등과 같이 마우스의 각 버튼 별로 이벤트를 구분하고 싶다면, MouseEvent 객체의 button 프로퍼티를 활용할 수 있다. MouseEvent.button 프로퍼티 값에 따른 버튼은 다음과 같다. 0 : 마우스 왼쪽

1. 키보드 이벤트 KeyboardEvent.type의 값은 다음과 같은 것들이 있다. keydown : 키보드 버튼을 누른 순간 keypress: 키보드 버튼을 누른 순간 keyup : 키보드 버튼을 눌렀다 뗀 순간 keypress의 경우, 출력값이 변하는 ke

1. input 태그 다루기 1.1 포커스 이벤트 focusin : 요소에 포커스가 되었을 때 focusout : 요소에서 포커스가 빠져나갈 때 focus : 요소에 포커스가 되었을 때 (버블링 X) blur : 요소에서 포커스가 빠져나갈 때 (버블링 X)

1. 스크롤 이벤트 일반적으로 웹 문서의 크기가 브라우저의 창 크기보다 클 때, 스크롤 바가 브라우저에 자연스럽게 나타난다. 때문에, 일반적으로, 스크롤 이벤트는 브라우저를 대변하는 window 객체의 이벤트 핸들러를 등록하는 경우가 많다. 또한, 이 scroll

1. Spread 연산자 ES2015에서 새롭게 도입되었으며, 배열을 다룰 때 매우 유용하게 활용 가능한 연산자이다. Spread 연산자(...)는 객체 또는 배열의 각 요소들을 꺼내서 개별 값으로 펼쳐준다. spread 연산자를 활용하면, 배열을 간편하게 복사할

1. forEach forEach method는 method를 호출할 때, argument로 콜백 함수를 작성하면, 콜백 함수의 첫 번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 매번 이 함수를 실행하는 원리로 동작한다. 때문에, 콜백 함수에는 반드시 하

1. filter filter method를 활용하면, 원하는 족너에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있다. argument가 되는 콜백 함수의 구조는 map method와 비슷하지만, 리턴문으로 값을 전달하는 것이 아니라, true 혹은 false로

1. some 특정 배열에서 조건을 만족하는 요소가 한 개 이상 있는 지를 확인하는 method 조건을 만족하는 요소를 찾으면 종료된다. 2. every 특정 배열의 모든 요소가 조건을 만족하는 지에 대해 확인하는 method > 💡 some 또는 every

reduce

sort / reverse

Map / Set

모듈 / 모듈 스코프 / export / import / default export