Mouse Move Shadow

목표

마우스 움직임에 따라 텍스트에 효과가 적용돼 움직이도록 해보려 함

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
</head>
<body>

  <div class="hero">
    <h1 contenteditable>🔥WOAH!</h1>
  </div>
<script>
</script>
</body>
</html>

CSS코드는 뺐음

과정

  1. 함수 생성을 위한 상수 생성
  2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정
  3. 마우스 이동시 그림자의 위치, 색상 설정
  4. 함수 호출

코드 분석

  1. 함수 생성을 위한 상수 생성

    const hero = document.querySelector('.hero');
    const text = hero.querySelector('h1');
    const walk = 500; // 100px
    

    hero에 클래스가 hero인 요소를 담고, texthero중 h1태그를 담고 walk에 500을 담음

  2. 그림자를 만드는 함수 생성 및 좌표값 기준 설정

    function shadow(e) {
     const { offsetWidth: width, offsetHeight: height } = hero;
     let { offsetX: x, offsetY: y } = e;
    
     if (this !== e.target) {
       x = x + e.target.offsetLeft;
       y = y + e.target.offsetTop;
     }
    

    가장 위에 선언된 상수는 아래 두줄을 한줄로 합친것과 같다

    const { offsetWidth: width, offsetHeight: height} = hero
    const width = hero.offsetWidth
    const height = hero.offsetHeight
    

    width에 hero의 가로길이, height에 hero의 세로길이를 담고(border까지의 길이)
    x,y에 현재 요소를 기준으로 마우스 위치의 절대좌표를 담는다
    조건문의 조건을 해석해보면 현재 마우스의 위치가 <div class="hero">안의 h1태그 위에 있을때 참임을 반환한다는 뜻이고 이때 x,y값을 뷰포트를 기준으로 값이 나올 수 있도록 재 설정해준다는 의미이다.
    즉 마우스가 h1태그 위에 있던 없던간에 좌표값(x,y)은 전체 뷰포트를 기준으로 찍힌다.

  3. 마우스 이동시 그림자의 위치, 색상 설정

     const xWalk = Math.round((x / width * walk) - (walk / 2));
     const yWalk = Math.round((y / height * walk) - (walk / 2));
    
     text.style.textShadow = `
       ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
       ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
       ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
       ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
     `;
    }
    

    xWalkyWalk의 좌표값 기준을 -250에서 250으로 변경해주고
    그림자의 방향을 각각 설정해 총 4개의 그림자가 나오도록 설정해줌

  4. 함수 호출

     hero.addEventListener('mousemove', shadow);
    

    마우스가 움직이면 shadow 함수를 실행

찾아본 내용, 알게된 내용들

contenteditable - 컨텐츠를 수정할 수 있게 해주는 속성

'개발 > JavaScript30' 카테고리의 다른 글

18. Adding Up Times with Reduce  (0) 2017.04.16
17. Sort Without Articles  (0) 2017.04.13
16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12

LocalStorage

목표

아이템을 추가하고 리스트를 볼 수 있는 로컬저장소 구현하기

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LocalStorage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <h2>LOCAL TAPAS</h2>
    <p></p>
    <ul class="plates">
      <li>Loading Tapas...</li>
    </ul>
    <form class="add-items">
      <input type="text" name="item" placeholder="Item Name" required>
      <input type="submit" value="+ Add Item">
    </form>
  </div>

<script>
  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = [];
</script>
</body>
</html>

기능없이 레이아웃만 잡혀있는 코드

과정

  1. 아이템을 추가하는 함수 생성
  2. 추가한 아이템을 리스트로 보여주는 함수 생성
  3. 체크 여부를 저장하는 함수 생성
  4. 함수 호출

