자바스크립트 기초 – 화면 입출력 예제

by

웹 브라우저에서 사용자가 몇 가지 정보를 입력하면 그것을 조합해 화면에 표시하는 과정을 HTML, CSS와 자바스크립트 코드로 구현했습니다. 이 과정을 통해 웹에서의 기초적인 화면 입출력 방법과 자바스크립트 기초 사용법에 대해서 알아봅니다.

우리가 보는 각종 정보는 어떻게 웹 페이지에 표시될까요? 웹 페이지는 HTML, CSS 그리고 자바스크립트 코드로 작성됩니다. 이 중에서 HTML 코드는 웹 페이지의 구조와 내용을 만들고, CSS는 HTML 태그의 모양과 색깔 등을 다뤄 웹 페이지의 디자인을 완성합니다. 자바스크립트는 HTML 태그의 동작, 데이터 처리 방법을 만들고 관리합니다.

이 글에서는 이 중에서 자바스크립트에 관한 내용을 다루며 편의상 1, 2편으로 나누겠습니다. HTML과 CSS에 관한 내용은 별도의 포스팅 카테고리에서 다룹니다. 다만 이해를 위해 HTML 코드는 아래에 넣습니다.

<body>
  <div>
    <p>안녕하세요.</p>
    <p>이름과 나이 그리고 거주지를 입력해 주세요.</p>
    <p>거주지에는 시, 군을 붙이세요.</p>
  </div>

  <br>

  <div>
    <label for="">이름</label>
    <input type="text" class="name">
  </div>
  <div>
    <label for="">나이</label>
    <input type="text" class="age">
  </div>
  <div>
    <label for="">거주지</label>
    <input type="text" class="home">
    <button>입력</button>
  </div>

  <br>

  <div>
    <p>당신의 이름은 <span class="nameOutput">***</span>이고, 나이는 <span class="ageOutput">**</span>살 입니다.</p>
    <p>
      현재 <span class="homeOutput">**</span>에서 살고 있군요. 반갑습니다.
    </p>
    <p>
      아! 내년에는 <span class="ageNextYear">**</span>살이 되겠군요.
    </p>
  </div>

2편 자바스크립트 화면 입출력 예제 문법 기초 내용은 아래 링크에서 확인할 수 있습니다.

[링크] 화면 입출력 예제 문법 기초 확인하기

자바스크립트 코드 작성

예제의 자바스크립트는 웹 브라우저 화면에서 사용자가 안내문에 따라 input 태그에 이름, 나이, 거주지를 입력하고 버튼을 누르면, 아래에 있는 문장에서 파란색 박스에 입력한 내용과 변경한 내용을 표시해 주는 간단한 코드입니다.

자바스크립트를 HTML 문서에 넣을 때는 <body> </body> 태그 사이에 <script> </script>란 태그를 만들고 그 안에 코드를 작성합니다. <script> 태그는 HTML 문서의 여러 곳에 넣을 수 있는데, 이 예제에서의 위치는 닫는 </body> 태그 바로 앞으로 합니다.

이것은 자바스크립트 코드가 HTML 태그를 조작하는 것이기 때문에 웹 브라우저에 웹 페이지의 HTML 요소가 먼저 로딩된 후 자바스크립트 코드가 실행돼야 한다는 기본 전제를 따르는 것입니다. 왜냐하면 HTML 문서는 기본적으로 위에서 아래로 로딩되기 때문입니다.

하지만 이 방법 외에도 HTML에 자바스크립트를 연결하는 방법은 다양합니다. 기회가 생기면 다른 예제에서 다루도록 하겠습니다.

자바스크립트의 전체 코드는 크게 네 부분으로 나뉩니다.

  • 필요한 HTML 태그를 선택해서 각각의 변수에 담는 과정
  • 사용자 입력값을 담을 변수를 만드는 과정
  • 이벤트가 발생했을 때 실행할 함수를 만드는 과정
  • 태그와 이벤트 리스너를 연결하고, 이벤트와 실행 함수를 이어주는 과정

그럼 소스 코드에 관한 설명을 보실까요?


  <script>
    // 태그를 선택해 변수에 담는다.
    const $inputName = document.querySelector('.name');
    const $inputAge = document.querySelector('.age');
    const $inputHome = document.querySelector('.home');

    const $outputName = document.querySelector('.nameOutput');
    const $outputAge = document.querySelector('.ageOutput');
    const $outputHome = document.querySelector('.homeOutput');
    const $outputAgeNext = document.querySelector('.ageNextYear');

    const $button = document.querySelector('button');

    // 변경될 수 있는 값을 담는 변수는 let으로 선언
    let yourName = '';
    let yourAge = '';
    let yourHome = '';

소스 코드 설명_01

HTML 문서를 의미하는 document 객체의 querySelector 메서드에 인수인 CSS 선택자로 name 클래스를 넣습니다. 클래스 명은 따옴표 안에 마침표를 찍고 ‘.name‘와 같은 형식으로 작성합니다. 반환 값인 HTML 요소 객체를 변수 $inputName에 저장합니다.

이제 $inputName을 이용해서 클래스 명이 name인 input 태그를 자바스크립트에서 다룰 수 있습니다.

