[코딩 자율학습 HTML + CSS + 자바스크립트] 3. 자바스크립트로 웹 동작 구현하기- "11장 자바스크립트 객체 다루기"

11.1 자바스크립트 객체 다루기

!! 기본 자료형을 제외한 거의 모든 것이 객체로 구성됐다고 해도 과언이 아닐 정도로 객체는 자바스크립트에서 정말 중요 !!

1. 객체

자료형의 관점: 키와 값으로 구성된 속성들의 집합.

객체는 자바스크립트에서 제공하는 기본 자료형과는 다르게 여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음.

const person = {};

리터럴 방식: {}
속성이 하나도 없는 빈 객체.

const person = {"Hong Gildong"};

보통 객체를 생성할 때는 빈 객체로 생성하지 않고 처음부터 속성을 지정한 상태로 생성.

const person = {
  name:["Hong", "Gildong"],
  age:20,
  isAdult:true
};

객체는 데이터의 종류를 가리지 않으므로 (배열, 숫자, 논리 데이터)모든 자료형의 데이터를 값으로 가짐.

const person = {
  name:{
    firstName:"Gildong",
    lastName:"Hong"
  },
  age:20, 
  isAdult:true,
  printInfo:function(){
    console.log('printInfo');
  }
};

객체 안에 또 다른 객체나 함수가 들어갈 수도 있음.

 

const person = {
  "phone number":"010-000-0000"
};

보통 객체의 키는 문자열로 작성. 큰따옴표나 작은따옴표로 표시하지 않아도 문제되지 않음.
다만 예제 코드처럼 키에 공백이 들어갈 경우에는 따옴표를 꼭 사용해야 함.

객체에서 속성의 값으로 함수가 들어갈 때는 보통 함수라고 하지 않고, 메서드(method)라고 함.

 

 

---

 

11.2 객체 속성 다루기

2.1 객체 속성에 접근하기

● 대괄호 연산자로 접근하기

객체의 속성에 접근하려면 객체명 뒤에 대괄호를 붙이고 대괄호 안에 키를 넣음. 이때 키는 반드시 큰따옴표나 작은따옴표로 감싼 문자열 형태로 작성해야 함.

const person = {
  name:"Hong Gildong",
  age:20
};
console.log(person["name"]); // Hong GilDong
console.log(person["age"]);  // 20

-속성에 접근하려면,

const person = {
  name:{
    firstName:"Gildong",
    lastName:"Hong"
  },
  likes:["apple", "samsung"],
  printHello:function(){
    return "hello";
  }
};

console.log(person["name"]); // { firstName:'Gildong', lastName:'Hong' }
속성에 접근하려면 키를 대괄호 안에 문자열로 적는다고 했으니 다음과 같이 작성.
그러면 키가 name인 속성에 접근하는데, 이 속성의 값은 객체 리터럴.
접근한 값도 객체이므로 다시 대괄호 연산자를 사용해 접근. 따라서 다음과 같이 대괄호를 연속으로 사용해 접근하면 됨.

// person 객체의 name 속성에 값으로 할당된 객체의 firstName 속성에 접근
console.log(person["name"]["firstName"]); // Gildong

-속성값이 배열일 때: 대괄호 연산자에 인덱스를 사용

const person = {
  name:{
    firstName:"Gildong",
    lastName:"Hong"
  },
  likes:["apple", "samsung"],
  printHello:function(){
    return "hello";
  }
};


console.log(person["likes"][0]); // apple
console.log(person["likes"][1]); // samsung
첫 번째 대괄호에 객체 속성의 키. 두 번째 대괄호에 배열의 인덱스. 
	=> 속성값인 배열의 각 데이터에 접근할 수 있음

-속성값이 함수일 때

const person = {
  name:{
    firstName:"Gildong",
    lastName:"Hong"
  },
  likes:["apple", "samsung"],
  printHello:function(){
    return "hello";
  }
};

console.log(person["printHello"]); // [Function: printHello]
키를 이용해 접근하면 속성값은 함수가 됨.

console.log(person["printHello"]()); // hello
함수를 호출할 때는 ()를 사용하므로 결국 person 객체의 printHello() 함수에는 다음처럼 접근.

 

● 마침표 연산자

.를 이용해 객체 속성에 접근.

