ECMAScript, ES6

자바스크립트란?

자바스크립트(Javascript)는 1995년 넷스케이프(Netscape) 웹 브라우져에서 웹페이지에 동적인 요소를 구현하기 위해서 발명 되었다. 그 후 많은 다른 웹 브라우져들 또한 이 언어를 탑재하기 시작했고, 그 결과로 현대의 웹 어플리케이션의 구현을 가능하게 만든 언어이다. 이 언어로 인해 웹 어플리케이션에서 더 이상 사용자가 페이지 새로고침 또는 페이지를 새로 불러오지 않고도 웹과 직접적인 연결이 가능하게 되었다.

ECMAScript가 생긴 이유?

자바스크립트(Javascript)가 넷스케이프(Netscape) 브라우져만이 아니라 다른 웹 브라우져들의 지원까지 받기 시작하면서 다양한 웹 브라우져에서 자바스크립트(Javascript)가 공통되게 잘 작동하기 위해서 표준 규격이 필요해졌는데, 이 때문에, ECMA 국제 기구에서 “ECMAScript Standard”라 불리는 스크립트 표준이 만들어지게 된다. 자바스크립트와 비슷한 뜻으로 많이 들어본 사람들이 있을텐데, Javascript는 ECMAScript와 BOM(Browser Object Model) 와 DOM(Document Object Model)이라는 1개의 코어와, 2개의 모델로 이루어져 있다. ECMAScript 와 Javascript 는 비슷한 뜻으로 자주 쓰이나 작은 차이를 가지고 있다는 걸 알아두자.

ECMAScript란?

ECMAScript는 자바 스크립트를 이루는 코어(Core) 스크립트 언어로, 웹 환경에서만 호스트 되는 언어가 아니다. 웹 환경은 ECMA 스크립트가 호스트되는 환경들 중 하나일 뿐이다. ECMA 스크립트 호스트 환경은 ECMA 스크립트 실행 환경이 구현되있고, 각각 그 환경에 알맞는 확장성을 가지고 있다. 예를들어 웹 브라우져 환경에서는 BOM(Browser Object Model)과 DOM(Document Object Model)이 그 확장성이 되겠다. 이러한 확장성들은 ECMA 스크립트의 문법과 기능에 맞춰 기능의 확장을 가능게 한다. 자바스크립트의 document 객체가 좋은 예이다.

ES6를 포스팅하는 이유

ECMAScript를 ES라 줄여 부르고 버전에 따라서 ES뒤에 숫자가 붙는데 아직까지도 가장 많이 쓰이는 ES5는 2009년에 만들어졌고 ES6은 2015년에 만들어져 널리 사용중이다.
현재 대부분의 자바스크립트의 기준은 ES5로 이루어져있지만 ES6에서 새로운 기술들이 도입되면서 보다 효율적인 코드작성을 위해 개발자들은 공부를 하며 나도 그중 하나가 되기위해 공부하면서 포스팅 해보려한다.


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

5. ES6 Class(클래스)  (0) 2017.04.28
4. ES6 Module(모듈)  (0) 2017.04.28
3. ES6 Template String(템플릿 문자열)  (0) 2017.04.28
2. ES6 Arrow function(화살표 함수)  (0) 2017.04.28
1. ES6 let과 const의 특징 알아보기  (0) 2017.04.28
0. ECMAScript, ES6란?  (0) 2017.04.28

Git, Github 10분만에 익히기

튜토리얼 링크
깃헙 명령어 모음

혼자 작업할 때 커밋하고, 푸시하고 정도의 명령어만 알고 있다가 협업할때 branchmerge니 헷갈렸는데 한번 스윽 해보고나니 그래도 당장 필요한 수준의 명령어정도는 익힐 수 있었고, 공유해도 좋을 것 같아 링크를 남김!

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

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

Vue.js 정리

아래 내용은 기본적인 Vue 사용법을 알고있음을 가정해 작성함

v-model vs v-bind

v-model 은 데이터를 동적으로로 바인딩할 때 사용(<input v-model="message"> 와 같이 작성하면 실시간으로 message라는 데이터의 값을 변경할 수 잇음)
v-bind 는 속성을 표현식에 동적으로 바인딩할 때 사용 / 축약형으로 :로 대체 가능 (<img :src="img.jpg" 와 같이 작성하면 이미지의 주소를 불러올 수 있음)

조건문 v-show vs v-if

v-show - 항상 렌더링되며 display: none 속성이 추가되고 사라짐으로써 화면에 보여지고 안보임.
v-if - 조건이 true 일 때 렌더링되고 false 일 때 삭제된다.