코드 분석

  1. 아이템을 추가하는 함수 생성

    function addItem(e) {
     e.preventDefault();
     const text = (this.querySelector('[name=item]')).value;
     const item = {
       text,
       done: false
     };
    
     items.push(item);
     populateList(items, itemsList);
     localStorage.setItem('items', JSON.stringify(items));
     this.reset();
    }
    

    preventDefault() 메소드는 새로운 정보 입력후 이벤트 실행을 막아주는 역할이다.
    text에 텍스트를 새로 입력을 해줬을때 name의 value값을 저장하고 item 객체에 위에서 만든 text 값을 담고, done속성에 false를 담는다
    다음은 빈 배열 itemsitem을 담고
    기존에 추가했던 함수를 리스트로 뽑아 낸 후에 text창 초기화

  2. 추가한 아이템을 리스트로 보여주는 함수 생성

     function populateList(plates = [], platesList) {
     platesList.innerHTML = plates.map((plate, i) => {
       return `
         <li>
           <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
           <label for="item${i}">${plate.text}</label>
         </li>
       `;
     }).join('');
    }
    

    popilateList 함수에 빈배열 plates를 만들어 내용과 인덱스를 체크박스와 리스트형태로 반환하도록 한다

  3. 체크 여부를 저장하는 함수 생성

     function toggleDone(e) {
     if (!e.target.matches('input')) return; 
     const el = e.target;
     const index = el.dataset.index;
     items[index].done = !items[index].done;
     localStorage.setItem('items', JSON.stringify(items));
     populateList(items, itemsList);
    }
    

    toggleDone 함수에 체크된 항목들은 done 값을 true로 저장해 다시 값을 불러 올 때 체크되어있는 상태로 불러와지도록 함수 생성 및 로컬스토리지에 저장

  4. 함수 실행

    addItems.addEventListener('submit', addItem);
    itemsList.addEventListener('click', toggleDone);
    
    populateList(items, itemsList);
    

    submit을 할 때 아이템이 추가되는 addItem 실행
    click할 때 체크 여부와 done여부가 저장되는 toggleDown 실행
    마지막으로 저장된 아이템 리스트 호출

찾아본 내용, 알게된 내용들

localStorage - 로컬 스토리지 메소드를 사용하기위해 사용, 만료기간이 없는 저장소ㅁ
setItem, getItem - 로컬 스토리지에 내용을 저장, 불러오는 메소드
reset() - value를 초기화 할 때 사용


길기도 길고 복잡해서 여러번 더 봐야 이해할 수 있을 것같음. 완벽히 이해하진 못해서 설명이 부족함..주륵


'개발 > JavaScript30' 카테고리의 다른 글

17. Sort Without Articles  (0) 2017.04.13
16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11

JavaScript References VS Copying

목표

스크롤이 이미지 자리의 중간까지 오면 이미지가 양옆에서 날아오는 효과를 적용하려 함

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Reference VS Copy</title>
</head>
<body>
  <script>
        const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
  </script>
</body>
</html>

기본 코드가 전부 주석으로 필요한 코드만 남기고 다 지웠음

과정

  1. 변수 설정
  2. 이미지를 날아오게 할 함수 생성
  3. 함수 호출

코드 분석

  1. 문자열, 숫자열, 불린일 때 변수 선언 및 변경

     // start with strings, numbers and booleans
    let age = 100;
    let age2 = age;
     console.log(age, age2); // 100, 100 출력
     age = 200;
     console.log(age, age2); // 200, 100 출력
    

    문자열, 숫자열,불린에서는 위와 같이 선언했던 변수에 다른 값을 넣으면 변경되어 출력된다.

  2. 배열일 때 변수 선언 및 변경

     // Let's say we have an array
     const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
     const team = players;
    
     console.log(players, team);
     // ['Wes', 'Sarah', 'Ryan', 'Poppy'],['Wes', 'Sarah', 'Ryan', 'Poppy']
    
     team[3] = 'Lux';
     console.log(players, team);
     // ['Wes', 'Sarah', 'Ryan', 'Lux'],['Wes', 'Sarah', 'Ryan', 'Lux']
    

    분명히 team[3]으로 team의 배열만 바꾸고 싶었는데 결과는 players도 함께 바뀌게 된다.
    이를 해결하기 위해서는 아래와 같이 사용할 수 있다.

     //해결방법 1 - slice()
     const team2 = players.slice();
    
     //해결방법 2 - concat()
     const team3 = [].concat(players);
    
     //해결방법 3 - [...](spread operator)
     const team4 = [...players];
    
     //해결방법 4 - Array.from()
     const team5 = Array.from(players);
    

    위의 네가지의 방법으로 새로운 배열을 만들어 기존 배열의 변경 없이 따로 값을 변경할 수 있다.

  3. 객체일 때 변수 선언 및 변경

     // with Objects
     const person = {
         name: 'Wes Bos',
         age: 80
     };
     const captain = person;
     captain.number = 99;
    
     console.log(person) // {name: 'Wes Bos', age: 80, number: 99}
    

    배열과 마찬가지로 원래의 객체 또한 변경이 된다.
    이를 해결하기 위해서는 아래와 같이 사용 할 수 있다.

     //해결방법 1 - Object.assign({}, 참조객체, 추가할값)
     const cap2 = Object.assign({}, person, { number: 99, age: 12 });
    
     //해결방법 2 - {...}
     const cap3 = {...person};
    

    위의 방법으로는 아래 코드에서 social안의 twitter내용을 변경할 수 없기 때문에 JSON을 아래와 같이 사용

     const wes = {
         name: 'Wes',
         age: 100,
         social: {
             twitter: '@wesbos',
             facebook: 'wesbos.developer'
         }
     };
     const dev2 = JSON.parse(JSON.stringify(wes));
     dev2.social.twitter = 'Hi'
    

    찾아본 내용, 알게된 내용들

