객체
객체.메서드(); // 객체의 메서드를 실행
객체.속성; // 객체의 속성값을 가져옴
객체.속성=값; // 객체의 속성값을 바꿈
- 내장 객체
자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다. 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다. - 브라우저 객체 모델(BOM; Browser Object Model)
브라우저에 계층 구조로 내장되어 있는 객체를 말한다. window, screen, location, history, navigator 객체 등이 있다. 브라우저는 document, location 객체의 상위 객체이다. - 문서 객체 모델(DOM; Document Object Model)
HTML 문서 구조를 말한다. 최상위 객체로<html>이 있으며 그 하위 객체로는<head>와<body>가 있다.
내장 객체
내장 객체 생성하기
객체를 생성할 때는 new라는 키워드와 생성 함수를 사용한다.
참조 변수(인스턴스 이름) = new 생성 함수()
<script>
var tv = new Object()
tv.color = 'white';
tv.price = 3000000;
tv.info = function() {
document.write('tv 색상: ' + this.color, '<br>');
document.write('tv 가격: ' + this.price, '<br>');
}
var car = {
color: 'black',
price: 5000000,
info: function() {
document.write('car 색상: ' + this.color, '<br>');
document.write('car 가격: ' + this.price, '<br>');
}
};
document.write('<h1>tv 객체 메서드 호출</h1>');
tv.info();
document.write('<h1>car 객체 메서드 호출</h1>');
car.info();
</script>날짜 정보 객체
날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성한다. 날짜 정보 객체는 날짜와 관련된 작업을 할 때 유용한 객체이다.
현재 날짜의 정보를 제공하는 Date 객체 생성
참조 변수 = new Date();
날짜 관련 메서드
- 날짜 정보를 가져올 때 (GET)
| GET | 날짜 정보 가져오기 |
|---|---|
| getFullYear() | 연도 정보를 가져옴 |
| getMonth() | 월 정보를 가져옴(현재 월-1) |
| getDate() | 일 정보를 가져옴 |
| getDay() | 요일 정보를 가져옴(일:0~토:6) |
| getHours() | 시 정보를 가져옴 |
| getMinutes() | 분 정보를 가져옴 |
| getSeconds() | 초 정보를 가져옴 |
| getMilliseconds() | 밀리초 정보를 가져옴(1/1,000초 단위) |
| getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 표기함 |
| toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 반환함 |
- 날짜 정보를 수정할 때 (SET)
| SET | 날짜 정보 수정하기 |
|---|---|
| setFullYear() | 연도 정보만 수정함 |
| setMonth() | 월 정보만 수정함(월-1) |
| setDate() | 일 정보만 수정함 |
| - | '요일'은 날짜를 바꾸면 자동으로 바뀌므로 setDay()는 없음 |
| setHours() | 시 정보만 수정함 |
| setMinutes() | 분 정보만 수정함 |
| setSeconds() | 초 정보만 수정함 |
| setMilliseconds() | 밀리초 정보만 수정함 |
| setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 수정함 |
| toLocaleString() | 운영 시스템 표기방식으로 문자형 데이터로 반환함 |
<script>
var today = new Date();
var nowMonth = today.getMonth(),
nowDate = today.getDate(),
nowDay = today.getDay();
document.write('<h1>오늘 날짜 정보</h1>');
document.write('현재 월: '+ nowMonth, '<br>');
document.write('현재 일: '+ nowDate, '<br>');
document.write('현재 요일: '+ nowDay, '<br>');
var worldcup = new Date(2002,4,31);
var theMonth = worldcup.getMonth(),
theDate = worldcup.getDate(),
theDay = worldcup.getDay();
document.write('<h1>월드컵 날짜 정보</h1>');
document.write('2002월드컵 몇 월: '+ theMonth, '<br>');
document.write('2002월드텁 몇 일: '+ theDate, '<br>');
document.write('2002월드컵 무슨 요일: '+ theDay, '<br>');
</script> <script>
var today = new Date();
var nowYear = today.getFullYear();
var theDate = new Date(nowYear, 11, 31);
var diffDate = theDate.getTime() - today.getTime();
var result = Math.ceil( diffDate / (60 * 1000 * 60 * 24));
document.write('연말 D-day: '+ result + '일 남았습니다.');
</script>수학 객체
더하기, 곱하기, 나누기 등은 산술 연산자를 사용하면 되지만 최댓값, 최솟값, 반올림값 등은 산술 연산자로 구할 수 없다. 수학 객체 메서드를 이용하면 수학과 관련된 일련의 작업들을 처리할 수 있다.
수학 객체의 메서드 및 상수
| 종류 | 설명 |
|---|---|
| Math.abs(숫자) | 숫자의 절댓값을 반환 |
| Math.max(숫자1, 숫자2, 숫자3) | 숫자 중 가장 큰 값을 반환 |
| Math.min(숫자1, 숫자2, 숫자3) | 숫자 중 가장 작은 값을 반환 |
| Math.pow(숫자, 제곱값) | 숫자의 거듭제곱값을 반환 |
| Math.random() | 0~1 사이의 난수를 반환 |
| Math.round(숫자) | 소수점 첫째 자리에서 반올림하여 정수를 반환 |
| Math.ceil(숫자) | 소수점 첫째 자리에서 무조건 올림하여 정수를 반환 |
| Math.floor(숫자) | 소수점 첫째 자리에서 무조건 내림하여 정수를 반환 |
| Math.sqrt(숫자) | 숫자의 제곱근값을 반환 |
| Math.PI | 원주율 상수를 반환 |
난수를 발생하여 원하는 구간 정수의 값 구하기
Math.floor(Math.random()*(최댓값-최솟값+1))+최솟값;
<script>
document.write('<h1>컴퓨터 가위, 바위, 보 맞추기</h1>');
var game = prompt('가위, 바위, 보 중 선택하세요.', '가위');
var gameNum;
switch(game){
case '가위':
gameNum = 1; break;
case '바위':
gameNum = 2; break;
case '보':
gameNum = 3; break;
default: alert('잘못 작성했습니다.');
location.reload();
}
var com = Math.ceil(Math.random()*3);
if(gameNum == com){
document.write('잘 맞췄습니다!');
}else{
document.write('틀렸습니다.');
}
</script>배열 객체
변수에는 데이터가 한 개만 저장된다. 여러 개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 된다. 배열 객체를 생성하는 방법은 3가지이며 이중에서 선호하는 방식을 사용하면 된다.
var 참조 변수 = new Array();
참조변수[0]=값1; 참조변수[1]=값2; 참조변수[2]=값3;....참조 변수[n-1]=값n;
ex)
var d = new Array();
d[0] = 30;
d[1] = '따르릉';
d[2] = true;
var 참조 변수 = new Array(값1, 값2, 값3,...값n);
ex)
var d = new Array(30, '따르릉', true);
var 참조 변수 = [값1, 값2, 값3,...값n];
ex)
var d = [30, '따르릉', true];
배열 객체에 저장된 데이터 불러오기
참조 변수[인덱스 번호];
<script>
var arr = [30, '따르릉', true];
document.write('<h3>배열값 가져오기-1</h3>');
document.write(arr[0], '<br>');
document.write(arr[1], '<br>');
document.write(arr[2], '<br>');
document.write('<h3>배열값 가져오기-2</h3>');
for(var i=0; i<arr.length; i++){
document.write(arr[i], '<br>');
}
document.write('<h3>배열값 가져오기-3</h3>');
for(i in arr){
document.write(arr[i], '<br>');
}
</script>배열 객체의 메서드 및 속성
| 종류 | 설명 |
|---|---|
| join(연결 문자) | 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 |
| reverse() | 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환 |
| sort() | 배열 객체의 데이터를 오름차순으로 정렬 |
| slice(index1, index2) | 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴 |
| splice() | 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다. |
| concat() | 2개의 배열 객체를 하나로 결합 |
| pop() | 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제 |
| push(new data) | 배열 객체의 마지막 인덱스에 새 데이터를 삽입 |
| shift() | 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제 |
| unshift(new data) | 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입 |
| length | 배열에 저장된 총 데이터의 개수를 반환 |
문자열 객체
문자형 데이터를 객체로 취급하는 것으로 자바스크립트에서 가장 많이 사용한다.
문자열 객체 생성하기
var 참조 변수 = new String(문자형 데이터)
var 참조 변수 = 문자형 데이터
문자열 객체의 메서드 및 속성
| 종류 | 설명 |
|---|---|
| charAt(index) | 문자열에서 인덱스 번호에 해당하는 문자를 반환 ex) var str='web he she'; str.charAt(2); //'b' |
| indexOf('찾을 문자') | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 -1을 반환 ex) var str='web he she he'; str.indexOf('he'); //4 |
| laseIndexOf('찾을 문자') | 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 만일 찾는 문자가 없으면 -1을 반환 ex) var str='web he she he'; str.lastIndexOf('he'); //11 |
| match('찾을 문자') | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환. 만일 찾는 문자가 없으면 null 반환 ex) var str='web he she he'; str.match('boy'); //null |
| replace('바꿀 문자', '새 문자') | 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환 ex) var str='web he she'; str.replace('web', 'html'); //'html he she' |
| search('찾을 문자') | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환 ex) var str='web he she'; str.search('he'); //4 |
| slice(a, b) | a개의 문자를 자르고 b번째 이후의 문자를 자른 후 남은 문자를 반환 ex) var str='hello javascript'; str.slice(3,7); //'lo j' var str='hello javascript'; str.slice(3, -3); //'llo javascr' |
| substring(a, b) | a 인덱스부터 b 인덱스 이전 구간의 문자를 반환 ex) var str='hello javascript'; str.substring(3, 7); //'lo j' var str='hello javascript'; str.substring(3, -3); //'hel' |
| substr(a, 문자 개수) | 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환 ex) var str='hello javascript'; str.substr(3, 2); //'lo' |
| split('문자') | 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 ex) var str='webkmobilek2002'; var arr=str.split('k'); arr[0]->'web'//arr[1]->'mobile'//arr[2]->'2002' |
| toLowerCase() | 문자열에서 영문 대문자를 모두 소문자로 바꿈 |
| toUpperCase() | 문자열에서 영문 소문자를 모두 대문자로 바꿈 |
| length | 문자열에서 문자의 개수를 반환 |
| concat('새로운 문자') | 문자열에 새로운 문자열을 결합 |
| charCodeAt(index) | 문자열 index에 해당 문자의 아스키 코드값을 반환 |
| fromCharCode(아스키 코드 값) | 아스키 코드값에 해당하는 문자를 반환 |
| trim() | 문자의 앞 또는 뒤의 공백 문자열을 삭제 |
개발자꿈나무🌲