자바스크립트 객체(Object)

객체(Object)

 

자바스크립트는 객체기반의 언어로 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 숫자, 문자열, 배열 등도 모두 객체를 기반으로 한다.

 

자바스크립트의 객체는 속성(Property)과 메서드(Method)로 구성된다. 속성은 객체에 붙어있는 변수이고 메서드는 객체에 붙어있는 합수이다.

 

하나의 객체는 속성과 데이터를 처리하는 기능을 가진 메서드의 집합이라 할 수 있다.

 

변수는 데이터를 저장하고 있는 메모리 공간이며 객체도 일종의 변수이다. 그러나 각 객체의 요소들은 키와 값으로 구성되며 객체 자체의 함수인 메서드를 가질 수 있다.

<script>
	var person = {
    	name : "홍길동",
        age : 25,
        sayHello: function() {
        	document.write(this.name + "님 안녕하세요!");
        }
    };
    
    document.write("이름:" + person.name + "<br>");
    document.write("나이:" + person.name + "<br>");
    person.sayHello();
</script>

person이 하나의 객체이고, 이 객체는 속성 name, age, sayHello() 메서드로 구성된다.

 

사용자 정의 객체(User-defined Object)

사용자 즉 프로그래머가 객체의 속성을 정의하거나 메서드를 속성과 메서드를 함께 정의하여 객체를 프로그램에서 이용한다.

 

① 객체 리터럴(Object Literal)

리터럴은 데이터 형에 들어가는 데이터 값 자체를 의미한다.

변수 선언할 때와 유사한 방식으로 객체에 들어가는 속성과 메서드를 직접 정의한다.

var 객체명 = {
	// 속성 정의
	키1 : 값1,
    키2 : 값2,
    ...
    // 메서드 정의
    메서드1 : function() {
    	// 자바스크립트 코드
    },
    메서드2 : function() {
    	// 자바스크립트 코드
    },
    ...
};

각 속성은 키와 값으로 정의되고, 메서드들은 익명함수의 형태로 정의된다.

 

② New 연산자와 생성자 함수(Constructor) 이용

• 생성자 함수를 이용하여 객체의 타입을 정의한다.
  생성자 함수의 첫 글자는 반드시 영문 대문자를 사용하도록 한다.
• new를 이용하여 객체를 생성한다.

<script>
    function Car(company, model, year) {
    	this.company = company;
        this.model = model;
        this.year = year;
    }
    
    var car1 = new Car("현대", "아반떼", 2021);
    document.write(car1.company + "/" + car1.model + "/" + car1.year + "<br>")

    var car2 = new Car("르노 삼성", "SM6", 2021);    
    document.write(car2.company + "/" + car2.model + "/" + car2.year + "<br>")

<script>

생성자 함수 Car()가 정의 되었으며 속성으로 company, model, year 3개가 구성된다. 생성자 함수에서 사용된 this는 이 생성자 함수 Car에 의해 생성되는 객체를 가리킨다. 따라서 this.company는 new 연산자에 의해 생성되는 객체의 속성 company 현대와 르노 삼성이 된다. 화면에는 c1은 현대/아반떼/2021로 출력되고 c2는 르노 삼성/SM6/2021이 출력된다.

 

 

③ 객체의 속성 접근법

ⓐ 객체명. 키 : 객체명 다음에 점(.) 다음에 키를 사용

ⓑ 객체명["키"] : 객체명 다음에 대괄호([])에 키(문자열)를 사용

 

<script>
	var obj1 = {
    	name : "박혜린",
        age : 22,
    };
    
    document.write(obj.name + "<br>");
    document.write(obj.age + "<br>");
	
    document.write(obj["name"] + "<br>");
    document.write(obj["age"] + "<br>");
</script>

 

④ for in 문으로 객체 사용

for in 구문은 자바스크립트에서 객체의 속성에 반복해서 접근하려고 할 때 사용한다.

for(변수명 in 객체명) {
	문장1;
    문장2;
	...
}

객체명의 객체에 대해 반복 루프를 수행하며, 자바의 for-each문과 비슷하다. 각 반복 루프에서 변수명은 객체의 키 값을 가지고 문장1, 문장2, ... 를 수행한다.

 