객체 속성에 접근하려면 접근할 객체명과 객체 속성의 키를 마침표 연산자로 연결.

const person = {
  name:{
    firstName:"Gildong",
    lastName:"Hong"
  },
  age:20,
  likes:["apple", "samsung"],
  printHello:function(){
    return "hello";
  }
};
console.log(person.name.lastName); // Hong
console.log(person.age); // 20 
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello

마침표 연산자를 사용할 때는 키를 바로 적어야 함. 객체 속성에 접근할 때 키를 큰따옴표("")나 작은따옴표('')로 감싸면 오류가 발생.

객체의 키 식별자에 공백이 있다면 마침표 연산자는 사용할 수 없음. 대괄호 연산자로만 접근할 수 있음.

공백이 있는 키는 큰따옴표나 작은따옴표로 감싸야 함.

 

2.2 객체 속성 값 변경하기

객체로 정의된 값을 바꾸고 싶다면 키로 속성에 접근해서 값을 재할당하면 됨.

const person = {
  name:"Hong Gildong"
};
person.name = "Kim"; //  또는 person["name"] = "Kim";
console.log(person.name); // Kim

변수 person에 할당된 객체의 속성에 키로 접근해 값을 변경.

2.3 객체 속성 동적으로 추가하기

값을 재할당하면 기존 속성값을 변경할 때, 해당 키가 객체에 없는 속성이라면 해당 키와 값으로 구성된 새로운 속성이 객체에 추가.

const person = {};
console.log(person); // {}
객체 리터럴 방식으로 빈 객체를 생성하고 변수에 할당.
그리고 객체의 속성에 접근해 값을 변경할 때처럼 키에 값을 할당. person 객체를 출력해 보면 처음에는 빈 객체.

person.name = "Hong Gildong"; 
console.log(person); // { name: 'Hong Gildong' }
나중에 name 속성이 추가.

 

객체 식별자와 키에 마침표 연산자를 사용하면 객체의 속성에 접근하게 되고, 속성에 접근해서 할당 연산자로 값을 할당하면 값이 변경되거나 새로운 속성이 추가됨.

객체 속성의 값이 함수나 배열, 객체 리터럴일 때도 같은 방법으로 값을 변경하거나 새로운 속성을 추가할 수 있음.

=> "속성을 동적으로 추가한다"

 

2.4 객체 속성 동적으로 삭제하기

객체 속성에 접근할 때 앞에 delete 키워드를 명시하면 해당 속성이 삭제.

const person = {
  name:"Hong Gildong"
};
delete person.name; // 또는 delete person["name"]
console.log(person); // {} 출력

delete 키워드로 person 객체의 하나뿐인 name 속성을 삭제. person 객체를 출력해 보면 빈 객체가 출력.

 

2.5 객체의 데이터 관리 방법 이해하기

const 키워드로 선언한 상수 변수는 재할당이 불가능. but  const 키워드로 선언한 상수 변수에 할당한 객체에 속성을 추가하거나 삭제할 수 있었음.

=> 객체 자료형의 특성인 참조(reference)

 

자바스크립트에서의 자료형: 기본 자료형, 참조 자료형 (데이터 관리 방식이 다르기 때문)

 

● 기본 자료형의 데이터 관리: 깊은 복사

변수에 데이터를 할당할 때 데이터 그 자체가 할당

 

이 상태에서 변수에 할당된 데이터를 다른 변수에 다시 할당하면,

let num = 10;
let copyNum = num; // 변수 num의 데이터를 변수 copyNum에 할당

변수 num에 할당된 데이터를 변수 copyNum에 다시 할당하면 기본 자료형에서는 자신의 공간에 담고 있던 데이터를 그대로 복사해 전달.

그러면 변수 num과 copyNum은 각각 독립적으로 10이라는 값을 가지고 있는 상태가 됨.

 

이 상태에서 변수 num의 값을 바꾸면,

let num = 10;
let copyNum = num;
num = 20; // 변수 num을 재할당
console.log(num); // 20
console.log(copyNum); // 10

실행해 보면 변수 num만 값이 변경되고 변수 copyNum은 변경되지 않음. 변수 copyNum은 변수 num의 값을 복사한 별도의 데이터를 가지고 있기 때문에 두 데이터는 연동되어 있지 않음.

