본문 바로가기
IT 개발/JavaScript

04. 객체

by Love of fate 2019. 12. 30.
728x90
반응형

자바스크림트는 객체 기반 언어

객체는 기능과 속성을 가지고 있다. ex)  TV 라는 객체 

기능 : 메소드(Methode)

속성 : 속성(Property) ex) TV의 크키나 색상 그리고 무게 등

 

기본형 

객체.메소드(); //객체의 메서드를 실행
객체.속성; //객체의 속성값을 가져옴
객체.속성 = 값; //객체의 속성값을 바꿈

객체의 종류

- 내장객체

- 브라우저 객체모델(BOM, Browser Object Model)

- 문서 객체 모델 (DOM, Document Object Model)

 

내장객체

- 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용 가능 

- 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등

 

브라우저 객체 모델(BOM)

- 브라우저 객체 모델은 브라우저에 계층 구조로 내장되어 있는 객체를 말함. 

- window(브라우저), screen, location(주소 창), history, navigator 객체 등

- window(브라우저)는 document와 location 객체의 상위 객체

ex) 자바스크립트를 이용해 현재 열려있는 사이트에서 다른 사이트를 이동하려면 location 객체에
	참조 주소(href) 속성을 바꾸면 된다.
    아래와 같이 실행하면 location의 참조 주소(href)의 속성이 바뀌어 새 주소 사이트로 이동
    
window.location.href = "사이트 URL"

 

문서 객체 모델(DOM)

- 문서 객체 모델(DOM)은 HTML 문서 구조를 말함. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며,

  그 하위 객체로는 <head>와 <body>가 있다.

- 자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서는 호환성이 떨어지기 때문에 사용하기 힘들다는 단점이 있다. 

  이러한 점을 극복하기 위해 제이쿼리 문서객체 모델을 많이 사용한다. 

내장객체(Built - in Object)

- 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며 필요한 경우 객체를 생성해서 사용 가능 

- 문자(Stirng), 날짜(Date), 배열(Array), 수학(Math), 정규 표현 객체(RegExp Object) 등이 있음.

기본형 

참조 변수(인스턴스 이름) = new 생성함수();

예제)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
 
var tv = new Object();
tv.color = "white";
tv.price = 300000;
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>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

결과

 

날짜 정보 객체

- 날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성

기본형 

참조변수 = new Date(); 
ex) var t = new Date();

-------------------------------------------------------

1. 참조변수 = new Date("연/월/일"); ex) var t = new Date("2002/05/31");
2. 참조변수 = new Date(연, 월 -1, 일); ex) var t = new Date(2002,4,31);

 

날짜 관련 메서드

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

수학 객체

- 더하기, 곱하기, 나누기 등은 산술 여산자를 사용하면 된다. 

- 최댓값, 최솟값, 반올림값 등은 산술연산자로 구할 수 없고 수학 객체 메서드를 이용하면 수학과 관련된 일련의 작업들을 처리할 수 있다.

 

 

수학 객체의 메서드 및 상수

종류 설명
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.spirt(숫자) 숫자의 제곱근값을 반환
Math.PI 원주율 상수를 반환

 

1. 0과 1 사이가 아닌 임의로 지정한 숫자의 구간에서 난수를 정수로만 반환받으려면?

* 0부터 10까지의 난수 반환

Math.random()*10; //0부터 10까지 실수로 난수를 반환

Math.random()를 이용하여 0부터 10까지 정수로만 난수를 반환하려면 
Math.floor()를 이용해야 한다. 
.floor()메소드는 값을 내리기 때문에 10이 아닌 11을 사용

Math.floor(Math.random()*11);

* 난수를 발생하여 원하는 구간 정수의 값 구하기
Math.floor(Math.random()*(최댓값-최솟값 +1))+최솟값;

배열 객체

배열 객체(Array Object) : 여러개의 데이터를 하나의 장소에 저장

기본형
 
 1)
 var 참조변수 = new Array();
 참조변수[0] = 값1;
 참조변수[1] = 값2;
 참조변수[2] = 값3;
 참조변수[n-1] = 값n;

 2) var 참조변수 = new Array(값1, 값2, 값3...값n);
 3) var 참조변수 = [값1, 값2, 값3 ... 값n];

배열객체에 저장된 데이터 불러오기 

 기본형

 참조변수[인덱스 번호];

 

