1회로는 부족하지만 우선은 끝까지 완주했음
빨리 끝내고 싶단 마음에 뒷부분은 제대로 포스팅을 못했지만, 다시 공부할 때 보충해서 써야겠다.

Vue공부하러 가야겠당


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

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
  1. 아르 2017.04.26 22:08 신고

    안녕하세요. 우연히 JavaScript30으로 검색하여 왔습니다.
    영어가 부족해서 뭘 만들어야 하는지 파악하는데도 시간이 걸렸는데 좋은 포스팅 감사합니다.

    • BlogIcon takeu takeU 2017.04.26 22:17 신고

      감사합니다 아직많이부족하니 피드백주시면 반영해보겠습니다!

Whack A Mole

목표

두더지잡기 게임을 만듬

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Whack A Mole!</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Whack-a-mole! <span class="score">0</span></h1>
  <button onClick="startGame()">Start!</button>
  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    <div class="hole hole2">
      <div class="mole"></div>
    </div>
    <div class="hole hole3">
      <div class="mole"></div>
    </div>
    <div class="hole hole4">
      <div class="mole"></div>
    </div>
    <div class="hole hole5">
      <div class="mole"></div>
    </div>
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>
<script>
</script>
</body>
</html>

과정

  1. 변수, 상수 생성
  2. 게임 진행 시간 설정
  3. 두다지가 올라올 구멍을 정하는 함수 생성
  4. 두더지가 올라오고 내려가도록 하는 함수 생성
  5. 게임을 시작하기 위한 함수 생성
  6. 두더지를 잡았을 때의 함수 생성
  7. 두더지를 클릭하면 bonk 실행

코드 분석

  1. 변수, 상수 생성

    const holes = document.querySelectorAll('.hole');
    const scoreBoard = document.querySelector('.score');
    const moles = document.querySelectorAll('.mole');
    let lastHole;
    let timeUp = false;
    let score = 0;
    

    두더지 잡기 게임을 하기 위한 변수, 상수 생성

  2. 게임 진행 시간 설정

    function randomTime(min, max) {
     return Math.round(Math.random() * (max - min) + min);
    }
    

    randomTime에 랜덤으로 진행될 시간이 min과 max사이에서 랜덤으로 정해지도록 담는다

  3. 두더지가 올라올 구멍을 정하는 함수 생성

    function randomHole(holes) {
     const idx = Math.floor(Math.random() * holes.length);
     const hole = holes[idx];
     if (hole === lastHole) {
         console.log('Ah nah thats the same one bud');
         return randomHole(holes);
     }
     lastHole = hole;
     return hole;
    }
    

    전체 6개의 구멍에서 랜덤으로 한개를 정하는 함수를 생성, 이때 중복되지 않도록 if문을 달아 다시 함수가 실행되도록 하고 마지막에 hole을 반환하도록 한다.

  4. 두더지가 올라오고 내려가도록 하는 함수 생성

    function peep() {
     const time = randomTime(200, 1000);
     const hole = randomHole(holes);
     hole.classList.add('up');
     setTimeout(() => {
         hole.classList.remove('up');
         if (!timeUp) peep();
     }, time);
    }
    

    선택된 holeup 클래스를 달아 두더지가 올라오도록 하고, 시간이 지나면 제거하도록 함.
    만약 timeUp이 true가 되면 끝남

  5. 게임을 시작하기 위한 함수 생성

    function startGame() {
     scoreBoard.textContent = 0;
     timeUp = false;
     score = 0;
     peep();
     setTimeout(() => timeUp = true, 10000)
    }
    

    게임을 시작할 때의 조건들과 위에서 만든 peep함수를 실행하도록 설정하고 timeUp이 true가 되거나 시간이 10초가 흐르면 멈추도록 설정

  6. 두더지를 잡았을 때의 함수 생성

    function bonk(e) {
     if(!e.isTrusted) return; // cheater!
     score++;
     this.classList.remove('up');
     scoreBoard.textContent = score;
    }
    

    클릭하면 스코어가 추가되고 두더지가 사라지도록 up 클래스를 지워주도록 함수 생성

  7. 두더지를 클릭하면 bonk 실행

    moles.forEach(mole => mole.addEventListener('click', bonk));
    

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

isTrusted - 이벤트가 사용자 생성에 의해발생한다면 true, 스크립트로 인해 생성되거나 수정되면 false 반환
textContent - 텍스트로 내용을 표시함

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

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19

