대화상자
- alter : 경고 대화상자 표시
alert("경고 발생");- prompt : 문자열 입력을 받는 대화상자 표시
var input=prompt("내용을 입력하세요");prompt가 반환하는 값은 문자열로 숫자로 변경시 parseInt를 사용해야 한다.
- confirm : 확인/취소 버튼이 있는 대화상자 표시
var TF= confirm("확인 or 취소");confirm은 true or false를 반환한다.
console
| console.time(var) | 처리 시간 측정용 타이머 시작 |
| console.timeEnd(var) | 처리 시간 측정용 타이머 종료 , ms단위로 출력 |
var answer;
console.time("answer")
var TF= confirm("확인 or 취소");
console.timeEnd("answer")
이벤트 처리기
이벤트 : 사용자가 버튼을 클릭하는 행위같이 단말기와 애플리케이션이 처리할 수 있는 동작
이벤트 주도형 프로그램 : 이벤트 처리기를 미리 등록 후 이벤트 발생 시 실행
이벤트 처리기 : 이벤트가 발생했을 때 실행되는 함수
함수 이벤트 처리기 등록 방법
- HTML 요소의 속성으로 등록
- DOM 요소의 프로퍼티로 등록
- addEventListener 메서드를 사용하여 등록
HTML 요소의 속성 등록
<body>
<input type="button" onclick="btnClick()">
<script>
function btnClick() {
console.log("click!!");
}
</script>
</body>말 그대로 HTML 요소에 이벤트 처리기 속성을 설정하여 이벤트 처리기 등록
장점 : 간단
단점 : HTML 코드와 JS 코드가 뒤섞임
DOM 객체를 통해 등록
- window : 웹 브라우저 전체를 가리킴
- document : html 문서 전체를 가리킴
- 요소 객체 : html 문서의 요소를 가리킴
<body>
<input type="button" id="btnID" value="click me">
<script>
function click(){
console.log("clcik ok");
}
window.onload= function(){
var btn=document.getElementById("btnID");
btn.onclick=click;
}
</script>
</body>window.onload를 통해 HTML 코드를 전부 읽은 후 함수를 실행시킴
'JavaScript' 카테고리의 다른 글
| 제이쿼리(jQuery) 메서드 모음 (0) | 2023.02.02 |
|---|---|
| 함수 (0) | 2023.01.31 |
| JS의 기본개념 (0) | 2023.01.30 |
| addEventListener (0) | 2022.08.06 |
| 객체 (0) | 2022.07.26 |