|
자바스크립트(Javascript) 대화상자 내장함수 alert, confirm, prompt 사용하는 방법 |
|
환경: Eclipse Mars |
이번에 소개할 내장함수는 자바스크립트에서 팝업창을 띄울 수 것들 입니다. alert 와 confirm, prompt 3가지 종류가 있으며 각각 어떤 특징이 있는지 알아 보도록 하겠습니다. 대화상자를 출력하는 함수들은 자주 사용하는 것이므로 반드시 사용법을 익혀 두시기 바랍니다.
▼ 대화상자를 띄울 수 있는 함수는 다음과 같습니다. 각 함수들의 간략한 역할을 정리하였으며 샘플은 하나씩 구현해서 어떻게 표현되는지 알아보도록 하겠습니다.
l alert() : 경고 메시지를 전달하고 싶을 때 사용하며 확인 버튼이 나타난다.
l confirm() : 확인과 취소 버튼을 통해 어느 쪽을 선택했는지 결과를 알고 싶을 때 주로 사용한다.
l prompt() : 텍스트를 보여 주는 것이 아닌 입력 받는 형태의 대화상자를 띄운다.
|
¤ alert 함수 |
▼ alert() 함수의 인수로 넘긴 텍스트를 대화 상자에 표현하고 [확인] 버튼이 나타납니다. 경고를 하거나 정보를 알리고자 할 때 자주 사용합니다. 만약 텍스트가 길어서 대화상자에서 두 줄로 표현하고 싶다면 역슬레시(\) 와 “n” 을 넣어서 줄 바꿈을 해 주시면 됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
<!--
alert("안녕하세요.\n저는 강원도 촌놈입니다.");
//-->
</script>
</body>
</html>
|
¤ confirm 함수 |
▼ 결과값을 리턴 받아서 분기할 때 많이 이용합니다. 대화 상자에서 확인과 취소 두 버튼 중에서 확인은 true, 취소는 false 를 리턴 합니다. 이렇게 사용자가 어떤 것을 선택하느냐에 따라 if 문과 함께 사용해서 분기 구문을 만들 수 있는 것이죠.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
<!--
if(confirm("짜장은 확인, 짬뽕은 취소 입니다.")){
document.write("짜장을 선택습니다.")
}else{
document.write("짬뽕을 선택습니다.")
}
//-->
</script>
</body>
</html>
|
¤ prompt 함수 |
▼ 원하는 값을 입력 받고 싶을 때 사용하는 함수 입니다. 텍스트를 표현하는 대화상자가 아닌 입력란이 대화 상자에 표현됩니다. 리턴 값으로 입력한 값을 받을 수 있습니다. 그리고 두 가지 인수 중 첫 번째는 입력란에 대한 설명이며 두 번째는 입력박스에 초기값입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>Javascript</title>
<style type="text/css">
body {background-color: #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
<!--
var redata = prompt("아이디를 입력해주세요.", "아이디");
document.write(redata)
//-->
</script>
</body>
</html>
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) 조건 연산자, 삼항 연산자 사용하는 방법 (0) | 2019.05.19 |
|---|---|
| 자바스크립트(Javascript) 문자를 숫자로 변환하는 Number 함수 (0) | 2019.05.02 |
| 자바스크립트(Javascript) 내장 객체 Array 의 join 함수, reverse 함수 – 3회 (0) | 2019.04.27 |
| 자바스크립트(Javascript) 문자인지 여부를 판단할 수 있는 isFinite 함수 (0) | 2019.03.24 |
| 자바스크립트(Javascript) 주석(설명글) 넣어서 코드의 이해를 돕기 위한 방법 (0) | 2018.12.02 |
| 자바스크립트(Javascript) 해석하지 못하는 브라우저일 때 스크립트 소스 숨기기 (3) | 2018.09.13 |
| 자바스크립트 Javascript 숫자 1 이상 증가하도록 for 문을 만드는 방법 (0) | 2017.07.25 |
| Aptana Studio3(압타나) 테마 변경하는 방법 (0) | 2017.07.07 |
