반응형 📍 Front-End/🜸 JavaScript25 [JavaScript30/Day-9] Dev Tools Domination console 찍을 때 유용한 함수들 알아보는 문제인 것 같다 .. 문제라기보다 console 로그에 대해 알아보는 시간..! 2021. 7. 22. [자바스크립트] 마우스 이벤트(mouse event)의 종류 1. click 해당 요소에서 마우스를 클릭! 했을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 2. dblclick 해당 요소에서 마우스를 더블 클릭! 했을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 3. mousedown / mouseup 해당 요소에서 마우스가 눌러진 상태일 때 / 떼었을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 5. mousemove 해당 요소에서 마우스가 움직일 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 6. mouseover 해당 요소에서 마우스가 요소 안으로.. 2021. 7. 21. [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. 이전 1 2 3 4 5 6 7 다음 반응형