LGHV_3기_자바스크립트와 객체_JavaScript(4)

Pepzera·2025년 3월 17일

LG 헬로비전 DX DATA SCHOOL 3기 공부 정리 웹 개발

LGHV3기_공부정리

목록 보기

29/34

Chap 04 자바스크립트와 객체

자바스크립트와 객체

1. 객체

객체(object)란? 🧐

프로그램에서 인식할 수 있는 모든 대상
데이터를 저장하고 처리하는 기본 단위

자바스크립트 객체

자바스크립트 안에 미리 객체로 정의해 놓은것!
문서 객체 모델 (DOM)
- 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
브라우저 관련 객체
- 웹 브라우저 정보를 객체로 관리
내장 객체
- 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음.

사용자 정의 객체

필요할 때마다 사용자가 직접 만드는 객체

객체의 인스턴스 만들기

객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
인스턴스
- 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것.
- 기본형
```
new 객체명
```
코드 예시 ) - 현재 날짜와 시간 정보 표시하기

let now = new Date();

console.log(`현재 날짜와 시각은 ${now} 입니다`)

결과 )

프로퍼티(property)와 메서드(method)

프로퍼티
- 객체의 특징이나 속성
메서드
- 객체에서 할 수 있는 동작
인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받음!!
프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표(.)를 붙이고 프로퍼티나 메서드 이름 작성

2. 내장 객체 - Array 객체

배열 만들기

초깃값이 없는 경우

let arr1 = new Array(); // 배열의 크기 지정 X
let arr2 = new Array(4); // 배열의 크기를 지정 O

초깃값이 있는 경우

let arr3 = ["one","two","three"]; // 배열 선언
let arr4 = Array("one","two","three"); // Array 객체를 사용한 배열 선언

배열 요소의 개수 - Array 객체의 length 프로퍼티

코드 예시 )

let zoo = ["zebra","tiger","lion","rabbit"]; // 배열 선언 및 초기화
for(let i=0; i < zoo.length; i++){ // 배열의 각 요소에 접근
  console.log(zoo[i]);
}

결과 )

Array 객체의 메서드

종류	설명
`concat`	기존 배열에 다른 배열이나 값을 추가해 새로운 배열을 만듦.
`every`	배열의 모든 요소가 주어진 조건을 만족하면 `true`, 그렇지 않으면 `false`를 반환.
`filter`	조건에 맞는 요소만 추출하여 새로운 배열을 만듦.
`forEach`	배열의 모든 요소에 대해 주어진 함수를 실행한다(반환값 없음).
`indexOf`	주어진 값이 배열에서 처음 나타나는 인덱스를 반환(없으면 `-1` 반환).
`join`	배열의 모든 요소를 문자열로 합치고, 지정된 구분자로 연결.
`push`	배열의 맨 끝에 요소를 추가하고 새로운 길이를 반환.
`unshift`	배열의 맨 앞에 요소를 추가하고 새로운 길이를 반환.
`pop`	배열의 마지막 요소를 제거하고 값을 반환.
`shift`	배열의 첫 번째 요소를 제거하고 값을 반환.
`splice`	배열의 특정 위치에서 요소를 추가하거나 제거하여 배열을 수정함.
`slice`	배열의 특정 부분을 추출하여 새로운 배열을 반환.
`reverse`	배열의 요소 순서를 거꾸로 뒤집음.
`sort`	배열의 요소를 지정된 조건에 따라 정렬함(기본적으로 문자열 기준).
`toString`	배열의 모든 요소를 쉼표로 구분된 문자열로 반환.

배열끼리 합치는 concat( ) 메서드

배열 요소를 연결해서 하나의 문자열로 만듦
원하는 구분자를 넣을 수 있음.
구분자를 지정하지 않으면 쉼표(,)로 구분
코드 예시 )

let nums = [20,40,60];
let chars = ['son','mother','grandmother'];

let numsChars = nums.concat(chars);
let charsNums = chars.concat(nums);