Countdown Timer

목표

카운트다운 타이머를 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Countdown Timer</title>
    <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="timer">
        <div class="timer__controls">
            <button data-time="20" class="timer__button">20 Secs</button>
            <button data-time="300" class="timer__button">Work 5</button>
            <button data-time="900" class="timer__button">Quick 15</button>
            <button data-time="1200" class="timer__button">Snack 20</button>
            <button data-time="3600" class="timer__button">Lunch Break</button>
            <form name="customForm" id="custom">
                <input type="text" name="minutes" placeholder="Enter Minutes">
            </form>
        </div>
        <div class="display">
            <h1 class="display__time-left"></h1>
            <p class="display__end-time"></p>
        </div>
    </div>
    <script src="scripts-START.js"></script>
</body>
</html>

과정

  1. 변수, 상수 생성
  2. 타이머를 진행하는 함수 생성
  3. 남은 시간을 출력하는 함수 생성
  4. 남은 시간, 분 생성
  5. 타이머 시간 설정
  6. 함수를 실행하도록 이벤트리스너 생성

코드 분석

  1. 변수, 상수 생성

    let countdown;
    const timerDisplay = document.querySelector('.display__time-left');
    const endTime = document.querySelector('.display__end-time');
    const buttons = document.querySelectorAll('[data-time]');
    

    변수 countdown 설정, 각 상수에 해당하는 내용 설정

  2. 타이머를 진행하는 함수 생성

    function timer(seconds) {
    clearInterval(countdown);
    
    const now = Date.now();
    const then = now + seconds * 1000;
    displayTimeLeft(seconds);
    displayEndTime(then);
    
    countdown = setInterval(() => {
     const secondsLeft = Math.round((then - Date.now()) / 1000);
     if(secondsLeft < 0) {
       clearInterval(countdown);
       return;
     }
     displayTimeLeft(secondsLeft);
    }, 1000);
    }
    

    함수를 실행하면 현재 진행되고 있는 countdown을 정지한다, 즉 기존에 실행했던 타이머를 초기화 시키고 현재 시간과 종료시간을 출력한다.
    남은 시간을 secondsLeft에 담고 0초가 되면 카운트다운을 멈추고 그렇지 않다면 계속해서 1초마다 화면에 출력하고, 카운트를 실행한다

  3. 남은 시간을 출력하는 함수 생성

    function displayTimeLeft(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = seconds % 60;
    const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
    document.title = display;
    timerDisplay.textContent = display;
    }
    

    초단위로 입력한 값을 분:초 형식으로 출력하도록 설정해주고
    탭의 타이틀도 남은 시간이 뜨도록 설정

  4. 남은 시간, 분 설정

    function displayEndTime(timestamp) {
    const end = new Date(timestamp);
    const hour = end.getHours();
    const adjustedHour = hour > 12 ? hour - 12 : hour;
    const minutes = end.getMinutes();
    endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
    }
    

    남은 시간, 종료 시간을 출력할 수 있도록 현재 시간을 받아 상수 생성 후 표시

  5. 타이머 시간 설정

    function startTimer() {
    const seconds = parseInt(this.dataset.time);
    timer(seconds);
    }
    

    startTimer 함수로 seconds에 타이머를 실행할 초를 담도록 한다.

  6. 함수를 실행하도록 이벤트리스너 생성

    buttons.forEach(button => button.addEventListener('click', startTimer));
    document.customForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const mins = this.minutes.value;
    console.log(mins);
    timer(mins * 60);
    this.reset();
    });
    

    버튼을 누르면 startTimer가 실행돼 타이머가 실행이 되고 각 변수에 대해 새로운 값들을 할당해 위의 함수에서 출력할 수 있도록 함

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

setTimeout - 일정시간 후 함수 싱행
setInterval - 일정시간마다 함수 실행
clearInterval - setInterval을 정지

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

31. JavaScript30 완료  (2) 2017.04.21
30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19

Video Speed Controller

목표

비디오 재생속도 컨트롤러를 삽입

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Speed Scrubber</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
    <div class="speed">
      <div class="speed-bar">1×</div>
    </div>
  </div>
<script>
</script>
</body>
</html>

과정

  1. 상수 생성
  2. 속도를 조절할 수 있게하는 함수 생성
  3. 함수 실행

