Javascript/Vanilla Javascript

그림판 만들기 - 만들고 싶은 기능 먼저 마우스를 움직일 때마다, 캔버스 좌표가 계속 움직여야 한다. 따라서 움직일 때마다 시작점이 바뀌는 함수를 만들어준다. canvas.addEventListner("mousemove", onMove); function onMove(event) { ctx.moveTo(event.offsetX, event.offsetY); } 마우스를 클릭하면서, 마우스를 움직이면 그림이 그려지는 것이므로, 클릭이 됐다는 신호가 주어지면 mousemove 콜백함수에서 그림이 그려져야한다. 먼저, 클릭이 되면 신호가 주어지고 클릭이 떨어지면 신호가 없어지는 함수를 만들어준다. canvas.addEventListener("mousedown", onMouseDown); canvas.addEv..

집 만들기 - 만들고 싶은 기능 혼자서 집을 만들어 봤다.. moveTo(x좌표, y좌표) : x좌표, y좌표로 이동 lineTo(x좌표, y좌표) : x좌표, y좌표로 이동하면서 그리기 stroke() : 선긋기 fillRect(x좌표, y좌표, 너비, 높이) : 사각형 그리기 stokeRect(x좌표, y좌표, 너비, 높이) : 테두리만 있는 사각형 그리기 lineWidth = "설정값" : 선의 굵기 설정하기 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 700; canvas.height = 700; ctx.fillRect(200, 200, 40, 200); ctx..

canvas API - html element 중에 canvas 라는 API가 있는데, 이는 그림을 그릴 수 있게 해주는 API다. 파이썬에서 터틀을 그리는 거랑 비슷하게 생긴 것 같다. - 1 HTML html에 canvas 태그를 넣어주고, app.js 을 심어주었다. - 2 JavaScript javascript에서 canvas 태그를 변수로 잡아주고, getContext를 통해 2d화 시켰다. 3D도 가능하다. // canvas 를 변수화 const canvas = document.querySelector("canvas"); // getContext는 붓과 같은 API, 안에 2d로 적어주었다. const ctx = canvas.getContext("2d"); -3 CSS 그림이 그려질 canva..

To-Do List Project 완성본 URL https://ddaeunbb.github.io/project/todo/index.html Document ddaeunbb.github.io

날씨 기능 만들기 (weather API) - 만들고 싶은 기능 먼저 자신이 있는 위치를 불러올 수 있는 함수가 있다. 파라미터에는 성공 시 함수와, 실패 시의 콜백함수를 넣어준다. navigator.geolocation.getCurrentPosition(GeoOk, GeoError) 성공과 실패했을 때의 콜백함수를 넣어주었다. 성공시 파라미터를 생성해주고 콘솔에 출력해본다. function GeoOk(position){ console.log(position) } function GeoError(){ alert("Can't find you. No Weather for you.") } 콘솔창에서 데이터 값을 확인해볼 수 있는데, latitude, longitude를 확인할 수 있다. (위도, 경도) 위도와..

ToDo 리스트 만들기2 - 만들고 싶은 기능 1. 버튼을 눌러 리스트를 삭제하면 화면상에서는 지워지지만 새로고침 시, localStorage에서는 지워지지 않는 현상을 수정해야한다. JavaScript에서는 html의 부모요소를 target.parentElement를 통해 찾고 remove해주면 요소를 제거할 수 있었지만, 데이터에서 사용자가 없앤 element를 찾기란 쉽지 않다. 게다가 같은 값의 데이터가 있는 경우 어떤 것을 지워야하는지 알 수 없으므로, 각 데이터마다 id를 부여한다. (object형식으로) 1) JavaScript 먼저 data 형식을 바꿔야 하므로, 사용자가 값을 입력했을 때 object 형식으로 저장하는 방법으로 바꿔야한다. 그렇다면 submit을 누른 시점인 함수로 돌아가..