console.log(`nums에서 chars를 합치면 ${numsChars}`);
console.log(`chars에서 nums를 합치면 ${charsNums}`);

결과 )

배열 요소끼리 합치는 join( ) 메서드

배열 요소를 연결해서 하나의 문자열로 만든다
요소 사이에 원하는 구분자를 넣을 수 있다.
구분자를 지정하지 않으면 쉼표(,)로 구분
코드 예시 )

let nums = [20,40,60];
let chars = ['son','mother','grandmother'];

let result1 = nums.join();
let result2 = chars.join('-');

console.log(`구분자 없이 했을 때 : ${result1}`);
console.log(`구분자 -를 하고 했을 때 :  ${result2}`);

결과 )
- 구분자를 지정하지 않았을 시에는 쉼표로 구분!

새로운 요소를 추가하는 push( ), unshift( ) 메서드

push( ) 메서드 : 배열 맨 끝에 요소 추가
unshift( ) 메서드 : 배열 맨 앞에 요소 추가
배열의 길이 값 반환
기존 배열이 바뀜!!
코드 예시 )

let nums = [20,40,60];
let chars = ['son','mother','grandmother'];

let result1 = nums.push(80,100);
console.log(`길이 : ${result1}, 배열 결과 : ${nums}`);

let result2 = nums.unshift(-20,0);
console.log(`길이 : ${result2}, 배열 결과 : ${nums}`);

결과 )

중간에 요소를 추가하거나 삭제하는 splice( ) 메서드

배열 중간에 2개 이상의 요소를 추가하거나 삭제할 수 있다.
새로운 배열이 결과 값으로 반환됨.

괄호 안에 인수가 1개일 경우

인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제
코드 예시 )

let cars = ['bmw','kia','benz','volvo','porsche','lexus'];

// 인수 1개
let result1 = cars.splice(4);
console.log(`반환된 배열 : ${result1}`);
console.log(`변경된 배열 : ${cars}`);

결과 )
괄호 안에 인수가 2개일 경우
- 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 요소의 개수
- 메서드를 실행한 후에는 삭제한 요소를 반환하고, 기존 배열은 나머지 요소만 남음.
- 코드 예시 )
```
let cars = ['bmw','kia','benz','volvo','porsche','lexus'];

// 인수 2개
let result2 = cars.splice(2,1);
console.log(`반환된 배열 : ${result2}`);
console.log(`변경된 배열 : ${cars}`);
```
결과 )
괄호 안에 인수가 3개일 경우
- 첫 번째 인수는 배열에서 삭제할 시작 위치
- 두 번째 인수는 삭제할 개수
- 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정
- 코드 예시 )
```
let cars = ['bmw','kia','benz','volvo','porsche','lexus'];

// 인수 3개
let result3 = cars.splice(1,1,'hyundai');
console.log(`반환된 배열 : ${result3}`);
console.log(`변경된 배열 : ${cars}`);
```
결과 )

기존 배열을 바꾸지 않으면서 삭제하는 slice( ) 메서드

요소를 여러 개 꺼낼 수 있음.
요소를 삭제한 후에도 기존 배열이 바뀌지 않음!!!.

괄호 안에 인수가 1개일 경우

인수가 지정한 인덱스의 요소부터 마지막 요소까지 꺼내서 반환!
코드 예시 )

let cars = ['bmw','kia','benz','volvo','porsche','lexus'];

// 인수 1개
let result1 = cars.slice(4);
console.log(`반환된 배열 : ${result1}`);
console.log(`변경된 배열 : ${cars} (변경은 되지 않았다.)`);

결과 )

괄호 안에 인수가 2개일 경우
- 첫 번째 인수는 시작 인덱스, 두 번째 인수는 끝 인덱스 - 1
- 메서드를 실행한 후에는 삭제한 요소를 반환하고, 기존 배열은 나머지 요소만 남음.
- 코드 예시 )
```
let cars = ['bmw','kia','benz','volvo','porsche','lexus'];

// 인수 2개
let result2 = cars.slice(2,5);
console.log(`반환된 배열 : ${result2}`);
console.log(`변경된 배열 : ${cars} (변경은 되지 않았다.)`);
```
결과 )

