[책] 자바스크립트 코드 레시피 278 - 31일차

문자열 합치기

• 결합하여 문자열을 만들고 싶을 때 (성과 이름을 결합하기)
• 폴더명과 파일명을 결합하여 파일 주소를 문자열로 만들고 싶을 때

구문

+ 로 결합하여 만들거나 ${ } 로 만듭니다. ${ } 는 + 사용하지 않고 붙여서 사용합니다.

console.log('문' + '자열'); // 문자열
console.log(`${'문'}${'자열'}`); // 문자열

실습

입력받은 값과 결합하여 만들어봅니다.

index.html

<div class="container">
  <label>
    성
    <input type="text" id="familyNameText" class="text">
  </label>
  <label>
    이름
    <input type="text" id="firstNameText" class="text">
  </label>
</div>
<p>
  결과:
  <strong id="fullName"></strong>
</p>

style.css

.container {
  margin: 20px 0 0 0;
}

p {
  font-size: 24px;
}

script.js

window.onload = function() {
  const familyNameText = document.querySelector('#familyNameText');
  const firstNameText = document.querySelector('#firstNameText');
  const fullName = document.querySelector('#fullName');

  function onKeyup() {
    const familyName = familyNameText.value
    const firstName = firstNameText.value
    fullName.textContent =  familyName + firstName;
  }

  familyNameText.addEventListener('keyup', onKeyup);
  firstNameText.addEventListener('keyup', onKeyup);
}