for문을 이용하면 객체의 속성을 반복해서 읽어올 수 있다.

<script>
	var obj1 = {
    	name: "박정수",
        age: 22,
        address: "서울"
    };
    
    var str = "";
    for(var x in obj1)
    	str += obj1[x] + "<br>";
        
    document.write(str);
</script>



// 출력 결과
박정수
22
서울

루프를 돌면서 빈 문자열 str에 obj의 인덱스를 순차적으로 넣어주며 document.write로 str에 쌓인 데이터를 출력한다.

---

내장 객체(Built-in Object)

기본적으로 내장되어 있는 객체로 별도의 정의가 필요없다. 내장 객체를 이용할 때는 필요 시 해당 내장 객체로부터 객체를 생성하여 내장 객체에서 제공하는 속성과 메서드를 사용하면 된다.

 

내장 객체에는 배열(Array), 숫자(Number), 문자열(String), 수학(Math), 날짜(Date)객체가 있다.

 

① Number 객체의 메서드

• toString() : 숫자를 문자열로 변환하는 데는 Number 객체의 toString() 메서드가 사용된다. 

<script>

    var a = 10;
    var b = 20;
    var c;
    
    c = a + b;
    document.write(c + "<br>");
    
    c = a + b.toString();
    document.write(c);

</script>

변수 c에 a+b의 연산된 값을 담아 write로 출력을하는 코드이다. 그냥 a+b로 c에 할당할 경우 숫자로 연산되어 30이란 값이 출력되는데, .toString()이 b에 붙으면 숫자 더하기 문자열이 되어 1020이라는 값이 출력된다.

 

 

• toFixed() : 실수에서 소숫점 이하 자리수를 구하는 데 사용된다.

<script>
    var x = 12.4763;
    
    document.write(x.toFixed(0) + "<br>");
    document.write(x.toFixed(1) + "<br>");
    document.write(x.toFixed(3));

</script>


// 출력결과
12
12.5
12.476

 

② 문자열의 숫자 반환

문자열을 숫자로 변환하는 데에는 Number(), parseInt(), parseFloat()가 사용된다. 이 함수들은 Number객체의 메서드가 아니라 전역 함수(Global function)이다. 전역함수이기 때문에 다른 메서드와는 달리 함수 호출에 함수명이 그대로 사용된다.

 

• Number() : 어떤 객체의 값을 숫자로 변환
• parseInt() : 문자열을 정수로 변환
• parseFloat() : 문자열을 실수로 변환
• String() : 어떤 객체의 값을 문자열로 변환

<script>
    var x = "10.33";
    
    document.write(Number(x) + "<br>");
    document.write(parseInt(x) + "<br>");
    document.write(parseFloat(x) + "<br>");
	
    var x = "apple";
    document.write(Number(x));
</script>


// 출력결과 
10.33
20
10.33
NaN

만약 Number()함수에 영문자나 한글 같이 숫자로 변환하기에 어려운 값이 적용될 때는 NaN값이 반환된다.

 

 

③ Array객체 

배열은 하나의 변수로 여러 개의 데이터를 저장할 수 있게 해준다. 자바스크립트의 배열은 Array 객체를 기반으로 하고 있다. Array 객체에서는 배열의 문자열 변환, 배열 요소의 추가와 삭제, 배열 요소의 이동, 배열의 연결, 등 을 가능하게 해주는 다양한 메서드들을 제공한다.

 

• toString() : 배열 요소 값들을 콤마로 분리된 문자열로 반환

<script>
	var animals = ["사자", "호랑이", "사슴", "펭귄"];
    var str = animals.toString();
    document.write(str + "<br>");
    document.write(typeof(str));
</script>


// 출력 결과
사자,호랑이,사슴,펭귄
string

typeof()메서드로 str의 타입을 확인해보면 string타입으로 변환되었음을 확인할 수 있다.

 

• push() : 배열에 새로운 요소 추가

<script>
	var animals = ["사자", "호랑이", "사슴", "펭귄"];
    
    animals.push("기린");
    document.write(animals + "<br>");
    
    var x = animals.push("이구아나");
    document.write(x + "<br>");
    document.write(animals);
</script>


// 출력 결과
사자,호랑이,사슴,펭귄,기린
6
사자,호랑이,사슴,펭귄,기린,이구아나