코드

  1. 상수 생성

    const speed = document.querySelector('.speed');
    const bar = speed.querySelector('.speed-bar');
    const video = document.querySelector('.flex');
    

    각 클래스에 해당하는 요소를 speed, bar, video에 담음

  2. 속도를 조절할 수 있게하는 함수 생성

    function handleMove(e) {
     const y = e.pageY - this.offsetTop;
     const percent = y / this.offsetHeight;
     const min = 0.4;
     const max = 4;
     const height = Math.round(percent * 100) + '%';
     const playbackRate = percent * (max - min) + min;
     bar.style.height = height;
     bar.textContent = playbackRate.toFixed(2) + '×';
     video.playbackRate = playbackRate;
     }
    

    y에 레인지바의 최상단 좌표를 담고, percent로 전체 레인지바의 크기에서 최소 0.4 최대 4로 조절할수 있도록 퍼센트 설정 후 반올림해 소숫점 두자리로 나타냄
    위에 설정한 값들을 레인지바에 적용시켜주고 video의 속도를 조절할 수 있도록 playbackRate를 사용

  3. 함수 실행

    speed.addEventListener('mousemove', handleMove);
    

    마우스가 움직이면 handleMove 실행

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

playbackRate - 비디오의 속도를 조절할 수 있게 해주는 메소드

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

30. Whack A Mole  (0) 2017.04.21
29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
  1. 홍지환 2017.04.19 23:16 신고

    열심히하시는군요

  2. BlogIcon takeu takeU 2017.04.19 23:31 신고

    97이니까3번더

Click and Drag

목표

클릭해서 드래그하면 옆으로 넘어가는 페이지를 구현해 봄

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Click and Drag</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="items">
    <div class="item item1">01</div>
    <div class="item item2">02</div>
    <div class="item item3">03</div>
    <div class="item item4">04</div>
    <div class="item item5">05</div>
  </div>
<script>
</script>
  </body>
</html>

과정

  1. 상수, 변수 생성
  2. mousedown시 실행될 함수 생성
  3. mouseleave시 실행될 함수 생성
  4. mouseup시 실행될 함수 생성
  5. mousemove시 실행될 함수 생성

코드 분석

  1. 상수, 변수 생성

     const slider = document.querySelector('.items');
     let isDown = false;
     let startX;
     let scrollLeft;
    

    items을 클래스로 가지는 요소들을 slider에 담고
    isDown, startX, scrollLeft를 변수로 생성

  2. mousedown시 실행될 함수 생성

     slider.addEventListener('mousedown', (e) => {
         isDown = true;
         slider.classList.add('active');
         startX = e.pageX - slider.offsetLeft;
         scrollLeft = slider.scrollLeft;
     });
    

    mousedown 이벤트, 즉 마우스를 클릭하면 isDown을 참으로 바꾸고 active 클래스를 추가해 박스에 확대효과를 주어 활성화 되어있음을 알려주고,
    startX에 전체 페이지 기준 왼쪽지점에서 움직인 만큼 뺀 값을 담고,
    scrollLeft에 좌우 스크롤 값을 읽어온다

  3. mouseleave시 실행될 함수 생성

     slider.addEventListener('mouseleave', () => {
         isDown = false;
         slider.classList.remove('active');
     });
    

    mouseleave 이벤트, 즉 마우스가 떠나면 isDown이 거짓으로 바뀌고, active 클래스를 제거

  4. mouseup시 실행될 함수 생성

     slider.addEventListener('mouseup', () => {
         isDown = false;
         slider.classList.remove('active');
     });
    

    mouseleave 이벤트, 즉 마우스를 클릭했다 떼면 isDown이 거짓으로 바뀌고, active 클래스를 제거

  5. mousemove시 실행될 함수 생성

     slider.addEventListener('mousemove', (e) => {
         if (!isDown) return;
         e.preventDefault();
         const x = e.pageX - slider.offsetLeft;
         const walk = (x - startX) * 3;
         slider.scrollLeft = scrollLeft - walk;
     });
    

    mousemove 이벤트, 즉 마우스를 이동할 때 isDown이 거짓이면 아무일도 생기지 않고,
    x는 클릭을 한 위치에서 부모요소인 <div class="items"> 왼쪽좌표를 뺀 값을 저장하고,
    walk에 위에서 설정한 x에서 <div class="items"> 왼쪽좌표를 뺀 값의 3배를 저장해 스크롤하면 움직일 수 있도록 함
    e.preventDefault()는 이벤트가 한번 생성되고 다시 초기화가 되지 않도록 한다

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

