개발일지/JavaScript + jquery
[JavaScript] 대화상자 Dialog Box
연습용365
2021. 11. 10. 17:42
대화상자(DialogBox)
alert()메소드
사용자에게 간단한 메세지를 보여주고, 그것에 대한 사용자의 확인을 기다림
<body>
<h1>alert() 메소드</h1>
<button onClick="alertDialogBox();">alert대화상자</button>
<script>
function alertDialogBox()
{
alert("확인을 누를 때까지 다른 작업을 할 수 없습니다.");
}
</script>
</body>
![]() |
![]() |
prompt() 메소드
사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열을 반환함
<script>
function promptDialogBox()
{
var inputStr = prompt("당신의 이름을 입력해주세요.", "홍길동");
if(inputStr != null)
{
document.getElementById("text").innerHTML = "당신의 이름은 " +
inputStr + "입니다.";
}
}
</script>
</head>
<body>
<h1>prompt 창</h1>
<p id="text"></p>
<button name="btn1" onclick="promptDialogBox();">버튼선택</button>
</body>
![]() 화면에 있는 버튼을 클릭하면 |
![]() 입력창이 뜬다. 코드에서 기본값으로 설정해둔 홍길동이 적혀있다. |
![]() innerHTML을 통해서 내가 입력한 text 아이디인 글자가 화면에 뿌려진다. |
**innerHTML은 문서바디 안에 있는 html 코드를 자바스크립트로 조작할 수 있게 해주는 코드이다.
confirm() 메소드
사용자에게 간단한 메세지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언(boolean) 값으로 반환함
<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>
![]() 버튼을 누른다 |
![]() 확인을 누르면 blean 타입의 true 값이 반환되고, 취소를 누르면 blean 타입의 false 값이 반환된다. |
![]() if문에서 각각의 true/false에서 설정한 문자열이 화면에 뿌려진다. |