변수 x의 값을 출력하면 배열 요소 개수가 반환된다. 배열의 요소 값들을 출력하려면 배열 변수명을 써서 출력해야한다.

 

• pop() : 배열의 마지막 요소 삭제

<script>
	var animals = ["사자", "호랑이", "사슴", "펭귄"];
    animals.pop();
    document.write(animals + "<br>");
    
    var x = animals.pop();
    document.write(x + "<br>");
    document.write(animals);
</script>

// 출력결과
사자, 호랑이, 사슴
사슴
사자, 호랑이

두번째의 출력결과는 x에 animals에서 처음 pop하고 남은 사자, 호랑이, 사슴 중에서 사슴을 pop으로 꺼내서 담았다.

그리고 x를 출력하면 사슴이 나오고, 이후 animals를 출력하면 사자, 호랑이가 나온다.  

• splice() : 배열에 요소 삽입

배열변수명.splice(삭제를 시작할 위치 인덱스, 삭제할 갯수, '삭제하고 대체할 값');

<script>
	var animals = ["사자", "호랑이", "사슴", "펭귄"];
    animals.splice(2, 2, "곰");
    document.write(animals + "<br>");
    
    animals.splice(2, 0, "원숭이");
    document.write(animals);
</script>


// 출력결과
사자,호랑이,곰       
사자,호랑이,원숭이,곰

    animals.splice(2, 2, "곰") 은 배열의 인덱스 2인 사슴부터 펭귄까지 2개를 삭제한 후 그 자리에 곰을 삽입해서 사자, 호랑이, 곰이 출력된다. animals.splice(2, 0, "원숭이")는 [사자, 호랑이, 곰] 배열에서 2번째 위치인 곰에서 매개변수가 0으로 삭제는 이루어지지 않고 원숭이만 삽입하여  사자, 호랑이, 원숭이, 곰이 출력된다.

 

• slice() : 배열에서 특정요소 추출
  배열객체명.slice(시작_인덱스, 끝_인덱스(끝인덱스는 포함되지 않음))

<body>

    <script>

    var animals = ["사자", "호랑이", "사슴", "펭귄", "여우", "독수리"];

    var arr;

    arr = animals.slice(2);

    document.write(arr + "<br>"); // 사슴, 펭귄, 여우, 독수리

    arr = animals.slice(2,4);

    document.write(arr) ; // 사슴, 펭귄

    </script>

</body>

animals.slice(2)는 배열에서 인덱스 2에서 마지막 인덱스 까지의 요소로 구성된 배열로 사슴, 펭귄, 여우, 독수리를 반환한다. animals.slice(2, 4)는 인덱스 2에서 부터 4번째 인덱스 이전까지의 요소로 구성된 배열인 사슴, 펭귄을 반환한다.

 

시작_인덱스 부터 끝_인덱스(끝_인덱스는 포함되지 않음) 까지의 요소들로 구성되는 새로운 Array 객체를 반환해준다. 끝_인덱스가 생략되면시작_인덱스부터 마지막 인덱스까지의 요소로 구성된 배열 객체를 얻는다.

 

• sort() : 배열의 요소를 내림차순으로 정렬
• reverse() : 배열의 요소를 내림차순으로 정렬

내림차순

배열객체명.sort();

 

오름차순

배열객체명.reverse();

    <script>

    var nums = [5,8,3,9,7];

    document.write(nums.sort() + "<br>"); // 3,5,7,8,9

    document.write(nums.reverse()); // 9,8,7,5,3

</script>

• 요소 값 변경과 length 속성

<script>

    var animals = ["사자", "호랑이", "사슴", "펭귄"]; // 배열 생성

    animals[0] = "코뿔소"; // 0번째 요소에 기존값 대신 해당 값 저장

    document.write(animals + "<br>"); // 코뿔소, 호랑이, 사슴, 펭귄

    var len = animals.length; // 배열의 길이 = 요소 갯수 저장

    document.write(len + "<br>"); // 4출력

    animals[len] = "여우"; // 배열의 len = 4번째 인덱스에 여우를 삽입

    // 인덱스가 0부터 시작하므로 4번째에는 아직 아무 요소가 없어서 교체 없이 4번째 자리에 여우를 저장

    document.write(animals); // 코뿔소, 호랑이, 사슴, 펭귄, 여우