이렇게 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사되는 것: "깊은 복사(deep copy)"

 

● 참조 자료형의 데이터 관리: 얕은 복사

 

기본 자료형과 다르게 객체와 같은 참조 자료형은 변수 공간에 데이터가 할당되는 것이 아닌, 데이터가 위치하고 있는 메모리의 주소 값만 할당. => "참조한다"

const person = {
  name:"Hong Gildong"
};

변수 person에 객체를 저장하면 객체의 데이터는 별도의 메모리에 저장.
변수 person은 객체의 데이터가 저장된 메모리 주소만 가지고 있게 됨.

 

객체 데이터가 저장된 메모리 주소가 0x00

 

변수에 다른 객체를 재할당하려고 하면,

const person = {
  name:"Hong Gildong"
};
person = {
  name:"Sucoding"
}; // TypeError: Assignment to constant variable

const 키워드는 재할당이 안 되므로 바로 오류가 발생.

 

하지만 변수에 할당된 객체에 속성을 추가하거나 값을 변경하는 건 가능.

const person = {
  name:"Hong Gildong"
};
person.name = "Hong";

 

변수 person 입장에서는 데이터를 재할당하는 것이 아니기 때문.

 

변수에 할당된 객체의 주소 값은 그대로이고 주소 값이 참조하는 원본 객체 데이터만 변경되기 때문에 기존 데이터를 변경하거나 새로운 속성을 추가할 수 있음.

 

특징은 변수끼리 데이터를 복사할 때 도드라지게 나타남.

const person = {
  name:"Hong Gildong"
};
const copyPerson = person; // 변수 person에 할당된 객체를 변수 copyPerson에 복사
person.name = "Hong"; // 변수 person에 할당된 객체의 값을 변경
console.log(person.name); // Hong
console.log(copyPerson.name); // Hong

person에 할당된 객체의 값만 변경한 뒤 각 변수에 할당된 name 속성의 값을 출력

person에 할당된 객체의 속성값을 변경했는데, 변수 copyPerson에 복사된 객체의 속성값까지 변경됨. 이는 객체가 변수에 할당될 때 변수는 주소 값만 가지고 있어서 복사할 때도 주소 값만 복사하기 때문.

그래서 두 변수는 같은 주소 값을 가지게 되고 바라보는 원본 데이터의 위치도 같음. 그러므로 변수 person의 데이터를 변경하면 같은 주소를 바라보는 변수 copyPerson의 데이터까지 변경.

데이터를 복사했을 때 한쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것: "얕은 복사(shallow copy)"

 

 

---

 

11.3 표준 내장 객체 사용하기

3.1 표준 내장 객체

개발 편의를 위해 수많은 객체가 미리 만들어져 있음.

만들어진 객체는 자바스크립트에 기본으로 내장되어 있어서 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있음.

 

종류	설명
String	기본 자료형 중 문자열과 관련 있는 속성과 메서드가 정의된 객체
Array	기본 자료형 중 배열과 관련 있는 속성과 메서드가 정의된 객체
Date	날짜 및 시간과 관련 있는 속성과 메서드가 정의된 객체
Math	수학 연산과 관련 있는 속성과 메서드가 정의된 객체

3.2 문자열을 다루는 String 객체

 

 string 객체의 주요 속성과 메서드

구분		설명
속성	length	문자열의 길이를 반환합니다.
메서드	includes()	메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함되어 있으면 true, 아니면 false를 반환합니다.
	replace()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.
	replaceAll()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.
	split()	메서드의 매개변수에 인자로 전달되는 구분자를 이용해 대상 문자열을 여러 개의 문자열로 분리하고, 분리한 문자열을 새로운 배열로 반환합니다.
	toUpperCase()	대상 문자열을 대문자로 변경해 반환합니다.
	trim()	대상 문자열의 앞뒤 공백을 제거한 값을 반환합니다.
	indexOf()	대상 문자열과 일치하는 첫 번째 문자의 인덱스를 반환합니다.

 

문자열의 길이를 알 수 있어서 최소 글자 수나 최대 글자 수를 확인해야 할 때

const pw = "124";
if(pw.length < 4){
  console.log("비밀번호는 최소 4자리 이상 입력해 주세요.");
}

 

