[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체

[기본 개념] 2 | (2.1) 객체, 자바스크립트의 내장 객체

1> 객체

2> 자바스크립트의 내장 객체

3 브라우저와 관련된 객체

1 객체

객체란?

 

문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 것 모두 객체.

document, image, link 객체 등

 

브라우저 관련 객체 웹 브라우저에서 사용하는 정보.

navigator, history, location, screen 객체 등

 

내장 객체 웹 프로그래밍할 때 자주 사용하는 요소는 자바스크립트 안에 미리 정의.

Data 객체 등

 

객체의 인스턴스 만들기

 

기본형

new 객체명

 

 자바스크립트에서 객체는 참조 형태로 사용해야 한다. 인스턴스의 형태로 사용해야 하는데 new라는 예약어 뒤에 만드려고 하는 객체 이름을 써주면 된다.

 

(ex. Date 객체의 인스턴스 만들기)

 

...
var now = new Date();  // Date 인스턴스 만들고 변수에 저장
document.write("현재 시각은 " + now);
...

2 자바스크립트의 내장 객체

Array 객체

 

 Array 객체는 자바스크립트의 내장 객체 중 배열을 다룬다.

 

(ex. Array 객체 인스턴스 만들기 - 초기값 없는 경우)

 

var numbers = new Array();  // 배열의 크기를 지정하지 않음
var numbers = new Array(4); // 배열의 크기를 지정함

 

(ex. Array 객체 인스터스 만들기 - 초기값 있는 경우)

 

var numbers = ["one", "two", "three", "four"];       // 배열 선언
var numbers = Array("one", "two", "three", "four");  // Array 객체를 사용한 배열 선언

 

 

 Array 객체의 메서드

 

종류	설명
concat	기존 배열에 요소를 추가해 새로운 배열을 만듦
every	배열의 모든 요소가 주어진 함수에 대해 참이면 true, 그렇지 않으면 false 반환
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열 만듦
forEach	배열의 모든 요소에 대해 주어진 함수를 실행
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음
join	배열 요소를 문자열로 합침. 구분자 지정 가능
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환
unshift	배열의 시작 부분에 새로운 요소를 추가
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환
splice	배열에 요소를 추가하거나 삭제
slice	배열에서 특정 부분만 잘라냄
reverse	배열의 배치 순서를 역순으로 바꿈
sort	배열 요소를 지정한 조건에 따라 정렬
toString	배열에서 지정한 부분을 문자열로 반환. 요소는 쉼표(,)로 구분

 

(ex. concat( ) - 배열 2개 합쳐서 새로운 배열 만들기)

 

// 배열 2개 합치기
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];

var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("num + chars : ", numsChars, "<br> chars + nums : ", charsNums);
...

/*
num + chars : 1,2,3,a,b,c,d
chars + num : a,b,c,d,1,2,3
*/

// concat( )메서드는 기존 배열에 영향을 주지 않는다.

 

(ex. join( ) - 배열 안의 요소 합치기)

 

// 배열 안의 요소 합치기
var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];
...
var string1 = nums.join();
document.write("구분자 없이 : ", string1 + "<br>");
var string2 = chars.join('/');
document.write("'/' 구분자 지정 : ", string2);
...

/*
구분자 없이 : 1,2,3
'/' 구분자 지정 : a/b/c/d
*/

// 요소 사이에 원하는 구분자('/')를 넣을 수도 있다.

 

(ex. push( ), unshift( ) - 배열에 새로운 요소 추가하기)

 

// 요소 추가하기
var nums = [1, 2, 3];
...
var ret1 = nums.push(4, 5)	// 배열 맨 뒤에 새로운 요소 추가
document.write("length : ", ret1, " | 배열 : ", nums + "<br>");
var ret2 = nums.unshift(0);	// 배열 맨 앞에 새로운 요소 추가
document.write("length : ", ret2, " | 배열 : ", nums);
...

/*
length : 5 | 배열 : 1,2,3,4,5
length : 6 | 배열 : 0,1,2,3,4,5
*/

// push(), unshift()메서드는 기존 배열이 바뀐다.
// 새로운 배열의 length를 반환

 

(ex. pop( ), shift( ) - 배열에서 요소 꺼내기)

 

// 요소 꺼내기
var chars = ["a", "b", "c", "d"];
...
var popped1 = chars.pop();	  // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars + "<br>");
var popped2 = chars.shift();      // 첫번째 요소 꺼냄
document.write('꺼낸 요소 : ", popped2, " | 배열 : ", chars);
...

/*
꺼낸 요소 : d | 배열 : a,b,c
꺼낸 요소 : a | 배열 : b,c
*/

// pop(), shift() 메서드는 기존 배열이 바뀐다.
// 꺼낸 요소값 반환

 

(ex. splice( ) - 배열에 요소 삭제하기)

 

// 인수 1개인 경우 - 해당 인덱스부터 마지막 요소까지 모두 삭제
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열 : " + newNumbers + "<br>");
document.write("변경된 배열 : " + numbers);

/*
반환된 배열 : 3,4,5
변경된 배열 : 1,2
*/

// 인수 2개 - 해당 인덱스부터 삭제할 요소의 개수
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2, 1);
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study);

/*
반환된 배열 : web
변경된 배열 : html,css,jquery
*/

