🎨 그림판 reset btn 추가
<!--html-->
<button id="jsReset">Reset</button>//javascript
const resetBtn = document.getElementById("jsReset");
if(resetBtn){
resetBtn.addEventListener("click", handleResetClick)
}
function handleResetClick(){
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
HTML/CSS/JS 연결
html-css
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>PaintJS</title>
</head>
<!--head태그 사이에 <link rel="stylesheet" href="블라블라.css"> -->html,css - javascript
- script src 링크 걸기
<script src="app.js"></script>- 코드가 간단할 경우, html 파일 내부에 script 태그 이용해 직접 js코드를 넣어도 된다.
<script>
console.log("hi")
</script>- DOM(Document Object Model) : html파일을 노트 트리 구조로 표현한 객체
html 문서 내의 요소를 모두 정의하고, 접근하는 방법을 제공한다.
const saveBtn = document.getElementById("jsSave");
const colors = document.getElementsByClassName("jsColor");브라우저 이벤트
마우스이벤트
- click : 요소 위에서 마우스 왼쪽 버튼 눌렀을 때
- contextmenu : 요소 위에서 마우스 오른쪽 버튼 눌렀을 때
- mouseover/mouseout : 마우스 커서를 요소 위로 움직였을 때/요소 밖으로 움직였을 때
- mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때/마우스 버튼을 뗄 때
- mousemove : 마우스를 움직을 때
이벤트 핸들러
이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수이며, 사용자의 행동에 어떻게 반응할지 코드로 표현한 것이다. onclick(html)/.onclick(javascript)로 할당할 수 있다.
addEventListener
onclick(html)/.onclick(javascript)은 하나의 이벤트에 복수로 할당할 수 없다는 문제가 있다. 이를 해결하기 위해 addEventListener를 활용할 수 있다.
//기본문법
element.addEventListener(event, handler, [options]);if(canvas){
canvas.addEventListener("mousemove", onMouseMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", stopPainting);
canvas.addEventListener("mouseleave", stopPainting);
canvas.addEventListener("click", handleCanvasClick);
canvas.addEventListener("contextmenu",handleCM);
};이벤트 객체
이벤트가 발생하면 브라우저는 이밴트 객체를 만든다. 객체에 이벤트에 관한 상세한 정보를 넣은 뒤 핸들러에 인수 형태로 전달한다.
- event.type : 이벤트타입
- event.currentTarget : 이벤트를 처리하는 요소. 화살표함수를 사용하거나 바인딩한 경우엔 이 프로퍼티를 사용해 이벤트 처리되는 요소 정보를 얻을 수 있음. 그렇지 않은 경우엔 this가 가리키는 값과 같음.
- event.clientX / event.clientY : 포인터 관련 이벤트에서 브라우저 화면 기준의 커서 좌표
객체형태의 핸들러와 handleEvent
addEventListener로 객체를 이벤트 핸들러로 할당할 수 있다. 이벤트가 발생하면 객체에 구현한 handleEvent 메서드가 호출된다.
https://ko.javascript.info/introduction-browser-events
VS CODE
한 번에 드래그!
- shift + alt + 마우스 드래그
- ctrl + alt + (↑, ↓) / shift + (←, →)
저장 단축키
- cmd + S
화면 크기 단축키
- ctrl + '+' or '-'
모르는것투성이