특정 문자열이 포함되어 있는지 확인할 때

const email = "test!naver.com";
if(email.includes("@") === false){
  console.log("올바른 이메일 형식이 아닙니다.");
}



11/03/string/indexOf.js

const email = "test!naver.com";
if(email.indexOf("@") ===> -1){
  console.log("올바른 이메일 형식이 아닙니다.");
}
특정 문자열과 일치하는 첫 번째 문자의 인덱스를 반환하는데, 찾지 못하면 -1을 반환.

 

3.3 배열을 다루는 Array 객체

배열을 다루는 객체

 

Array 객체의 주요 속성과 메서드

구분		설명
속성	length	배열의 요소 개수를 반환합니다.
파괴적 메서드	push()	배열의 맨 뒤에 데이터를 추가합니다.
	pop()	배열의 맨 뒤에서 데이터를 추출합니다.
	unshift()	배열의 맨 앞에 데이터를 추가합니다.
	shift()	배열의 맨 앞에서 데이터를 추출합니다.
	sort()	배열의 요소를 정렬합니다.
	reverse()	배열의 요소를 역순으로 정렬합니다.
비파괴적 메서드	forEach()	배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수를 호출합니다.
	filter()	배열의 요소를 하나씩 순회하면서 요소마다 콜백 함수를 호출해 true를 반환하는 요소만 추출합니다. 추출한 요소로 새로운 배열을 만들고 만들어진 배열을 반환합니다.
비파괴적 메서드	find()	배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값을 반환합니다.
	findIndex()	값 대신 인덱스 숫자를 반환한다는 것만 빼면 find() 메서드와 같습니다.
	includes()	배열에 특정 값이 포함되어 있는지 확인해서 포함됐으면 true, 아니면 false를 반환합니다.
	join()	배열의 모든 요소를 주어진 구분자로 합칩니다.

파괴적 메서드: 메서드를 사용했을 때 원본 데이터를 변경하는 메서드.

const arr = [10, 20, 30, 40];
arr.push(50);     // 배열 맨 뒤에 50 추가
console.log(arr); // [10, 20, 30, 40, 50]
arr.pop();        // 배열 맨 뒤에서 요소 추출
console.log(arr); // [10, 20, 30, 40]
arr.unshift(0);   // 배열 맨 앞에 0 추가
console.log(arr); // [0, 10, 20, 30, 40]
arr.shift();      // 배열 맨 앞에서 요소 추출
console.log(arr); // [10, 20, 30, 40]

 

비파괴적 메서드: 원본을 변경하지 않는 메서드. 

const arr = [10 , 20, 30, 40];
arr.forEach(function(v){
  console.log(v); 
});
console.log(arr); // 10 20 30 40

 

배열의 요소 개수, 길이

const arr = [10, 20, 30];
for(let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

 

3.4 날짜와 시간을 다루는 Date 객체

날짜 및 시간과 관련 있는 메서드

 

● 인스턴스 만들기

const date = new Date(); // Wed Jan 19 2022 16:06:05 GMT+0900 (한국 표준시)

date 변수에 할당된 데이터는 Date 객체의 인스턴스.

인스턴스(instance): 생성되는 데이터.

 

 

-숫자로 전달해 생성하는 방법

날짜와 시간 정보를 숫자로 전달할 때 월은 0부터 시작.

const date1 = new Date(2022, 11, 25); // Sun Dec 25 2022 00:00:00 GMT+0900 (한국 표준시)
const date2 = new Date(2022, 11, 25, 18, 30, 50); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)

 

-문자열로 생성하는 방법

const date1 = new Date("2022-12-25"); // Sun Dec 25 2022 09:00:00 GMT+0900 (한국 표준시)
const date2 = new Date("2022/12/25/18:30:50"); // Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)

 

● 메서드로 날짜와 시간 정보 가져와서 설정하기

우리에게 익숙한 형식: ‘2022-12-25 18:30:50’.

Date 객체의 인스턴스: ‘Sun Dec 25 2022 18:30:50 GMT+0900 (한국 표준시)’ 

 

get으로 시작하는 메서드: 날짜와 시간 정보를 가져옴.

set으로 시작하는 메서드: 날짜와 시간 정보를 설정.

Date 객체의 메서드

