Class11(대화 상자)
2022. 05. 17. 수업내용 정리 #2/2
대화상자
-
대화 상자(dialog box)
사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공합니다.
- alert()
- confirm()
- prompt()
-
alert() 메소드
window 객체의 alert() 메소드는 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다립니다.
문법
window.alert("간단한 메시지");사용자는 대화 상자의 확인 버튼을 눌러야만 다른 작업을 진행할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript BOM Dialog Box</title> </head> <body> <h1>alert() 메소드</h1> <button onclick="alertDialogBox()">alert 대화 상자</button> <script> function alertDialogBox() { alert("확인을 누를 때까지 다른 작업을 할 수 없어요!"); } </script> </body> </html>웹페이지 화면 ▼
/대화상자예시1.png)
★ window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window 라는 접두사를 생략할 수 있습니다.
-
confirm() 메소드
window 객체의 confirm() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환합니다.
문법
window.confirm("간단한 메시지");사용자가 확인을 누르면 true를 반환하고, 취소를 누르면 false를 반환합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript BOM Dialog Box</title> </head> <body> <h1>confirm() 메소드</h1> <button onclick="confirmDialogBox()">confirm 대화 상자</button> <p id="text"></p> <script> function confirmDialogBox() { var str; if (confirm("확인이나 취소를 눌러주세요!") == true) { str = "당신은 확인을 눌렀습니다!"; } else { str = "당신은 취소을 눌렀습니다!"; } document.getElementById("text").innerHTML = str; } </script> </body> </html>웹페이지 화면 ▼
/대화상자예시2.png)
-
prompt() 메소드
window 객체의 prompt() 메소드는 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환합니다.
문법
window.prompt("간단한 메시지" + "입력란의 기본 메시지");사용자가 대화 상자에 입력한 텍스트를 문자열 타입으로 반환합니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JavaScript BOM Dialog Box</title> </head> <body> <h1>prompt() 메소드</h1> <button onclick="promptDialogBox()">prompt 대화 상자</button> <p id="text"></p> <script> function promptDialogBox() { var inputStr = prompt("당신의 이름을 입력해 주세요 : ", "홍길동"); if (inputStr != null) { document.getElementById("text").innerHTML = "당신의 이름은 " + inputStr + "입니다."; } } </script> </body> </html>웹페이지 화면 ▼
/대화상자예시3.png)
/대화상자예시4.png)
★ 사용자 측면에서 보면 불편할 수도 있으므로, 대화상자의 사용빈도는 줄이는 것이 좋습니다.
댓글남기기