객체 알아보기

📌 객체란?

• 프로그램이 인식할 수 있는 모든 대상

• 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.

• 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있음. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있음

• 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 한다. 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있음.

➰ 객체의 인스턴스

• 객체 자체가 아니라 인스턴스의 형태로 만들어서 사용해야 함

Ex.

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

➰ 프로퍼티와 메서드

• 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현한다.

➰ 마침표 표기법

• 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메서드 이름을 작성

Ex.

var now = new Date();
document.write("현재 시각은 " + now.toLocaleString());

---

자바스크립트의 내장 객체

📌 Array 객체

• 배열을 다루는 객체

➰ Array 객체로 배열 생성

var numbers = new Array(); // 배열의 크기 지정 안함
var numbers = new Array(4); // 배열의 크기 지정

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

➰ length 프로퍼티 사용

var numbers = ["one", "two", "three", "four"];

for (i = 0; i < numbers.length; i++) {
  document.write("<p>" + numbers[i] + "</p>");
}

📌 Array 객체의 메서드

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

✨ Tip.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array 에서 Array 객체 메서드에 대한 더 자세한 정보 찾을 수 있음

➰ concat() 메서드

• 서로 다른 배열 2개를 합쳐서 새로운 배열 만드는 메서드

EX.

var nums = [1, 2, 3];
var chars = ["a", "b", "c", "d"];

// 두 개의 배열 합치기
var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면 : ", charsNums);

➰ join() 메서드

• 배열 요소를 연결해서 하나의 문자열 만드는 메서드

EX.

var string1 = nums.join();
document.write("구분자 없이 : ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("/ 구분자 지정 : ", string2);

➰ push(), unshift() 메서드

• 배열에 새로운 요소 추가하는 메서드

EX.

var ret1 = nums.push(4, 5);  // 배열 끝에 추가
document.write("length : ", ret1, " | 배열 : ", nums);  		
document.write("<br>");
var ret2 = nums.unshift(0);  // 배열 앞에 추가
document.write("length : ", ret2, " | 배열 : ", nums);

➰ pop(), shift() 메서드

• 배열에 있는 요소 꺼내는 메서드

EX.

var popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars); 
document.write("<br>");
var popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);

➰ splice() 메서드

• 중간 부분에서 요소 추가하거나 삭제

EX.

var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열 : " + newNumbers + "<br>" );
document.write("변경된 배열 : " + numbers );

var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2,1);
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study);

