2023/12/12 ✨ 자바스크립트 수업 - 혼자만의 공부시간이 필요할 것 같다

---

 

 

❤ 김춘장이의 위키백과 - 나만의 공부 기록 Tistory ❤ 

GitHub - gayulz/StudyHistory: 나의 공부 기록 commit

 

 

---

 

 

수업 전

기술노트 작성 필수, 매일 작성하고 하루에 두세 번씩 읽어봐야 한다

 

 

 

목표

• 그림판 만들기
  기한 2023/12/12 1일
• 게임 만들기
  기한 : 2023/12/13 ~ 2023/12/15
  조건 : 1인당 1개의 게임 만들기

 

 

 

JavaScript 수업

• 체크박스는 다중 선택이 가능하며 radio는 단일선택이 가능하다
  단 radio의 id를 동일하게 해야 단일 선택이 가능하며 Id가 다를 경우 다중선택 가능
  checked는 디폴트 옵션이다
• html에서 name의 역할은 변수명이다, 값을 넘겨줄 때 변수를 지정하여 넘긴다
• 람다 함수(화살표 함수)
  식별자가 없는 익명함수이며 호출이 불가하다 + 콜백함수

 

 

 

EventListener

window.event
document 내 전체적인 이벤트를 감지한다
전역 객체이며 가장 최상위 객체이다. 현재 페이지에 어떤 이벤트 및
모두 체크해 주는 속성이 있다

clientX , clientY : X와 Y좌료를 가져온다
lineTo : 좌표를 인식하고 이동
stroke : 라인을 그리는 것
beginPath : 선을 여기부터 그린다
moveTo : 브러시를 매개 변수 좌표로 이동한다

html과 JS는 다른 영역이지만 , 이벤트리스너로 연결을 함으로써 동작한다
event 로그를 보면 KeyCode가 있다 , 해당 keyCode를 가지고
event처리가 가능하다

 

 

 

 

오늘의 과제 : 그림판 만들기

• 기술 스택 : html과 Js구분한다 js(var, let, Listhener, 함수, 람다식 등등)
• 파일 생성
• html 태그로 ui작업
• js 작업
  캔버스 각체를 가져와서 2d작업을 한다
  캔버스 객체, 마우스 리스너 3개 정의(리스너 등록, 람다식 사용)
  마우스 move를 통한 라인 그리기
  마우스 클릭 시 그리기 시작하며 move시 라인 그리기, mouseup일 경우 그리기 종료
  캔버스 색상 코드 이해
  htm에서 색상 구현 코드 클릭 시 JS를 호출하고 매개변수로 값을 전송한다
  선 굵기 html에 range 객체에 선굵기 크기를 리턴한다
  JS에서 onchange감지 코드를 구현한다
• html에서 액션 인지 후 JS로 전달 로직을 해도 된다, 다만 JS에서 이벤트
  감지 후 처리하는 로직을 주로 쓰기 때문에 해당 구현으로 진행해 본다*

미션 과제
1. 색상 라디오 버튼 옆에 색상표를 추가하여 선 색상을 선택하게 하시오
2. 선과 도형 선택 UI 를 추가하고 사각형 선택시 사각형을 그리며
원형을 선택시 원형을 그리도록 한다, 선을 선택 시 선을 그리도록 한다
3. 현재 그림을 저장하는 기능을 구현한다