1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트로 사용자 입력 및 대화</title>
</head>
<body>
<h3>자바스크립트로 사용자 입력 및 대화</h3>
<hr>
<div id="result"></div>
<script>
var result = document.getElementById("result");
 // 프롬프트 다이얼로그, prompt("메세지","디폴트 입력값")
- prompt() 함수는 다이얼로그를 출력하고, 사용자로부터 문자열을 입력받아 리턴한다.
- prompt() 함수는 '메세지'와 '디폴트 입력값'을 출력하며, '디폴트 입력값은' 생략 가능하다.
- prompt() 함수는 사용자가 입력한 문자열을 리턴하지만, 아무 값도 입력되지 않았으면 ""를, 취소 버튼이나 강제로 다이얼로그를 닫은 경우 null을 리턴한다.
 
function promptEX() {
    var ret = prompt("이름을 입력하세요""황기태(디폴트값, 생략가능)");
    if(ret == null) {
           // 취소 버튼이나 다이얼로그를 닫은 경우
           result.innerHTML = "취소나 그냥 닫았군요"
        }
    else {
          // ret에는 사용자가 입력한 문자열
          // 아무 값도 입력하지 않으면, ret=""
           result.innerHTML = ret;
    }
}
// 확인 다이얼로그, confirm("메세지")
- confirm() 함수는 '메시지'와 확인/취소 버튼을 가진 다이얼로그를 출력한다.
- 사용자가 확인버튼/취소버튼을 누르면 true/false를 리턴한다.
 
function confirmEX() {
    var ret = confirm("전송할까요");
    if(ret == true) {
          // 사용자가 "확인" 버튼을 누른 경우
           result.innerHTML ="확인을 눌렀군요";
    }
    else {
          // 취소 버튼이나 다이얼로그가 닫힌 경우
           result.innerHTML ="취소나 그냥 닫았군요";
    }
}
// 경고 다이얼로그, alert("메세지")
- alert() 함수는 다이얼로그를 출력하여 단순히 메세지를 전달한다.
 
function alertEX() {
    alert("클릭하였습니다.");
}
</script>
<button onclick="promptEX()">프롬프트 다이얼로그</button>
<button onclick="confirmEX()">확인 다이얼로그</button>
<button onclick="alertEX()">경고 다이얼로그</button>
</body>
</html>
cs








Posted by 너래쟁이
: