안녕, 세상!

4. 객체 본문

It공부/JavaScript

4. 객체

dev_Lumin 2020. 7. 26. 20:22

객체는 특정 데이터와 관련된 함수들을 가지는 프로그램 모듈이라고 정의할 수 있으며 실세계 영역에서 정보, 물건, 사물, 개체, 개념 등을 표현할 수 있습니다.

객체는 속성(Attribute)과 행위(Behavior)로 구분됩니다.

즉, 변수(Variable)와 메소드(Method)로 이뤄져 있습니다.

 

객체지향 프로그래밍에서 모든 객체는 추상화됩니다.

추상화란 객체가 자신의 정보를 내부에 감추고 있으면서 구체적인 것이 아닌 추상적인 내용만 외부에 알려주는 것을 의미합니다.

자바스크립트 언어는 객체지향적 언어이기는 하지만 추상화, 상속성, 다형성 등의 특성을 지원하지 않습니다.

그러므로 자바스크립트에서 객체를 정의할 때 클래스나 구조체를 사용하지 않고 함수를 만들고 전달할 매개변수를 선언 후 this를 사용하여 매개변수 값을 전달합니다.

 

자바스크립트의 객체는 크게 속성, 메소드 그리고 이벤트로 구성됩니다.

자바스크립트에서 다음 2가지 종류의 객체를 제공합니다.

(1) 사용자 정의 객체(User-Defined Object) : 사용자가 임의의 객체를 정의한 후, 정의된 객체를 이용하여 객체를 생성하여 사용

(2) 내장 객체(Built-in Object) : 미리 객체가 정의되어 있어서 사용자는 객체를 생성하여 사용

 

이전의 언어들에서 객체와 클래스의 관계에 대해 설명했을 때는 클래스가 붕어빵 틀이면 객체는 붕어빵이라고 비유했습니다.

사실 여기서 클래스 자체도 객체입니다.

앞으로 표현을 설명할 때 객체(붕버빵 틀), 객체(붕어빵)이라고 표현하여 객체용어를 구별해서 설명하겠습니다.

 

 

 

(1) 사용자 정의 객체

자바스크립트에서 객체를 사용하기 위해서 인스턴스(Instance)를 생성해야 합니다.

(인스턴스는 현재 생성되는 그 객체(붕어빵 틀)를 말함)

정의된 객체를 사용하기 위해서는 다음과 같은 생성자 함수의 구조 형식으로 이뤄집니다.

 

 

function 객체명(속성 값1, 속성값2, ....) {

this(객체자신).속성명1=속성값1;

this(객체자신).속성명2=속성값2;

....

this(객체자신).메소드1=함수명1;

....

}

 

 

객체(붕어빵 틀)는 생성자 함수를 통하여 이뤄집니다.

생성자 함수는 객체(붕어빵 틀)가 만들어지고 객체(붕어빵)를 생성할 때(초기화 시킬 때) 자동으로 실행되는 함수입니다.

생성자 함수의 이름이 곧 객체(붕어빵 틀)의 이름입니다.

쉽게 생각하자면, 자바스크립트의 객체(붕어빵 틀)는 생성자 함수로만 이뤄져 있다고 생각하시면 됩니다.

생성자 함수에 메소드를 선언할 때 메소드로 사용하는 함수를 동일한 이름으로 지정해야 됩니다.

 

다음은 객체를 이용한 예제입니다.

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
27
28
29
<HTML>
<HEAD><title>사용자 정의 객체</title>
  <SCRIPT language="javascript">
      function show() { //abc 객체의 함수인 show 함수 정의
        document.writeln("이름: "+this.name+", 전공: "+this.major);
        document.writeln(", 학번: "+this.number+", 나이:"+this.age+"<br>");
      }
      function abc(pname, pmajor, pnumber, page){
        this.name=pname;
        this.major=pmajor;
        this.number=pnumber;
        this.age=page;
        this.display=show;  // 메소드 정의
      }
  </SCRIPT>
</HEAD>
<BODY>
  <H3>사용자 정의객체 예제</H3>
  <SCRIPT language="javascript">
  p1=new abc("홍길동","도술학",1223,23);  // 객체(붕어빵)생성
  p2=new abc("도민준","천체학",3234,25);
  p3=new abc("구찬성","호텔경영학",2435,24);
  p1.display();
  p2.display();
  p3.display();
  </script>
