window ----- document ----- form ----- button
image checkbox
title radio
select
history p,h,~~
location
navigator
screen
.window객체
- 창에 대한 전반적인 상황을 제어하는 최상위 객체이다
- 자바스크립트에서 수행되는 모든 작업을 처리해준다.
- open( ) : 새창열기
(방법) window.open('함수|페이지|url', '이름', '사양지정')
- 속성 : width, height, left, top, resizable,
location, menubar, scrollbars, toolbar
- setTimeout(), setInterval() 함수나 페이지 또는 url을 호출하는 메소드
. BOM객체는 아직 100% 표준화되어 있지 않다.
<script type="text/javascript">
function winOpen(){
let w = window.open('http://www.naver.com/','내가 만든 창', 'width=400, height=550, left=800, top=800').moveBy(-100,-300);
}
</script>
</head>
<body onload='winOpen()'>
<h3>윈도우 open에 대한 메소드학습</h3>
<p>window.open("파일명|함수:url","새로운 창의 이름","창의 옵션 설정")</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>여기는 새로운 페이지입니당<br>ㅇㅅㅇ</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>창닫기</title>
<script type="text/javascript">
function winClose(){
ans = confirm('창을 닫으시겠습니까?');
if (ans){
window.close();
}
}
</script>
</head>
<body>
<p align="center"><img src="../img/rol4.png" width="300" height="300"></p>
<p align="center"><input type="button" value="창닫기" onclick='winClose()'></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function naver(){
let n = window.open('http://www.naver.com/', 'width=400, height=550, left=100, top=200');
}
function daum(){
let d = window.open('http://www.daum.net/', 'width=400, height=550, left=600, top=400');
}
function winClose(){
let c = window.close();
}
</script>
</head>
<body onload='winOpen()'>
<p align="center"><input type="button" value="네이버" onclick='naver()'><br></p>
<p align="center"><input type="button" value="다음" onclick='daum()'><br></p>
<p align="center"><input type="button" value="창닫기" onclick='winClose()'><br></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 객체만들기 - 생성자함수 생성
function WinOpenWithOption(str) {
this.str = str;
//메소드
this.winOpen1 = winOpen1;
this.winOpen2 = winOpen2;
this.winfullOpen = fullOpen;
}
function winOpen1() {
window.open('https://www.naver.com','네이버'); //옵션이 없으면 기본값으로 설정한다.
}
function winOpen2() {
window.open('https://www.daum.net','다음','width=500','height=300','left=500,top=0');
}
function fullOpen() {
window.open('../img/cat5.gif','이미지','fullscreen');
}
</script>
</head>
<body>
<script type="text/javascript">
function winStart() {
btn = confirm("창을 열겠습니까?");
if (btn = true) {
//객체를 생성
let a = winOpen1();
let b = winOpen2();
//객체의 메소드를 이용해서 창을 연다.
document.write(a);
document.write(b);
}
else{
let c = fullOpen();
document.write(c);
}
}
</script>
<p><input id="btn" type="button" value="창을 열까요?" onclick="winStart()"></p>
</body>
</html>(1회 호출)
let timerID = setTimeout('호출함수', 지연시간) - 설정 <함수호출>
clearTimeout(timerID) : 해제
(여러번 호출)
let timerID = setInterval('호출함수',지연시간);
clearInterval(timerID); 해제
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>오늘은 금요일! 즐거운 시간 보냅시당ㅎㅅㅎ</h3>
<hr>
<div>
<span id='span' style="background-color:yellow">자바스크립트가 재밌어요!</span>
</div>
<script type="text/javascript">
let span = document.getElementById('span');
let timerID = setInterval('f()',200); //생성
function f() {
let str = span.innerHTML;
let firstChar = str.substr(0,1); //첫번째 문자 추출
let remains = str.substr(1,str.length-1); //나머지 문자들
str = remains + firstChar;
span.innerHTML = str;
}
span.onclick = function (e) {
clearInterval(timerID); // 중지
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>이미지에 마우스를 올리고 5초간 그대로 있으면 지정된 사이트로 이동합니다</h3>
<hr>
<img id='img' src="../img/ku2.jpg"
onmouseover="startTimer(5000)"
onmouseout='cancelTimer()'><br>
<a href = "javascript:load('http://www.disneyworld.com')">현재 윈도우에 URL사이트를 로드</a>
<script type="text/javascript">
let timerID = null;
function startTimer(time){
timerID = setTimeout("load('http://www.naver.com')",time);
document.getElementById('img').title='타이머를 작동합니다♡';
}
function load(url){
window.location = url;
}
function cancelTimer(){
if(timerID != null){
clearTimeout(timerID);
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function startScroll(interval){
setInterval("autoScroll()", interval);
}
function autoScroll(){
window.scrollBy(0,10);
}
</script>
</head>
<body onload='startScroll(1000)' style="background-color:#FAF0E6 ">
<h3>자동 스크롤 페이지</h3>
<hr>
<h3>꿈길(이동순)</h3>
꿈길에 발자취가 있다면<br>
님의 집 창밖<br>
그 돌계단 길이 이미 오래 전에<br>
모래가 되고 말았을 거예요<br><br>
하지만<br>
그 꿈길에서 자취 없다 하니<br>
나는 그것이 정말 서러워요<br><br>
이 밤도<br>
나는 님의 집 창밖<br>
그 돌계단 위에 홀로 서서<br>
혹시라도 님의 목소리가 들려올까<br>
고개 숙이고 엿들어요<br>
</body>
</html>
눈송이 한 개 떨어뜨리기
<html>
<head>
<meta charset="UTF-8">
<title>눈송이 한개 떨어뜨리기</title>
<style type="text/css">
div {position: absolute; background-color: white;
margin: 0; padding: 0; text-align: center;}
#snow{font-size: 30px; color:#DB7093; font-weight: bolder}
</style>
<script type="text/javascript">
let check = 0;
let snow;
function fSnow() {
snow = document.getElementById('snow');
timerID = setInterval('fall()', 10);
}
function fall() {
snow.style.top = parseInt(check) + 'px';
check++;
if(check == innerHeight)
{
check = 0;
}
}
</script>
</head>
<body onload = 'fSnow()'>
<div id = 'snow' style="top: 0">*</div>
</body>
</html>눈송이 여러개 떨어뜨리기
<html>
<head>
<meta charset="UTF-8">
<title>눈 내리기</title>
<script type="text/javascript">
let snow1, snow2, snow3, snow4, snow5;
let timerID1, timerID2, timerID3, timerID4, timerID5;
let check = new Array();
for(i = 0; i < 5; i++)
{
check[i] = 0;
}
function snow()
{
snow1 = document.getElementById('snow1');
snow2 = document.getElementById('snow2');
snow3 = document.getElementById('snow3');
snow4 = document.getElementById('snow4');
snow5 = document.getElementById('snow5');
timerID1 = setInterval('fall1()', 10);
timerID2 = setInterval('fall2()', 10);
timerID3 = setInterval('fall3()', 10);
timerID4 = setInterval('fall4()', 10);
timerID5 = setInterval('fall5()', 10);
}
function fall1()
{
snow1.style.top = parseInt(snow1.style.top.substr(0, 1)) + parseInt(check[0]) + 'px';
check[0]++;
if(check[0] == 901)
{
check[0] = 0;
}
}
function fall2()
{
snow2.style.top = parseInt(snow2.style.top.substr(0, 1)) + parseInt(check[1]) + 'px';
check[1] = check[1] + 2;
if(check[1] > 901)
{
check[1] = 0;
}
}
function fall3()
{
snow3.style.top = parseInt(snow3.style.top.substr(0, 1)) + parseInt(check[2]) + 'px';
check[2] = check[2] + 0.5;
if(check[2] > 901)
{
check[2] = 0;
}
}
function fall4()
{
snow4.style.top = parseInt(snow4.style.top.substr(0, 1)) + parseInt(check[3]) + 'px';
check[3] = check[3] + 0.2;
if(check[3] > 901)
{
check[3] = 0;
}
}
function fall5()
{
snow5.style.top = parseInt(snow5.style.top.substr(0, 1)) + parseInt(check[4]) + 'px';
check[4] = check[4] + 1.5;
if(check[4] > 901)
{
check[4] = 0;
}
}
</script>
</head>
<body onload="snow()">
<div id='snow1' style="left: 300px; top: 0; position: absolute;">*</div>
<div id='snow2' style="left: 600px; top: 0; position: absolute;">*</div>
<div id='snow3' style="left: 900px; top: 0; position: absolute;">*</div>
<div id='snow4' style="left: 1200px; top: 0; position: absolute;">*</div>
<div id='snow5' style="left: 1500px; top: 0; position: absolute;">*</div>
</body>
</html>