개발 뜯기/JavaScript

Canvas HTML에선 Canvas API를 제공하고 있다. Canvas는 context를 가지며 이는 요소 안에서 픽셀에 접근할 수 있는 방법이라고 보면 된다. context는 와 사이에 있다 생각하면 된다. 이 때, 실질적으로 그림을 그리는 것은 CanvasRenderingContext2D를 통해 할 수 있다. CanvasRenderingContext2D context를 만드는 방법은 간단하다. context veriable을 만들어주면 된다. const canvas = document.getElementById('my-house'); const ctx = canvas.getContext('2d'); properties fillStyle 도형 내부의 색, 그래디언트, 패턴 등을 정의한다. examp..

Mouse Event mouse와 관련된 대표 event에 대해 알아보자. MouseEvent 인터페이스는 특정 지점을 가리키는 장치를 통해 발생하는 이벤트를 의미한다. (키보드, 마우스처럼) 1. mousedown / mouseup 요소 위에서 마우스를 클릭하거나 뗄 때 발생한다. 2. mouseover / mouseout 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직이거나 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생합한다. 3. mousemove 마우스를 움직일 때 발생한다. 4. click 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행된다다. 5. dblclick 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 ..

HTML의 form action, JavaScript의 onsubmit()을 활용하면 다음 페이지로 넘어가는 이벤트를 줄 수 있다. Form action & onsubmit() action : form 데이터를 처리할 프로그램의 URI(Uniform Resource Identifier)를 지정한다. 웹 문서 링크를 문자열 형태로 작성한 뒤 form의 데이터를 전송하면 해당 루트로 이동한다. php나 jsp로 작성한 문서를 지정해 데이터를 처리하는 것도 가능하다. onsubmit() : 양식 제출 이벤트가 발생할 때의 동작을 지정할 수 있다. form 태그 내부에서 type="submit"으로 인해 발생하는 이벤트를 처리할 수 있다. 이벤트 발생과 url이 적용되는 시점 사이에 처리할 동작을 지정할 수 있..

jQuery없이 JS로 슬라이더를 만들던 중 getBoundingClientRect()를 발견했다. DOMRect의 오브젝트를 긁어오는 메소드인데 console로 찍으면 다음과 같이 나온다. console.log(SLIDE_SIZE); // 출력 결과(firefox) DOMRect { x: 488.5, y: 120, width: 300, height: 237.88333129882812, top: 120, right: 788.5, bottom: 357.8833312988281, left: 488.5 } x, y 좌표값과 해당 엘레먼트의 width, height값 그리고 상하좌우 값도 나온다! getBoundingClientRect() IE에서 x, y값을 얻지 못하는 것을 제외하고(역시 IE...) 대부분..

자바스크립트로 랜덤하게 컬러(RGB)를 가져오도록 해보자. 사용한 코드 function makeColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); } rgb 색상은 각각 256가지의 정수 값 3개가 모여 만들어진다. ex) rgb(255, 155, 55) 0 ~ 255 = 256개이므로 Math.random()함수를 사용해 리턴한다. Math.floor() Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환한다. Math.floor(𝑥) Math.random() Math.r..