</BODY>
</HTML>
 
 cs

위의 코드를 설명하자면 abc라는 객체의 생성자 함수에 abc객체의 변수 name, major, number, age가 있고 display라는 객체의 메소드는 객체가 지시하는 행동을 처리하는 부분으로 함수의 이름(show)이 생성자 함수에서 선언한 함수 이름(show)과 같아야 합니다.

 

 

 

객체를 위한 for~in 제어문

자바스크립트에서 객체를 효율적으로 이용하고자 for~in 제어문을 사용하면 속성과 값을 활용할 수 있습니다.

형식은 다음과 같습니다.

 

 

for(k in objectname) {          // k: 제어문의 변수 이름 , objectname: 객체 이름

    ....

}

 

 

변수 k에 대입되는 값은 객체(objectname)의 속성들이 차례대로 입력됩니다.

만약 객체 내에 속성이 4개면, 제어문이 4번 반복 수행합니다.

 

다음은 for~in 제어문을 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<HTML>
<HEAD><title>forin sample</title>
  <SCRIPT language="javascript">
      function abc(pname, pmajor, pnumber, page){
        this.name=pname;
        this.major=pmajor;
        this.number=pnumber;
        this.age=page;
      }
  </SCRIPT>
</HEAD>
<BODY>
  <H3>for~in 사용 예제</H3>
  <SCRIPT language="javascript">
  p1=new abc("홍길동","도술학",1223,23);
  for(var k in p1) { document.write(k+":"+p1[k]+"<br>");}
  p2=new abc("도민준","천체학",3234,25);
  for(var k in p2) { document.write(k+":"+p2[k]+"<br>");}
  </script>
</BODY>
</HTML>
 cs

위의 for~in 구문에서 객체명[객체변수] 를 통해서 객체의 객체변수값을 불러올 수 있습니다.

 

 

 

 

(2) 내장 객체

내장 객체는 이미 만들어진 객체로 자바스크립트에서는 2가지로 분류할 수 있습니다.

1. 자바스크립트 자체에서 지원하는 객체   ex) String, Math, Date, Array, eval, parseInt, parseFloat 등

2. 웹 브라우저 환경에서 지원하는 객체     ex) parents, frame, document, form 등

 

 

자바스크립트에서 지원하는 객체에 대해서 알아보겠습니다.

다음은 자바스크립트에서 제공하는 내장 객체의 종류입니다.

내장객체 설명
String 문자열의 처리에 관련된 내장객체
Date 날짜 처리에 관련된 내장객체
Array 배열의 처리에 관련된 내장객체
Math 수학 연산 처리에 관련된 내장객체
Function 간단한 함수를 정의하여 사용할 수 있도록 하는 내장객체
Screen 서버로부터 웹 페이지를 요구한 클라이언트 컴퓨터의 화면 해상도 등을 알아내는데 사용되는 내장객체
Number 문자열로 되어 있는 숫자를 연산이 가능하도록 실제 숫자로 변환해주는 내장객체
Boolean 불린 값의 처리에 관련된 내장객체

 

String, Math 객체 등 과 같이 new 연산자로 객체를 생성하지 않고 바로 사용하는 정적 객체(static object)는 자바스크립트가 실행되는 동안 자동으로 생성됩니다.

 

 

 

① String 객체

객체의 문자열을 구성하는 문자들의 집합을 의미하고 문자열을 다양하게 처리할 수 있는 많은 메소드들과 속성을 제공합니다.

 

(1) String  속성의 종류

속성의 종류는 대표적으로 length 가 있습니다.

length- 문자열의 길이를 나타내는 String의 속성

 

(2) String 메소드의 종류

