BOM 과 DOM
DOM (Document Object Model) : HTML 문서를 객체로 표현한 것
BOM (Browser Object Model) 브라우저 객체 모델 : 웹브라우저를 객체로 표현한 것
-웹브라우저가 가지고 있는 모든 객체
- 최상위 객체는 window 이고
그 아래로 navigator, location, history, creen , document, frames 객체가 있다.
window 객체
open() 새로운 창을 연다
close() 열려진 창을 닫는다
alert() 내용을 나타내는 경고 창이 뜬다
confirm() 사용자의 대답을 확인하는 창이 뜬다
prompt() 메시지와 초기값을 나타내고 새로운 값을 입력할 수 있는 창이 뜬다.
setTimeout(function , millisecond) : 주어진 시간이 경과하면 지정된 함수가 호출되어 실행
setInterval(function , millisecond) : 주어진 시간이 경과할 때마다 계속해서 반복적으로 지정된 함수가 호출되어 실행된다.
clearInterval(id변수) : setInterval() 메소드를 종료시킨다 id변수는 A=setInterval() 에서 A값이 id변수로 들어간다.
즉 A = setInterval(function, millisecond) clearInterval(A) 이렇게
moveTo(x, y) 절대적인 위치 x와 y로 이동
moveBy(dx, dy) 상대적인 위치로 x와 y값 만큼 이동
resizeTo(x, y) x와 y값으로 창의 크기를 재조정
resizeBy(dx, dy) 현재 크기에서 x와 y 값 만큼 크기를 재조정
scrollTo(x, y) 스크롤을 x와 y로 이동
scrollBy(dx, dx) 스크롤을 x와 y값 만큼 이동
opener open () 을 통해 새로운 창을 열었을 때 그 창을 자식창이라 한다면 자식창에서 부모창을 가리킬 때 opener 라 한다
윈도우창 열기 : window.open(URL, name, specs) ;
url : 오픈할 페이지의 url
name : 타겟(target) 을 지정하거나 윈도우의 이름
spects : 여러가지 속성
open(url, name, specs);예시
<script>
function openPopup() {
open("hrrp://www.google.co.kr" , "_blank" , "width=200, height=200);
}
</script>
<body>
<input type="button" value="구글창 열기" onclick="openPopup();"
</body>
open(url, name, specs);예시2)
<script>
function proc1() {
window.open("windowsub.html", "_blank" , "top=100 left=200" , "width= 400 height = 300 " );
}
</script>
<body>
<input type="button" value="확인" onclick="proc1()">
</body>
setTimeout()
setTimeout(function , millisec)
function : 호출되는 함수의 이름 호출되는 함수를 여기서 직접 정의도 가능
millisec : 함수를 호출하기 전에 흘러야 하는 시간.
*1000은 1초
setTimeout() 예제
<script>
function showAlert(){
setTimeout(function () { alert("setTimeout() 을 사용하여 표시됩니다.") } , 3000 ) ;
</script>
<body>
<button onclick="showAlert()">눌러보세요</button>
</body>
색깔 변경하기 예제
1) setTimeout 은 한번만 변경이 된다. (반복 x )
<script>
function1() {
setTimeout(function() {
document.getElementById('result1').style.background = 'yellow';
} , 1000 ) ;
}
</script>
<body>
<div class="box">
<input type= "button" value="확인" onclick="proc1()"><br><br>
<div id="result1"></div>
</div>
</body>
2) 색상변경 시작하고 반복하다가 버튼으로 종료하기까지
<script>
function proc2(this){
//색상 지정
//rgb ( 240, 128, 200 )
//rgb(100 % , 56% , 89% )
//#fdf1d4
this.style.display = "none"; // 확인버튼을 누른뒤 확인 버튼을 없애주는 것
A = setInterval( function() {
console.log(A) ;
r = Math.floor(Math.random() * 256 ) ;
g = Math.floor(Math.random() * 256 ) ;
b = Math.floor(Math.random() * 256 ) ;
// document.getElementById('result2).style.background = `rgb ( ${r} , ${g}, ${b} ) `;
//또는
cr = r.toString(16) ; //16 진수로 바꿔준것
cg = g.toString(16) ;
cb = b.toString(16);
//document.getElementById('result2').style.background = "#" + cr + cg + cb ;
document.body.style.background = "#" + cr + cg + cb ; p//배경 색이 변경된다.
} , 1000 ) ;
}
function proc3(this) {
//위에있던 A = setInterval 지움
ClearInterval(A);
document.getElementById('start').style.display = "inline";
//확인버튼을 누르면 배경색이 계속 변경, 취소버튼누르면 proc3 가 호출되서 clearInterval(A) 되면서 멈춤 지금은 취소버튼만 있는 상태라서 확인버튼을 다시 나타 나게 해줌
}
</script>
<body>
<div class="box">
<input id="start" type="button" value="확인" onclick="proc2(this)">
<input id="stop" type="button" value="종료" onclick= "proc3(this)">
<div id="result2"></div>
<div>
<body>
3) 이미지를 setInterval(function , millisce) 으로 출력하기
<script>
function proc4(this) {
this.style.display = "none" ;
img = [ "../images/가가캐나다.jpg", "../images/단풍.jpg",
"../images/맥북에어2.JPG", "../images/이탈리아.jpg",
"../images/뱅쇼.jpg", "../images/아이패드그림.JPG",
"../images/영화1.jpg", "../images/카라멜마키아또.jpg",
"../images/아이폰.jpg", "../images/애플로고1.jpg" ] ;
//1초마다 한번씩 이미지 변경
b = setInterval(function() {
idx = Math.floor(Math.random() * imgs.length ) ;
vimg = document.getElementsByTagName('img')[0];
vimg.src = imgs[idx]; //요소 추가
//<img src="" alt=""> 이것을 위에처럼 쓴거다.
start = imgs[idx].lastIndexOf("/") + 1 ;
end = imgs[idx].lastIndexOf(".");
imgs[idx].slice(start, end);
vimg.alt = imgs[idx].slice(start, end) ;
} , 1000 ) ;
</script>
<body>
<div class="box">
<h3>setInterval</h3>
<input id="start2" type="button" value="확인" onclick="proc4(this)">
<input id="stop2" type=
</div>
</body>
댓글
댓글 쓰기