배열 객체의 메서드 및 속성

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

     //join(), concat(), sllice(), sort(), reverse()
     var arr_1 = ["사당", "교대", "방배", "강남"];
     var arr_2 = ["신사", "압구정", "옥수"];

     var result = arr_1.join("-"); //배열에 저장된 값을 지정한 문자로 연결하여 하나의 문자열을 반환
     console.log(result); //사당-교대-방배-강남

     result = arr_1.concat(arr_2); //2개의 배열을 하나의 배열로 만들어 반환
     console.log(result); //["사당", "교대", "방배", "강남", "신사", "압구정", "옥수"]

     result = arr_1.slice(1,3); //배열의 1번부터 이전의 인덱스 요소를 잘라내고 나머지 값을 반환
     console.log(result); // 교대", "방배"

     arr_1.sort(); //배열의 값을 오름차순으로 정렬
     console.log(arr_1); // "강남", "교대", "방배", "사당"

     arr_2.reverse(); //배열 순서를 거꾸로 뒤집음.
     console.log(arr_2); //"옥수", "압구정", "신사"

     //splice(), pop(), push(), shift(), unshift()
     var greenArr = ["교대", "방배", "역삼"];
     var yellowArr = ["미금", "정자", "수서"];

     greenArr.splice(2,1,"서초", "역삼"); //2번 부터 1개의 데이터를 삭제 그 다음 '서초', '역삼' 삽입
     console.log(greenArr); //"교대", "방배", "서초", "역삼"

     var data1 = yellowArr.pop(); //배열의 마지막 인덱스의 데이터를 data1에 저장
     var data2 = yellowArr.shift(); //배열의 가장 앞쪽 인덱스의 데이터를 data2에 저장

     yellowArr.push(data2); //data2에 저장된 데이터를 yellowArr 배열의 마지막 인덱스에 밀어넣음
     console.log(yellowArr); //"정자", "미금"

     yellowArr.unshift(data1); //data1에 저장된 데이터를 yellowArr 배열의 가장 앞쪽 인덱스에 밀어넣음
     console.log(yellowArr); //"수서", "정자", "미금"

 </script>

문자열 객체(String Object)

문자열 객체는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다. 

 

문자열 객체 생성하기

 기본형

 1) var 참조 변수 = new String(문자형 데이터);
 var t = new String("hello javascript"); //문자열 객체 생성

 2) var 참조변수 = 문자형 데이터;
 var t = "hello javascript";

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

종류 설명
charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환
indexOf("찾을 문자") 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환, 만일 찾는 문자가 없으면 -1을 반환
lastIndexOf("찾을 문자") 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환, 만일 찾는 문자가 없으면 -1을 반환
match("찾을 문자") 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환, 만일 찾는 문자가 없으면 null을 반환
replace("바꿀문자", "새문자") 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
search("찾을문자") 문자열에서 왼쪽부터 찾을문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호 반환
slice(a, b) a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환
var str = "hello javascript" str.slice(3,7); <- "lo j"를 반환함
* -1은 뒤에서부터 첫 번째 글자를 가리킨다.
substring(a, b) a 인덱스부터 b 인덱스 이전 구간의 문자를 반환
var str = "hello javascript" str.substring(3,7); <- "lo j"를 반환함
var str = "hello javascript" str.substring(3,-3) <- "hel"을 반환 / 여기에서 -3은 인덱스 0을 가리킨다 그러므로 인덱스 0부터 인덱스 3이전 구간의 문자를 반환
substr(a, 문자개수) 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환
split("문자") 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환
var str = "webkmobilek2002";
var arr = str.split("k"); <-- arr = 0 : "web", 1 : "mobile", 2 : "2002"
toLowerCase() 문자열에서 영문 대문자를 모두 소문자로 바꿈
toUpperCase() 문자열에서 영문 소문자를 모두 대문자로 바꿈
length 문자열에서 문자의 개수를 반환
concat("새로운문자") 문자열에서 새로운 문자열을 결합
charCodeAt(index) 문자열 index에 해당 문자의 아스키 코드 값을 반환
fromCharCode(아스키 코드값) 아스키 코드값에 해당하는 문자를 반환
String.fromCharCode(65); <- "A"를 반환
trim() 문자의 앞 또는 뒤에 공백 문자열을 삭제 ("hello" => "hello");

브라우저 객체 모델

- 브라우저에 내장된 객체를 "브라우저 객체"라고 한다. 

- window는 브라우저 객체의 최상위 객체 이며, window 객체에는 하위 객체가 포함되어 있다. 

  --> 계층구조로 이루어져 있으며, 이를 브라우저 객체 모델(BOM, Browser Object Model)라고 한다. 

 

window 객체

- window는 브라우저 객체 최상위 객체

 

window 객체의 메서드 종류

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

open() 메서드 팝업창 나타내기

 