.pageX - 문서기준 가장 왼쪽부터 현재 위치까지의 좌표
offsetLeft - 부모요소에 대해 왼쪽을 기준으로 상대적인 x 좌표를 구하는 것

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

29. Countdown Timer  (0) 2017.04.21
28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18

Stripe Follow Along Nav

목표

박스 크기에 맞춰 내용을 불러오는 네비게이션 바를 만들어 봄

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Follow Along Nav</title>
</head>
<body>
  <h2>Cool</h2>
  <nav class="top">
    <div class="dropdownBackground">
      <span class="arrow"></span>
    </div>

    <ul class="cool">
      <li>
        <a href="#">About Me</a>
        <div class="dropdown dropdown1">
          <div class="bio">
            <img src="https://logo.clearbit.com/wesbos.com">
            <p>Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!</p>
          </div>
        </div>
      </li>
      <li>
        <a href="#">Courses</a>
        <ul class="dropdown courses">
          <li>
            <span class="code">CLPU</span>
            <a href="http://CommandLinePowerUser.com">Command Line Power User</a>
          </li>
          <li>
            <span class="code">MMD</span>
            <a href="http://MasteringMarkdown.com">Mastering Markdown</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Other Links</a>
        <ul class="dropdown dropdown3">
          <li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
          <li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
        </ul>
      </li>
    </ul>
  </nav>
<script>
</script>
</body>
</html>

과정

  1. 상수 생성
  2. 마우스가 올라갈 때의 함수를 생성
  3. 마우스가 떠날 때의 함수를 생성
  4. 효과를 적용, 해제하는 함수 실행

코드 분석

  1. 상수 생성

     const triggers = document.querySelectorAll('.cool > li');
     const background  = document.querySelector('.dropdownBackground');
     const nav  = document.querySelector('.top');
    

    해당 클래스를 가지고 있는 태그를 상수에 각각 매치시켜 정의

  2. 마우스가 올라갈 때의 함수를 생성

    function handleEnter() {
     this.classList.add('trigger-enter');
     setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);
     background.classList.add('open');
    
     const dropdown = this.querySelector('.dropdown');
     const dropdownCoords = dropdown.getBoundingClientRect();
     const navCoords = nav.getBoundingClientRect();
    
     const coords = {
         height: dropdownCoords.height,
         width: dropdownCoords.width,
         top: dropdownCoords.top - navCoords.top,
         left: dropdownCoords.left - navCoords.left
     };
    
     background.style.setProperty('width', `${coords.width}px`);
     background.style.setProperty('height', `${coords.height}px`);
     background.style.setProperty('transform', `translate(${coords.left}px, ${coords.top}px)`);
    }
    

    선택한 요소에 trigger-enter 클래스를 추가하고, 150ms뒤에 trigger-enter-active 클래스를 추가해
    박스를 출력하고, 150ms 뒤에 내용을 추가함.
    동시에 백그라운드에 open 클래스를 추가함
    함수 내에서 지역변수를 생성하는데 이때 getBoundingClientRect는 요소의 크기를 잴 때 사용
    coords에 박스의 길이와, 위치를 입력하고 스타일과 효과를 적용함

  3. 마우스가 떠날 때의 함수를 생성

    function handleLeave() {
     this.classList.remove('trigger-enter', 'trigger-enter-active');
     background.classList.remove('open');
    }
    

    handleLeave에 선택한 것이 trigger-enter, trigger-enter-active 클래스를 지우고,
    background의 open 클래스를 지운다.

  4. 효과를 적용, 해제하는 함수 실행

    triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
    triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));
    

    마우스를 올리고 내릴 때 효과를 해당하는 함수를 실행함

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

contains - 안에 요소, 속성 등 내용을 확인해 참, 거짓을 반환하는 메소드


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

28. Video Speed Controller  (2) 2017.04.19
27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18

Event Capture, Propagation, Bubbling and Once

목표

이벤트 캡쳐 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출
이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출
을 구현해보고 알아봄.

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
<button>button</button>
<script>

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

과정

  1. 상수 선언
  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
  3. div, button에 대해 이벤트리스너 생성