역할은 동일하지만 v-show는 초기 렌더링 비용이 높고 v-if는 토글 비용이 높으므로,
자주 변경이 되어아 햔다면 v-show, 자주 변경이 되지 않는다면 v-if를 사용.

또한 v-show<template>문법에서 사용이 불가하며,
v-ifv-else-if,v-else로 추가적인 조건을 생성 가능하다.

반복문 v-for

데이터에서 배열이나, 객체의 내용을 반복해서 출력할 때 v-for을 사용.
예를들어 배열의 이름이 stories이면 <li v-for="story in stories>stories의 내용을 각각 story로 하나씩 꺼내서 리스트로 나열하겠다는 뜻이며 객체도 마찬가지로 사용 가능하다.
여기서 배열이나 객체의 이름을 복수형의 의미를 담은 단어로 지으면 직관적으로 알아보기 쉽게 사용할 수 있다.

배열에서 데이터의 index를 표시해야 한다면, <li v-for="(story, index) in stories">로 for문을 작성하고, {{ index }}로 각각의 index를 출력할 수 있다.

객체는 key:value로 구성되어 있기 때문에 필요하다면, <li v-for="(story, key, index) in stories">와 같이 사용 가능.

v-on

자바스크립트로 처리하는 이벤트 핸들링을 v-on로 대체해 사용. / v-on@로 대체 가능함.
v-on=" "에서 따옴표 안에는 직접 자바스크립트를 사용 하거나, script단에서 만들어 놓은 methods를 사용할 수 있음.

보통 자바스크립트를 사용 시 submit을 하면 event.preventDefault()로 페이지가 새로고침돼서 날아가는걸 막는데 Vue에서 지원하는 @click.prevent로 대체할 수 있다.
이와 같은 종류의 수식어는 .prevent, .stop, .capture, .self가 있음.

methods vs computed

methods는 실행시 함수의 내용을 통해 결과가 바뀌게 할 때 사용할 수 있고,
computed는 이미 함수로 계산된 결과를 가져올 때 사용함.

필터

배열이나 객체에서 각각의 내용을 불러올 때 사용 가능
HTML 코드에 직접 작성하거나, methods, computed 등으로 사용 가능
이름 그대로 원하는 결과값을 필터링해 렌더링하는 것.

사용자 정의 필터도 사용 가능 (Vue.filter())
컴포넌트를 정의할 때와 비슷하지만 두번째 인자에 함수로 원하는 필터 내용을 삽입
HTML에 {{ name | filter-name }}과 같이 사용

Lodash 라이브러리를 사용해 도움을 받을 수도 있음

컴포넌트

Vue.js의 핵심 기능
기본 HTML 엘리먼트를 확장해 재사용이 가능하도록 캡슐화하는데 사용

생성 방법

  1. HTML단에 새로 만든 컴포넌트 작성

    //HTML
    <div class="container">
     <list></list>
    </div>
    //JavaScript
    <script type="text/javascript">
     Vue.component('list',{
         template: '<h1>Hello, World!</h1>'
     });
     new Vue({
         el: '.container'
     })
    </script>
    
  2. 스크립트단에서 모두 처리

    //JavaScript
    <script type="text/template" id="item-template">
     <h1>Hello, World!</h1>
    </script>
    <script type="text/javascript">
     Vue.component('list', {
         template: '#item-template'
     });
    </script>
    
  3. template태그 사용 (권장)

    //HTML
    <template id='item-template'>
     <h1>Hello, World!</h1>
    </template>
    //JavaScript
    <script type="text/javascript">
     Vue.component('list', {
         template: '#item-template'
     });
    </script>
    

같은 템플릿에서 다른 내용을 전달하고 싶을 때 props를 사용함
예시

//HTML
<div class='container'>
    <list writer="Jung"></list>
    <list writer="Kim"></list>
    <list writer="Lee"></list>
</div>
<template id='item-template'>
    <h1>{{ writer }}</h1>
</template>
//JavaScript
<script type="text/javascript">
    Vue.component('list', {
        props: ['writer'],
        template: '#item-template'
    });
    new Vue({
        el: '.container'
    })
</script>


'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

http://flexboxfroggy.com/


개구리를 플렉스속성으로 배치하면서 쉽게 익혀볼 수 있습니다.

마지막까지 깬다면 고수로 거듭날 수 있습니다ㅋㅎ


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

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (0) 2017.04.13

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

+ Recent posts