반응형 Dev. Yelee ˗ˋˏϟˎˊ˗99 [JavaScript30/Day-8] Fun with HTML5 Canvas HTML5 Canvas는 사용해본 적이 없어서 오래 걸렸다. (답안지의 도움을 많이 받음) How? 일단 마우스를 드래그할 때마다 Canvas에 그림이 그려져야 하고 이때 그려지는 그림은 색과 굵기(?)가 변경된다. 캔버스를 먼저 생성하고! 마우스 클릭한 상태일 때, 그리기 이벤트 생성! 마우스 드래그한 상태일 때, 그리기 이벤트 실행! 마우스 클릭을 땔 때, 그리기 중지 이벤트 생성! 마우스가 캔버스를 벗어났을 때, 그리기 중지 이벤트 생성! .... Solution 구조 분해 할당 x=10, y=10을 [x, y]=[10,10]으로! 마우스 이벤트 mouse 드래그 이벤트는 따로 없고 mousemove를 이용! offsetX, offsetY 특정 영역의 절댓값 좌표 2021. 7. 21. [JavaScript30/Day-7] Array Cardio Day 2 Q1. Array.prototype.some() // is at least one person 19 or older? .some()을 이용해서 Person 배열 안의 사람중 적어도 한명이 19살 이상인지 check const result1 = people.some(person => (new Date().getFullYear() - person.year) >= 19); Q2. Array.prototype.every() // is everyone 19 or older? .every()를 이용해서 Person 배열 안의 모든 사람이 19살 이상인지 check const result2 = people.every(person => (new Date().getFullYear() - person.year) >= 19.. 2021. 7. 20. [자바스크립트] .forEach()와 .map()의 차이점 나는 배열에서 각 요소를 꺼낼 때 주로 forEach()를 사용하는 편이다. 이 forEach() 메서드와 비슷한 역할을 하는 .map() 함수가 있는데 둘의 차이점에 대해 알아보자.. 🧐 .forEach() forEach는 배열의 요소를 반복하며, 값을 리턴하지 않는다. (각 요소의 콜백 함수를 실행) const array = [1, 2, 3]; const res = array.forEach((num, index) => { // callback }); console.log(res) // undefiend .map() map은 forEach와 동일하게 배열의 요소를 반복하지만 각 요소에서 함수를 호출하여 발생하는 결과를 배열 형태로 return 한다 const array = [1, 2, 3]; const.. 2021. 7. 19. [JavaScript30/Day-6] Type Ahead 이번 문제가 여태껏 푼 문제 중에 가장 어려웠다. 내가 직접 풀기보다는 답안지를 보고 분석했다. Solution fetch 함수와 정규식에 대해서 더 공부해볼 것! 2021. 7. 19. 이전 1 ··· 16 17 18 19 20 21 22 ··· 25 다음 반응형