티스토리 뷰

유료강의/국비지원

웹퍼블리셔 활용 10일차 - 평가, matchMedia, 자바스크립트 플러그인

2021bong 2021. 10. 26. 18:56 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>프로그래밍 언어 활용</title>
  <link href="style.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

  <article class="grades">
    <h1>성적 처리 프로그램</h1>
    <table>

      <tr>
        <th>수강생 </th>
        <td><input class="name-input" type="text"></td>
      </tr>
      <tr>
        <th>국어</th>
        <td><input class="kor-input" type="text"></td>
      </tr>
      <tr>
        <th>영어</th>
        <td><input class="eng-input" type="text"></td>
      </tr>
      <tr>
        <th>수학</th>
        <td><input class="math-input" type="text"></td>
      </tr>
    </table>

    <div class="btn">
      <button class="result">결과</button>
      <button class="cancel">취소</button>
    </div>


    <h1>성적 결과표</h1>
    <table>
      <tr>
        <th>수강생</th>
        <td class="result-name">이름을 넣어주세요.</td>
      </tr>
      <tr>
        <th>합계</th>
        <td class="sum">총점을 넣어주세요.</td>
      </tr>
      <tr>
        <th>평균</th>
        <td class="avg">평균을 넣어주세요.</td>
      </tr>
      <tr>
        <th>판정</th>
        <td class="p-f">합격/불합격</td>
      </tr>
    </table>

  </article>
  <script>
    // 값을 받아 원하는 위치에 출력하기
    $('.result').on('click', function () {
      let student = $('.name-input').val();
      let kor = Number($('.kor-input').val());
      let eng = Number($('.eng-input').val());
      let math = Number($('.math-input').val());
      let sum = kor + eng + math;
      let sub = $('input[type=text]').length - 1;
      let avg = (sum/sub).toFixed(0);
      function p_f() {
        if (avg >= 60) {
          $('.p-f').text('합격')
        } else {
          $('.p-f').text('불합격')
        }
      }
      $('.result-name').text(student);
      $('.sum').text(sum);
      $('.avg').text(avg);
      p_f();
    });
    // 취소버튼을 눌러 초기화하기
    $('.cancel').on('click', function () {
      $('input[type=text]').val('');
      $('.result-name').text('이름을 넣어주세요.');
      $('.sum').text('총점을 넣어주세요.');
      $('.avg').text('평균을 넣어주세요.');
      $('.p-f').text('합격/불합격');
    });
  </script>

</body>

</html>
    *{box-sizing: border-box;}
    .grades{
        margin:0 auto; width:100%; height:100vh;
        display:flex; justify-content: center;align-items: center;
        flex-direction: column;
    }
    .grades h1{}
    .grades table{width:400px; border-collapse: collapse;background:#f3f3f3;}
    .grades table th{padding:15px 0;border:1px solid #ddd;}
    .grades table td{padding:15px 0; border:1px solid #ddd; text-align:center;}
    .grades table td input{width:90%; padding:10px; border:1px solid #000;}
    .grades .btn{margin:20px 0 60px; text-align:center;}

제이쿼리는 .val();

바닐라는 .value();

혼동하지 말자.....

matchMedia

CSS미디어쿼리랑 비슷함

  window.addEventListener('load', function () {
    const mql = window.matchMedia('screen and (max-width:1024px)'); // matchMedia 사용
    if(mql.matches){ // matches가 0-1024px범위 안에 있으면 true값을 반환
      console.log('0-1024');
    }
  });

 

순간마다 감지

  window.addEventListener('load', function () {
    const mql = window.matchMedia('screen and (max-width:1024px)');
    mql.addListener(function(e){ // mql의 범주 안에 들어가는 순간 감지
      console.log(e.matches)
    });
    if(mql.matches){
      console.log('0-1024')
    }
  });
  window.addEventListener('load', function () {
    const mql = window.matchMedia('screen and (max-width:1024px)');
    mql.addListener(function(e){
      if(e.matches){
        //ipad
        console.log('mobile&ipad')
      } else{
        //pc
        console.log('pc')
      }
    });
  });

기기별로 이런 식으로 사용

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button {
      display: none;
    }
  </style>
</head>

<body>
  <header>
    <nav>
      <a>menu01</a>
      <a>menu02</a>
      <a>menu03</a>
    </nav>
    <button>버거메뉴</button>
  </header>
  
  <script>
  const mql = window.matchMedia('screen and (max-width:1024px)');
  let device = 'pc';
  window.addEventListener('load', function () {
    mql.addListener(function (e) {
      if (e.matches) {
        //ipad
        device = 'ipad';
      } else {
        //pc
        device = 'pc';
      }
      deviceChange();
    });
  });
  function deviceChange() {
    if (device == 'pc') {
      document.querySelector('button').style = 'display:none';
    } else {
      document.querySelector('button').style = 'display:block';
    }
  }
</script>
</body>

</html>

 

이벤트를 발생시킬 때 addEventListener보다 onclick사용을 추천

계속 이벤트가 추가되기때문

자바스크립트 플러그인 사이트

 

Unheap

http://www.unheap.com/

 

Unheap - A tidy Repository of jQuery Plugins & JavaScripts

Unheap is a repository for browsing & staying on top of the latest jQuery plugins and JavaScript scripts.

www.unheap.com

 

슬릭

http://kenwheeler.github.io/slick/

 

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

 

스와이프

https://swiperjs.com/

 

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

 

Masonry

https://masonry.desandro.com/

 

Masonry

Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower:  bower install masonry --save Install with npm:  npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o

masonry.desandro.com

 

728x90
저작자표시

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 활용 9일차 - ajax, fetch  (0) 2021.10.25
웹퍼블리셔 활용 8일차 - 스토리지+로드 예제 1, 2, 3  (0) 2021.10.21
웹퍼블리셔 활용 7일차 - 폼 예제 6, 7, 8  (0) 2021.10.20
웹퍼블리셔 활용 6일차 - 폼 예제 3, 4, 5  (0) 2021.10.19
웹퍼블리셔 활용 5일차 - 폼 예제 1, 2  (0) 2021.10.18
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함