TIL 9. JavaScript로 팝업창 구현(alert(), prompt(), confirm())

자바스크립트의 팝업창에 대해 알아보도록 하겠습니다.

원하는 효과

• 페이지 접속 시 팝업창 호출
• 접속자의 이름 입력
• 이름 + 추가 질문
• 질문의 답변에 따라 다른 문구 출력

팝업창 구현을 위한 함수
-. alret("메시지"): 경고창을 띄울 때 사용
-. prompt("내용", "입력창 default 값"): 질의응답 창을 나타낼 때 사용
-. confirm("내용"): 확인 또는 취소 창을 나타낼 때 사용

아래의 작성한 코드를 살펴보도록 하겠습니다.

  function pop(){
    alert("이름을 입력해주세요.");
    const name = prompt("이름 입력" + "");
    if (name=="") {
        return pop();
    }
    
    else if (name == null) {
        return;
    }

    const truefalse = confirm(name + "님은 위코드 소속이신가요?");
    if (truefalse){
        alert("매우 반갑습니다.")
    }
    else{
        alert("그냥 반갑습니다.")
    }
  }

  pop();

위와 같이 pop() 함수를 작성하였습니다. 작동 방식은 아래와 같습니다.

1. 페이지 접속 시 팝업창 활성화 이름 문의
2. 이름 미입력 시 다시 이름 문의 / 취소 시 창 닫고 기존 페이지로 접속
3. 위코드 소속 확인 질문
4. 소속인 경우 → 매우 반갑습니다 출력 / 소속이 아닌 경우 → 그냥 반갑습니다 출력

처음에 alert를 사용하여 이름을 요청하였고, prompt로 입력을 받았습니다. 여기서 미입력 시 조건문을 사용하여 다시 pop()함수를 호출하여 첫 화면으로 돌아가 이름을 요청하도록 하였고, 취소를 누를 경우 null 값을 받기 때문에 else if를 사용하여 return으로 함수를 종료하여 빠져나와 기존 웹페이지로 접속되도록 하였습니다.
그리고 confirm 함수를 사용하여 위코드 소속임을 물어보고 if문을 사용하여 확인(true)을 누르면 "매우 반갑습니다", 취소(false)를 누르면 "그냥 반갑습니다"를 출력하였습니다.

1) 이름 미입력 ▶ 이름입력 ▶ 위코드 소속 확인

2) 이름입력 ▶ 위코드 소속 취소

3) 이름입력 취소