</script>

배열의 인덱스가 가리키는 요소에 값을 저장함으로써 배열의 요소 값을 변경할 수 있다.

그리고 length 속성은 배열의 길이, 즉 배열 요소의 개수를 구하는 데 사용된다.

String 객체의 경우 length 속성은 문자열의 길이를 나타낸다.

 

 

④ String 객체 

• slice() : 문자열에서 인덱스를 이용하여 특정 문자열을 추출
  시작 인덱스와 종료 인덱스가 가리키는 문자열을 추출하는 데 사용된다.
  매개변수에 숫자하나만 입력하면 그 숫자의 인덱스 부터 끝까지 추출한다.
  문자열 사이에 있는 공백(" ")도 하나의 문자이다.
  -를 붙이면 끝에서 부터 센다.

    <script>

        var str = "태산이 무너져도 솟아날 구멍이 있다.";

        document.write(str.slice(2,8) + "<br>"); // 이 무너져도

        document.write(str.slice(5) + "<br>"); // 너져도 솟아날 구멍이 있다.

        document.write(str.slice(-3) + "<br>"); // 있다.

        document.write(str.slice(-10,-3)); // 아날 구멍이

</script>

• substr() : 문자열의 일부를 추출
  배열의 인덱스와 추출할 요소의 개수를 이용한다.

    <script>

        var str = "태산이 무너져도 솟아날 구멍이 있다.";

        document.write(str.substr(4,8) + "<br>"); // 무너져도 솟아날

        document.write(str.substr(4)); // 무너져도 솟아날 구멍이 있다.

</script>

 

• replace() :  문자열에서 특정 문자열 치환
  문자열 객체.replace(기존 문자열, 교체할 문자열);
  만약 매치되는 모든 문자열을 치환하려면 /문자열/g 로 작성한다.
  
  🧐 정규 표현식 :
  정규 표현식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용되는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기와 자바스크립트와 같은 프로그래밍 언어에서 문자열의 검색과 치환을 위해 사용된다.

    <script>

        var str = "A friend in need is a friend indeed";

        var str2 = str.replace("friend", "family");

        // A family in need is a friend indeed

        document.write(str2 + "<br>");

        var str3 = str.replace(/friend/g, "family");

        // A family in need is a family indeed

        document.write(str3);

    </script>

• 영문 대소문자 변경
  toUpperCase() : 문자열에서 영문자를 대문자로 변환
  toLowerCase() : 문자열에서 영문자를 소문자로 변환

    <script>

        var str = "Have a Nice Day!";

        document.write(str.toUpperCase() + "<br>");

        // HAVE A NICE DAY!

        document.write(str.toLowerCase());

        // have a nice day!

    </script>

• split() 을 이용한 문자열의 배열 변환
  split() : 문자열에서 특정 문자를 기준으로 문자열 분리

    <script>

        var str = "2025/3/25";

        var arr = str.split("/");

        document.write("년: " + arr[0] + "<br>");

        document.write("월: " + arr[1] + "<br>");

        document.write("일: " + arr[2]);

    </script>

 

위의 코드에서는 / 을 기준으로 나누며, arr 배열에 저장해주었다.

요소 하나하나 슬래쉬 기준으로 분리되었으므로 arr[0]에는 2025가 저장되고

arr[1]에는 3이 저장되고 arr[2]이는 25가 저장된다.

 

 

⑤ Date 객체 

날짜와 시간을 다루는 데 필요한 다양한 메서드를 제공한다.

    <script>

        var d = new Date();

       // 현재 날짜와 시간을 가지는 Date 객체 생성

        document.write("현재 Date : " + d + "<br><br>");

        // 컴퓨터의 현재 날짜와 시간으로 구성된다.

        var d1 = new Date(2023, 4,27, 10, 57, 13);

        // 특정 날짜와 시간(지정한 날짜)로 Date 객체 생성

        // 차례대로 연, 월, 일, 시, 분, 초

        // Date()에서 월은 0부터 시작해서 11까지로 0이 1월, 11이 12월이다.

        document.write("특정 Date : " + d1 + "<br><br>");

        document.write("d1 년도 : " + d1.getFullYear() + "<br>"); // 4자리 연도(yyyy)

        document.write("d1 월 : " + d1.getMonth() + "<br>"); // 월(0~11)

        document.write("d1 일 : " + d1.getDate() + "<br>"); // 일(1~31)

        document.write("d1 시간 : " + d1.getHours() + "<br>"); // 시간(0~23)

        document.write("d1 분 : " + d1.getMinutes() + "<br>"); // 분(0~59)

        document.write("d1 초 : " + d1.getSeconds() + "<br>"); // 초(0~59)

        document.write("d1 요일 : " + d1.getDay()); // 요일(0~6)

</script>

 

 

---

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

HTML 문서 구조를 말하며, 문서 객체 모델에서는 Document 객체 아래 HTML 요소들이 트리 구조를 형성하고 있다.

트리 구조에 있는 HTML 요소, 즉 객체에 접근하여 요소의 내용을 바꾸거나 설정된 CSS를 변경할 수 있다.

자바스크립트 DOM의 메서드와 속성을 이용하여 HTML 요소를 다룰 수 있지만, 제이쿼리에서는 자바스크립트보다 더 쉽고 편리하게 DOM을 처리할 수 있는 라이브러리를 제공한다. 실제 프로그램에서는 자바스크립트보다 제이쿼리에서 DOM을 처리하기도 한다.

 

* 문서 객체 모델의 트리구조

Document
<html>
<head>		<body>
<title>	<meta>	<h3>	<p>	<div>

 

① DOM 기본구조

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<h2>큰 제목</h2>
<p id="result"></p>
</body>
</html>

html 요소 아래에는 head와 body 요소가 위치하며 그 아래에는 title, meta, h3, p 요소들이 위치하고 있다.

charset과 id는 각각 meta와 p요소의 속성이다. charset은 UTF-8 속성 값을 갖고, id는 result 속성 값을 가진다.

 

요소 내용 삽입과 CSS 조작

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>페이지 제목</title>
</head>
<body>
<h2>큰 제목</h2>
<p id="result"></p>
	<script>
        document.getElementById("result").innerHTML = "안녕하세요.";
        document.getElementById("result").style.color = "red";    
    </script>
</body>
</html>

위와 같이 자바스크립트 코드를 추가하면 innerHTML로 <p>태그로 안녕하세요가 추가된다. 그리고 p태그의 id 속성 값 result에 점(.)으로 접근하여 색상을 red로 지정해 주었다.

 

DOM의 이벤트

웹 브라우저에서 DOM의 요소에 마우스를 클릭하는 것과 같은 이벤트가 발생하면 원하는 자바스크립트 코드를 실행하도록 할 수 있다.

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

   

    <style>

        div{

            color:white; background-color: skyblue;

            padding: 10px; width: 200px; text-align: center;

        }

    </style>

    <script>

        function changeText(obj){

            obj.innerHTML = "클릭하셨네요!";

        }

        function mouseOver(obj){

            obj.style.backgroundColor = "orange";

        }

        function mouseOut(obj){

            obj.style.backgroundColor = "skyblue";

        }

    </script>

</head>

<body>

    <h2 onclick="changeText(this)">클릭해 보세요!</h2>

    <div onmouseover="mouseOver(this)"

         onmouseout="mouseOut(this)">

        마우스를 올려보세요!

    </div>

</body>

</html>

 

↓

onclick 속성 : 요소에 마우스 클릭 이벤트가 발생하였을 때 이벤트를 처리하는 자바스크립트 함수를 설정하는 데 사용 된다.

onmouseover 속성 : 마우스가 올려졌을 때 발생되는 이벤트 처리 자바스크립트 함수를 설정하는 데 사용 된다.

onmouseout 속성 : 마우스가 벗어났을 때 발생되는 이벤트 처리 자바스크립트 함수를 설정하는 데 사용 된다.

---

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

자바스크립트에서 브라우저를 다루는 데 필요한 객체의 모델을 제공하고, 웹 브라우저 전체를 객체를 간주하여 관리한다. 

 

BOM에는 Window 객체 아래 Screen, Location, History, Navigator 등의 객체가 있다.

이러한 객체의 속성과 메서드를 이용하여 브라우저에 관련된 처리를 하며,

