국비 48일차

javascript

구구단!!

jQuery

  <script>
    $('#btn').click(function () {
      let dan = $('[name="gugu"]').val();
      if (dan != '' && $.isNumeric(dan)) {
        gugudan(dan);
      } else {
        alert("단수를 넣어주세요.");
        $('[name="gugu"]').focus();
      }
    });
    function gugudan(num){
      let gugulist = '';
      for(let i=1; i<10; i++){
        gugulist += `<li>${num}*${i}=${num*i}</li>`;
      }
      $('#gugudan').html(gugulist);
    };
  </script>

vanilla

<script>
    document.querySelector('#btn').addEventListener('click', function () {
      // let num = document.querySelector('[name="gugu"]').value;
      let num = Number(document.getElementsByName('gugu').item(0).value);
      gugudan(num);
    });

    function gugudan(number) {
      if (number == "" || number == null || number == undefined ||
      (number != null && typeof number == "object" && !Object.keys(number).length)) {
        // null값 체크
        alert("숫자를 입력해주세요.");
        document.getElementsByName('gugu').item(0).focus();
      } else if (isNaN(number)) {
        // number 자료형 체크
        alert("숫자만 입력해주세요.");
        document.getElementsByName('gugu').item(0).focus();
      } else {
        // 숫자일 경우 구구단 실행
        let result = '';
        for (let i = 1; i < 10; i++) {
          // result += '<li>' + number + '*' + i + '=' + (number * i) + '</li>';
          result += `<li>${number}*${i}=${number*i}</li>`
        }
        document.querySelector('#gugudan').innerHTML = result;
      }
    }
  </script>

save n print

버튼 개수에 관계없이 클래스값/id값 순서대로 한번에 부여

attr로 data도 넣을 수 있다 !

this의 html 값으로 넣으라고 해서 이렇게 됨

css에서 이런식으로 해서 선택할 수 있다!!

이렇게 해도 되는군요... ㄷㄷㄷ

jquery

  <div id="searchDiv">
    <input type="text" placeholder="검색어를 저장하세요" name="search" id="search">
    <button>저장</button>
    <button>확인하기</button>
  </div>
  
  
<script>
    let searchArr = new Array();

    $('#searchDiv button').each(function (index, value) {
      $(this).addClass('btn' + index).attr('id', 'btn' + index).attr('data-nm', $(this).html());
    });

    $('body').on('click', '[data-nm="저장"]', function () {
      // 빈값 처리 안 되도록
      if ($('#searchDiv input').val() != "") {
        searchArr.push($('#searchDiv input').val());
        $('#searchDiv input').val('').focus();
      } else {
        alert("입력해주세요.");
      }
    });

    $('body').on('click', '[data-nm="확인하기"]', function () {
      textHtml(searchArr);
    });

    function textHtml(arr) {
      arr.pop();
      let str = arr.join(', ');
      $('#searchDiv').append(`<div>저장해둔 검색어는 ${str}입니다.</div>`);
    }
</script>

vanilla

  <div id="searchDiv">
    <input type="text" placeholder="검색어를 저장하세요" name="search" id="search">
    <button onclick="input()">저장</button>
    <button onclick="print()">확인하기</button>
    <p id="print">입력한 검색어는 </p>
  </div>
  
  
  <script>
    let data = new Array();

    function input() {
      let search = document.getElementById('search');
      if(document.getElementById('search').value != ""){
        data.push(search.value);
        document.getElementById('search').value = '';
        document.getElementById('search').focus();
      }else{
        alert("입력해주세요.");

      }
    }

    function print() {
      let print = document.getElementById('print');
      data.pop();
      let str = data.join(', ')
      print.innerHTML += `${str}입니다.`;
    }
</script>