객체

자바스크립트는 객체 기반 언어
기능 + 속성

객체 종류

• 내장 객체
• 브라우저 객체 모델 (BOM, Browser Object Model)
• 문서 객체 모델 (DOM, Document Object Model)

날짜 관련 메서드

날짜 정보를 가져올 때(GET)	날짜 정보를 수정할 때(SET)
getFullYear() - 연도 정보 가져옴	setFullYear() - 연도 정보 수정
getMonth() - 월 정보 가져옴 (현재 월 - 1)	setMonth() - 월 정보만 수정 (월 - 1)
getDate() - 일 정보 가져옴	setDate() - 일 정보만 수정
getDay() - 요일 정보 (일:0 ~ 토:6)	'요일'은 날짜를 바꾸면 자동으로 바껴서 setDay 없음
getHours() - 시 정보 가져옴	setHours() - 시 정보만 수정
getMinutes() - 분 정보 가져옴	setMinutes() - 분 정보만 수정
getSeconds() - 초 정보 가져옴	setSeconds() - 초 정보만 수정
getMilliseconds() - 밀리초 정보 가져옴 (1/1000초 단위)	setMilliseconds() - 밀리초 정보만 수정
getTime() - 1970년 1월 1일부터 경과된 시간 밀리초 표기	setTime() - 1970년 1월 1일부터 경과된 시간 밀리초 수정
toGMTString() - GMT 표준 표기 방식으로 문자형 데이터로 반환	toLocaleString() - 운영 시스템 표기 방식으로 문자형 데이터로 반환

수학 메서드 및 상수

종류	설명
Math.abs(숫자)	숫자의 절댓값 반환
Math.max(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 큰 값 반환
Math.min(숫자1, 숫자2, 숫자3, 숫자4)	숫자 중 가장 작은 값 반환
Math.pow(숫자, 제곱값)	숫자의 거듭제곱값 반환
Math.random()	0~1 사이 난수 반환
Math.round(숫자)	소숫점 첫째 자리에서 반올림하여 정수 반환
Math.ceil(숫자)	소숫점 첫째 자리에서 올림하여 정수 반환
Math.floor(숫자)	소숫점 첫째 자리에서 내림하여 정수 반환
Math.sqrt(숫자)	숫자의 제곱근 값 반환
Math.PI	원주율 상수 반환

Math.random() 정수 반환하려면

Math.floor(Math.random()*(최댓값 - 최솟값 + 1)) + 최솟값;

Math.floor(Math.random()*11) // 0~10 정수 반환

배열 객체의 메서드 및 속성

종류	설명
join(연결문자)	배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환
reverse()	배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환
sort()	배열 객체의 데이터를 오름차순으로 정렬
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
splice	배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터 삽입 가능
concat()	2개의 배열 객체를 하나로 결합
pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터 삭제
push(new data)	배열 객체의 마지막 인덱스에 새 데이터 삽입
shift()	배열 객체에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터 삭제
unshift(new data)	배열 객체의 가장 앞 인덱스에 새 데이터 삽입
length	배열에 저장된 총 데이터 개수 반환
forEach	배열의 각각의 요소에 대한 콜백을 호출

문자열 객체의 메서드 및 속성

종류	설명
charAt(index)	문자열에서 인덱스 번호에 해당하는 문자 반환
indexOf("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자 인덱스 번호 반환, 찾는 문자가 없으면 -1 반환
lastIndexOf("찾을 문자")	문자열 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자 인덱스 번호 반환, 찾는 문자가 없으면 -1 반환
match("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자 반환, 찾는 문자 없으면 null 반환
replace("바꿀 문자","새 문자")	문자열 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을 문자")	문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환
slice(a,b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자 반환
substring(a,b)	a 인덱스부터 b인덱스 이전 구간의 문자 반환

window 객체의 매서드 종류

종류	설명
open("URL","새창이름","새창옵션")	URL페이지를 새창으로 나타냄
alert(data)	경고 창을 나타내고 데이터 보여줌. 방문자가 [확인] 버튼 누르면 alert()를 사용한 다음 위치의 코드 수행
prompt("질문":"답변")	질문과 답변으로 질의응답 창 나타냄
confirm("질문 내용")	질문 내용으로 확인이나 취소창 나타냄. [확인]버튼 누르면 true 반환, [취소]버튼 누르면 false 반환
moveTo(x, y)	지정한 새 창의 위치 이동
resizeTO(width, height)	지정한 새 창의 크기 변경
setInterval(function(){코드},일정 시간 간격)	지속적으로 일정한 시간 간격으로 함수 호출 및 코드 실행
setTimeout(function(){코드},일정 시간 간격)	단 한번 일정한 시간 간격으로 함수 호출하여 코드 실행

Element.classList

classList 속성 - 웹 요소로부터 클래스 콜렉션을 반환하는 속성

<p class="hello greet good>안녕하세요</p>

// javascript
const p = document.querySelector('p')
console.log(p.classList)

• 결과

['hello', 'greet', 'good', value: 'hello greed good;]
0: "hello"
1: "greet"
2: "good"
length: 3
value: "hello greet good"

관련 메소드

메소드	기능	사용 예
add	지정한 클래스 값 추가	add("new_class")
remove	지정한 클래스 값 제거	remove("old_class")
item	인덱스를 이용해 클래스 값 반환	item(1)
toggle	클래스 값 토글링(on/off)	toggle("some_value")
contains	지정한 클래스 값 존재 여부 확인	contains("is_contains")
replace	기존 클래스를 새 클래스로 대체	replace("old","new")