slice() - 배열의 복사본을 생성
concat() - 값들을 연결할 때 사용
assign() - 열거할 수 있는 객체를 복사할 때 사용

'개발 > JavaScript30' 카테고리의 다른 글

16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10

Slide in on scroll

목표

스크롤이 이미지 자리의 중간까지 오면 이미지가 양옆에서 날아오는 효과를 적용하려 함

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="site-wrap">

    <h1>Slide in on Scroll</h1>
    <img src="http://unsplash.it/400/400" class="align-left slide-in">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
  </div>
    <script>
    function debounce(func, wait = 20, immediate = true) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    }

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

기본 코드의 내용이 너무 길어 필요한 내용만 남기고 지웠음
script 코드에서 debounce 함수는 스크롤을 할 때 변경 사항을 감지하는 시간을 늘려줘,
쓸데없이 변화를 자주 감지하지 않도록 해줌.

과정

  1. 이미지 태그 선택
  2. 이미지를 날아오게 할 함수 생성
  3. 함수 호출

코드 분석

  1. 이미지 태그 선택

    const sliderImages = document.querySelectorAll('.slide-in');
    

    .slide-in 클래스를 가진 요소들을 선택

  2. 이미지를 날아오게 할 함수 생성

     function checkSlide(e) {
         sliderImages.forEach(sliderImage => {
             // half way through the image
             const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
             // bottom of the image
             const imageBottom = sliderImage.offsetTop + sliderImage.height;
             const isHalfShown = slideInAt > sliderImage.offsetTop;
             const isNotScrolledPast = window.scrollY < imageBottom;
             if (isHalfShown && isNotScrolledPast) {
                 sliderImage.classList.add('active');
             } else {
                 sliderImage.classList.remove('active');
             }
         });
     }
    

    checkSlide함수로 이미지가 날아오는 기준을 정의해줌
    slideInAt는 현재 뷰포트의 세로길이와 스크롤한 길이의 합에서 이미지 길이의 절반을 뺀 값이다
    imageBottom은 이미지의 최상단 위치 좌표에 이미지 높이를 더한 값, 즉 이름대로 이미지의 최하단의 값이다
    isHalfShownslideInAt이 이미지의 최상단 좌표값보다 클 때 참
    inNotScrolledPast는 스크롤한게 imageBottom보다 작을 때 참
    조건문 안은 위에 설정한 두 부등식이 둘다 참일 때 active 클래스를 더해 이미지가 나오고,
    거짓이면 active 클래스를 삭제함
    즉 이미지의 중간부터 맨 아랫부분 사이에 스크롤을 할 때 이미지가 나오고, 사라진다

  3. 함수 호출

     window.addEventListener('scroll', debounce(checkSlide));
    

    스크롤을 할 때 debounce(checkSlide) 함수가 실행되도록 함

찾아본 내용, 알게된 내용들

