10. javascript CheatSheet

📊

cheat

설명

구분

var a = 1

숫자형 (number)

데이터 타입

var b = "cat"

문자열 (sting)

데이터 타입

var c = true

논리형 (boolean)

데이터 타입

var dog = { name : "Spot" , kind : "dog" }

객체 (object)

데이터 타입

function sum(a, b) { return a + b; }

함수 (function)

데이터 타입

var numbers = [1,2,3]

배열 (array)

데이터 타입

null

변수 값이 없음

데이터 타입

undefined

정의되지 않음

데이터 타입

symbol

인스턴스가 고유하고 불변인 데이터 형

데이터 타입

typeof

변수의 데이터 타입을 반환

typeof 연산자

var

변수를 선언. 추가로 동시에 값을 초기화

변수

let

블록 범위(scope) 지역 변수를 선언, 추가로 동시에 값을 초기화

변수

const

블록 범위 읽기 전용 상수를 선언

변수

변수++

변수 값에 1 더하기(후위)

산술 할당 연산자

++변수

변수 값에 1 더하기(전위)

산술 할당 연산자

변수--

변수 값에 1 빼기(후위)

산술 할당 연산자

--변수

변수 값에 1 빼기(전위)

산술 할당 연산자

변수 값에 더한 결과값을 대입

산술 할당 연산자

변수 값에 뺀 결과값을 대입

산술 할당 연산자

변수 값에 곱한 결과값을 대입

산술 할당 연산자

변수 값에 나눈 결과값을 대입

산술 할당 연산자

변수 값에 나머지를 구한 결과 값을 대입

산술 할당 연산자

왼쪽 값이 더 클 경우 true

비교 연산자

왼쪽 값이 크거나 같을 경우 true

비교 연산자

왼쪽 값이 작거나 같을 경우 true

비교 연산자

왼쪽 값이 작을 경우 true

비교 연산자

동일한 값일 경우 true

비교 연산자

===

동일한 값과 동일한 유형일 경우 true

비교 연산자

같지 않을 경우 true

비교 연산자

왼쪽 값과 오른 쪽 값이 모두 true일 경우 true

논리 연산자

둘 중 하나라도 true일 경우 true

논리 연산자

true이면 false, false이면 true

논리 연산자

if (조건문) {내용}

조건문이 true일 경우 내용 실행

조건문

else if (조건문) {내용}

if 조건문이 false이고 조건문이 true일 경우 내용 실행

조건문

else {내용}

if 조건문, else if 조건문도 모두 false일 경우 내용 실행

조건문

switch (변수) { case 값 : 내용 break; ... default : 내용}

변수가 case의 값과 일치하면 해당하는 case의 내용을 실행. 만약 변수 값이 case들의 값과 일치하지 않는다면 default의 내용 실행

조건문

for(초기문; 조건문; 증감문) {내용}

조건문이 false로 판별될 때까지 반복

반복문

while (조건문) {내용}

조건문이 false로 판별될 때까지 반복

반복문

do {내용} while (조건문)

내용이 한번은 실행이 된 후 조건문이 false로 판별될 때까지 내용 반복

반복문

getElementById()

id의 값으로 특정한 값을 가진 요소 선택

선택자

getElementsByClassName()

class의 값으로 특정한 값을 가진 요소 선택

선택자

getElementsByName()

name의 값으로 특정한 값을 가진 요소 선택

선택자

getElementsByTagName()

태그 이름의 값으로 특정한 값을 가진 요소 선택

선택자

querySelector()

css 선택자에 해당하는 첫번째 요소 선택

선택자

querySelectorAll()

css 선택자에 해당하는 모든 요소 선택

선택자

toString()

array, boolean, function, number 등 모든 객체를 문자열로 바꾸어 반환

객체 메소드

length

문자열의 길이 반환

문자열 메소드

charAt(index)

지정된 위치에서 문자 반환

문자열 메소드

indexOf(string)

지정된 문자의 위치를 왼쪽부터 찾아서 반환

문자열 메소드

lastIndexOf(string)

지정된 문자의 위치를 오른쪽부터 찾아서 반환

