대화 상자(dialog box) :
window 객체는 사용자에게 보여줄 수 있는 간단한 대화 상자를 하기와 같이 제공한다. 원래는 window.대화상자() 이렇게 써야 하는데 window라는 접두사를 생략하고 사용 한다.
① alert("메세지") : alert() 메소드는 입력한 메시지를 보여주고, 그에 대한 사용자가 확인 버튼을 누를 때 까지 기다린다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function alert() {
alert("이게바로 alert!! ");
}
</script>
</head>
<body>
<input type="button" value="확인" onclick="alert()">
</body>
</html>
② confirm("메세지") : 사용자에게 메시지를 보여주고, 확인은 true, 취소는 false로 그 결과를 boolean 값으로 반환한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function confirmex() {
var str;
if (confirm("확인은 true 취소는 false") == true) {
str = "확인은 true";
} else {
str = "취소는 false";
}
document.getElementById("text").innerHTML = str;
}
</script>
</head>
<body>
<h1>confirm() 메소드</h1>
<button onclick="confirmex()">confirm 대화 상자</button>
<p id="text"></p>
</body>
</html>
③ prompt("메세지") : 사용자에게 메시지를 보여주고, 사용자가 입력한 문자열을 반환한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function promptex() {
var id = prompt("아이디를 입력하세요 : ", "");
if (id != null) {
document.getElementById("text").innerHTML = "아이디는" + id + "입니다.";
}
}
</script>
</head>
<body>
<button onclick="promptex()">prompt</button>
<p id="text"></p>
</body>
</html>
'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - value값 가져오기 (0) | 2023.03.25 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - 구구단 테이블 만들기 (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 함수(function) (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - var, let, const 차이 (1) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 자바스크립트 (0) | 2023.03.22 |