브라우저 객체와 이 객체들을 구성하는 속성을 정의하고 관리하는 체계를 브라우저 객체 모델이라고한다.

* Window에는  Document (문서객체모델 DOM)도 있다.

 

객체	설명
Window	열려 있는 브라우저 창을 나타내는 객체이다. 탭 기능이 있는 웹 브라우저에서는 각각의 탭을 나타낸다.
Document	웹 페이지를 표현하는 객체이다. HTML 문서 내에 있는 모든 요소는 이 객체에서 시작한다.
Screen	사용자 화면 정보를 담고 있는 객체이다.
Location	현재 페이지의 URL 주소와 URL 관련 정보를 담고 있는 객체이다.
History	브라우저의 방문 기록을 조작할 때 사용되는 객체이다.
Navigator	방문자의 웹 브라우저 정보를 다루는 데 사용되는 객체이다.

 

Window 객체

BOM의 최상위에 위치한 객체로 브라우저 창을 다루기 위한 다양한 메서드와 속성을 제공한다.

브라우저 창을 조작하고 다룰 수 있다.

 

속성 

• innerWidth : 브라우저 창의 내용 영역(스크롤바 포함)의 너비를 나타낸다. 뷰포트의 너비를 의미
• innerHeight :  브라우저 창의 내용 영역(스크롤바 포함)의 높이를 나타낸다. 뷰포트의 높이를 의미
• outerWidth : 브라우저 창(툴바와 스크롤바 포함)의 너비를 나타냄
• outerHeight : 브라우저 창(툴바와 스크롤바 포함)의 높이를 나타냄

 

• open() : 새로운 윈도우 창을 연다

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script>

        function openWin() {

            // URL(/popup), 새창이름(mycat), 새창 옵션

            window.open("popup.html", "mycat",

            "width=310, height=480, left=200, top=100, scrollbars=no");

        }

    </script>

</head>

<body>

    <!-- 새 창 열기 버튼 생성이되며, 버튼 클릭시 openWin() 함수 실행됨-->

    <button onclick="openWin()">새 창 열기</button>

</body>

</html>

위의 코드에서는 3개의 매개변수가 사용된다. 매개변수들은 각각 URL 주소, 새 창 이름, 새 창 옵션을 나타낸다.

옵션

width : 새창의 너비를 설정

height : 새 창의 높이를 설정

left :  새창의 왼쪽에서 시작되는 수평 방향 위치 설정

top : 새 창의 위에서 시작되는 수직 방향 위치를 설정

scrollbars :  스크롤 바 표시 여부 설정 - no는 숨김, yes는 표시 

 

 

• close() : 현재 창을 닫음
  
  

아래 코드는 open() 메서드에서 사용한 코드이며, 버튼에 close() 메서드를 쓸 경우 창을 닫을 수 있다.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h1>고양이</h1>

    <img src="https://i.namu.wiki/i/gw6Ay51-Z5mndZIQ9u53S5Bdj8tnfo8gXKgWxpO_jitlgHkDEq_082IfnKyx5e0bz1l-sM0k4IT9HEYPCdb-voazmUqTLDhsl4zsaDtXziGfZIee_Oof3f6pzHx7gNV-HglgJ2FTYlRvCsKsRFRZYg.webp">

    <p>사회적이며 사람을 좋아하여 장난감을 가지고 놀거나 아이들과 노는 것을 좋아한다.</p>

    <p></p>

    <button onclick="window.close()">창 닫기</button>

</body>

</html>

 

• resizeTo() : 창의 크기를 특정 너비와 높이로 변경

아래의 코드에서는 매개변수로 300과 300을 주었으며, 해당 메서드가 있는 함수가 적용된 버튼을 클릭 시 너비 300 픽셀에 높이 300 픽셀로 조정이 된다.

• focus() : 현재 창의 포커스를 얻음

newWindow가 포커스를 얻게 하며, 창이 브라우저 창들 중에서 제일 위에 위치하여 활성화 상태가 된다.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<script>

    var newWindow;

    function openWin() {

        new Window = window.open("","새 창",

        "width=250, height=80, left=230, top=100");

        newWindow.document.write("<p>새 창이 열렸습니다.</p>");

    }

    function resizeWin() {

        newWindow.resizeTo(300,300);

        newWindow.focus();

    }