offsetTop - 가장 윗부분의 좌표값을 얻을 때 사용
scrollY - 스크롤한 픽셀 만큼 값이 증가

'개발 > JavaScript30' 카테고리의 다른 글

15. LocalStorage  (0) 2017.04.13
14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10

Key Sequence Detection

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>

목표

누른 키가 콘솔창에 뜨도록 배열로 연결되어 뜨도록 하고, 비밀 키를 입력하면 유니콘이 나오도록 설정

과정

  1. 상수 설정
  2. 이벤트 리스너 생성 및 효과 설정

코드 분석

  1. 상수 설정

     const pressed = [];
     const secretCode = 'wesbos';
    

    빈 배열 pressed와 비밀코드가 담긴 secret을 만든다

  2. 이벤트 리스너 생성 및 효과 설정

     window.addEventListener('keyup', (e) => {
       console.log(e.key);
       pressed.push(e.key);
       pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
       if (pressed.join('').includes(secretCode)) {
         console.log('DING DING!');
         cornify_add();
       }
       console.log(pressed);
     });
    

    우선 키를 누르면 콘솔창에 누른 키가 뜨면서 배열 pressed에 추가된다.
    배열의 길이를 항상 6으로 정하기 위해 splice를 사용했고, 새로 입력 시 뒤에서 부터 채워진다
    만약 w,e,s,b,o,s를 입력하면 조건문의 내용과 같이 콘솔창에 알림과 유니콘사진이 생긴다(cornify_add())

찾아본 내용, 알게된 내용들

splice() - 첫번째 매개변수 > 시작 위치, 두번째 매개변수 > 제거할 요소의 수

'개발 > JavaScript30' 카테고리의 다른 글

14. JavaScript Reference VS Copying  (0) 2017.04.12
13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10
9. Dev Tools Domination  (0) 2017.04.09

Custom Video Player

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Video Player</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

   <div class="player">
     <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>

     <div class="player__controls">
       <div class="progress">
        <div class="progress__filled"></div>
       </div>
       <button class="player__button toggle" title="Toggle Play">►</button>
       <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
       <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
       <button data-skip="-10" class="player__button">« 10s</button>
       <button data-skip="25" class="player__button">25s »</button>
     </div>
   </div>

  <script src="scripts.js"></script>
</body>
</html>

목표

동영상 플레이어의 각종 기능을 자바스크립트로 구현

과정

  1. 상수 생성
  2. 함수 생성

코드 분석

  1. 상수 생성

    /* Get Our Elements */
    const player = document.querySelector('.player');
    const video = player.querySelector('.viewer');
    const progress = player.querySelector('.progress');
    const progressBar = player.querySelector('.progress__filled');
    const toggle = player.querySelector('.toggle');
    const skipButtons = player.querySelectorAll('[data-skip]');
    const ranges = player.querySelectorAll('.player__slider');
    
  2. 함수 생성

    function togglePlay() {
    const method = video.paused ? 'play' : 'pause';
    video[method]();
    }
    video.addEventListener('click', togglePlay);
    

    video가 멈춰있으면 play, 실행중이면 pause를 입력하는 상수를 만들어
    video() 메소드에 삽입하는 togglePlay() 함수 생성 후
    video의 뷰포트 클릭시 togglePlay함수가 실행되도록 이벤트리스너 생성

    function updateButton() {
    const icon = this.paused ? '►' : '❚ ❚';
    console.log(icon);
    toggle.textContent = icon;
    video.addEventListener('play', updateButton);
    video.addEventListener('pause', updateButton);
    }
    

    updateButton 함수에 재생버튼과 일시정지버튼을 토글할수 있도록 icon을 만들고
    play,pause 할 때 updateButton이 실행되도록 이벤트리스너 생성

    function skip() {
    video.currentTime += parseFloat(this.dataset.skip);
    }
    skipButtons.forEach(button => button.addEventListener('click', skip));
    

    HTML에서 만든 버튼으로 앞뒤로 스킵할 수 있도록 함수를 만들어줌

    function handleRangeUpdate() {
    video[this.name] = this.value;
    }
    ranges.forEach(range => range.addEventListener('click'), handleRangeUpadate);
    ranges.forEach(range => range.addEventListener('change'), handleRangeUpadate);
    

    볼륨과 재생속도를 조절할 수 있는 range-bar가 작동하도록 함수 생성 및 이벤트리스너 생성

    function handleProgress() {
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
    }
    video.addEventListener('timeupdate', handleProgress);
    

    현재 재생 시간에 따라 재생바의 위치를 설정해 주는 함수 생성 및 이벤트리스너 생성

    function scrub(e) {
    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
    }
    let mousedown = false;
    progress.addEventListener('click', scrub);
    progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
    progress.addEventListener('mousedown', () => mousedown = true);
    progress.addEventListener('mouseup', () => mousedown = false);
    

    직접 재생바에서 원하는 시간으로 이동할 수 있게 해주는 함수 생성 및 이벤트리스너 생성