3. 내장 객체 - Date 객체

Date 객체 인스턴스 만들기

현재 날짜로 설정할 경우

코드 예시 )

let now = new Date();
console.log(now);

결과 )
(해당 시간은 UTC 기준으로, 한국 시간은 +9 시간을 하면 된다. 그럼 한국 시간은 11:14:03 이다.)

특정 날짜로 설정할 경우 (괄호 안에 날짜 또는 날짜와 시간 입력)

코드 예시 )

let now = new Date('2024-10-05');
console.log(now);

let now1 = new Date('2024-10-06T12:25:00')
console.log(now1)

결과 )

자바스크립트의 날짜와 시간 입력 방식

1. YYYY-MM-DD 형식

코드 예시 )

let now = new Date('2024');
console.log(now);

let now1 = new Date('2024-10')
console.log(now1);

let now2 = new Date('2024-10-22')
console.log(now2);

결과 )

2. YYYY-MM-DDTHH 형식

코드 예시 )

let now = new Date('2024-08-21T17:00:00');
// UTC 기준으로
console.log(now);

let now1 = new Date('2024-08-21T17:00:00Z')
console.log(now1);

결과 )

3. MM/DD/YYYY 형식

코드 예시 )

let now = new Date('08/30/2024');
console.log(now);

결과 )

4. 이름 형식

코드 예시 )

let now = new Date('"Mon Sep 30 2024 10:00:00 GMT+0900 (대한민국 표준시)"');
console.log(now);

결과 )

Date 객체의 메서드

날짜 / 시간 정보를 가져오는 메서드
날짜 / 시간 정보를 설정하는 메서드
날짜 / 시간 형식을 바꿔주는 메서드로 구분됨.

📌 날짜·시간 정보 가져오기

메서드	설명
`getFullYear()`	연도를 4자리 숫자로 표시함.
`getMonth()`	0~11 사이의 숫자로 월을 표시함. (0부터 1월이 시작되고 11은 12월임)
`getDate()`	1~31 사이의 숫자로 일을 표시함.
`getDay()`	0~6 사이의 숫자로 요일을 표시함. (0부터 일요일이 시작되고 6은 토요일)
`getTime()`	1970년 1월 1일 자정 이후의 시간을 밀리초(1/1000초)로 표시함.
`getHours()`	0~23 사이의 숫자로 시를 표시함.
`getMinutes()`	0~59 사이의 숫자로 분을 표시함.
`getSeconds()`	0~59 사이의 숫자로 초를 표시함.
`getMilliseconds()`	0~999 사이의 숫자로 밀리초를 표시함.

📌 날짜·시간 설정하기

메서드	설명
`setFullYear()`	연도를 4자리 숫자로 표시함.
`setMonth()`	0~11 사이의 숫자로 월을 설정함. (0부터 1월, 11은 12월)
`setDate()`	1~31 사이의 숫자로 일을 설정함.
`setTime()`	1970년 1월 1일 자정 이후 시간을 밀리초로 설정함.
`setHours()`	0~23 사이의 숫자로 시를 설정함.
`setMinutes()`	0~59 사이의 숫자로 분을 설정함.
`setSeconds()`	0~59 사이의 숫자로 초를 설정함.
`setMilliseconds()`	0~999 사이의 숫자로 밀리초를 설정함.

📌 날짜·시간 형식 바꾸기

메서드	설명
`toLocaleString()`	현재 날짜와 시간을 현지 시간(local time)으로 표시함.
`toString()`	Date 객체 타입을 문자열로 표시함.

4. 내장 객체 - Math 객체

Math 객체의 특징

수학 계산과 관련된 메서드가 많이 포함되어 있지만 , 딱히 수학식에서만 사용하는 것은 아니다!!
무작위 수가 필요하거나 반올림이 필요한 프로그램 등에서도 Math 객체의 메서드 사용함.
Math 객체는 인스턴스를 만들지 않고 프로퍼티와 메서드 사용