</script>

</head>

<body>

    <button onclick="openWin()">새 창 열기</button>

    <button onclick="resizeWind()">창 크기 조절하기</button>

</body>

</html>

 

기타 Window 객체 메서드

• moveTo() : 현재 창을 지정된 위치로 이동
• print() : 현재 창의 내용을 프린터로 출력
• alert() : 경고창 표시
• prompt() :  메시지를 출력하고 키보드로 입력 받음

 

Screen 객체

방문자의 컴퓨터 스크린 화면에 관한 정보를 포함한다.

 

스크린 객체의 속성

availWidth  : 이용 가능한 화면의 너비

availHeight : 이용 가능한 화면(하단 작업 표시줄 제외)의 높이

colorDepth : 이미지를 표시하는 컬러 팔레트의 깊이(bit 단위)

width : 전체 화면의 넓이

height : 전체 화면의 높이

 

컴퓨터 또는 모바일기기의 스크린, 즉 화면의 속성을 나타낸다. (브라우저 창 x)

<body>

    <script>

        var a = "- 화면 전체의 너비와 높이 : " + screen.width + "px X ";

        a += screen.height + "px<br>";

        document.write(a);

        var b = "- 화면 작업 표시줄 제외한 너비와 높이 : " +

        screen.availWidth + "px X ";

        b += screen.availHeight + "px<br>";

        document.write(b);

        var c = "- 브라우저 전체 창의 너비와 높이 : " + window.outerWidth +

        "px X ";

        c += window.outerHeight + "px<br>";

        document.write(c);

        var d = "- 브라우저 창의 내용 영역의 너비와 높이 : " +

        window.innerWidth + "px X ";

        d += window.innerHeight + "px<br>";

        document.write(d);

    </script>

</body>

출력결과

- 화면 전체의 너비와 높이 : 1536px X 864px
- 화면 작업 표시줄 제외한 너비와 높이 : 1536px X 864px
- 브라우저 전체 창의 너비와 높이 : 804px X 872px
- 브라우저 창의 내용 영역의 너비와 높이 : 985px X 942px

 

Location 객체

URL 주소에 관련된 정보를 담고 있다. 자바스크립트에서는 이 정보를 이용해서 브라우저 창에 보여질 URL 주소를 직접 설정할 수 있다. 또한 html의 <a> 태그를 이용하지 않고 자바스크립트를 이용해 특정 사이트의 URL로 페이지를 이동할 수도 있다.

 

• hash : URL 중에서 #로 시작하는 해시 부분을 얻거나 설정
• host : URL의 호스트 이름과 포트 번호를 얻거나 설정
• hostname : URL의 호스트 이름을 얻거나 설정
• href : 전체 URL을 얻거나 설정, 이 값을 설정하면 해당 URL로 이동할 수 있다.
• pathname : URL의 경로 이름을 얻거나 설정
• port :  URL의 포트번호를 얻거나 설정
• protocol : URL의 프로토콜(Protocol, 통신 규약)을 얻거나 설정
• search : URL의 쿼리, 즉 물음표(?)로 시작하는 부분을 얻거나 설정
• reload() : 현재 문서를 다시 불러옴. 브라우저에서 새로고침을 하는 것과 같다.
• replace() :  현재 문서를 새로운 URL로 설정

Location 객체의 replace() 메서드를 이용해 해당 사이트로 이동하는 코드

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script>

         function movePage() {

            location.replace("https://www.naver.com");

         }

    </script>

</head>

<body>

    <button onclick="movePage()">네이버로 이동</button>

</body>

</html>

 

History 객체

• 히스토리 객체는 방문했던 URL 기록을 포함한다.
• length : 히스토리 목록에 기록된 ULR의 수
• back() : 히스토리 목록에서 이전 URL로 이동
• forward() : 히스토리 목록에서 다음 URL로 이동
• go() : 히스토리 목록에서 특정 URL로 이동

go() 메서드로 바로 직전에 방문했던 페이지로 이동

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script>

        function goBack(){

            history.go(-1);

        }

    </script>

</head>

<body>

    <button onclick="goBack()">이전 페이지로 이동</button>

</body>

</html>