찾아본 내용, 알게된 내용들

parseFloat - 문자를 실수로 변환

'개발 > JavaScript30' 카테고리의 다른 글

13. Slide in on scroll  (0) 2017.04.12
12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10
9. Dev Tools Domination  (0) 2017.04.09
8. Fun with HTML Canvas  (0) 2017.04.07

Hold Shift and Check Checkboxes

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hold Shift to Check Multiple Checkboxes</title>
</head>
<body>
  <style>

    html {
      font-family: sans-serif;
      background:#ffc600;
    }

    .inbox {
      max-width:400px;
      margin:50px auto;
      background:white;
      border-radius:5px;
      box-shadow:10px 10px 0 rgba(0,0,0,0.1);
    }

    .item {
      display:flex;
      align-items:center;
      border-bottom: 1px solid #F1F1F1;
    }

    .item:last-child {
      border-bottom:0;
    }


    input:checked + p {
      background:#F9F9F9;
      text-decoration: line-through;
    }

    input[type="checkbox"] {
      margin:20px;
    }

    p {
      margin:0;
      padding:20px;
      transition:background 0.2s;
      flex:1;
      font-family:'helvetica neue';
      font-size: 20px;
      font-weight: 200;
      border-left: 1px solid #D1E2FF;
    }


  </style>
   <!--
   The following is a common layout you would see in an email client.

   When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.

  -->
  <div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>This is an inbox layout.</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check one item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Hold down your Shift key</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Check a lower item</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Everything inbetween should also be set to checked</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Try do it with out any libraries</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Just regular JavaScript</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Good Luck!</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Don't forget to tweet your result!</p>
    </div>
  </div>
<script>
</script>
</body>
</html>

목표

shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것

과정

  1. 함수 작성에 필요한 변수, 상수 작성
  2. 함수 생성
  3. 함수 호출

코드 분석

  1. 함수작성에 필요한 변수, 상수 작성

     const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
    
     let lastChecked;
    

    checkboxesinbox클래스 하위의 체크박스 요소들을 담고 빈 변수 lastChecked를 선언

  2. 함수 생성

     function handleCheck(e) {
       let inBetween = false;
       if (e.shiftKey && this.checked) {
         checkboxes.forEach(checkbox => {
           console.log(checkbox);
           if (checkbox === this || checkbox === lastChecked) {
                 inBetween = !inBetween;
                 console.log('Starting to check them inbetween!');
           }
           if (inBetween) {
                 checkbox.checked = true;
           }
         });
       }
       lastChecked = this;
     }
    

    inBetween에 false를 할당해놓고 만약 쉬프트키를 누르고, 누른것이 체크가 되어있다면 조건문을 실행
    처음 버튼을 누를 때 쉬프트를 누르고 클릭하면 하위의 모든 내용 체크,
    두번째 버튼을 쉬프트 누르고 클릭하면 사이의 모든 내용 체크하는 내용을 3중 조건문으로 표현.

  3. 함수 호출

     checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
    

    체크박스를 클릭시 위에 작성한 함수를 호출

찾아본 내용, 알게된 내용들

코드 자체는 어렵지 않지만, 삼중 조건문을 이해하기가 어려웠음

'개발 > JavaScript30' 카테고리의 다른 글

