Do it! 04.객체

study/javascript

Do it! 04.객체

aeuna 2020. 2. 27. 01:43

자바스크립트는 객체 기반 프로그래밍 언어이다. 객체를 구성하는 요소로는 속성(property)과 기능(Method)이 있다.

04-1 객체

1) 객체란?

객체는 기능과 속성을 가짐

객체. 메서드();

객체. 속성; 또는 객체. 속성=값;

2) 객체의 종류

크게 내장 객체, 브라우저 객체 모델(BOM, Browser Object Model), 문서 객체 모델(DOM, Document Object Model)로 나눌 수 있다.

-내장 객체

자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다.

문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있다.

-브라우저 객체 모델

브라우저에 계층 구조로 내장되어 있는 객체

window, screen, location, history, navigator 객체 등이 있다.

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

-문서 객체 모델

문서 객체 모델(DOM)은 HTML 문서 구조를 말한다.

04-2 내장 객체(Build-in Object)

1) 내장 객체 생성하기

객체를 생성할 때는 new라는 키워드와 생성 함수를 사용

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

var tv = new Object();
tv.color = "white";
tv.price = 300000;
tv.info = function() {
    document.write("tv색상: " + this.color, "<br>"); //this는 메서드의 객체(tv)를 가리킴
    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();

2) 날짜 정보 객체

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

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>");

3) 수학 객체

수학과 관련된 기능과 속성을 제공

최댓값, 최솟값, 반올림 값 등도 구할 수 있다.

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

Math.floor(Math.random()*31); //0부터 30까지 정수로 난수를 발생

4) 배열 객체(Array Object)

var d = new Array();

d [0]=30;

d [1]="따르릉";

d [2]=true;

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

var d = new Array(30, "따르릉", true);

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

var d = [30, "따르릉", true];

5) 문자열 객체

var t = new String("Hello javascript");

문자열 객체는 참조 변수에 문자형 데이터만 입력해도 객체가 생성

var t = "hello javascript";

var userEmail = prompt("당신의 이메일 주소는? ", "");
var arrUrl = [".co.kr",".com",".net",".or.kr",".go.kr"];

var check1 = false;
var check2 = false;

if(userEmail.indexOf("@")>0) {check1 = true};

for(var i=0; i<arrUrl.length;i++){
    if(userEmail.indexOf(arrUrl[i])>0){
        check2 = true;
    }
}

if(check1 && check2){
    document.write(userEmail);
}
else {
    alert("이메일 형식이 잘못되었습니다.");
}

04-3 브라우저 객체 모델

1) 브라우저 객체란?

브라우저에 내장된 객체

window는 브라우저 객체의 최상위 객체이며, window객체에는 하위 객체가 포함 즉, 계층적 구조를 이루고 있음

2) window 객체

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

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

-setInterval()/clearInterval()

setInterval() 메서드는 코드를 일정 시간 간격으로 반복 실행하고, clearInterval() 메서드는 setInterval() 메서드를 취소

var 참조 변수 = setInterval(function() {코드}, 시간 간격(ms));

var 참조변수 = setInterval("코드", 시간 간격(ms));

//3(3000) 초 간격으로 변수 i의 값을 1씩 증가

var intv = setInterval(function() {i++;}, 3000);

var intv = setInterval("i++",3000);

clearInterval()에서 참조 변수는 앞의 setInterval()을 참조한 변수

clearInterval(참조 변수);

-setTimeout()/clearTimeout()

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

재귀 호출하면 setInterval() 메서드처럼 사용 가능

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

var 참조 변수 = setTimeout(function() { }, 시간 간격(msc));

var 참조 변수 = setTimeout(function("코드", 시간 간격(msc));

var tim = setTimeout(function() {i++;}, 5000);

var tim = setTimeout("i++",5000);

//참조 변수는 앞에 setTimeout()을 참조하는 변수

clearTimeout(참조 변수);

clearTimeout(tim);

4) screen객체

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

screen. 속성;

속성들...

width(화면의 너빗값을 반환)

height(화면의 높이 값을 반환)

availwidth(작업 표시줄을 제외한 화면의 너빗값을 반환)

availHeight(작업 표시줄을 제외한 화면의 높이 값을 반환)

colorDepth(사용자 모니터가 표현 가능한 컬러 bit를 반환)

5) location 객체

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

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

location. 속성;

location. 메서드();

속성들...

href(주소 영역의 참조 주소를 설정하거나 URL을 반환)

hash(URL의 해시값을 반환)

hostname(URL의 호스트 이름을 설정하거나 반환)

host(URL의 호스트 이름과 포트 번호를 반환)

protocol(URL의 프로토콜을 반환)

search(URL의 쿼리를 반환)

reload()(F5를 누른 것처럼 새로 고침)

6) history 객체

사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속성과 메서드 제공

history. 속성;

history. 메서드();

history. 메서드(n);

속성들...

back()(이전 방문 사이트로 이동)

forward()(다음 방문 사이트로 이동)

go(이동 숫자)(이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동)

length(방문 기록에 저장된 목록의 개수를 반환)

7) navigator 객체

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

navigator. 속성;