반응형
인터넷을 사용하다 보면 간혹 알림이나 경고의 메시지를 나타내는 작은 창을 접하신 적이
있으실텐데, 자바스크립트를 이용하여 사용자들에게 무엇인가를 알려야 될 때 자주 사용하는
기능입니다.
알림을 나타내는 스크립트는 alert , confirm , prompt 가 존재합니다.
상단의 스크립트 모두 사용자들에게 텍스트를 출력해주는 스크립트지만 조금씩 기능이
달라서 상황에 맞게 필요한 스크립트를 이용하면 됩니다.
사용법이 간단하고 자바스크립트의 기본이지만, 많이 사용되는 스크립트이기 때문에
이번 포스팅으로 알고가시게 되면 많은 도움이 되실거라 생각됩니다.
JavaScript alert, confirm, prompt 사용 방법
alert(경고창) 사용 방법
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
alert('안녕하세요?');
</script>
</head>
<body>
</body>
</html>
- alert을 호출하는 기본 스크립트 구성입니다.
- html을 호출하면 알림창에 미리 입력된 텍스트가 출력됩니다.
- 버튼을 확인버튼 밖에 없으며 alert은 리턴을 하는 값이 없어 알림용으로 사용됩니다.
confirm(선택창) 사용 방법
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
var returnValue = confirm('안녕하세요?');
alert(returnValue);
</script>
</head>
<body>
</body>
</html>
- confirm을 호출하는 기본 스크립트 구성입니다.
- confirm의 출력 결과를 변수 returnValue에 담아 alert으로 리턴 값을 확인해보겠습니다.
- html을 호출하면 알림창에 미리 입력된 텍스트가 출력됩니다.
- alert과 다르게 확인 버튼과 취소버튼으로 구분 되어있으며, 각 버튼의 리턴 값이 존재합니다.
- 확인 버튼을 클릭하면 리턴 값으로 true 값을 돌려줍니다.
- 취소 버튼도 클릭 해보겠습니다.
- 취소 버튼은 확인 버튼의 반대의 값인 false를 반환 합니다.
prompt(입력창) 사용 방법
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
/*
미리 입력창에 데이터를 넣고 싶다면 뒤에 매개변수 입력
var returnValue = prompt('안녕하세요?','네 안녕하세요');
*/
var returnValue = prompt('안녕하세요?');
alert(returnValue);
</script>
</head>
<body>
</body>
</html>
- prompt를 호출하는 기본 스크립트 구성입니다.
- prompt의 출력 결과도 마찬가지로 변수 returnValue에 담아 alert으로 리턴 값을 확인해보겠습니다.
- html을 호출하면 알림창에 미리 입력된 텍스트가 출력됩니다.
- 하단에 텍스트를 입력받을 수 있는 박스가 생성되어 사용자들에게 데이터를 입력 받을 수 있습니다.
- 만약 기본값으로 텍스트를 넣고 싶다면 상단의 주석부분과 같이 텍스트 다음에 매개변수를 입력하면 됩니다.
- 텍스트를 입력하고 확인 버튼 클릭 시 입력된 텍스트의 값이 리턴 됩니다.
- 만약에 텍스트를 입력하지 않고 확인 버튼을 클릭한다면 공백이 출력됩니다.
- 텍스트를 입력하고 취소 버튼을 클릭해보겠습니다.
- 취소 버튼은 null 값을 리턴 값으로 받을 수 있습니다.
confirm과 prompt는 호출 된 버튼을 클릭할 때 결과의 값을 리턴 하기때문에 이 리턴 값을
이용하여 다른 액션을 이어 호출할 수 있습니다.
여러 방식으로 사용가능하니 응용하여 한번 테스트해보는 것도 좋을 거라 생각됩니다.
반응형
'Programing > JavaScript' 카테고리의 다른 글
| [JavaScript] 숫자, 문자 배열 간단하게 정렬하는 방법 Sort (0) | 2021.08.02 |
|---|---|
| [JavaScript] 문자열 대문자 소문자 변환 하기 toUpperCase(), toLowerCase() (0) | 2020.07.27 |
| [JavaScript] 특정 문자 또는 문자열 포함 여부 및 위치 찾기 indexOf() (0) | 2020.07.27 |
| [JavaScript/자바스크립트] Switch Case 문 예제로 배워보기 (0) | 2020.05.02 |
| JavaScript에서 Base64 Encode Decode 방법과 예제로 확인하기 (0) | 2019.12.09 |
댓글