- open()메서드를 이용하면 지정한 URL 페이지를 새 브라우저 창에 나타낼 수 있다.

최근에는 팝업 창을 사용자가 차단할 수 있어 팝업 창을 활용한 광고는 효과가 떨어졌다.

기본형 
open("URL", "새 창 이름", "새 창 옵션")

window.open("http://www.naver.com", "네이버", "width=350", 
			height=400, left=50, top=10, scrollbars=no");

새 창의 옵션 종류

속성 설명
width 새 창의 너비를 설정
height 새 창의 높이를 설정
left 새 창의 수평(X축) 위치를 설정
top 새 창의 수직(Y축) 위치를 설정
scrollbars 새 창의 스크롤바의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
location 새 창의 URL 주소 입력 영역의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
status 새 창의 상태 표시줄 영역의 숨김/노출을 설정 (숨김 = no, 노출 = yes)
toolbars 새 창의 도구 상자 영역의 숨김/노출을 설정  (숨김 = no, 노출 = yes)

alert()

- 경고 창을 나타낼 때 사용

기본형

alert("경고 메시지")
ex) alert("잘못 입력했습니다.") //경고창을 나타냄

prompt()

- 질의응답 창을 나타낼 때 사용한다.

- window.prompt() 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

기본형
prompt("질의 내용","기본답변");
ex) prompt("당신의 연령은?", "0"); //질의응답 창을 나타낸다.

confirm()

- 확인/추소 창을 나타낼 떄 사용한다.

- window.prompt() 메서드 역시 다음 기본형처럼 앞에 window 객체를 따로 작성하지 않아도 사용할 수 있다.

기본형 
confirm("질의 내용");
ex) confirm("정말로 삭제하시겠습니까?"); //확인/취소 창을 나타낸다.

- confirm()은 질문 창을 통해 확인 또는 취소 버튼을 클릭하도록 유도한다.

  확인버튼은 true를 취소버튼은 false를 반환한다.

일정한 시간 간격으로 코드 실행하기 

- 일정한시간 간격으로 코드를 실행하는 메서드로는 setInterval(), setTimeout()이 있다. 

- setInterval()은 일정한 시간 간격으로 코드를 반복 실행

- setTimeout()은 일정한 시간후에 코드를 한 번만 실행하고 종료

 

setInterval() / clearInterval()

setInterval() 메서드는 코드를 일정시간 간격으로 반복실행

clearInterval() 메서드는 setInterval() 메서드를 취소시킴

* setInterval() 기본형

var 참조변수 = setInterval(function(){ 자바스크립트 코드}, 시간간격(ms));
var 참조변수 = setInterval("코드", 시간 간격(ms));

// ex) 3초 간격으로 변수 i의 값을 1씩 증가
var intv = setInterval(function(){i++;}, 3000); 
var intv = setInterval("i++", 3000);

* clearInterval() 기본형
clearInterval(참조변수); //참조 변수는 앞의 setInterval()을 참조한 변수
<script>
    var addNum = 0;
    var subNum = 1000;

    var auto = setInterval(function(){ //3초 간격으로 반복 실행 addNum의 값이 1씩 증가
        addNum++;
        console.log("addNum :" + addNum); 
    },3000);

    var auto2 = setInterval(function(){ //3초 간격으로 반복 실행 subNum의 값이 1씩 감소
        subNum--;
        console.log("subNum: " + subNum);
    },3000);
</script>
<body>
     
    //방문자가 해당 버튼을 클릭하면 setInterval()을 제거한다
    <button onclick="clearInterval(auto)">증가 정지</button>
    <button onclick="clearInterval(auto2)">감소 정지</button>
    
</body>

setTimeout() / clearTimeout()

setTimeout() 메서드는 일정 시간이 지나면 코드를 실행하고 종료 

setTimeout() 메서드를 조금만 응용하여 재귀 호출을 하면 setInterval() 메서드처럼 사용 가능

clearTimeout() 메서드는 setTimeout() 메서드를 제거

기본형 

* setTimeout()

var 참조변수 = setTimeout(function(){ 자바스크립트 코드}, 시간 간격(msc));
var 참조변수 = setTimeout("자바스크립트 코드", 시간간격(ms));

ex) 5초 간격으로 변수 i의 값을 1씩 증가 
var tim = setTimeout(function(){i++;},5000);
var tim = setTimeout("i++",5000);

* clearTimeout(참조 변수);
clearTimeout(tim); //tim에 참조되어 있던 setTimeout()을 삭제

screen 객체

screen 객체는 사용자의 모니터 정보(속성)를 제공하는 객체

