[JavaScript30] 12,13,14 강 정리

12강. Key Sequence Detection

목표

---

비밀키 입력 시 유니콘이 나오도록 설정

 

과정

---

1. 비밀키 크기만큼 배열을 생성

2. keyup 이벤트를 받아 순서대로 잘라서 배열에 삽입

3. 배열에 들어있는 문자들을 join 했을 때 비밀키와 일치한다면 유니콘 등장

 

코드 분석

---

const pressed = []; // 배열생성
const secretCode = 'wesbos'; //비밀키 설정


window.addEventListener('keyup',(e)=>{  //이벤트 리스너 생성
  // console.log(e.key);
  pressed.push(e.key); //배열에 이벤트 key 삽입
  pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); // 비밀키 크기만큼 배열 자르기
  if(pressed.join('').includes(secretCode)){ // 배열을 join했을때 비밀키가 포함되어있다면
    console.log('Did it'); // 해냈어!
    cornify_add(); // 유니콘 등장
  }
  // console.log(pressed);
})

1.  pressed.splice(-secretCode.length -1, pressed.length - secretCode.length)

    배열을 자름. 배열에 영향을 줌.  -로 시작해서 뒤에서부터, 즉 최신 입력되는 키부터 배열에 담는 듯.

2. .join()

    배열의 모든 요소를 연결해 하나의 문자열로 만듬.

3. .includes()

    배열이 특정 요소를 포함하고 있는지 여부를 확인하고, 알맞게 true 또는 false를 반환.

4. cornify_add();

    https://www.cornify.com/extras 플러그인 같은듯

참고 오버워치 홈페이지에서 Konami code 입력시 디바 쏟아져내림

귀여운소리와 함께 디바이모티콘이 떨어진다

 

13강. Slide in on Scroll

 

목표

---

스크롤 내릴때, 이미지 Half 이상 Bottom 이하로 브라우저에 보일때 바운싱 하며 이미지 나타나게 설정

 

과정

---

1. 이미지 태그 전체 선택

2. 각각 이미지에 Half 이상 Bottom 이하로 스크롤이 내려갔을 경우 active class 추가&삭제 함수 생성

3. debounce 함수로 이미지 바운싱하며 나타나게 active된 이미지 넣어서 실행 

 

코드 분석

---

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);
  };
}

const sliderImages = document.querySelectorAll('.slide-in');
  
function checkSlide(e){
  sliderImages.forEach(sliderImage => {
    //half way throungh 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');
    }
  });
}

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

1. debounce 함수

   스크롤을 할 때 변경 사항을 감지하는 시간을 늘려주어 쓸데없이 변화를 자주 감지하지 않도록 해줌.(자세한건 생략)

2. slideInAt 변수

    스크롤한 크기 + 화면크기 = 맨 위에서부터 뷰포트의 세로길이를 합한 값 - 이미지크기의 반

3. ImageBottom 변수

    이미지 최상단 위치 + 이미지 높이 = 이미지 최하단 Y값 좌표

4. ifHalfShown 변수

5. isNotSCrolledPast 변수

....계산 어렵네

    

14강. JavaScript References VS Copying

 

목표

---

자바스크립트 배열과 객체의 참조(References) 와  복사(Copying) 이해

 

과정

---

1. 배열생성

2. 배열 복사 및 참조 

3. 객체생성

4. 객체 복사 

 

코드 분석

---

1. Array reference

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; //original Array
const team = players; //original Array Reference, not Array
console.log(players, team); // Same
team[3] = 'Lux'; // 참조하고있는 team 변경
// original array가 바뀌거나 reference가 바뀌면 모두 바뀜.

2. Array copy

// original Array에 영향을 주지 않음
const team2 = players.slice();
const team3 = [].concat(players);
const team4 = [...players]; //ES6 Soread
const team5 = Array.from(players);

3. Object copy

const wes = {
	name:'wes',
	age : 100,
	social:{
		twitter:'@wesbos',
    	facebook:'wesbos.developer'
	}
}
// one level deep까지만 복사가능
const dev = Object.assign({}, wes, {number : 99});

// All level deep 복사가능
const dev2 = JSON.parse(JSON,stringfy(wes));