[JS] 다이얼로그 사용하기

자바스크립트가 처음이시라면 해당 글을 먼저 보시는 것을 추천합니다.

2021/02/10 - [Javascript/Javascript정리] - [JS] Javascript 자바스크립트 기본 개념

[JS] Javascript 자바스크립트 기본 개념

[JS] Javascript 자바스크립트 기본 개념 자바스크립트 언어란? 자바스크립트 언어는 퍼즐 조각처럼 코드 형태로 HTML 페이지에 내장된다. 또한 컴파이 과정이 없고, 브라우저 내부의 자바스크립

heekng.tistory.com

HTML 웹페이지에서 사용자에게 값을 입력받는 방법에는 <input>태그가 있다.

하지만 간단한 자바스크립트 코드를 이용해 별도의 창에서 값을 입력받거나, 확인, 경고창을 띄울 수 있다.

prompt(), confirm(), alert() 3가지 다이얼로그에 대해 알아본다.

프롬프트 다이얼로그 prompt()

프롬프트 다이얼로그 값을 입력하는 창을 제공한다.

prompt("출력 메세지", "기본 값");의 형태로 사용하며 메세지와 함께 입력받는 창을 띄워준다.

기본값의 경우 default값으로 비워둘 수 있다.

값을 입력하고 확인버튼을 누르면 해당 값을 리턴한다.

아무 값도 입력하지 않고 확인 시 "" 공백을 리턴하고, 취소 버튼을 눌렀을 때에는 null을 리턴한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>프롬프트 다이얼로그</title>
</head>
<body>
	<h2>버튼을 눌러 프롬프트 다이얼로그 확인</h2>
	<button onclick="promptOn()">button</button>
	<br>
</body>
<script>
	function promptOn(){
		var data = prompt("버튼을 눌렀습니다.\n값을 입력하세요.", "기본 값");
		document.write(data);
	}
</script>
</html>

See the Pen 프롬프트 다이얼로그 by Heekng (@heekng) on CodePen.

확인 다이얼로그 confirm()

confirm()다이얼로그는 prompt()다이얼로그와 다르게 값을 입력받는것이 아닌 메세지와 확인, 취소버튼만을 제공한다.

confirm("메세지");의 형태로 작성한다.

확인 버튼을 누를 시 true, 취소 버튼을 누를 시에는 false를 리턴하게 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>확인 다이얼로그</title>
</head>
<body>
	<h2>버튼을 눌러 확인 다이얼로그 확인</h2>
	<button onclick="confirmOn()">button</button>
	<br>
</body>
<script>
	function confirmOn(){
		var data = confirm("버튼을 눌렀습니다.");
		document.write(data);
	}
</script>
</html>

See the Pen vYyyOEY by Heekng (@heekng) on CodePen.

경고 다이얼로그 alert()

alert()다이얼로그는 메세지와 확인버튼만을 제공한다.

따로 값을 리턴받는 것이 아닌 일방적인 통보를 하는 메세지 다이얼로그이다.

alert("메세지");의 형태로 작성한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>경고 다이얼로그</title>
</head>
<body>
	<h2>버튼을 눌러 경고 다이얼로그 확인</h2>
	<button onclick="alert('경고 다이얼로그를 클릭했습니다.')">button</button>
	<br>
</body>
</html>

See the Pen 경고 다이얼로그 by Heekng (@heekng) on CodePen.

저작자표시 비영리 변경금지

'JS & TS > Javascipt' 카테고리의 다른 글

[JS] 객체, 프로토타입, property (0)	2021.02.13
[JS] 함수 function (0)	2021.02.12
[JS] 값 비교하기(==, ===) (0)	2021.02.12
[JS] 데이터타입, 변수, 상수 (0)	2021.02.12
[JS] 자바스크립트로 본문에 코드 추가하기 (0)	2021.02.11
[JS] Javascript 자바스크립트 기본 개념 (0)	2021.02.10

수학하다 개발하기

[JS] 다이얼로그 사용하기