var newStudy2 = study.splice(2, 1, "js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study);

➰ slice() 메서드

• 배열에서 요소를 꺼내는 메서드

EX.

var colors = ["red", "green", "blue", "white", "black"];
var colors2 = colors.slice(2); //인덱스 2부터 끝까지
document.write(colors2);
document.write("<br>"); 
var colors3 = colors.slice(2,4);  // 인덱스 2,3
document.write(colors3);

📌 Date 객체

new Date();
new Date("2020-02-25");
new Date("2020-02-25T18:00:00");

➰ 자바스크립트의 날짜, 시간 입력 방식

1. YYYY-MM-DD 형식

new Date("2020");
new Date("2020-02);
new Date("2020-02-25");

2. YYYY-MM-DDTHH 형식

new Date("2020-02-25T18:00:00");
new Date("2020-02-25T18:00:00Z"); // Z : UTC(국제 표준시)로 표시됨

3. MM/DD/YYYY 형식

new Date("02/25/2020");

4. 이름 형식

new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)");

➰ Date 객체의 메서드

구분	설명
날짜, 시간 정보 가져오기	getFullYear()	연도를 4자리 숫자로 표시
getMonth()	0~11 사이의 숫자로 월을 표시
getDate()	1~31 사이의 숫자로 일을 표시
getDay()	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 사이의 숫자로 월을 설정
setDate()	1~31 사이의 숫자로 일을 설정
setTime()	1970년 1월 1일 자정 이후의 시간을 밀리 초(1/1000초)로 설정
setHours()	0~23 사이의 숫자로 시를 설정
setMinutes()	0~59 사이의 숫자로 분을 설정
setSeconds()	0~59 사이의 숫자로 초를 설정
setMilliseconds()	0~999 사이의 숫자로 밀리초를 설정
날짜, 시간 형식 바꾸기	toLocalString()	현재 날짜와 시간을 현지 시간(local time)으로 표시
toString()	Date 객체 타입을 문자열로 표시

📌 Math 객체

➰ Math 객체의 프로퍼티

종류	설명
E	오일러 상수
PI	원주율
SQRT2	√2
SQRT1_2	1/√2
LN2	${log_{e}2}$
LN10	${log_{e}10}$
LOG2E	${log_{2}e}$
LOG10E	${log_{10}e}$

➰ Math 객체의 메서드

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

---

브라우저와 관련된 객체

📌 브라우저 관련 객체

종류	설명
window	브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 있음
document	웹 문서마다 하나씩 있으며 태그를 만나면 만들어짐. HTML 문서의 정보가 담겨 있음
navigator	현재 사용하는 브라우저의 정보 있음
history	현재 창에서 사용자의 방문 기록 저장
location	현재 페이지의 URL 정보가 담겨 있음
screen	현재 사용하는 화면 정보를 다룸

📌 window 객체의 프로퍼티

종류	설명
document	브라우저 창에 표시된 웹 문서에 접근할 수 있음
frameElement	현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 반대로 포함되어 있지 않으면 null을 반환
innerHeight	내용 영역의 높이를 나타냄
innerWidth	내용 영역의 너비를 나타냄
localStorage	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환
location	window 객체의 위치 또는 현재 URL 나타냄
name	브라우저 창의 이름을 가져오거나 수정
outerHeight	브라우저 창의 바깥 높이를 나타냄
outerWidth	브라우저 창의 바깥 너비를 나타냄
pageXOffset	스크롤했을 때 수평으로 이동하는 픽셀 수로 scrollX와 같음
pageYOffset	스크롤했을 때 수직으로 이동하는 픽셀 수로 scrollY와 같음
parent	현재 창이나 서브 프레임의 부모
screenX	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄
screenY	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄
scrollX	스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냄
scrollY	스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냄
sessionStorage	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환

📌 window 객체의 메서드

종류	설명
alert()	알림 창을 표시
blur()	현재 창에서 포커스 제거
close()	현재 창을 닫음
confirm()	[확인], [취소] 버튼이 있는 확인 창을 표시
focus()	현재 창에 포커스 부여
moveBy()	현재 창을 지정한 크기만큼 이동
moveTo()	현재 창을 지정한 좌표로 이동
open()	새로운 창을 염
postMessage()	메시지를 다른 창으로 이동
print()	현재 문서를 인쇄
prompt()	프롬프트 창에 입력한 텍스트를 반환
resizeBy()	지정한 크기만큼 현재 창의 크기를 조절
resizeTo()	동적으로 브라우저 창의 크기를 조절
scroll()	문서에서 특정 위치로 스크롤
scrollBy()	지정한 크기만큼씩 스크롤
scrollTo()	지정한 위치까지 스크롤
sizeToContent()	내용에 맞게 창의 크기를 맞춤
stop()	로딩을 중지

➰ open() 메서드

• 링크를 클릭하거나 웹 문서를 열 때 새 창이 자동으로 뜨게 하는 메서드
• window.open(경로, 창 이름, 창 옵션)

Ex. 팝업 창 표시

  <p>문서를 열면 팝업 창이 표시됩니다.</p>
  <script>
    window.open("notice.html", "", "width=500, height=400");
  </script>

Ex. 창 이름 지정

  <p>문서를 열면 팝업 창이 표시됩니다.</p>
  <script>
    window.open("notice.html", "pop", "width=500, height=400");
  </script>

Ex. 팝업 창 위치 지정

  <p>문서를 열면 팝업 창이 표시됩니다.</p>
  <script>
    window.open("notice.html", "pop", "width=500, height=400, left=100, top=200");
  </script>

Ex. 팝업 차단 알림

  <p>문서를 열면 팝업 창이 표시됩니다</p>

  <script>
	var blocked = false;
	function openPopup() {			
	  var newWin = window.open("notice.html", "pop", "width=500, height=400");
	  if (newWin == null) {
		alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.")
	  }
	  newWin.moveBy(100,100);			
	}
  </script>

➰ close() 메서드

• 화면을 닫는 메서드
• window.close()

Ex.

  <button onclick="javascript:window.close();">닫기</button>

📌 history 객체

• 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장됨

구분	설명
프로퍼티	length	현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됨
메서드	back()	history 목록에서 이전 페이지를 현재 화면으로 불러옴
forword()	history 목록에서 다음 페이지를 현재 화면으로 불러옴
go()	history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴. 예를 들어 history.go(1)은 다음 페이지를 가져오고, history.go(-1)은 이전 페이지를 불러옴

📌 location 객체

• 현재 문서의 URL 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서 지정 가능

구분	설명
프로퍼티	hash	URL 중에서 #로 시작하는 해시 부분의 정보를 담고 있음
host	URL의 호스트 이름과 포트 번호를 담고 있음
hostname	URL의 호스트 이름이 저장
href	전체 URL, 이 값을 변경하면 해당 주소로 이동 가능
pathname	URL 경로가 저장
port	URL의 포트번호를 담고 있음
protocol	URL의 프로토콜을 저장
password	도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장
search	URL중에서 ?로 시작하는 검색내용 저장
username	도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장
메서드	assign()	현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴
reload()	현재 문서를 다시 불러옴
replace()	현재 문서의 URL을 지우고 다른 URL의 문서로 교체
toString()	현재 문서의 URL을 문자열로 반환

---

책 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석