• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

JS 3가지 팝업상자 

 

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 넣으면 됨. 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
목록
찾아주셔서 감사합니다. Since 2012