JavaScript 내장 함수인 메소드들

내장 함수인 메소드들

alert와 confirm, prompt은 원래 window.alert()식으로 표현된다
그러나 window객체는 window라는 객체를 생략해서 사용하고 있기 때문에 window객체의 메소드보다는 내장함수로 분류해서 사용한다

시간에 따라 명령을 수행하게 해주는 메소드들

setTimeout(a,b) - a : 함수나 명령어
b : 지연 시간 (1/1000초 단위)
clearTimeout(a) - setTimeout()으로 설정한 내용을 중지한다

시간에 따라 반복하여 명령을 수행하는 메소드들

A = setInterval(a,b) - a : 함수나 명령어
b : 지연 시간 (1/1000초 단위)
clearInterval(A) - 변수 A에 정의된 setInterval()의 실행을 중지

사용예) 시계만들기

다음 내용을 <head>태그 사이에 입력한다
<head>
    <title>시계만들기</title>
<script language = "JavaScript">
    function start_clock() 
    {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var date = now.getDate();

        if(seconds < 10) seconds = "0" + seconds;
        if(minutes < 10) minutes = "0" + minutes;
        if(date < 10) date = "0" + date;
        if(hours < 12) minutes = minutes + " A.M ";
            else if(hours >= 12) minutes = minutes + " P.M "
        if(hours == 0) hours = hours + 12; 
            else if(hours > 12) hours = hours - 12;
            
        var time = hours + ":" + minutes + ":" + seconds; 
        document.time_form.clock.value = time;
        setTimeout("start_clock()", 100);
    }
</script>
</head>

앞에 입력했던 start_clock()함수를 실행하는 이벤트 핸들러를 <body>태그에 삽입한다. onload="start_clock"를 입력
<body background="back4.jpg" onLoad ="start_clock()">

다음 소스를 <bady>태그 사이 시계를 삽입할 위치에 입력한다
    <form name = "time_form">
        <input name = "clock" size = "12" value = "   TIME  ">
    </form>

사용예) 그림이 커졌다 작아졌다 변하게 만들기

다음 내용을 <head>태그 사이에 입력한다

<head><title>크기가 변하는 그림</title>
<script language="JavaScript"> 
    var b = 1; 
    var c = true; 
    var img_width =600;
    var img_height =413;
    
    function fade(){ 
        if(c == true) b++ 
        if(b==100) {b-- ; c = false } 
        if(b==10) {b++; c = true; } 
        if(c == false) b-- 
        u.width=img_width + b; 
        u.height=img_height - b; 
        setTimeout("fade()",50); } 
</script>
</head>

앞에 입력했던 fade()함수를 실행하는 이벤트 핸들러를 <body>태그에 삽입한다.
onload="fade()"를 입력 다음 소스를 <bady>태그 사이에 효과를 적용할 그림을 삽입한다.
효과를 적용할 그림을 선택하기 위해서는 <img> 태그에 'u'라는 name속성을 사용한 후, 자바스크립트에서 제어한다.
    <center><img src="bt.jpg" name="u" border="1"></center>
    
<body onLoad="fade()">
    <center><img src="bt.jpg" name="u" border="1"></center>
</body>

윈도우 창 속성을 설정해 주는 window 객체 메소드

문서를 프린트해주는 메소드
print() : 현재 열려있는 문서를 인쇄한다

사용예)

비천무.html문서를 불러와 "인쇄하기" 실행 단추에 입력한 내용을 다음과 같이 수정한다.
  
<input type="button" value="인쇄하기" onClick="window.print()">

윈도우 창 크기를 조절해 주는 메소드들

resizeBy(a,b) - a : 변경할 가로 길이(픽셀)
b : 변경할 세로 길이(픽셀)
resizeTo(a,b) - 가로a, 세로b 만큼 창의 크기를 설정

사용예)

창크기를 조절할 단추를 두개 만든다.

<body>
<form>
    <input type="button" value="축소하기" onclick="window.resizeBy(-50,-50)">
    <input type="button" value="600*460크기" onclick="window.resizeTo(600,460)">
</form>
</body>

이벤트 핸들러를 사용하여 "축소하기" 단추에는 resizeBy 핸들러를 "600*460크기" 단추에는 resizeTo 핸들러가 실행되도록 한다.

    <input type="button" value="축소하기" onclick="window.resizeBy(-50,-50)">
    <input type="button" value="600*460크기" onclick="window.resizeTo(600,460)">

창 위치를 조절해주는 메소드들

moveBy (a,b) - a : 이동할 가로 길이(픽셀)
b : 이동할 세로 길이(픽셀)
moveTo (a,b) - 화면 왼쪽 상단을 기준으로 창의 위치를 가로 a, 세로 b 만큼 이동

사용예)

창위치를 조절할 단추를 두개 만든어 메소드를 적용한다

<body>
<form>
    <input type="button" value="오른쪽으로 이동하기" onclick="window.moveBy(200,0)">
    <input type="button" value="왼쪽 상단에 정렬하기" onclick="window.moveTo(0,0)">
</form>
</body>

문서를 스크롤 해주는 메소드들

scrollBy (a,b) - a : 스크롤할 가로 길이(픽셀)
b : 스크롤할 세로 길이(픽셀)
resizeTo (a,b) - 화면 좌측 상단을 기준으로 가로a 또는 세로b 만큼 윈도우 내용을 스크롤

사용예)

자우림.htm을 불러온 다음 <input> 태그 안에 이벤트 핸들러를 사용해서 단추를 클릭하면 
화면 아래로 2500픽셀 만큼 스크롤 하도록 내용을 입력

    <input type="button" value="문서 스크롤" onclick="scrollBy(0,2500)">

사용예) 문서를 자연스럽게 스크롤하게 만들기

자우림.htm을 불러온 다음 <head>태그 사이에 다음 내용을 입력한다
<head>
    <title>자우림</title>
    <script language="javascript">
        function scr()
        {
            scrollBy(0,10)
            setTimeout('scr()',100)
        }
    </script>
</head>
  
다음 내용을 <bady>태그 안에 문서가 열릴 경우에 동작하게 해주는 이벤트 핸들러를 입력한다

<body bgcolor="#76006C" text="black" link="blue" vlink="purple" alink="red" onload="scr()">