Recent Posts
Recent Comments
Link
Tags more
06-30 12:53
Today
Total
관리 메뉴

삶 가운데 남긴 기록 AACII.TISTORY.COM

javascript 브라우저 입출력 본문

DEV&OPS/Javascript

javascript 브라우저 입출력

ALEPH.GEM 2022. 2. 21. 17:01

window 객체의 대화 상자

//인수로 문자열을 받아 경고 대화 상자를 표시
alert("경고");

//인수로 질문 제목을 받아 문자열을 입력 받는 대화상자를 표시
prompt("입력 하세요.");

//인수로 확인 제목을 받아 '확인' , '취소' 버튼이 있는 대화 상자를 표시
//확인 을 누르면 true가 리턴되고 취소를 누르면 false가 리턴됩니다.
confirm("실행 하시겠습니까?");

 

console 객체

주요 메서드

console.error() 오류 메시지 출력
console.info() 메시지 타입 로그 출력
console.log() 일반 로그 출력
console.time() 처리 시간 측정용 타이머 시작
console.timeEnd() 처리 시간 측정용 타이머 정지시키고 흐른 시간 밀리 초 출력
console.trace() 스택 트레이스 출력
console.warn() 경고 메시지 출력

 

이벤트 처리기(event handler)

이벤트 처리기를 자바스크립트에서는 함수로 등록 할 수 있습니다. 

<!-- html 에 이벤트 핸들러 등록하기 -->
<input type="button" value="click" onclick="display()">

※ 자세한 이벤트 들은 자바스크립트 레퍼런스 문서를 참고 하시기 바랍니다.

//DOM을 이용하여 이벤트 핸들러 등록하기
//흔히 익명 함수로 등록합니다.
window.onload = function(){
    //element 가져오기
    var button = document.getElementById("button");
    //이벤트에 대해 핸들러를 등록
    button.onclick = display();
}
브라우저는 html문서를 위에서부터 차례대로 해석하면서 표시합니다.
도중에 스크립트를 만나면 블로킹(동기실행)하여 스크립트를 실행하고 나머지 html을 해석합니다. 
즉, 스크립트 작업이 끝나기 전까지 html 해석이 멈추는 것입니다.
// 이벤트 핸들러의 제거
button.onclick = null;

 

setTimeout()

지정한 시간이 흐른 뒤 함수를 실행합니다.

setTimeout(function(){ console.log(new Date()); }, 1000);

 

setInterval()

지정된 시간마다 반복해서 실행합니다.

setInterval(function(){ console.log(new Date()); }, 1000);

첫번째 인수를 문자열로 작성하면 eval()으로 변환되어 실행됩니다.

 

innerHTML

innerHTML을 이용해서 html element의 태그 안의 내용(태그 포함)을 읽거나 쓸 수 있습니다.

<!DOCTYPE html>
<html>

<head>
    <title> 스톱 워치</title>
    <script>
        window.onload = function(){
            var startButton = document.getElementById("start");
            var stopButton = document.getElementById("stop");
            var display = document.getElementById("display");
            var startTime;
            var timer;

            /*스타트 버튼 활성화*/    
            startButton.onclick = start;

            function start(){
                startButton.onclick = null;     /*스타트버튼 비활성*/
                stopButton.onclick = stop;      /*스톱버튼 활성화*/
                startTime = new Date();
                timer = setInterval(function(){
                    var now = new Date();
                    /*innerHTML으로 태그 안에 값을 일고 쓸 수 있습니다.*/
                    /*toFixed(2) 나눗셈 결과를 소수점 2자리로 고정시켜 String으로 리턴*/
                    display.innerHTML = ((now - startTime)/1000).toFixed(2);    
                },10);
            }

            function stop(){
                clearInterval(timer);           /*타이머 해제*/
                startButton.onclick = start;    /*스타트버튼 활성화*/
            }
            
            /*태그의 value 값을 읽어올 수 있습니다.*/
            console.log(document.getElementById("start").value);
            console.log(document.getElementById("stop").value);
        };
    </script>
</head>

<body>
    <span id="display">0.00</span>
    <br>
    <input id="start" type="button" value="시작">
    <input id="stop" type="button" value="정지">

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

728x90
저작자표시

'DEV&OPS > Javascript' 카테고리의 다른 글

javascript 함수2  (0) 2022.02.21
javascript 함수  (0) 2022.02.21
javascript Expression  (0) 2022.02.21
javascript object  (0) 2022.02.21
javascript ECMAScript 6에 추가된 데이터 타입  (0) 2022.02.21
'DEV&OPS/Javascript' Related Articles more