String 메소드의 종류 기능 설명
anchor(문자열) 문장 위치로 페이지 이동
big() 기본 폰트보다 조금 큰 글자
blink() 깜빡이는 글자
bold() 굵은 글씨체
charAt(index) index 위치의 글자 확인
fixed() 타자기체의 글자
fontcolor(색) 글자색 설정
fontsize(size) 글자 크기 설정
indexOf(문자열) 문장 중에서 문자열의 인덱스 위치 검색
italics() 이탤릭체의 글자
lastIndexOf(문자열) 문장 중에서 문자열의 마지막 인덱스 위치 검색
link(URL) 다른 위치나 사이트로 이동
small() 기본 폰트보다 조금 작은 글자
strike() 가운데 줄 그은 글자체
split(대상,"기준문자") 대상문자열을 기준문자로 분리
sub() 아리 첨자로 표현
substring(index1, index2) Index1에서 Index2 사이의(Index2 미포함) 문자열을 문장 중에서 검색
sup() 윗첨자로 표현
toLowerCase() 모두 소문자로 변환
toUpperCase() 모두 대문자로 변환

 

 

다음은 String객체의 속성 일부를 사용해본 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<HTML>
<HEAD><title>sample</title></HEAD>
<BODY>
  <SCRIPT language="javascript">
  str1= prompt("이름을 입력하시오.");
  document.write("이름은 :"+str1+"<br>");
  document.write("입력길이는 :"+str1.length+"<br>");
  a=str1.substring(0,1);
  b=str1.substring(1,str1.length);
  a=a.italics();
  b=b.bold();
  document.write("성: "+a+"<br>");
  document.write("이름: "+b+"<br>");
  document.write("charAt(2) : "+str1.charAt(2)+"<br>");
  document.write("indexOf(길) : "+str1.indexOf("길")+"<br>");
  </script>
</BODY>
</HTML>
 
 cs

 

 

 

 

다음은 anchor 속성과 link속성을 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<HEAD><title>sample</title></HEAD>
<BODY>
  <SCRIPT language="javascript">
  document.write("1장으로 이동".link("#chapter1")+"<br><br><br><br><br><br>");
  document.write("1장".anchor("chapter1")+"<br>");
  document.write("다음".link("http://www.daum.net")+"<br>");
  </script>
</BODY>
</HTML>
 
 cs

창을 줄여서 '1장으로 이동'을 클릭하면 '1장'부분으로 이동하는 것을 확인할 수 있습니다.

'다음'을 누르면 다음 메인 웹 페이지로 이동합니다.

 

 

 

 

 

② Math 객체

math객체는 수학 연산을 수행하기 위해서 지원하는 객체로, 삼각함수, 지수함수, 로그함수와 같은 특수 함수들과 특수 값들을 사용하기 위해 제공되는 객체입니다.

math 객체는 정적 객체(Static object)이기 때문에 new 연산자를 사용하지 않고, 그 자체를 직접 참조하는 방법으로 사용됩니다.

 

(1) Math 객체의 속성

 

Math 객체의 속성 설명
E 자연로그의 밑으로 사용하는 오일러 상수 (약 2.718)
PI 원주율 파이(ㅠ) (약 3.142)
LN2 2의 자연로그, 즉 log2 (약 0.693)
LN10 10의 자연로그
SQRT2 2의 제곱근, 루트2 (약 1.414)
SQRT1_2 1/2의 제곱근 (약 0.707)

 

(2) Math 객체의 메소드

Math 메소드 설명
abs(x) 절대값을 구하는 함수 : ㅣxㅣ
asin(x) arc sine 함수 
acos(x) arc cosine 함수
atan(x) arc tangent 함수
sin(x) sine 함수 , x는 radian 값
cos(x) cosine 함수 , x는 radian 값 
tan(x) tangent 함수 , x는 radian 값
pow(x, y) x의 y승을 구하는 함수
sqrt(x) 제곱근을 구하는 함수
exp(x) 지수함수
log(x) 자연로그 함수
ceil(x) x보다 같거나 큰 수 중에서 제일 작은 정수, 즉 x의 소수부분 올림
floor(x) x보다 같거나 작은 수 중에서 가장 큰 정수, 즉 x의 소수부분 내림
round(x) x의 반올림
max(x, y) x와 y 중에서 큰 수를 반환하는 함수 
min(x, y) x와 y 중에서 작은 수를 반환하는 함수
random() 0과 1사이의 난수를 발생하는 함수

 

다음은 math 객체를 사용하는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
<HTML>
<HEAD><title>sample</title></HEAD>
<BODY>
  <script>
  document.write("sin(PI/4) : "+Math.sin(Math.PI/4)+"<br>");
  document.write("3^3 : "+Math.pow(3,3)+"<br>");
  document.write("ln(2) : "+Math.log(2)+"<br>");
  document.write("exp(10) : "+Math.exp(10)+"<br>");
  </script>
