Javascript – BOM – popup boxes 객체

팝업 상자를 이용하여 새로운 팝업창을 만들 수 있다.

Javascript 이용하여 출력할 수 있는 팝업에는 경고 상자, 확인 상자 및 프롬프트 상자가 있다.

Popup Boxes

팝업창 내의 문구를 기재할 때 <br>과 같이 한 칸 띄고 싶다면 \n를 이용하면 된다.

Alert Box

경고 상자는 사용자에게 정보를 전달하고 “확인”을 눌러야 계속할 수 있도록 하고싶을 때 사용한다.

<button onclick="myFunction()">Try it</button>

function alertbox() {
alert("경고 상자 입니다!\n확인을 누르면 창이 닫힙니다.");
}

Confirm Box

확인 상자는 사용자가 무언가를 ‘확인’하거나 ‘취소’를 클릭 해야하는 경우에 사용한다.

<button onclick="confirmbox()">클릭</button>

<p id="confirm"></p>

function confirmbox() {
var txt;
if (confirm("짜장면을 좋아하시나요?")) {
txt = "네! 좋아합니다!";
} 
else {
txt = "아니오. 좋아하지 않습니다.";
}
document.getElementById("confirm").innerHTML = txt;
}

Prompt Box

프롬프트 상자는 사용자에게 값을 입력받아야할 때 사용한다. 입력한 후 [확인]을 눌러야한다. [취소]를 클릭하면 null을 반환한다.

<button onclick="promptbox()">클릭</button>

<p id="prompt"></p>

function promptbox() {
let text;
let person = prompt("이름을 적어주세요:", "밍구");
if (person == null || person == "") {
text = "값을 입력하지 않았습니다.";
}
else {
text = person + "님! 안녕하세요?";
}
document.getElementById("prompt").innerHTML = text;
}