Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

자바스크립트(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>

 

자바스크립트(Javascript) 대화상자 내장함수 alert, confirm, prompt 사용하는 방법

 

¤ 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>

자바스크립트(Javascript) 대화상자 내장함수 alert, confirm, prompt 사용하는 방법

 

¤ 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) 대화상자 내장함수 alert, confirm, prompt 사용하는 방법

반응형
Posted by 녹두장군1
,