</BODY>
</HTML>
 cs

 

 

 

 

③ Date 객체

Date 객체는 날짜와 시간을 사용하게 해주는 내장 객체입니다.

Date 객체는 메소드만 제공되고, new 연산자를 통해 생성해 주어야만 생성해 주어야만 사용할 수 있습니다.

형식은 다음과 같습니다.

 

 

dateObject = new Date()       // 시스템의 현재 날짜를 자동으로 지정

dateObject = new Date(year, month, day)   // 특정 날짜를 지정

dateObject = new Date(year, month, day, hours, minutes, seconds)  // 특정 날짜와 시간 지정

dateObject = new Date(hours, minutes, seconds)     // 특정 시간을 지정

 

 

date객체의 메소드 종류는 다음과 같습니다.

Date 메소드의 종류 설명
getYear() 연도(2자리)를 반환해 주는 메소드
getFullYear() 연도(4자리)를 반환해 주는 메소드
getMonth() 월(0~11) 을 반환해 주는 메소드
getDate() 일(1~31)을 반환해 주는 메소드
getDay() 요일(0~6)을 반환해 주는 메소드
getHours() 시(0~23)를 반환해 주는 메소드
getMinutes() 분(0~59)를 반환해 주는 메소드
getSeconds() 초(0~59)를 반환해 주는 메소드
getMilliseconds() 1/1000초(0~999)를 반환해 주는 메소드
getTime() 1970년 1월 1일 00:00:00이후 지난 밀리초의 수에 해당하는 수를 반환해주는 메소드
setYear() 연도(2자리)를 설정해 주는 메소드
setFullYear() 연도(4자리)를 설정해 주는 메소드
setMonth() 월(0~11)을 설정해 주는 메소드
setDate() 일(1~31)을 설정해 주는 메소드
setDay() 요일(0~6)을 설정해 주는 메소드
setHours() 시(0~23)를 설정해 주는 메소드
setMinutes() 분(0~59)을 설정해 주는 메소드
setSeconds() 초(0~59)를 설정해 주는 메소드
setMilliseconds() 1/1000초(0~999)를 반환해 주는 메소드
setTime() 시간(시, 분, 초)을 설정해 주는 메소드
toString() 날짜와 시간을 문자열로 표시해 주는 메소드
toLocaleString() 날짜와 시간을 지역시간 형태의 문자열로 표시해 주는 메소드
toGMTString() 날짜와 시간을 GMT 형태의 문자열로 표시해 주는 메소드

 

 

다음은 Date 객체를 이용한 예제입니다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<HTML>
<HEAD><title>sample</title>
<script>
var timeID=null;
var running=false;
function stopClock() {
  if(running){
    clearTimeout(timeID); // 반복 수행함수 멈추기
    running=false;
  }
}
function startClock(dp) {
  if(running) return;
  disp =dp;
  showTime();
  running=true;
}
function showTime() {
  var time= new Date();
  var hour= time.getHours();  //현재 pc시간의 시 받아오기
  var min= time.getMinutes();  // 현재 pc시간의 분 받아오기
  var sec = time.getSeconds();  // 현재 pc 시간의 초 받아오기
 
  var Dstr = (hour>=12)?" 오후 " : " 오전 ";
  Dstr += ((hour>12)?(hour-12) : hour);
  Dstr += ((min<10)?":0" : ":")+min;
  Dstr += ((sec<10)? ":0" : ":")+sec;
  disp.value =Dstr; // html의 text타입 상자의 보여질 값(value) 속성 설정
                    // 즉 text타입 상자에 나타내어질 글자 설정
  timeID=setTimeout("showTime()",1000); // 지정한 함수인 showTime 함수를 1000ms 마다 반복 수행
}
</script>
</HEAD>
<BODY>
  <Form name="time" method="get">
    <input type="text" name="disp" size="20"><br>
    <input type="button" name="stratbutton" value="시계시작" onClick="startClock(this.form.disp)">
    <input type="button" name="stopbutton" value="시계종료" onClick="stopClock()">
  </Form>
</BODY>
</HTML>
 cs

처음에는 텍스트 상자 부분이 비어 있습니다.

