둥지

이번 파트는 자바스크립트의 참조와 복사에 대해서 공부하는 파트입니다. 1. const players = ['Wes', 'Sarah', 'Ryan', 'Poppy']; const team = players; console.log(players, team); team[3] = 'Lux'; console.log(players, team); 결과는 players와 team이 같이 바뀐다 이것은 얕은 복사라서 그렇습니다. 2. const team2 = players.slice(); const team3 = [].concat(players); // 아래 두 방법은 ES6부터 사용가능합니다. const team4 = [...players]; const team5 = Array.from(players); 배열은 위의 ..

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다. 1. slide-in 클래스를 가진 element들을 변수로 저장. const sliderImages = document.querySelectorAll('.slide-in'); 2. 이미지 슬라이드 체크 함수 구현. function checkSlide() { sliderImages.forEach(sliderImage => { // 이미지의 절반 계산 const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // 이미지의 하단 계산 const imageBottom = sliderImage.offsetTop + sliderImage...

이번에는 비밀키를 설정해두고 비밀키를 입력할경우 유니콘이 뜨게하는 파트입니다. 그럼 시작해보겠습니다. 1. 먼저 비밀키를 설정합니다. const secretCode = 'wow'; 2. 키업 함수를 만듭니다. function handleKeyup(e) { pressed.push(e.key); pressed.splice(0, pressed.length - secretCode.length); // splice는 slice와 다르게 if (pressed.join('').includes(secretCode)) { cornify_add(); } } 3. 만든 함수를 이벤트로 등록합니다. window.addEventListener('keyup', handleKeyup); cornify_add 함수는 cornify...

이번에는 커스텀 비디오 플레이어 만들기입니다. 이번 파트 부분을 열었을때 javascript 파일이 별도로 분리가 되어있어서 당황했네요. 자 그럼 간단히 기본코드에 대해서 설명하겠습니다. ► « 10s 25s » 위의 html 코드를 보면 간단하게 비디오 플레이어의 모습을 html 태그와 css 코드로 작성이 되어있는것을 볼 수 있습니다. 하지만 실제로 동작하는 비디오 플레이어는 아닙니다. 이제부터는 각각의 기능을 구현을 하겠습니다. 그럼 scripts.js 파일을 열어 코드를 작성해보겠습니다. 1. 모든 element를 변수로 저장 const player = document.querySelector('.player'); const video = player.querySelector('.viewer');..

이번에는 쉬프트 키를 이용해 박스를 동시에 체크할 수 있는 기능을 구현하는 파트입니다. 프로세스 자체는 매우 간단합니다. 1) 체크박스를 하나 체크상태로 만든다. (이때 마지막으로 체크한 체크박스를 기록하고 있어야합니다) 2) 다른 체크박스를 쉬프트를 누른채 클릭한다. 3) 마지막에 체크한 체크박스로부터 지금 클릭한 체크박스까지 전부 체크상태로 변경한다. 그럼 코드작성을 시작해보겠습니다. 1. 먼저 아래와 같이 코드를 작성해보겠습니다. const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"'); let lastChecked; // 마지막에 클릭한 checkbox를 기록하는 변수 function handleCheck(e) { c..

이번 파트는 브라우저의 콘솔창에 관한 함수들의 사용법입니다. 따라해보면 재밌는 부분이 많으니 한번 따라해보세요. // Regular console.log('hello'); // 기본적인 콘솔 로그입니다. // Interpolated console.log('Hello I am a %s string!', '💩'); // 형식 지정자를 이용한 콘솔 로그입니다. // Styled console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue'); // %c를 붙이면 , 뒤에 오는 텍스트는 style 옵션입니다. // warning! console.warn('OH NOOO'); // 노란색 경고..

이번 파트는 html5에 캔버스를 만들어서 그리기 효과를 만들기입니다. 1. 캔버스 기초 셋팅. const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); // 렌더링 컨텍스트 타입 지정. (CanvasRenderingContext2D를 얻어온다) canvas.width = window.innerWidth; // 캔버스 너비를 윈도우 창 너비로 설정한다. canvas.height = window.innerHeight; // 캔버스 높이를 윈도우 창 높이로 설정한다. ctx.strokeStyle = '#BADA55'; // 윤곽선 색깔 ctx.lineJoin = 'round'; // 두 선이 만나는 지점의 모양 c..

javascript의 array에 대해서 배우는 시간 2편입니다. 여기서는 some, every, find, findindex에 대해서 공부를하게 됩니다. 1. is at least one person 19 or older? (한 사람 이상이 19세 이상인가?) const isAdult = people.some(person => ((new Date().getFullYear()) - person.year) >= 19); console.log(isAdult); 2. is everyone 19 or older? (모두가 19세 이상인가?) const allAdult = people.every(person => ((new Date().getFullYear()) - person.year) >= 19); conso..

live search 기능을 구현하는 파트입니다. start 파일을 보면 endpoint라는 변수안에 url만 들어있습니다. 이 url로 들어가보시면 데이터들이 들어있는것을 볼 수 있습니다. 우선 여기서는 fetch를 이용해서 데이터를 가져와 cities라는 변수에 넣겠습니다 const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); 그리고 입력한 단어가 cities안에 있는지 비교해서 찾는 findMatches라는 함수를 작성해보겠습니다. function findMatches(wordToMatch, cities) { return cities.filter(place => { const r..

Flex Box에 대해서 공부하는 파트입니다. 기본 코드를 열고 아래의 코드를 추가해줍니다. (...은 기존에 추가되어 있던 코드를 의미합니다.) .panels { ... display: flex; } .panel { ... flex: 1; justify-content: center; display: flex; flex-direction: column; } 위의 css 코드를 추가하면 panels는 flex box로 변경이 되어 밑으로 나열되어 있던 panel 들이 옆으로 나열되게 됩니다. 그리고 panel들은 전부 같은 공간을 할당받기 위해 flex를 1로 설정하였으며 panel 안에 있는 텍스트를 중앙으로 배치하기 위해 값들을 추가하였습니다. 이번에는 아래의 코드를 추가해보겠습니다. .panel > ..