Math 객체의 프로퍼티

종류	설명
`E`	오일러 상수
`PI`	원주율
`SQRT2`	√2
`SQRT1_2`	1/√2
`LN2`	log e^2
`LN10`	log e^10
`LOG2E`	log 2^e
`LOG10E`	log 10^e

Math 객체의 메서드

종류	설명
`abs()`	절댓값을 반환
`acos()`	아크 코사인 값을 반환
`asin()`	아크 사인 값을 반환
`atan()`	아크 탄젠트 값을 반환
`atan2()`	아크 탄젠트 값을 반환
`ceil()`	매개변수의 소수점 이하 부분을 올린다.
`cos()`	코사인 값을 반환
`exp()`	지수 함수를 나타냄.
`floor()`	매개변수의 소수점 이하 부분을 버린다.
`log()`	매개변수에 대한 로그 값을 반환
`max()`	매개변수 중 최댓값을 반환
`min()`	매개변수의 최솟값을 반환
`pow()`	매개변수의 지수값을 반환
`random()`	0과 1사이의 무작위 수를 반환
`round()`	매개변수의 소수점 이하 부분을 반올림함.
`sin()`	사인 값을 반환
`sqrt()`	매개변수에 대한 제곱근을 반환
`tan()`	탄젠트 값을 반환

5. 브라우저 관련 객체

브라우저 관련 객체의 계층 구조

종류	설명
`window`	브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위에 있음.
`document`	웹 문서마다 하나씩 있으며 `<body>` 태그를 만나면 만들어짐. HTML 문서의 정보가 담겨있음.
`navigator`	현재 사용하는 브라우저의 정보가 들어있음.
`history`	현재 창에서 사용자의 방문 기록을 저장함.
`location`	현재 페이지의 URL 정보가 담겨있음.
`screen`	현재 사용하는 화면 정보를 다룸.

window 객체의 프로퍼티

주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용

종류	설명
`document`	브라우저 창에 표시된 웹 문서에 접근할 수 있음.
`frameElement`	현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환하고, 포함되지 않으면 `null` 반환.
`innerHeight`	내용 영역의 높이를 나타냄.
`innerWidth`	내용 영역의 너비를 나타냄.
`localStorage`	웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환.
`location`	`window` 객체의 위치 또는 현재 URL을 나타냄.
`name`	브라우저 창의 이름을 가져오거나 수정.
`outerHeight`	브라우저 창의 바깥 높이를 나타냄.
`outerWidth`	브라우저 창의 바깥 너비를 나타냄.
`pageXOffset (=scrollX)`	스크롤 했을 때 수평으로 이동하는 픽셀 수로 `scrollX`와 같음.
`pageYOffset (=scrollY)`	스크롤 했을 때 수직으로 이동하는 픽셀 수로 `scrollY`와 같음.
`parent`	현재 창이나 서브 프레임의 부모.
`screenX`	브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냄.
`screenY`	브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리를 나타냄.
`sessionStorage`	웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환.

window 객체의 프로퍼티

종류	설명
`alert()`	알림 창을 표시
`blur()`	현재 창에서 포커스를 제거
`close()`	현재 창을 닫는다.
`confirm()`	`[확인]`, `[취소]` 버튼이 있는 확인 창을 표시
`focus()`	현재 창에 포커스를 부여함.
`moveBy()`	현재 창을 지정한 크기만큼 이동
`moveTo()`	현재 창을 지정한 좌표로 이동
`open()`	새로운 창을 연다.
`postMessage()`	메시지를 다른 창으로 전달
`print()`	현재 문서를 인쇄
`prompt()`	프롬프트 창에 입력한 텍스트를 반환
`resizeBy()`	지정한 크기만큼 현재 창의 크기를 조절
`resizeTo()`	동적으로 브라우저 창의 크기를 조절
`scroll()`	문서에서 특정 위치로 스크롤 한다.
`scrollBy()`	지정한 크기만큼씩 스크롤 한다.
`scrollTo()`	지정한 위치까지 스크롤 한다.
`sizeToContent()`	내용에 맞게 창의 크기를 맞춤.
`stop()`	로딩을 중지