그 상태에서 '시계시작' 버튼을 누르면 pc의 현재시간이 1초마다 갱신되어 불러와집니다.

'시계종료'를 누르면 시간이 1초마다 흐르는 현상이 멈추게 됩니다.

멈춘 상태에서 다시 '시계시작'을 누르면 현재 pc시간으로 갱신되어 1초마다 시간이 흐릅니다.

 

onClick : 이벤트 속성으로 다음 장에서 배울 것입니다. 클릭을 하면 발생할 사건을 설정할 수 있습니다.

 

변수 = setTimeout("반복시킬 함수",반복주기) :  지정한 함수를 반복 주기(ms 단위 ) 마다 반복 실행함. 

 

clearTimeout(변수) : setTimeout으로 반복되는 현상을 멈춤

 

37번 줄의 this.form.disp가 의미하는 바는 현재 웹페이지 객체(window=this)에서 <form> 객체 내에서 객체명(name 속성)이 'disp'를 의미합니다. 

즉, 36번 줄의 disp 객체를 의미하는 것입니다.

 

 

 

다음은 스톱워치 예제입니다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<HTML>
<HEAD><title>sample</title>
<script>
var timeID=null;
var running=false;
var s1=s2=0;
function stopClock() {
  if(running) {
    clearTimeout(timeID);
    running=false;
  }
}
 
function resetClock(){
    clearTimeout(timeID);
    s1=s2=0;
    running=false;
    disp.value=s1+":0"+s2;
}
 
function startClock(dd) {
  if(running) return;
  disp=dd;
  showTime();
  running=true;
}
 
function showTime() {
  s2++;
  if(s2==60){s1++, s2=0;}
    disp.value=s1+((s2<10)? ":0": ":")+s2;
    timeID=setTimeout("showTime()",1000);
}
</script>
</HEAD>
<BODY>
  <Form name="time" method="get">
    <input type="text" name="disp" size="10"><br>
    <input type="button" name="stratbutton" value="시작" onClick="startClock(this.form.disp)">
    <input type="button" name="stopbutton" value="중지" onClick="stopClock()">
    <input type="button" name="resetbutton" value="초기화" onClick="resetClock()">
  </Form>
</BODY>
</HTML>
 cs

처음에 텍스트 상자는 비어있고 '시작'을 누르면 0:00부터 1초마다 시간이 흐릅니다.

'중지'를 누르면 시간이 멈추고 '초기화'를 누르면 0:00으로 초기화되며 멈춥니다.

'초기화'는 시간이 시작된 흐르고 있는 상태에서도 적용될 수 있게 코드를 짰습니다.

 

 

 

 

④ 배열과 배열 객체

배열이란 동일한 형태의 자료 객체들이 연속적인 공간에 저장되고, 하나의 공통 명칭을 가진 것입니다.

배열을 사용하기 위해서 Array() 객체 생성자를 이용해서 만들어야 합니다.

다음은 배열 생성 형식입니다.

 

 

배열명=new Array(6);          //  인덱스 크기 설정 후 생성

 

배열명=new Array(2)(3)         // 다차원 배열 생성

 

배열명=new Array();            // 크기를 자동으로 결정되는 배열

 

function crAr(n) {               // 생성자 함수를 정의하는 방법, n은 배열 원소의 개수, crAr은 생성자 함수명

    this.length=n;

    for(var i=0; i<n; i++) this[i] =0;

    return this;

}

a=new crAr(8);     

 

배열명=new Array(초깃값1, 초깃값2, ...., 초깃값n)        // 초기화시키면서 생성

 

 

 

(1) 배열객체의 속성

length

배열명.length    : 배열의 크기를 반환함

 

 

(2) 배열객체의 메소드

 

