지난 썰에서 살펴본 alert은 사용자에게 경고창을 띄어주는 기능이었다.
이번에 알아볼 confirm창은 사용자에게 확인 및 취소라는 두 가지 버튼을 제공하여 사용자에게 동의 및 거절이라는 확인을 얻을 때 사용할 수 있는 대화창입니다. alert창과 마찬가지로 브라우저마다 모양이 다르기 때문에 css를 이용해서 모양을 꾸며주거나 bootstrap을 활용하면 조금 더 멋진 대화창을 만들 수 있습니다.
confirm 대화창에는 [확인], [취소]라는 버튼이 같이 생성이 되는데 [확인]버튼을 클릭하면 참(true)이 반환되고, [취소]를 클릭하면 거짓(false)가 반환이 되는 구조입니다. 기존의 전통적인 웹의 구현에서는 확인이 왼쪽, 취소를 오른쪽에 구현했었습니다.
안드로이드를 접하신 분이나 스마트폰 사용자분들은 느끼시겠지만 모바일에서는 취소가 왼쪽, 확인을 오른쪽에 구현하는 경우가 많은데 사용자가 무의식중에 왼쪽의 버튼을 동의로 누르고 진행하는 경우가 많아서 모바일 디자인 설계에서는 양측을 바꾸어서 사용자에게 주의를 끌기 위함입니다.
반환되는 값이 true이거나 false로 값이 주어지기 때문에 보통 조건문인 if문과 함께 등장하여 사용자의 선택에 따른 프로그램 분기에 자주 사용된다고 할 수 있습니다.
ex) 회원가입하시겠습니까? 삭제하시겠습니까?
다음은 confirm의 간단한 예제코드입니다.
버튼을 클릭해보세요:
<html>
<head>
<script type = "text/javascript">
<!--
function sjc_confirm_sample() {
var retVal = confirm("Do you want to continue?(계속하시겠습니까?)");
if(retVal == true) {
alert("User wants to continue! (확인을 누르면 계속합니다.)");
return true;
} else {
alert("User does not want to continue! (취소를 누르면 중단됩니다.)");
return false;
}
}
//-->
</script>
</head>
<body>
<p style="color:red;">버튼을 클릭해보세요: </p>
<form>
<input type="button" value="클릭해보세요" onclick="sjc_confirm_sample();" />
</form>
</body>
</html>
'나는개발자다!! > javascript&제이쿼리' 카테고리의 다른 글
| javascript 프롬프트 대화 상자 보이기(prompt) (0) | 2019.01.18 |
|---|---|
| javascript를 이용한 페이지 프린트 썰 (0) | 2019.01.16 |
| javascript 경고 대화 상자 보이기(alert) (0) | 2019.01.16 |
| Object의 모든 속성(Attribute)값 출력하기 썰 (0) | 2019.01.10 |
| 자바스크립트썰 blur (0) | 2018.10.24 |
