3. 사용자와 커뮤니케이션[alert, confirm, prompt]

Javascript

3. 사용자와 커뮤니케이션[alert, confirm, prompt]

말랑Cow 2021. 9. 4. 00:00

1. alert

경고창이라고 부르며 사용자에게 정보를 제공하거나 디버깅 등의 용도로 많이 사용된다.

경고창이 실행되는 동안(확인을 누르기 전까지는) 다음 코드가 실행되지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="click" onclick="fnc_alert()" />
    <script>
    function fnc_alert(){
    alert('1');
    alert('2');
    alert('3');
}
    </script>
</body>
</html>

단순한 경고(알람)창이 뜬다.

alert('1') 이 실행된 후 다음코드인 alert('2') 가 실행되려면 저 확인버튼을 눌러야 한다.

그 전 까지는 멈춰있는 상태.

2. confirm

확인과 취소버튼이 있다.

확인을 누르면 true를, 취소를 누르면 false를 리턴한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="click" onclick="fnc_confirm()" />
    <script>
    function fnc_confirm(){
    if(confirm('OK?')){
        alert('OK');
        } else {
        alert('NO');
            }
    }
    </script>
</body>
</html>

if 문에서 true 면 alert('OK') 를 실행하고 true가 아니라면 alert('NO') 를 실행한다.

3. prompt

사용자가 입력한 값을 받아 자바스크립트가 해당 값을 얻는다.

텍스트필드가 있으며 텍스트필드에 입력한대로 값이 리턴된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="click" onclick="fnc_prompt()" />
    <script>
    function fnc_prompt(){
        if(prompt('password') === 'SJH'){
            alert('OK');
            } else {
                alert('NO');
                }
   }
    </script>
</body>
</html>

prompt의 텍스트필드에 입력한 값이 SJH 이면 OK 경고창을 띄우고,

SJH이 아니라면 NO 경고창을 띄운다.