[JavaScript] join, split, button 연습

Som·2023년 7월 19일

학습 현황

ZeroCho님의 자바스크립트 강의 수강 중 (작성시점 기준 5-5강 수강 중)

연습 요약

아직 익숙하지 않은 document.querySelector의 사용을 연습하고자 함: document.querySelector를 사용하여 버튼 클릭 event 발생, 화면에 값 전달
조인, 스플릿 활용하기
for, while문 교차 활용

연습 내용

form 태그 안에 input과 button이 있을 경우
- form 태그 자체에 id를 달아주어야 함
- input 태그 안에 id를 넣어야 input 태그 내에 입력된 값을 가져올 수 있음
- form 태그 안에 있는 id에 addEventListener 설정하고 'submit'이라는 event가 발생할 때, 기능이 실행되도록 함
- form 내부에 있는 button을 눌렀을 때 submit이 실행됨
- form의 기본 동작은 서버로 데이터를 전달하고 다시 돌려받는 것. 즉, 새로고침과 같은 역할임. 새로고침 되면 앞서 입력한 숫자가 날라가게 되어버림. 이를 방지하기 위해서 event.preventDefault();를 추가하였음
- 입력한 숫자값 $input을 value라는 변수에 넣고, 이 변수를 function all에 매개변수로 넣어서 1부터 value값 까지의 숫자를 요소로 가지는 배열을 생성함
배열 <=> 문자열 전환 연습: join, split
- 숫자로 구성된 배열을 join을 이용해 문자열로 전환하였음. 이렇게 바꾼 문자열을 split을 이용해 다시 배열로 변경하였음. 이 때, 변경된 배열의 요소들은 문자열이었음.
이것을 for문, while문을 이용해 다시 숫자로 구성된 배열로 변경함

실행화면

코드

<!DOCTYPE html>
<html>
<style>
  span {
    color: blue; 
  }

</style>
<head>
    <meta charset="utf-8">
    <title>조인, 스플릿, 버튼 클릭 연습</title>
</head>

<body>
  <h1>조인, 스플릿, 버튼 클릭 연습</h1>
  <form id="form">
    <input type="text" id="input">
    <button>입력</button>
  </form>
  <p>1. 1부터 위에서 입력한 숫자가 담긴 배열 answer: <span id="answer"></span> </p>
  <p>2. answer를 문자열로 변환하고 그 값을 strAnswer에 입력: <span id="strAnswer"></span></p>
  <p>3. strAnswer를 다시 배열로 변환하고 그 값을 newAnswer에 입력: <span id="newAnswer"></span></p>
  <p>4. 이때, newAnswer의 요소들의 타입은 string인데 이들의 타입을 number로 변경하기 <br> 
    (1) for문 사용하기 => numAnswer1: <span id="numAnswer1"></span><br>
    (2) while문 => numAnswer2: <span id="numAnswer2"></span><br>
  </p>

<script>
  const $form = document.querySelector('#form');
  const $input = document.querySelector('#input');
  const $answer = document.querySelector('#answer');
  const $strAnswer = document.querySelector('#strAnswer');
  const $newAnswer = document.querySelector('#newAnswer');
  const $numAnswer1 = document.querySelector('#numAnswer1');
  const $numAnswer2 = document.querySelector('#numAnswer2');

  function all(value) {
    //1.
    const answer = [];
    for (n = 0; n < value; n += 1) {
      answer.push(n + 1);
    };
    $answer.textContent = answer + " / 배열 요소 타입: "+ typeof answer[0];

    //2.
    const strAnswer = answer.join('');
    $strAnswer.textContent = strAnswer + " / 배열 요소 타입: "+ typeof strAnswer[0];

    //3.
    const newAnswer = strAnswer.split('');
    $newAnswer.textContent = newAnswer + " / 배열 요소 타입: "+ typeof newAnswer[0];
    // console에서 읽을 때 1번의 것은 숫자, 5번의 것은 문자열인데, 화면상에서는 차이가 안남. 콘솔에서만 차이가 남.

    //4.
    //var1. for문
    const numAnswer1 = [];
    for (n = 0; n < newAnswer.length; n += 1){
      numAnswer1.push(Number(newAnswer[n]));
    };
    $numAnswer1.textContent = numAnswer1 + " / 배열 요소 타입: "+ typeof numAnswer1[0];

    //var2. while문
    const numAnswer2 = [];
    //1차 시도: 작동은 하지만 newAnswer이 사라지므로 newAnswer 재사용 불가 
    // while(newAnswer.length > 0){
    //   numAnswer2.push(Number(newAnswer[0]))
    //   newAnswer.shift();
    // };
    // 2차시도. 굿!
    var n = 0;
    while(newAnswer.length !== n){
      numAnswer2.push(Number(newAnswer[n]));
      n += 1;
    };
    $numAnswer2.textContent = numAnswer2 + " / 배열 요소 타입: "+ typeof numAnswer2[0];

    console.log(answer);
    console.log(strAnswer);
    console.log(newAnswer);
    console.log(numAnswer1);
    console.log(numAnswer2);
  }

  $form.addEventListener('submit', (event) => {
    event.preventDefault();
    const value = $input.value;
    console.log(value + " / type: " + typeof value);
    all(Number(value));
  });

</script>
</body>
</html>

Som

흘러가는 대로, 되는 대로, 꾸준히 🦦

1개의 댓글

happy

2023년 7월 19일

정말 좋은 글 감사합니다!

답글 달기