출처 : https://javascript.info/alert-prompt-confirm
상호작용: alert, prompt, confirm
브라우저를 데모 환경으로 사용할 것이므로 사용자와 상호작용하기 위한 몇 가지 함수들인 alert , prompt , confirm에 대해 알아봄.
alert
alert 함수는 이미 본 적이 있는 함수로 , 메시지를 보여주고 사용자가 확인 (ok) 버튼을 누를 떄까지 기다림.
예시 :
alert("Hello");
이 메시지를 보여주는 작은 창은 모달 창이라고 부름. 모달(modal) 이라는 단어는 사용자가 이 창을 처리(예: "확인" 버튼 클릭)하기 전까지는 페이지의 다른 부분과 상호작용을 할 수 없음을 의미함.
prompt
prompt함수는 두 개의 인수를 받을 수 있음.
result = prompt(title, [default]);
이 함수는 사용자에게 텍스트 메시지와 입력 필드 , 그리고 확인(ok)/취소(Cancel) 버튼이 있는 모달 창을 보여줌.
매개변수
title : 사용자에게 보여줄 텍스트 메시지
default : (선택사항) 입력 필드의 초기값
위 구문에서 대괄호 [...]는 해당 매개변수가 필수가 아님을 나타냄.
사용자는 입력 필드에 텍스트를 입력한 후 확인(ok)버튼을 누를 수 있으며 그 텍스트가 결과로 반환됨.
사용자가 입력한 값이 result가 됨.
또는 취소(cancel) 버튼을 누르거나 Esc 키를 눌러 입력을 취소하면 결과로 null이 반환됨.
예시 :
let age = prompt('당신의 나이는 몇 살입니까?', 100);
alert(`당신은 ${age}살입니다!`); // 예: "당신은 100살입니다!"
Internet Explorer (IE)에서의 주의사항
두 번째 매개변수는 선택 사항이지만, 만약 제공하지 않으면 Internet Explorer에서는 입력 창에 "undefined"라는 텍스트가 자동으로 채워짐.
따라서 IE에서 프롬프트가 깔끔하게 보이도록 하기 위해서는 항상 두번 째 인수를 제공하는 것이 좋음.
let test = prompt("테스트", '');
confirm
confirm 함수는 다음과 같이 사용함.
result = confirm(question);
이 함수는 사용자에게 질문과 함께 확인(ok)과 취소(cancel) 두 개의 버튼이 있는 모달 창을 보여줌.
사용자가 확인(OK) 버튼을 누르면 결과는 true로 , 그 외에는 fasle가 반환됨.
예시 :
let isBoss = confirm("당신이 보스입니까?");
alert(isBoss); // 사용자가 OK를 누르면 true, 아니면 false
과제 : 간단한 페이지 만들기
과제 설명 : 사용자의 이름을 입력받은 후 그 이름을 출력하는 웹 페이지 만들기
예시 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이름 입력</title>
</head>
<body>
<script>
// 사용자에게 이름을 물어봄
let name = prompt("당신의 이름은 무엇입니까?", "");
// 사용자가 이름을 입력한 경우
if (name !== null && name !== "") {
alert(`안녕하세요, ${name}님!`);
} else {
alert("이름을 입력하지 않으셨습니다.");
}
</script>
</body>
</html>
내가 짠 코드 ㅎ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테스트</title>
</head>
<body>
<script>
name = prompt("input your name", "name");
alert(name);
</script>
</body>
</html>
입력 값 검증 같은 걸 추가할 생각을 안했다.
'언어' 카테고리의 다른 글
| Basic operators, maths (JavaScript) (0) | 2025.03.10 |
|---|---|
| Type Conversions (JavaScript) (0) | 2025.03.10 |
| Data types (JavaScript) (0) | 2025.03.10 |
| Variables (JavaScript) (0) | 2025.03.10 |
| The modern mode, "use strict" (JavaScript) (0) | 2025.03.10 |