문자열 메소드

substring(index1, index2)

지정된 위치에 있는 문자열 반환

문자열 메소드

slice(start_index, end_index)

문자열의 일부를 추출

문자열 메소드

substr(start_index, length)

문자열을 지정한 위치부터 length개수 만큼의 문자열 추출

문자열 메소드

toLowerCase()

소문자로 변환

문자열 메소드

toUpperCase()

대문자로 변환

문자열 메소드

concat(string)

두 문자열을 합침

문자열 메소드

split([분리자])

문자열을 분리

문자열 메소드

charCodeAt([index])

지정된 index에 해당하는 유니코드 값 반환

문자열 메소드

join()

배열 원소 전부를 하나의 문자열로 합침

배열 메소드

pop()

배열 뒷부분의 값 삭제

배열 메소드

push()

배열 뒷부분에 값 삽입

배열 메소드

shift()

배열 앞부분에 값 삭제

배열 메소드

unshift()

배열 앞부분에 값 삽입

배열 메소드

splice(index, 제거할 요소 개수, 배열에 추가될 요소)

배열의 특정위치에 요소를 추가하거나 삭제

배열 메소드

slice(startIndex, endIndex)

배열의 startIndex부터 endIndex 전 까지의 요소를 새로운 배열 객체로 반환

배열 메소드

concat()

다수의 배열을 합침

배열 메소드

sort()

배열의 원소를 알파벳순으로 정렬

배열 메소드

reverse()

배열의 원소 순서를 거꾸로 바꿈

배열 메소드

var d = new Date()

현재 날짜와 시간을 반환

Date 메소드

getFullYear()

연도를 4비트의 숫자(YYYY)로 반환

Date 메소드

getMonth()

월을 정수로 반환

Date 메소드

getDate()

날짜를 정수로 반환

Date 메소드

getDay()

요일을 정수로 반환

Date 메소드

getHours()

시를 정수로 반환

Date 메소드

getMinutes()

분을 정수로 반환

Date 메소드

getSeconds()

초를 정수로 반환

Date 메소드

setTimeout(함수, 시간)

일정 시간 후 함수 실행

타이머 함수

setInterval(함수, 시간)

일정 시간 간격으로 함수 반복 실행

타이머 함수

clearTimeout(id)

실행되고있는 timeout 중지

타이머 함수

clearInterval(id)

실행되고있는 interval 중지

타이머 함수

load

웹 페이지의 로드가 완료되었을 때

윈도우 이벤트

unload

웹 페이지가 언로드 될 때

윈도우 이벤트

error

브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우

윈도우 이벤트

resize

브라우저의 창 크기를 조정했을 때

윈도우 이벤트

scroll

사용자가 페이지를 위아래로 스크롤 할 때

윈도우 이벤트

click

마우스 버튼 클릭했다 땔 때

마우스 이벤트

dbclick

마우스 버튼을 두 번 연속 더블 클릭 할 때

마우스 이벤트

mousedown

마우스 버튼을 누르고 있을 때

마우스 이벤트

mouseup

눌렀던 마우스 버튼을 땔 때

마우스 이벤트

mousemove

마우스를 움직였을 때

마우스 이벤트

mouseout

요소 위로 마우스를 움직였을 때

마우스 이벤트

mouseover

요소 바깥으로 마우스를 움직였을 때

마우스 이벤트

keydown

키를 누르는 순간

키보드 이벤트

keyup

키를 눌렀다 떼는 순간

키보드 이벤트

keypress

키를 눌러 문자가 입력되었을 때

키보드 이벤트

focus

요소에 포커스가 갔을 때

포커스 이벤트

blur

요소가 포커스에서 벗어났을 때

포커스 이벤트

submit

전송 버튼을 눌렀을 때 또는 텍스트 필드에서 엔터키를 눌렀을 때

폼 이벤트

reset

폼을 초기화하기 위함

폼 이벤트

change

폼 필드에서 변경이 일어났을 때 ( ex. 라디오 버튼 클릭 )

폼 이벤트

select

option 태그에서 option이 선택되었을 때

폼 이벤트