종류	설명
getFullYear()/setFullYear()	연도를 4자리 숫자로 표시합니다.
getMonth()/setMonth()	월을 0부터 11까지의 숫자로 표시합니다(1월 → 0, 12월 → 11).
getDate()/setDate()	일을 1부터 31까지의 숫자로 표시합니다.
getDay()	요일을 0부터 6까지의 숫자로 표시합니다(일요일 → 0, 토요일 → 6).
getTime()/setTime()	1970년 1월 1일 12:00 이후의 시간을 밀리초(1/1000초) 단위로 표시합니다.
getHours()/setHours()	시를 0부터 23까지의 숫자로 표시합니다.
getMinutes()/setMinutes()	분을 0부터 59까지의 숫자로 표시합니다.
getSeconds()/setSeconds()	초를 0부터 59까지의 숫자로 표시합니다.
getMilliseconds()/setMilliseconds()	밀리초를 0부터 999까지의 숫자로 표시합니다.

Date 객체의 인스턴스에 get 메서드를 사용하면 날짜와 시간을 재구성할 수 있음.

const date = new Date(2022, 11, 25, 18, 30, 50); 
const dateFormat = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} 
${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
console.log(dateFormat); // 2022-12-25 18:30:50

 

● 날짜 간격 계산하기

const date = new Date().getTime(); // 1642576421296(코드 실행 시간에 따라 값이 달라짐)

반환 결과를 활용하면 두 날짜 사이의 간격을 구할 수 있음.


Date 객체로 날짜 데이터인 인스턴스를 생성.
const date1 = new Date('2022-12-23');
const date2 = new Date('2022-12-25');

두 인스턴스에 getTime() 메서드를 사용하면 날짜가 밀리초 단위로 반환.
더 큰 숫자인 미래 날짜에서 더 작은 숫자인 과거 날짜를 뺌.
const dateDiff = date2.getTime() - date1.getTime();
const interval = dateDiff / (24 * 60 * 60 * 1000); 
console.log(`두 날짜의 차이는 ${interval}일입니다.`); // 두 날짜의 차이는 2일입니다.

이렇게 구한 밀리초를 24(시간) × 60(분) × 60(초) × 1000(밀리초)로 나누면 두 날짜 사이의 간격을 일수로 환산할 수 있음.

 

3.5수학 연산을 다루는 Math 객체

Math 객체의 주요 메서드

종류	설명
Math.floor()	주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다(내림).
Math.ceil()	주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수를 반환합니다(올림).
Math.round()	주어진 숫자를 반올림한 수와 가장 가까운 정수를 반환합니다(반올림).
Math.random()	0 이상 1 미만의 난수를 반환합니다.

Math 객체는 new 키워드 없이 Math 객체에 바로 메서드를 사용.

const floatNum = 10.52; 
Math.floor(floatNum); // 10
Math.ceil(floatNum);  // 11
Math.round(floatNum); // 11

 

● 난수 구하기

const random = Math.random();
console.log(random); // 0.2982742766551536(실행할 때마다 달라짐)

0 이상 1 미만의 난수를 반환하는데, 그 이상의 난수를 구하고 싶을 땐
주어진 숫자를 내림해서 정수를 반환하는 floor() 메서드를 추가해

function getMaxRandom(max){
  return Math.floor(Math.random() * max) + 1;
}
const maxRandom = getMaxRandom(20); 
console.log(maxRandom); // 0 이상 20 이하의 무작위 정수

 

● 난수의 최솟값

function getMinMaxRandom(min, max){
  return Math.floor(Math.random() * (max - min)) + 1 + min; // 20을 제외하고 싶으면 + 1 삭제
}
const maxRandom = getMinMaxRandom(10, 20);
console.log(maxRandom); // 10 이상 20 이하의 무작위 정수

 

 

 

 

11.4 브라우저 객체 모델 사용하기

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

표준 내장 객체는 자바스크립트에 내장된 객체 but 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체.

 

 

종류	설명
window	웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator	웹 브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체

 

4.2 window 객체의 속성과 메서드

구분		설명
속성	innerWidth	웹 브라우저 화면의 너비를 px(픽셀) 단위로 나타냅니다.
	innerHeight	웹 브라우저 화면의 높이를 px 단위로 나타냅니다.
	outerWidth	웹 브라우저 창의 너비를 px 단위로 나타냅니다.
	outerHeight	웹 브라우저 창의 높이를 px 단위로 나타냅니다.
	screenTop/screenY	웹 브라우저 위쪽 면과 모니터의 간격을 px 단위로 나타냅니다.
속성	screenLeft/screenX	웹 브라우저 왼쪽 면과 모니터의 간격을 px 단위로 나타냅니다.
	pageXOffset/scrollX	웹 브라우저의 수평 스크롤 위치를 px 단위로 나타냅니다.
	pageYOffset/scrollY	웹 브라우저의 수직 스크롤 위치를 px 단위로 나타냅니다.
메서드	alert()	알림창을 표시합니다.
	confirm()	확인창을 표시합니다.
	prompt()	입력창을 표시합니다.
	open()	새로운 웹 브라우저 창을 엽니다.
	close()	웹 브라우저 창을 닫습니다.
	setTimeout()	일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행합니다.
	setInterval()	일정 시간(ms)마다 콜백 함수를 반복적으로 실행합니다.
	clearInterval	setInterval() 메서드로 반복 실행되는 함수를 중지합니다.
	scrollTo()	웹 브라우저의 스크롤을 특정 위치만큼 이동합니다.
	scrollBy()	웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동합니다.

 

4.3 window 객체의 기본 속성 사용하기

 

<body>
  <button onclick="printInfo()">window 객체 속성</button>
  <script>
    function printInfo(){
      console.log(`웹 브라우저의 너비: ${window.innerWidth}`);
      console.log(`웹 브라우저의 높이: ${window.innerHeight}`);
      console.log(`웹 브라우저 창의 너비: ${window.outerWidth}`);
      console.log(`웹 브라우저 창의 높이: ${window.outerHeight}`);
      console.log(`웹 브라우저 창 위쪽 면과 모니터 사이의 간격: ${window.screen Top}/${window.screenY}`);
      console.log(`웹 브라우저 창 왼쪽 면과 모니터 사이의 간격: ${window.screen Left}/${window.screenX}`);
      console.log(`웹 브라우저 창의 스크롤 가로 위치: ${window.scrollX}`);
      console.log(`웹 브라우저 창의 스크롤 세로 위치: ${window.scrollY}`);
    }
  </script>
</body>

 

4.4 웹 브라우저에서 새 창 제어하기

button 태그를 클릭했을 때 popup.html 파일이 새 창에서 열리게 하도록

<body>
  <button onclick="popup()">팝업</button>
  <script>
    function popup(){
      window.open('popup.html', '팝업', 'width=200, height=100');
    }
  </script>
</body>

 

창 제어 속성

속성	예	설명
width	width=400	웹 브라우저의 너비를 px 단위로 지정합니다.
height	height=400	웹 브라우저의 높이를 px 단위로 지정합니다.
left	left=400	웹 브라우저 왼쪽에서의 위치를 px 단위로 지정합니다.
top	top=400	웹 브라우저 위쪽에서의 위치를 px 단위로 지정합니다.

 

 

4.5 웹 브라우저의 스크롤 이동하기

scrollTo() 메서드는 웹 브라우저의 스크롤 위치를 특정 좌표로 이동.

scrollBy() 메서드는 웹 브라우저의 스크롤을 현재 위치에서 상대적인 위치로 이동.

두 메서드는 기본으로 매개변수에 x좌표와 y좌표를 전달받음.

window.scrollTo(x좌표, y좌표);
window.scrollBy(x좌표, y좌표);


window.scrollTo(100, 200); 
window.scrollBy(100, 200);

crollTo() 메서드를 몇 번을 호출하더라도 가로는 100px, 세로는 200px의 위치로 스크롤이 이동.
scrollTo() 메서드 대신에 scrollBy() 메서드를 사용하면,
웹 브라우저 스크롤의 현재 위치에서 상대적인 위치로 움직이기 때문에 메서드를 호출할 때마다
웹 브라우저의 스크롤이 가로 방향으로 100px, 세로 방향으로 200px씩 계속 이동.

 

 

 

 

---

출처

https://www.gilbut.co.kr/book/view?bookcode=BN003377

코딩 자율학습 HTML + CSS + 자바스크립트