개발일지/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에서 설정한 문자열이 화면에 뿌려진다.