[BOM] JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + Prompt box) + 팝업상자줄바꿈

 

1. Alert Box (경고 상자 = 얼럿박스)

window.alert("sometext");

alert("sometext");

 

2. Confirm box (확인 상자 = 컨펌박스)

window.confirm("sometext"); 

confirm("sometext");

3. Prompt box (입력유도 상자 = 프람프트박스)

window.prompt("sometext","defaultText");

prompt("sometext","defaultText");

 

1. Alert Box (경고 상자)

 

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

<script>

function homzzang() {

  alert("홈짱닷컴 Homzzang.com");

}

</script>

 

결과보기

---

 

window.alert("sometext");

 

---

 

1.

사용자에게 전달하고자 하는 정보가 잘 전달되었는지 확인 위함.

경고상자 뜨면 사용자는 확인버튼 눌러 계속 진행. (※ 취소버튼은 없음.)

 

2.

window 접두사 없이 사용 가능.

 

2. Confirm Box (확인 상자)

 

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

<p id="demo"></p>

<script>

function homzzang() {

  var txt;

  if (confirm("확인이나 취소버튼을 누르세요!")) {

    txt = "확인 버튼 누름";

  } else {

    txt = "취소 버튼 누름";

  }

  document.getElementById("demo").innerHTML = txt;

}

</script>

 

결과보기

---

 

window.confirm("sometext");

 

---

 

1. 정의

사용자에게 확인사항을 묻고자 하거나 뭔가 받아들이게 하고자 하는 경우에 사용.

확인상자가 뜨면 확인버튼이나 취소버튼을 눌러 진행해야 함.

 

2. 반환값

사용자가 확인버튼 누르면 TRUE, 취소버튼 누르면 FALSE 반환.

 

3.

window 접두사 없이 사용 가능.

 

3. Prompt Box (답변유도 상자)

 

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

<p id="demo"></p>

<script>

function homzzang() {

  var txt;

  var name = prompt("이름을 입력하세요.:", "Hz sinbi");

  if (name == null || name == "") {

    txt = "이름을 입력해주셔야 해요.";

  } else {

    txt = "반가워요. " + name + "님, 환영합니다.";

  }

  document.getElementById("demo").innerHTML = txt;

}

</script>

 

결과보기

---

 

window.prompt("sometext","defaultText");

 

---

 

1.정의

사용자가 페이지 접속 시, 예시를 보여주며 어떤 값을 입력받고자 하는 경우 사용.

프롬프트 박스 뜨면, 사용자는 값을 입력한 후 "확인" 또는 "취소"를 클릭해야 함.

 

2.반환값

사용자가 "확인" 누르면 입력값을 반환하고, "취소" 클릭하면 상자가 null 반환.

 

3.

window 접두사 없이 사용 가능.

Line Break (줄바꿈)

 

<button onclick="alert('홈짱닷컴\nHomzzang.com')">클릭 (1줄 바꿈)</button>

<button onclick="alert('홈짱닷컴\n\nHomzzang.com')">클릭 (2줄 바꿈)</button>

<button onclick="alert('홈짱닷컴\n\n\nHomzzang.com')">클릭 (3줄 바꿈)</button>

결과보기

---

 

줄바꿈 시키고자 하는 문자열 앞에 \n 넣으면 됨. 

여러 개 넣으면 칸이 더 벌어짐.