Array 메소드의 종류 설명
join("구분자") 모든 배열 원소가 구분자로 이어진 문자열을 반환하는 메소드
concat(배열1, 배열2,...) 두 개 이상의 배열을 하나의 배열로 만들어 주는 메소드
괄호 안에 넣은 순서대로 원소들이 저장됨
reverse() 배열의 원소를 역순으로 재배치 해주는 메소드
sort(정렬 방법) 배열의 원소를 정렬방법에 따라 정렬해주는 메소드
정렬 방법
1) asaComp   // 순행 정렬
2) descComp  // 역행 정렬
shift() 첫번째 원소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴하는 메소드
unshift("첨가원소1","첨가원소2",...) 첨가할 원소값들을 배열의 왼쪽에 추가하는 메소드
배열의 길이도 증가함
괄호 안에 넣은 순서대로 원소들이 왼쪽에 추가함
pop() 배열의 마지막 원소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄이는 메소드
push("첨가원소1", "첨가원소2", ...) 배열의 마지막에 첨가할 원소를 추가하고, 새로운 배열의 길이를 리턴하는 메소드
splice(위치, 개수, "첨가원소1",...) 이전 배열의 '위치' 번 째부터 '개수' 만큼 원소를 삭제하고 첨가할 원소(들)를 '위치'번 째부터 첨가하고 삭제된 원소들을 리턴하는 메소드
slice(시작위치, 끝위치) 배열값의 일부분을 잘라내어 새로운 배열을 만들어 주는 메소드
끝 위치는 생략시 배열 끝
기존배열의 변형은 없고 그대로 유지됨
잘라낸 배열만 배열이 되는것임

 

다음은 배열 객체를 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HTML>
<HEAD><title>sample</title>
</HEAD>
<BODY>
  <script language="javascript">
  a=new Array("1","2","3","4","5");
  b=a.splice(1,3,"4");
  document.write("splice(1,3)당한 배열원소:"+a+"<br>");
  b=a.push("6");
  document.write("push(6)당한 배열원소: "+a+"<br>");
  b=a.pop();
  document.write("pop된 값: "+b+", 현재 배열: "+a);
  </script>
</BODY>
</HTML>
 
 cs

 

 

 

 

⑤ Screen 객체

screen 객체는 웹페이지를 요구한 클라이언트 컴퓨터의 화면 해상도 또는 화면에서 지원되는 색상수 및 화면의 크기 등을 알아낼 때 사용되는 객체입니다.

다음은 screen 객체의 속성입니다.

속성 설명
availHeight 사용자(클라이언트)컴퓨터 모니터상의 윈도우 작업표시줄과 같은 인터페이스 부분을 제외하고 실제 웹페이지를 볼 수 있는 화면의 높이를 저장하고 있는 속성
availWidth 사용자(클라이언트)컴퓨터 모니터상의 윈도우 작업표시줄과 같은 인터페이스 부분을 제외하고 실제 웹페이지를 볼 수 있는 화면의 너비를 저장하고 있는 속성
height 모니터상의 윈도우 작업표시줄과 같은 인터페이스 부분을 포함한 화면의 높이를 저장하고 있는 속성
width 모니터상의 윈도우 작업표시줄과 같은 인터페이스 부분을 포함한 화면의 너비를 저장하고 있는 속성
pixelDepth 사용자 컴퓨터의 그래픽 카드에서 지원하는 픽셀당 비트(bit) 수를 저장하고 있는 속성
익스프로러에서는 지원되지 않음
colorDepth 현재 사용자 컴퓨터에서 사용할 수 있는 사용 가능한 색상수를 저장하고 있는 속성으로 단위는 Bit임

 

다음은 Screen 객체를 사용한 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<HTML>
<HEAD><title>sample</title>
</HEAD>
<BODY>
  <script language="javascript">
  document.writeln("인터페이스를 제외한 화면 높이: "+screen.availHeight+"<br>");
  document.writeln("인터페이스를 제외한 화면 넓이: "+screen.availWidth+"<br>");
  document.writeln("인터페이스를 포함한 화면 높이: "+screen.height+"<br>");
  document.writeln("인터페이스를 포함한 화면 넓이: "+screen.width+"<br>");
  document.writeln("픽셀 당 비트 수: "+screen.pixelDepth+"<br>");
  document.writeln("모니터의 지원 색상 수: "+screen.colorDepth+"<br>");
  </script>
</BODY>
</HTML>
 cs

 

저작자표시 비영리 변경금지

'It공부 > JavaScript' 카테고리의 다른 글

6. 웹브라우저 내장객체  (0) 2020.07.28
5. 이벤트와 이벤트 핸들러  (0) 2020.07.27
3. 함수  (0) 2020.07.24
2. 연산자와 제어 구조  (0) 2020.07.24
1. 자바스크립트 개요  (0) 2020.07.23
'It공부/JavaScript' Related Articles more
Comments