객체란?
자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다
웹 사이트나 웹앱을 개발하는 언어이므로 웹과 관련된 대상을 모두 객체로 인식한다
자바스크립트에서 사용하는 객체
- 문서모델객체(DOM): 웹 문서 자체도 객체이며, 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다.
- 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우저 정보를 담고 있는 navigator / history, location, screen 등이 있다.
- 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함. 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 사용할 수 있다.
객체 선언
var now = new Date();
document.write("현재 시각은 " + now) ; // 현재 날짜와 시간 표시하기
var now = new Date();
document.write("현재 시각은 " + now.toLocaleString()) ; // 로컬 형식으로 표시하기자바스크립트의 내장 객체
Array 객체
var season = ["봄", "여름", "가을", "겨울"]; // 초기값이 있다.
for(i=0; i < 4; i++)
document.write(season[i] + (" "));
Array 객체 매서드
종류 설명 concat 기존 배열에 요소를 추가해 새로운 배열을 만든다 every 배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환 filter 배열의 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만듬 forEach 배열의 모든 요서에 대해 주어진 함수를 실행 indexOf 주어진 값과 일치하는 값이 있는 배열 요소의 첫 번째 인덱스 반환 join 배열 요소를 문자열로 합침, 구분자 지정 가능 push 배열의 끝에 새로운 요소 추가 후 length 반환 unshift 시작 부분에 새로운 요소 추가 pop 배열의 마지막 요서를 꺼내 그 값을 반환 shift 배열에서 첫 요소를 꺼내 그 값을 반환 splice 배열에 요소를 추가하거나 삭제 slice 배열 잘라내기 reverse 배치 순서 역순으로 바꾸기 sort 정렬
객체 메서드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Array 객체의 메서드</title>
</head>
<body>
<script>
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);
document.write("<hr>");
// 배열 내의 요소 합치기
var string1 = nums.join();
document.write("구분자 없이 : ", string1);
document.write("<br>");
var string2 = chars.join('/');
document.write("/ 구분자 지정 : ", string2);
document.write("<hr>");
// 요소 추가 - 새로운 length 값 반환
var ret1 = nums.push(4, 5); // 배열 끝에 추가
document.write("length : ", ret1, " | 배열 : ", nums);
document.write("<br>");
var ret2 = nums.unshift(0); // 배열 앞에 추가
document.write("length : ", ret2, " | 배열 : ", nums);
document.write("<hr>");
// 요소 추출 - 꺼낸 요소 반환
var popped1 = chars.pop(); // 마지막 요소 꺼냄
document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars);
document.write("<br>");
var popped2 = chars.shift(); // 첫번째 요소 꺼냄
document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);
document.write("<hr>");
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array 객체의 메서드</title>
</head>
<body>
<p>splice 메서드 사용하기</p>
<script>
// 인수가 1개일 경우
var numbers = [1, 2, 3, 4, 5];
var newNumbers = numbers.splice(2);
document.write("반환된 배열 : " + newNumbers + "<br>" );
document.write("변경된 배열 : " + numbers );
document.write("<hr>");
// 인수가 2개일 경우
var study = ["html", "css", "web", "jquery"];
var newStudy = study.splice(2,1);
document.write("반환된 배열 : " + newStudy + "<br>");
document.write("변경된 배열 : " + study);
document.write("<hr>");
// 인수가 3개 이상일 경우
var newStudy2 = study.splice(2, 1, "js");
document.write("반환된 배열 : " + newStudy2 + "<br>");
document.write("변경된 배열 : " + study);
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Array 객체의 메서드</title>
</head>
<body>
<p>slice 메서드 사용하기</p>
<script>
// 추출한 요소로 배열 만듦, 기존 배열 변경안됨
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);
</script>
</body>
</html>Date 객체
날짜 시간 정보를 설정하거나, 가져올 때 쓰는 내장 객체
다음과 같이 선언new Date(); new Date("2023-11-10") new Date("2023-11-10T11:10:30")
함수 종류 설명 (set)getFullYear 연도 (set)getMonth 0~11 숫자로 월 표시 (set)getDate 1~31 숫자로 일 표시 (set)getTime 1970년 1월 1일 자정 이후의 시간을 밀리 초로 표시 (set)getHours 시 (set)getMinutes 분 (set)getSeconds 초 (set)getMilliseconds 밀리초 toLocalString 현재 날짜와 시간을 현지 시간으로 표시 toString 문자열로 표시
//날짜 계산 프로그램
!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>독서 챌린지</title>
<style>
#container{
margin:50px auto;
width:300px;
height:300px;
border-radius:50%;
border:2px double #222;
background-color:#d8f0fc;
text-align: center;
}
h1 {
margin-top:80px;
}
.accent {
font-size:1.8em;
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div id="container">
<h1>책 읽기</h1>
<p><span class="accent" id="result"></span>일 연속으로 <br> 책 읽기를 달성했군요.</p>
<p>축하합니다!</p>
</div>
<script>
var now = new Date("2023-11-15"); // 오늘 날짜를 객체로 지정
var firstDay = new Date("2023-11-01"); // 시작 날짜를 객체로 지정
var toNow = now.getTime(); // 오늘까지 지난 시간(밀리 초)
var toFirst = firstDay.getTime(); // 첫날까지 지난 시간(밀리 초)
var passedTime = toNow - toFirst; // 첫날부터 오늘까지 지난 시간(밀리 초)
passedTime = Math.round(passedTime/(1000*60*60*24)); // 밀리 초를 일 수로 계산하고 반올림
document.querySelector('#result').innerText = passedTime;
</script>
</body>
</html>Math 객체
수학 계산과 관련된 메서드가 많이 포함되어 있고, 무작위 수가 필요하거나 반올림이 필요할 때 등 다양하게 활용헐 수 있다.
var seed = prompt("전체 응모자 수 : ","");
var picked = Math.floor((Math.random() * seed) + 1);1~100 무작위 수 출력하기
Math.random()*100 + 1
Sang9riG9ru