웹브라우저를 대상으로 하여 외관으로 보이는 외형이나 내부에 저장된 각종 속성들을 조정하고 싶다면 자바스크립트가 제공하는 그에 관련된 객체들을 이용하여 조정하고 컨트롤 한다.
자바스크립트에서는 윈도우나 웹브라우저 등을 객체로 정의해서 그 안에 여러 구성요소들을 멤버변수나 멤버 메서드로 접근하고 조정할 수 있게 각종 객체를 제공한다.
BOM이란 자바스크립트 내에 내장되어 있는 웹브라우저와 관련된 객체들의 집합을 의미
window, screen, location, navigator, history, document 등
브라우저 기반 자바스크립트 최상위 객체
alert(), prompt(), confirm() 함수 모두 window 객체의 메서드(함수)
원래의 사용은 window.alert() window.prompt() 라고 써야 하지만 편의상 또는 현재 위치가 window객체 내부이기때문에 window. 을 생략하고 사용
window.open() 팝업창 생성 메서드
: window 내의 사용빈도 수가 높은 메서드 중 대표적
명령형식
: window.open(팝업창에 표시될 페이지 또는 주소, 팝업창이름, 옵션)
팝업창에 표시될 페이지이름(경로포함) 또는 사이트의 주소
: '04_Loop.html' , 'https://www.naver.com' 등
팝업창 이름
: 스크립트내부에서 팝업창끼리 구분할 이름 - 'child' 같은 별칭
옵션
: 'width=600, hight=480'과 같은 팝업창 속성들. 가로 세로 크기 등
: " " 또는 ' ' 안에 여러 요소들 (,)컴마로 구분하여 설정하고자 하는 요소를 모두 넣는다
실제 팝업창 메서드 실행 예
window.open('https://www.daum.net', 'child1', 'width=600, height=480, left=100, top=100');
window.setInterval()
: 일정 시간 간격으로 지정한 동작 또는 함수를 호출 실행
window.setInterval( 동작을 담고 있는 익명함수 또는 선언적 함수 이름, 시간 간격 );
시간간격 : 1000 -> 1초
사용 예)
window.setInterval( function(){ child.moveBy(50, 50); }, 1000 );
작성순서
var output = ' ';
for(var key in window){
// 객체 내의 속성 key 값을 객체에 적용하여 반복실행
output += '<h2>※ ' + key + ' : ' + window[key] + '</h2>' ;
// window['변수이름']이라고도 쓴다. key는 String데이터를 담는 변수이고,
// window 내 멤버변수들의 이름들이 key변수에 하나씩 담기면서 반복 실행
}
// 객체 안의 모든 멤버 변수(key)가 담고 있는 값(window[key])들을
// 모두 출력할 때 이와 같은 반복실행을 사용한다.
document.write(output);
브라우저의 주소 표시줄과 관련된 객체
프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보를 가짐
페이지를 링크나 주소창을 이용하지 않고 이동할 때 많이 사용
<body>
<input type="button" value="다음으로 이동"
onclick="location.href = 'https://www.daum.net'">
<input type="button" value="네이버로 이동" onclick="moveNaver();">
</body>
태그에 설정된 마우스 또는 그 외 이벤트에 자바스크립트 함수를 연결해서 원하는 동작이 실행되게 한다.
자바스크립트에서 body 내의 태그 하나를 id값을 이용해서 콕집어내는(selector) 명령 ➡️ document.getElementById("아이디값")
css에서 #img1
한 것처럼 자바스크립트에서 id가 'img1'인 태그를 선택하는 명령이다.
이벤트
주어진 코드
<img src="images/1.jpg" id="target">
changeImg 함수 만들기
img태그의 onclick이벤트 속성에 changeImg2() 함수 호출하기
changeImg2() 코드 🔽
<body onload="start();">
<img src="images/1.jpg" id="target"
onmouseout="start();" onmouseover="stop();">
</body>
body 태그의 onload이벤트에서 start()함수를 호출해서 로딩되자마자 바로 이미지 변경이 시작되게 하기
onmouseover="stop();
를 타겟되는 이미지에 속성추가해서 마우스가 태그 위에 있을 때는 이미지 변경이 멈추도록 하기
window.clearInter(setInterval을 담은 변수);
를 사용onmouseout="start();"
를 이용해서 마우스가 태그위에서 빠져나가면 이미지 변경이 다시 시작되도록 하기한 개의 타이머는 시계방향으로 0.5초마다 20도씩 회전하는 동작을
또 한 개의 타이머는 반시계방향으로 0.5초마다 20도씩 회전하는 동작을
onMouseOver와 onMouseOut 이벤트에 연결하여 코딩
자바스크립트에서 사용하는 css의 rotate 명령 사용법
document.getElementById("id값").style.webkitTransform = 'rotate(회전각도deg)';
document.getElementById("id값").style.webkitTransform = 'rotate(회전각도deg)'
<div id="view">
가장 왼쪽 이미지 보일 때 ⇒ 좌측 버튼 작동 X
가장 오른쪽 이미지 보일 때 ⇒ 우측 버튼 작동 X
끝 이미지에서 움직여서 흰 화면 나오면 안됨!!
양 끝에서는 같은 방향 버튼이 작동 안되어야 함