6. 새 브라우저 창을여는 open( ) 메서드

open 메서드의 기본형

window.open(경로, 창 이름, 창 옵션)

경로 : 팝업 창에 표시할 문서나 사이트의 경로(주소)
창 이름 : 팝업 창의 이름
창 옵션 : left, top 속성을 사용해 위치를 정하거나 width, height 속성을 사용하여 크기 지정

코드 예시 ) - 팝업 창 표시하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>문서를 열면 팝업창이표시됩니다.</p>
  <script>
    window.open("12_notice.html","","width=500, height=400")
  </script>
</body>
</html>

결과 )

창 이름 지정하기

창 이름을 지정하면 페이지를 새로고침해도 팝업 창은 한 번 표시

팝업 창 위치 지정하기

left 속성 : 화면 왼쪽 측면 기준으로 얼마나 떨어져 는지 지정
top 속성 : 화면 위쪽을 기준으로 해서 얼마나 떨어져 있는지 지정

코드 예시 ) - 팝업 창의 이름과 위치 지정하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>문서를 열면 팝업창이표시됩니다.</p>
  <p>팝업은 바탕화면 왼쪽에서 픽셀, 위에서 픽셀 떨어진 위치에<br> 팝업 창이 표시!</p>
  <script>
    window.open("12_notice.html","pop","width=500, height=400, left=500, top=100")
  </script>
</body>
</html>

결과 )

팝업 차단 고려하기

중요한 내용을 팝업 창으로 보여주어야 한다면 팝업이 차단된 상태인지 체크하여 사용자에게 알려주는 것이 좋다!
웹 브라우저에서 팝업을 차단하면 window.open( )은 null값으로 반환
- window.open( ) 메서드를 실행한 후 반환값을 체크하면 팝업이 차단되었는지 알아낼 수 있음!

코드 예시 ) - 팝업이 차단된 브라우저의 알림 창 표시하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body onload = "openPopup()">
  <p>문서를 열면 팝업창이표시됩니다.</p>
  <p>차단 상태면, 팝업 차단 alert 뜨게끔!</p>
  <script>
    let blocked = false;
      function openPopup() {
        let newWin = window.open("12_notice.html","pop","width=500, height=400, left=500, top=100");
        if (newWin == null) {
          alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해주세요!")
        }
      }
  </script>
</body>
</html>

결과 )

창 닫기

팝업 창에 있는 ‘닫기’ 버튼을 클릭하여 팝업 창을 닫으면 된다.

7. navigator 객체

사용하는 브라우저가 많아지고, 웹 애플리케이션이 등장하면서 navigator 객체에 여러 프로퍼티가 등장하고 있음
일부 브라우저에서만 지원하는 프로퍼티도 있음

주요 프로퍼티

종류	설명
`battery`	배터리 충전 상태를 알려줌
`cookieEnabled`	쿠키 정보를 무시하면 `false`, 허용하면 `true`를 반환
`geolocation`	모바일 기기를 이용한 위치 정보를 나타냄
`language`	브라우저 UI의 언어 정보를 나타냄
`oscpu`	현재 운영체제 정보를 나타냄
`userAgent`	현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열

8. history 객체

방문한 사이트 주소가 배열 형태로 저장됨
프로퍼티와 메서드

구분 설명
프로퍼티 length
메서드 back()
메서드 forward()
메서드 go(n)

구분	설명
프로퍼티	`length`
메서드	`back()`
메서드	`forward()`
메서드	`go(n)`

9. location 객체

현재 문서의 URL 주소 정보가 담겨 있음
이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정

프로터피와 메서드