예를 들어 모니터의 너비나 높이 또는 컬러 표현 bit를 반환

기본형 

screen.속성;
screen.width; //모니터의 너빗값을 반환

screen 객체의 속성 종류

종류 설명
screen.width 화면의 너빗값을 반환
screen.height 화면의 높잇값을 반환
screen.availWidth 작업 표시줄을 제외한 화면의 너빗값을 반환
screen.availHeight 작업 표시줄을 제외한 화면의 높잇값을 반환
screen.colorDepth 사용자 모니터가 표현 가능한 컬러 bit를 반환

location 객체

- location 객체는 사용자 브라우저와 관련된 속성과 메서드를 제공하는 객체 

- 현재 URL에 대한 정보(속성)와 새로고침(reload) 메서드를 제공

기본형

location.속성;
location.메서드();

location 객체의 속성 종류

종류 설명
location.href 주소 영역의 참조 주소를 설정하거나 URL을 반환
ex) http://www.easypub.co.kr:80/Main/pub#view
location.hash URL의 해시값(#에 명시된 값)을 반환
ex) http://www.easypub.co.kr/Main/pub#view
location.hostname URL의 호스트 이름을 설정하거나 반환
ex) http://www.easypub.co.kr:80/
location.host URL의 호스트 이름과 포트번호를 반환
ex) http://www.easypub.co.kr:80/
location.protocol URL의 프로토콜을 반환
ex) http://www.easyspub.co.kr:80/
location.search URL의 쿼리(요청값)를 반환
ex) http://www.easyspub.com?pageNum=1&sort=DESC
location.reload() 마치 브라우저에서 F5키를 누른 것처럼 새로고침 함

history 객체

- history 객체는 사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문  사이트로 다시 돌아갈 수 있 

  는 속성과 메서드를 제공

기본형 

history.속성;
history.메서드();
history.메서드(n);

//사용자가 방문한 사이트의 기록을 남긴 총 수량
history.length;
//사용자가 방문한 사이트 중 바로 이전에 방문한 사이트로 이동
history.back();
//사용자가 방문한 사이트 중 두 단계 이전에 방문한 사이트로 이동
history.back(2);
종류 설명
history.back() 이전 방문 사이트로 이동
history.forward() 다음 방문 사이트로 이동
history.go(이동 숫자) 이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동
history.length 방문 기록에 저장된 목록의 개수를 반환

navigator 객체

- navigator 객체는 현재 방문자가 사용하는 브라우저의 정보와 운영체제 정보를 제공하는 객체

기본형

navigator.속성

//크롬 브라우저에서 테스트한 결과
ex) navigator.userAgent;
==>  "Mozilla/5.0(Window NT 6.1;Win64; x64)AppleWebKit/537.36(KHTML, like Gecko)
      Chrome/60.0.3112.113/Safari/537.36"
1. 기본 플랫폼
2. 운영체제 정보
3. 사용 중인 브라우저의 엔진 이름
4. 사용 중인 브라우저 이름
5. 같은 엔진을 사용중이며 호환 가능한 다른 브라우저

navigator 객체의 속성 종류

종류 설명
navigator.appCodeName 현재 브라우저의 코드명을 반환. 현 시점의 모든 브라우저는 "Mozila"를 반환
navigator.appName 현재 브라우저의 이름을 반환. 현 시점의 모든 브라우저는 "Netscape"를 반환
navigator.appVersion 현재 브라우저의 버전 정보를 반환
navigator.language 현재 브라우저가 사용하고 있는 언어를 반환. 한국어를 사용할 경우에는 "ko"를 반환
navigator.product 현재 브라우저의 엔진 이름을 반환. 크롬의 경우는 "Gecko"를 반환
navigator.platform 현재 컴퓨터의 운영체제 정보를 제공. 운영체제가 윈도우이고 시스템 종류가 64비트라도 브라우저가 32비트로 설치되었다면 "Win32"라고 나타남
navigator.onLine 온라인 상태 여부에 대한 정보를 제공. 만일 인터넷이 정상적으로 여결되어 있는 상태라면 true값을 반환
navigator.userAgent 브라우저와 운영체제의 종합 정보를 제공

 

728x90
반응형

'IT 개발 > JavaScript' 카테고리의 다른 글

06. 제이쿼리 문서 객체 선택자와 조작법  (0) 2020.01.14
05. 함수  (0) 2020.01.10
03. 제어문  (0) 2019.12.22
02. 자바스크립트 기초 문법  (0) 2019.12.18
01.자바스크립트 시작하기  (0) 2019.12.17

관련글

티스토리툴바