<script>
/*
브라우저 객체모델(Browser Object Model)
BOM은 웹브라우저와 관련된 객체의 집합객체를 의미한다.
BOM은 window > screen, location, navigator, history, document가 있다.
간단하게 문서객체모델(DOM, Document Object Model)이라 통합해서 부르기도 한다.
*/
document.write(typeof window + '='+ window, '<br>');
for(let key in window){
document.write(`${key} = ${window[key]}<br>`);
}
window.alert('경고창함수는 window객체의 매서드 중 하나이다');
/*
window 객체는 브라우저 기반의 모델에서 최상위 객체이다.
alert, prompt 등의 함수는 모두 window 객체의 매서드이다.
window객체의 매서드
1. open() : 새로운 window객체를 생성
a. url : url주소
b. width, height : 윈도우의 크기
c. child : 자식창(별도의 창)
d. location, menubar, resizeable, status, toolbar(yes, no/ 1, 0)
2. moveBy(x, y) : 윈도우를 상대위치로 이동
3. moveTo(x, y) : 윈도우를 절대위치로 이동
4. resizeBy(x, y) : 윈도우를 상대적으로 크기 조정
5. resizeTo(x, y) : 윈도우를 절대적으로 크기 조정
6. scrollBy(x, y) : 스크롤바를 상대 위치로 이동
7. scrollTo(x, y) : 스크롤바를 절대 위치로 이동
8. focus() : 윈도우에 초점을 이동
9. blur() : 윈도우에서 초점을 제거
10. close() : 윈도우를 닫음
*/
//window.open('http://www.google.com', 'child', 'width=200 height=200');
let childWindow = window.open('','', 'width=300 height=300');
// childwindow.moveTo(0,0);
childWindow.document.write('<h1>window.open(), 메서드</h1>');
// childWindow.setInterval("moveBy(10,10)", 1000);
childWindow.setInterval("moveBy(10, 10)", 1000);
</script>
<script>
/*
screen 객체
웹브라우저의 화면(window객체)이 아니라 운영체제화면의 속성을 갖는 객체이다.
가장 많이 사용되는 속성은 width, height이다.
*/
for(let key in window){
document.write(`${key} = ${window[key]}<br>`);
}
let child = window.open('', '', 'width = 300 height = 300');
let width = screen.width;
let height = screen.height;
child.moveTo(0,0);
child.resizeTo(width, height);
//실습. 상대위치를 moveBy(10, 10), resizeBy(-20,-20) 조정하는 setInterval, 1초씩
child.setInterval("moveBy(0,0), resizeBy(-20, -20)", 1000);//내 답
setInterval(() => {
child.resizeBy(-20, -20);
child.moveBy(10, 10)
},1000);
</script>
<script>
/*
location객체
웹브라우저의 주소표시줄과 관련된 객체이다.
location객체는 프로토콜의 종류, 호스트이름, 문서의 위등의 정보를
제공하는 객체이다.
1. 사용방법
location = 'http://www.google.com';
location.href = 'http://www.google.com'; -> 주로 사용
location.assign ('http://www.google.com');
location.replace ('http://www.google.com');
2. 매서드
assign(link) : 현재위치를 link위치로 이동
reload() : 새로고침
replace(link) : 현재위치를 link로 이동, 뒤로가기 버튼을 사용할 수 없다.
3. 속성
href = url 주소
host = host이름과 port번호 : www.naver.com:8000, localhost:8000
hostname = localhost, wwwo.google.com
port = 포트번호
pathname = 디렉토리 경로
hash : 앵커이름(#~)
search : 요청된 매개변수 ?id=hong&pw=12345
protocol: 프로토콜의 종류 http, ftp, file...
*/
for(let key in location){
document.write(`${key} = ${screen[key]}<br>`)
}
</script>
<script>
/*
navigator 객체
웹페이지를 실행하고 있는 웹브라우저에 대한 정보를 제공하는 객체
appCodeName : 웹브라우저의 코드명
appName : 웹브라우저의 이름
appVersion : 웹브라우저의 버전
platform : 사용중인 운영체제
userAgent : 웹브라우저의 전체적인 정보
*/
for(let key in navigator){
document.write(`${key} = ${navigator[key]}<br>`);
}
</script>
<script>
/*
window.onload 이벤트
이벤트란? 문서객체의 속성 중에 'on'으로 시작되는 속성을 이벤트속성이라고 한다.
이벤트속성은 null값이 저장되어 있어 해당 이벤트를 사용하려면 이벤트 속성에 사용자가
원하는 기능(function)을 정의해야 한다.
window 객체의 onload는 window객체가 로드가 완료가 되면 자동으로 할당된 함수를 실행한다.
즉, html 페이지에 존재한 모든 태그가 메모리에 로딩이 완료되는 직후에 onload에 할당된
함수를 실행하라는 의미이다.
*/
window.onload = () =>
alert('1st process');
</script>
</head>
<body>
<h1>2nd process</h1>
<script>alert ('2nd process')</script>
<h1>3rd process</h1>
<script>alert ('3rd process')</script>
</body>
'일 > javascript' 카테고리의 다른 글
| js08_events (1) | 2023.06.01 |
|---|---|
| js07_DOM (0) | 2023.06.01 |
| js05_object (0) | 2023.05.31 |
| js04_function (0) | 2023.05.31 |
| js03_for (0) | 2023.05.31 |