[Js] 대화상자에 대해서 알아보자.

대화상자란? 사용자와 상호작용할 수 있는 세 가지 함수 입니다.

 

• alert()  일방적인 메시지 모달창 
• prompt() 사용자에게 텍스트를 입력할 수 있는 입력필드 모달 창
• confirm() 사용자의 의사를 확인하는 모달 창

 

 

모달 창이 떠있는 동안에 스크립트의 실행이 일시 중단되며 사용자가 창을 닫기 전까지 페이지의 다른 요소들과 상호작용이 불가능합니다.

또한, 이런 모달 창은 브라우저 중앙에 위치하는 것이 특징이며 스타일 적용하는 것이 불가능합니다.

 

alert() 

alert() 함수는 메세지가 떠있는 작은 모달 창입니다. 모달이라는 단어는 '페이지의 나머지 부분과 상호작용이 불가능하다' 라는 의미가 내포되어 있기 때문에 사용자가 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 요소들을 조작할 수 없습니다.

alert('Hello World');

 

 

prompt()

propmt() 함수는 두 개의 인수를 받습니다. 해당 함수가 실행되면 텍스트 메세지와 입력필드, 확인 및 취소 버튼이 있는 모달창이 등장합니다.

prompt(title, default)

 

• title(첫 번째 인수)
  사용자에게 보여줄 문자열

 

• default(두 번째 인수)
  입력필드의 초기값 

 

prompt 대화상자는 사용자가 입력필드에 원하는 값을 입력하고 확인을 누를 수 있는 창입니다. 값을 입력하지 않고 취소 버튼을 누르거나 Esc 버튼을 눌러 대화상자를 빠져나갈 수있습니다. 

 

이때 사용자가 입력한 값은 문자열로 반환되며, 반대로 입력을 취소하는 경우에는 null이 반환됩니다.

 

 

 

 

confirm()

confirm(question) 함수는 매개변수로 받은 question질문과 확인 및 취소 버튼이 있는 모달 창을 보여줍니다.

사용자가 확인을 누르면 true, 취소를 누르면 false를 반환합니다. 

 

let isUser = confirm('당신은 사용자인가요?')

alert(isUser);

 

 

 

 

 

문제

<label for="name"></label>
<input type="text" id="name" placeholder="이름을 입력하세요." required>

<label for="age"></label>
<input type="text" id="age" placeholder="나이를 입력하세요." required>
<button type="submit" id="checkBtn">확인</button>

 

function checkUser(){
const inputName = document.getElementById('name');
const inputAge = document.getElementById('age');

if(!inputName.value ) {
    alert('이름을 입력해!')
} else if(!inputAge.value){
    alert('나이를 입력해!')
} else {
    const isNameConfirmed = confirm(`사용할 이름이 ${inputName.value}가 맞냐?`);
    const isAgeConfirmed =confirm(`${inputAge.value}세가 맞냐?`);

    if(isNameConfirmed && isAgeConfirmed){
        alert('확인')
    } else{
        alert('다시 입력하셈')
    }
}

 

 

1. 대화상자 활용하기