클래스 명이 age, home인 input 태그도 위와 같은 방식으로 선택해서 각각 변수 $inputAge, $inputHome에 담습니다.

사용자가 입력한 정보는 HTML 소스의 하단에 있는 span 태그를 통해서 화면에 표시됩니다. 여러 개의 span 태그를 구분하기 위해서 각각 클래스 명을 부여했는데, 이를 querySelector 메서드에 인수로 넣어서 선택한 후 각각의 변수에 저장합니다.

사용자 입력을 마친 후 클릭하면 데이터 처리와 화면 표시를 실행시킬 button 태그를 document.querySelector로 선택해서 $button 변수에 저장합니다.

사용자가 입력한 정보는 내부 처리 과정에서 변수 yourName, yourAge, yourHome에 저장됩니다. 입력 정보는 변경될 수 있으므로 let 변수로 만들고 빈 문자열로 초기화합니다.


    // 이벤트 발생 뒤 추가로 실행되는 콜백 함수
    const onInputName = () => {
      yourName = $inputName.value;
    }

    const onInputAge = () => {
      yourAge = $inputAge.value;
    }

    const onInputHome = (event) => {
      yourHome = $inputHome.value;
    }

    const onClickButton = () => {
      $outputName.textContent = yourName;
      $outputAge.textContent = yourAge;

      yourHome = yourHome.substring(0, 2);
      $outputHome.textContent = yourHome;


      console.log('yourAge 데이터 타입:', typeof yourAge);
      yourAge = Number(yourAge);
      const ageNextYear = yourAge + 1;
      console.log('ageNextYear 데이터 타입:', typeof ageNextYear);
      $outputAgeNext.textContent = ageNextYear

      $inputName.value = '';
      $inputAge.value = '';
      $inputHome.value = '';
      $inputName.focus();
    }

    // 이벤트 리스너 함수 설정
    $inputName.addEventListener('input', onInputName);
    $inputAge.addEventListener('input', onInputAge);
    $inputHome.addEventListener('input', onInputHome);
    $button.addEventListener('click', onClickButton);
  </script>
</body>
</html>

소스 코드 설명_02

요소 객체의 addEventListener 메서드에 의해서 이벤트와 이어지는 실행 함수를 정의합니다. 이 함수는 이벤트 발생 뒤 추가로 실행되는 콜백 함수입니다.

const 변수 onInputName을 선언하고 화살표 함수를 저장합니다. 이렇게 하면 변수 이름이 함수 이름이 됩니다. 이 함수는 클래스 명이 name인 input 태그에서 input 이벤트가 발생한 후 실행됩니다.

처리할 내용은 $inputName 객체의 value 속성값을 변수 yourName에 대입하는 것입니다. 즉 사용자가 이름 input 창에 입력한 값을 해당 변수에 저장합니다. 이벤트가 생겼을 때 이와 같은 데이터 처리를 하는 다른 방식도 있는데, 다음번에 다루겠습니다.

onInputAge에 저장된 화살표 함수에서는 $inputAge.value를 yourAge에 저장하고, 함수 onInputHome에서는 $inputHome.value 속성값을 yourHome에 담습니다.

onClickButton 실행 함수에서는 먼저 $outputName, $outputAge에 해당하는 span 태그 사이에 yourName, yourAge에 담긴 문자열을 넣어서 화면에 출력합니다. span 객체의 textContent 속성을 이용합니다.

문자열 객체는 문자열의 일부만 선택할 수 있는 메서드 substring를 사용할 수 있습니다. 만약 사용자가 ‘서울시’라는 문자열을 입력했다면, yourHome.substring(0, 2)를 통해서 ‘서울’만 남길 수 있습니다. 이렇게 수정한 문자열을 다시 yourHome에 넣어줍니다.

그리고 $outputHome 객체의 textContent 속성에 대입해서 거주지를 화면에 표시합니다.

변수 yourAge에 저장된 사용자가 입력한 나이의 데이터 타입을 알아보기 위해 연산자 typeof를 사용하고 console.log로 출력합니다.

사용자가 입력한 나이는 숫자가 아닌 문자열입니다. 그래서 Number 함수로 숫자 데이터로 형변환한 후, 다시 변수 yourAge에 저장합니다.

const 변수 ageNextYear를 만들고 사용자의 나이에 1을 더한 값을 대입합니다. 사용자의 내년 나이를 계산한 결과가 숫자 데이터로 저장됩니다. 콘솔 출력으로 typeof ageNextYear의 연산 결과를 출력합니다.

onClickButton 함수의 마지막 처리 내용의 첫 번째는 input 입력창에 빈 문자열을 넣어서 깨끗하게 비우는 것입니다. 두 번째는 이름 입력창에 커서를 넣어서 다음 입력을 기다리게 하는 것입니다.

자바스크립트 기초 화면 입출력 실행 결과 이미지

자바스크립트의 문자열 객체에 대해서 자세히 알고 싶으면 아래 링크를 확인해 보세요.

[링크] 자바스크립트 문자열 객체 자세히 알아보기

이상과 같이 자바스크립트 기초 화면 입출력 예제에 관한 코드 내용을 살펴봤습니다. 연관된 자바스크립트의 문법 사항은 다음 포스트에서 다루겠습니다.