12. Key Sequence Detection  (0) 2017.04.11
11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10
9. Dev Tools Domination  (0) 2017.04.09
8. Fun with HTML Canvas  (0) 2017.04.07
7. Array Cardio Day 2  (0) 2017.04.07

Dev Tools Domination

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Console Tricks!</title>
</head>
<body>

  <p onClick="makeGreen()">×BREAK×DOWN×</p>

  <script>
    const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];

    function makeGreen() {
      const p = document.querySelector('p');
      p.style.color = '#BADA55';
      p.style.fontSize = '50px';
    }
  </script>
</body>
</html>

목표

콘솔창에 각종 연산 및 효과를 넣는 방법들을 익힘

과정

  1. Regular, Interpolated, Styled
  2. Warining, Error, Info
  3. Testing, clearing, Viewing DOM Elements
  4. Grouping together, counting, timing

코드 분석

  1. Regular, Interpolated, Styled

     // Regular
     console.log('hello');
    

    기본 콘솔 출력

     // Interpolated 
     console.log('Hello I am a %s string!', '💩');
    

    %s 자리에 ,뒤의 값이 들어감

     // Styled
     console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue')
    

    %c 뒤에 ,뒤의 스타일 값들이 적용됨

  2. Warining, Error, Info

     // warning!
     console.warn('OH NOOO');
    

    warn - 경고창이 노란색으로 표시

     // Error
     console.error('Shit!');
    

    error - 에러창이 빨간색으로 표시

     // Info
     console.info('Crocodiles eat 3-4 people per year');
    

    info - 파란 느낌표로 정보 표시

  3. Testing, clearing, Viewing DOM Elements

     // Testing
     const p = document.querySelector('p');
    
     console.assert(p.classList.contains('ouch'), 'That is wrong!');
    

    assert - 첫번째 인자가 false일 때 로그 메세지를 출력

     // clearing
     console.clear();
    

    clear - 콘솔의 내용을 전부 지운다

     // Viewing DOM Elements
     console.log(p);
     console.dir(p);
    
     console.clear();
    

    log - 괄호 안의 해당 엘리먼트를 보여줌
    dir - 괄호 안의 해당 엘리먼트의 모든 속성을 보여줌

  4. Grouping together, counting, timing

     // Grouping together
     dogs.forEach(dog => {
         console.groupCollapsed(`${dog.name}`);
         console.log(`This is ${dog.name}`);
         console.log(`${dog.name} is ${dog.age} years old`);
         console.log(`${dog.name} is ${dog.age * 7} dog years old`);
         console.groupEnd(`${dog.name}`);
     });
    

    groupCollapsedgroupEnd 사이에 새 그룹 로깅을 작성

     // counting
     console.count('Wes');
     console.count('Wes');
     console.count('Steve');
     console.count('Steve');
     console.count('Wes');
     console.count('Steve');
     console.count('Wes');
     console.count('Steve');
     console.count('Steve');
     console.count('Steve');
     console.count('Steve');
     console.count('Steve');
    

    count는 같은 인자의 개수를 셈

     // timing
     console.time('fetching data');
     fetch('https://api.github.com/users/wesbos')
         .then(data => data.json())
         .then(data => {
             console.timeEnd('fetching data');
             console.log(data);
         });
    
     console.table(dogs);
    

    timetimeEnd 사이에 데이터를 받아와 타이머를 작동

찾아본 내용, 알게된 내용들

assert - 평가 된 식이 false면 콘솔에 오류 기록
dir - 저장된 객체의 자바스크립트 표현을 출력, HTML 요소일 경우 DOM 표현의 속성 출력
console.group(), console.groupEnd() - 선택적 제목을 사용하여 새로운 로깅 그룹을 시작, console.group() 후와 console.groupEnd() 전에 발생하는 모든 콘솔 출력은 시각적으로 그룹화된다.

'개발 > JavaScript30' 카테고리의 다른 글

11. Custom Video Player  (0) 2017.04.10
10. Hold Shift and Check Checkboxes  (0) 2017.04.10
9. Dev Tools Domination  (0) 2017.04.09
8. Fun with HTML Canvas  (0) 2017.04.07
7. Array Cardio Day 2  (0) 2017.04.07
6. Type Ahead  (0) 2017.04.06

+ Recent posts