[Javascript] 실습: 사용자 정보 입력받기

사용자 정보를 입력받을 수 있는 실습을 해보려고 한다.

앞서 배웠던

• prompt()
• textContent
• QuerySelector

의 복습이다.

추 후에 자세히 공부할 if문을 예습하는 느낌으로 사용하여 첫 팝업문의 확인, 취소 둘 중 어떤 버튼을 눌렀냐에 따라 달라지는 사용자 정보 입력창을 만들었다.

 <div id="container">
      <p id="notice"></p>
      <h1 id="name"></h1>
    </div>
    <script>
  
      const update = confirm(`페이지를 업데이트 하시겠습니까?`);
      console.log(update);

      if (update == true) {
        document.querySelector(
          '#notice'
        ).textContent = `페이지가 업데이트 되었습니다.`;
        document.querySelector('#name').textContent = `안녕하세요! ${prompt(
          `이름을 적어주세요.`
        )}님.`;
      } else {
        document.querySelector(
          '#notice'
        ).textContent = `페이지가 업데이트가 취소되었습니다.`;
      }
    </script>

• html로 정보가 들어갈 엘리먼트를 id와 함께 먼저 구현했다.
• 우선 confirm() 메소드로 페이지 업데이트 여부 질문과 함께 확인, 취소 버튼을 제시하였다.
• 확인을 누르면 true, 취소를 누르면 false가 된다.
• 간단한 if문을 통해 update변수가 true면 업데이트 되었다는 문구+prompt로 할당된 사용자 정보가 나오도록 만들었고 그 반대는 업데이트 취소 문구가 나오도록 만들었다.

회고

최대한 공부하고 있는 영상과 정답 코드를 보지 않고 혼자 푸는 방향으로 공부했다. querySelector와 prompt를 배우면서 querySelector로 전달된 html DOM요소에 prompt메소드를 집어넣어 바로 입력값을 띄우는 부분이 헷갈리고 조금 어렵게 느껴졌다.
하지만 입력하고자 하는 데이터와 prompt는 따로 따로 라고 생각하니 이해가 편해졌다.

벨로그에 대해서도 추가적으로 생각해 본 것이 있는데, 나의 공부 흔적, 방향성을 남기기 위한 벨로그이므로 앞으로 '회고' 파트도 추가해볼 생각이다.