코드 분석

  1. 상수 선언

    const divs = document.querySelectorAll('div');
    const button = document.querySelector('button');
    

    divbutton 태그를 각각의 변수에 담는다

  2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
    ```
    function logText(e) {
    console.log(this.classList.value);
    }
    이벤트가 발생하면 클래스의 값들을 콘솔에 출력

  3. div, button에 대해 이벤트리스너 생성

    divs.forEach(div => div.addEventListener('click',  logText, {
     capture: false,
     once: true
    }));
    button.addEventListener('click', () => {
     console.log('Click!!!');
    }, {
     once: true
    })
    

    div를 클릭시 logText를 최하위 태그부터 실행되며, 한번만 이벤트를 받게하고,
    button 클릭시 콘솔에 메세지가 나오도록 입력

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

capture, once - DOM Listener로 capture는 최상단에서 설명한 capturing, bubbling을 선택하는 것이고, once는 이벤트를 한번만 실행하고 이벤트리스너를 삭제한다는 뜻

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

27. Click and Drag  (0) 2017.04.19
26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18

Sticky Nav

목표

요즘 웹 브라우저에 많이 쓰이는 상단에 네비게이션바 고정을 자바스크립트로 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sticky Nav</title>
  <link rel="stylesheet" href="style-START.css">
</head>
<body>
  <header>
    <h1>A story about getting lost.</h1>
  </header>
  <nav id="main">
    <ul>
      <li class="logo"><a href="#">LOST.</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Images</a></li>
      <li><a href="#">Locations</a></li>
      <li><a href="#">Maps</a></li>
    </ul>
  </nav>
  <div class="site-wrap">
    <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 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 laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>

    <img src="http://unsplash.it/400/400" class="align-right 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 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 laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
  </div>
<script>
</script>
</body>
</html>

원래 쓸모없는 내용이 많지만 다 짤랐음, CSS속성도 따로 작성하지 않았음

과정

  1. 상수, 변수 생성
  2. 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행

코드 분석

  1. 상수, 변수 생성

     const nav = document.querySelector('#main');
     let topOfNav = nav.offsetTop;
    

    nav에 id가 main인 태그를 담고, topOfNav에 nav태그의 상단 좌표값을 담음

  2. 스크롤시 상단에 nav바를 고정하도록 함수 생성 및 실행

     function fixNav() {
         if(window.scrollY >= topOfNav) {
             document.body.style.paddingTop = nav.offsetHeight + 'px';
             document.body.classList.add('fixed-nav');
         } else {    document.body.classList.remove('fixed-nav');
             document.body.style.paddingTop = 0;
         }
     }
     window.addEventListener('scroll', fixNav);
    

    fixNav에 스크롤을 nav바의 높이 이상으로 내리면 fixed-nav 클래스를 추가해 nav의 상단에 패딩을 줘서
    스크롤을 내려도 상단에 nav바가 고정되도록 함.
    그 이하만큼 스크롤한다면 fixed-nav 클래스를 삭제하고 패딩을 0으로 줌
    스크롤을할 때 fixNav 함수를 실행

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

offset() - 문서에서 요소의 상대적인 위치를 알아낼 때 사용, 보통 nav바를 만들 때 사용

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

26. Stripe Follow Along Nav  (0) 2017.04.19
25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17

Speech Synthsis

목표

자바스크립트 SpeechSynthesisUtterance API로 글을 읽어주는 도구 구현

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Speech Synthesis</title>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="voiceinator">

      <h1>The Voiceinator 5000</h1>

      <select name="voice" id="voices">
        <option value="">Select A Voice</option>
      </select>

      <label for="rate">Rate:</label>
      <input name="rate" type="range" min="0" max="3" value="1" step="0.1">

      <label for="pitch">Pitch:</label>

      <input name="pitch" type="range" min="0" max="2" step="0.1">
      <textarea name="text">Hello! I love JavaScript 👍</textarea>
      <button id="stop">Stop!</button>
      <button id="speak">Speak</button>
    </div>
<script>
</script>
</body>
</html>

과정

  1. 사용 가능한 목소리 리스트 출력
  2. 재생, 정지 버튼 생성
  3. 목소리 설정
  4. 옵션 설정

코드 분석

  const msg = new SpeechSynthesisUtterance();
  let voices = [];
  const voicesDropdown = document.querySelector('[name="voice"]');
  const options = document.querySelectorAll('[type="range"], [name="text"]');
  const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
msg.text = document.querySelector('[name="text"]).value;

기능을 구현하기 위한 변수, 상수 설정

  1. 사용 가능한 목소리 리스트 출력

    function populateVoices() {
     voices = this.getVoices();
     voicesDropdown.innerHTML = voices
         .filter(voice => voice.lang.includes('en'))
         .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
         .join('');
    }
    speechSynthesis.addEventListener('voiceschanged', populateVoices);
    

    voices에 사용 가능한 모든 목소리들을 담고, en즉 영어를 지원하는 목소리들만 option으로 걸러내 HTML에 출력하는 함수 populateVoices에 담음
    getVoices가 변경되면 populateVoices를 실행

  2. 재생, 정지 버튼 생성

    function toggle(startOver =true) {
     speechSynthesis.cancel();
     if(startOver) {
         speechSynthesis.speak(msg);
     }
    }
    speakButton.addEventListener('click', toggle);
    stopButton.addEventListener('click', () => toggle(false));
    

    toggle함수로 메세지를 읽을 수 있도록 함. 이때 이미 speechSynthesis가 실행, 즉 음성이 재생중이면 종료하고 재시작함.
    speak 버튼으로 실행, stop 버튼으로 정지함.

  3. 목소리 설정

    function setVoice() {
     msg.voice = voices.find(voice => voice.name === this.value);
     toggle();
    }
    voicesDropdown.addEventListener('change', setVoice)
    

    setVoice에 메세지의 목소리를 선택한 이름에 따라서 선택할 수 있도록 함수 생성.
    목소리 선택 후에 자동으로 toggle() 함수 실행으로 글을 읽을 수 있도록 함

  4. 옵션 설정

     function setOption() {
         msg[this.name] = thi s.value;
         toggle();
     }
     options.forEach(option => option.addEventListener('change', setOption));
    

    options 레인지바에서 값을 조정하면 바뀐 값으로 글을 한번 읽어줌

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

이번꺼 역시도 “별게 다되네” 라는 생각이 들지만, 새로운 API를 알게된 것 이외에 나왔던 함수, 이벤트들이 반복되어 익숙하게 다룰 수 있도록 하는것이 중요함

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

25. Event Capture, Propagation, Bubbling and Once  (0) 2017.04.19
24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17

Follow Along Link Highlighter

목표

표시해놓은 링크에 포인터가 올라가면 효과를 주는 방법을 알아봄.

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>👀👀👀Follow Along Nav</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <nav>
      <ul class="menu">
        <li><a href="">Home</a></li>
        <li><a href="">Order Status</a></li>
        <li><a href="">Tweets</a></li>
        <li><a href="">Read Our History</a></li>
        <li><a href="">Contact Us</a></li>
      </ul>
    </nav>

    <div class="wrapper">
      <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
      <p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
      <p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
      <p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
  <script>
  </script>
</body>
</html>

과정

  1. 상수, 태그 생성
  2. 효과 적용을 위한 함수 생성
  3. 효과 적용

코드 분석

  1. 상수, 태그 생성

    const triggers = document.querySelectorAll('a');
    const hightlight = document.createElement('span');
    highlight.classList.add('highlight');
    document.body.appendChild(highlight);
    

    a태그를 triggers에 담고. highlight로 새로운 span태그를 만들어 highlight클래스를 붙여 body의 최하단에 붙임.

  2. 효과 적용을 위한 함수 생성

    function highlightLink() {
     const linkCoords = this.getBoundingClientRect();
     console.log(linkCoords);
     const coords = {
         width: linkCoords.width,
         height: linkCoords.height,
         top: linkCoords.top + window.scrollYm
         left: linkCoords.left + window.scrollX
     };
     highlight.style.width = `${coords.width}px`;
     highlight.style.height = `${coords.height}px`;
     highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    }
    

    coords로 현재 태그의 길이,높이, 좌표값을 알아 낸 후에 highlight 클래스에 적용된 효과를 그대로 적용해줌.

  3. 효과 적용

    triggers.forEach(a => a.addEventListener('mouseenter', hightlightLink));
    

    각각의 a태그에 대해 마우스가 올라갔을 때 highlightLink를 실행

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

appenChild() - 한 노드를 특정 부모노드의 자식 노드 리스트중 마지막에 삽입
getBoundingClientRect() - 요소의 사이즈를 설정하는 함수

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

24. Sticky Nav  (0) 2017.04.18
23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17

+ Recent posts