대화상자

대화상자

사용자와 상호작욕을 하거나 무언가를 알려주기 위한 역할

아래 대화상자들은 css를통해 꾸밀 수 없이 브라우저에서 제공하는 기본형식을 따라가기 때문에 브라우저 마다  생김새가 다름

• alert: 사용자에게 알려줄때 사용
  ex) '비밀번호가 틀렸습니다.', '아직 준비중인 페이지입니다.'
• prompt: 사용자에게 어떤 값을 입력받을때 사용
• confirm: 확인 받는 역할로 보통 취소와 확인 버튼이 있음
  ex) '페이지를 나가시겠습니까?', '작성하신 내용을 저장할까요?'

const name = prompt("이름을 입력하세요.");
confirm (`이름을 ${name} 으로 하시겠습니까?`);
alert(`환영합니다. ${name} 님`);

위 와 같이 코드를 작성하게 되면,

prompt > confirm > alert

prompt 에서 사용자가 직접 입력한 name 값을 confirm을 통해 확인하고 마지막으로 alert을 통해 알려줌

 

만약 prompt 사용시 아무것도 입력하지 않고[취소] 버튼을 누를시 null 이 출력됨, 추가로 prompt 는 default 값도 받을 수 있는데

괄호 안에 2개의 인수를 넣으면 됨. 첫번째 로 입력된 인수는 무엇을 입력해달라는 메세지, 두번째 인수는 입력창에 자동으로 입력된 내용  

const name = prompt("이름을 입력하세요.", "Mike");
console.log(name); // "null"