구분	종류	설명
프로퍼티	`hash`	URL 중에서 `#`로 시작하는 해시 부분의 정보를 담고 있음
	`host`	URL의 호스트 이름과 포트 번호를 담고 있음
	`hostname`	URL의 호스트 이름이 저장됨
	`href`	전체 URL / 이 값을 변경하면 해당 주소로 이동할 수 있음
	`pathname`	URL 경로가 저장
	`port`	URL의 포트 번호를 담고 있음
	`protocol`	URL의 프로토콜을 저장
	`password`	도메인 이름 앞에 `username`과 함께 입력해서 접속하는 사이트의 URL일 경우에 `password` 정보를 저장
	`search`	URL 중에서 `?`로 시작하는 검색 내용을 저장
	`username`	도메인 이름 앞에 `username`을 함께 입력해서 접속하는 사이트의 URL일 경우에 `username` 정보를 저장
메서드	`assign()`	현재 문서에 새 문서를 할당해서 새 문서를 가져옴
	`reload()`	현재 문서를 다시 불러옴
	`replace()`	현재 문서의 URL을 지우고 다른 URL의 문서로 교체
	`toString()`	현재 문서의 URL을 문자열로 반환

10. screen 객체

사용자의 화면 크기, 정보
예 ) 화면의 너비와 높이 알아내기
- (내 컴퓨터의 width와 height를 알 수 있음!)

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>location Object</title>
	<style>
		.container {
			width:400px;
			margin:10px auto;
		}
		.display {
			margin-top:10px;
			padding:10px;
			border:1px solid #222;
			box-shadow: 1px 0 1px #ccc;			
		}
		p {
			font-size:1em;
		}
	</style>
</head>
<body>	
	<div class="container">
		<h2>screen 객체 </h2>
		<div class="display">
			<script>
				// Screen 객체 연습하기 - 화면 크기 정보 확인하기
				document.write(`<p><b>screen.availWidth : </b>${screen.availWidth}</p>`);
				document.write(`<p><b>screen.availHeight : </b>${screen.availHeight}</p>`);
				document.write(`<p><b>screen.width : </b>${screen.width}</p>`);
				document.write(`<p><b>screen.height : </b>${screen.height}</p>`);
			</script>		
	  </div>
	</div>		
</body>
</html>

결과

Pepzera

이전 포스트

LGHV_3기_함수와 이벤트_JavaScript(3)

다음 포스트

LGHV_3기_자바스크립트와 객체_JavaScript(4)

LGHV3기_공부정리

Chap 04 자바스크립트와 객체

자바스크립트와 객체

1. 객체

객체(object)란? 🧐

자바스크립트 객체

사용자 정의 객체

객체의 인스턴스 만들기

프로퍼티(property)와 메서드(method)

2. 내장 객체 - Array 객체

배열 만들기

배열 요소의 개수 - Array 객체의 length 프로퍼티

Array 객체의 메서드

배열끼리 합치는 concat( ) 메서드

배열 요소끼리 합치는 join( ) 메서드

새로운 요소를 추가하는 push( ), unshift( ) 메서드

중간에 요소를 추가하거나 삭제하는 splice( ) 메서드

기존 배열을 바꾸지 않으면서 삭제하는 slice( ) 메서드

3. 내장 객체 - Date 객체

Date 객체 인스턴스 만들기

자바스크립트의 날짜와 시간 입력 방식

Date 객체의 메서드

4. 내장 객체 - Math 객체

Math 객체의 특징

Math 객체의 프로퍼티

Math 객체의 메서드

5. 브라우저 관련 객체

브라우저 관련 객체의 계층 구조

window 객체의 프로퍼티

window 객체의 프로퍼티

6. 새 브라우저 창을여는 open( ) 메서드

open 메서드의 기본형

창 이름 지정하기

팝업 창 위치 지정하기

팝업 차단 고려하기

창 닫기

7. navigator 객체

8. history 객체

9. location 객체

10. screen 객체

LGHV_3기_함수와 이벤트_JavaScript(3)

LGHV_3기_문서 객체 모델(DOM)_JavaScript(5)

0개의 댓글