// 인수 3개 - 해당 인덱스부터 삭제할 요소의 개수, 그 위치에서 추가할 요소 지정
var study2 = ["html", "css", "jquery"];
var newStudy2 = study2.splice(2, 1, "js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study2);

/*
반환된 배열 : jquery
변경된 배열 : html,css,js
*/

// splice() 메서드는 기존 배열이 바뀐다.
// 삭제한 요소를 반환

 

(ex. slice( ) - 배열에 요소 꺼내기)

 

// 인수 1개 - 해당 인덱스부터 마지막 요소까지 꺼냄
var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2);
document.write(colors2);

/*
blue,white,black
*/

// 인수 2개 - 해당 인덱스부터 해당 인덱스 직전까지 꺼냄
var colors = ["red", "green", "blue", "white", "black"];
var colors3 = colors.slice(2, 4);
document.write(colors3);

/*
blue,white
*/

// slice() 메서드는 기존 배열이 바뀌지 않는다.
// 지정한 요소부터 마지막 요소까지 꺼내서 반환

 

Date 객체

 

기본형

new Date( );

 

 Date 객체는 날짜와 시간 정보를 나타낸다. 그리고 예약어 new를 사용하여 인스턴스를 만들어야 한다.

 

(ex. Date 객체로 현재 날짜 나타내기)

 

new Date();

new Date("2022-08-17")			// 2022-8-17 도 가능

new Date("2022-08-17T16:00:00")		// 시간 정보까지 나타내려면 날짜 다음 대문자 'T' 추가

 

1 YYYY-MM-DD 형식

연도 : YYYY

연도, 월 : YYYY-MM

연도, 월, 일 : YYYY-MM-DD

 

2 YYYY-MM-DDTHH 형식

연도, 월, 일, 시간 : YYYY-MM-DDTHH:MM:SS

연도, 월, 일, 시간(UTC- 국제 표준시) : YYYY-MM-DDTHH:MM:SSZ

 

3 MM/DD/YYYY 형식

월, 일, 연도 : MM/DD/YYYY

 

4 이름 형식

요일, 월, 일, 연도, 시간 : MON Jan(또는 January) DD YYYY HH:MM:SS

 

Date 객체의 메서드

 

구분		설명
날짜, 시간 정보 가져오기	getFullYear( )	연도를 4자리 숫자로 표시
	getMonth( )	0 ~ 11 사이의 숫자로 월 표시. 0 : 1월, 11 : 12월
	getDate( )	1 ~ 31 사이의 숫자로 일 표시
	getDay( )	0 ~ 6 사이의 숫자로 요일 표시. 0 : 일요일, 6 : 토요일
	getTime( )	1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 표시
	getHours( )	0 ~ 23 사이의 숫자로 시 표시
	getMinutes( )	0 ~ 59 사이의 숫자로 분 표시
	getSeconds( )	0 ~ 59 사이의 숫자로 초 표시
	getMilliseconds( )	0 ~ 999 사이의 숫자로 밀리초 표시
날짜, 시간 정보 설정하기	setFullYear( )	연도를 4자리 숫자로 설정
	setMonth( )	0 ~ 11 사이의 숫자로 월 설정. 0 : 1월, 11 : 12월
	setDate( )	1 ~ 31 사이의 숫자로 일 설정
	setTime( )	1979년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 설정
	setHours( )	0 ~ 23 사이의 숫자로 시 설정
	setMinutes( )	0 ~ 59 사이의 숫자로 분 설정
	setSeconds( )	0 ~ 59 사이의 숫자로 초 설정
	setMilliseconds( )	0 ~ 999 사이의 숫자로 밀리초 설정
날짜, 시간 형식 바꾸기	toLocaleString( )	현재 날짜와 시간을 현지 시간(local time)으로 표시
	toString( )	Date 객체 타입을 문자열로 표시

 

Math 객체

 

기본형

Math.프로퍼티명

Math.메서드명

 

 무작위 수가 필요하거나 반올림해야 하는 상황 등에 수학 계산과 관련된 Math 객체의 메서드를 사용한다. Math 객체는 따로 인스턴스를 만들지 않는다.

 

Math 객체의 프로퍼티

 

종류	설명
E	오일러 상수
PI	원주율(π)
SQRT2	√2
SQRT1_2	1√2
LN2	logₑ 2
LN10	logₑ 10
LOG2E	log₂ e
LOG10E	log₁₀ e

 

Math 객체의 메서드

 

종류	설명
abs( )	절댓값 반환
acos( )	아크 코사인(arc cosine)값 반환
asin( )	아크 사인(arc sine)값 반환
atan( )	아크 탄젠트(arc tangent)값 반환
atan2( )	아크 탄젠트(arc tangent)값 반환
ceil( )	매개변수의 수수점 이하 부분을 올림
cos( )	코사인(cosine)값 반환
exp( )	지수 함수 나타냄
floor( )	매개변수 소수점 이하 부분 버림
log( )	매개변수에 대한 로그(log)값 반환
max( )	매개변수 중 최댓값 반환
min( )	매개변수 중 최솟값 반환
pow( )	매개변수의 지수값 반환
random( )	0과 1 사이의 무작위 수 반환
round( )	매개변수의 소수점 이하 부분을 반올림
sin( )	사인(sine)값 반환
sqrt( )	매개변수에 대한 제곱근 반환
tan( )	탄젠트(tangent)값 반환

 

(ex. 1 ~ 100 사이 무작위 수 소수점 이하 버리고 출력하기)

 

Math.floor(Math.random( ) * 100 + 1)

 

 

 

 

 

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)