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

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 경고창을 띄운다.

'Javascript' 카테고리의 다른 글

6. window.open 활용 (0)	2021.09.07
5. window.open (0)	2021.09.06
4. location 객체 (0)	2021.09.05
2. 전역객체 window (0)	2021.09.03
1. HTML 에서 JavaScript 사용 (0)	2021.09.02

1. alert

2. confirm

3. prompt

'Javascript' 카테고리의 다른 글

티스토리툴바