MDN을 통해서 canvas에 대해 배워본다. Canvas 태그는 context를 갖고 있는 HTML의 요소이다. context라는 것은 우리가 픽셀에 접근할 수 있는 방법이다. 굉장히 간단하게 이 context를 만들 수 있다. const ctx = canvas.getContext("2d"); 브러쉬역할을 하는 것을 getContext를 통해 가져온다. ctx.strokeStyle = "#616161"; //처음 사용하는 사람이 이 색상으로 사용하도록 한다. strokeStyle은 윤곽선 색을 설정하는 것이다. ctx.lineWidth = 2.5; lineWidth는 브러쉬의 굵기를 지정하는 것이다. 나중에는, 만들어 놓았던 input의 type=”range”를 통해 lineWidth를 조정할 수 있도..

기본적인 HTML과 CSS로 setup을 일단 끝낸 상태에서, 이제 자바스크립트를 작성할 것이다. 먼저 캔버스 위에 마우스를 두면 그것을 감지하는 것을 할 것이다. 지금부터 canvas는 div라고 상상한다. const canvas = document.getElementById("jsCanvas"); 먼저 자바스크립트에서 canvas를 가져온다. function onMouseMove(event){ console.log(event); } if(canvas){ //canvas가 존재하는지 확인 canvas.addEventListener("mousemove",onMouseMove); } Canvas가 존재한다면, canvas안에서 마우스가 움직일 때 (mousemove) 이벤트를 콘솔창에 찍도록 일단 시험해본..

API(Application Programming Interface): 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단 - 오직 데이터만 가져오는 것이다. - 이런 API를 제공하는 웹사이트를 이용하면 해당 웹사이트를 통해 데이터를 얻을 수가 있는데 우리가 가져올 것은 데이터 뿐이다. 디자인이나 다른 것은 필요하지 않다. - 그러니까 이런 API는 특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안된 것 - 여기 저장된 데이터는 우리가 local storage에 저장한 데이터랑 똑같이 생겼다. 데이터가 string으로 되어있 https://openweathermap.org/current 여기보면 지리좌표를 이용하는 “By geographic coordinates” API가 있다. 이게..

이제 우리가 할 것은 Location 정보를 가져오는 것이다. 유저의 Location 좌표 정보를 읽어서 그 정보를 local storage에 저장하는.. (위도와 경도를 읽어노는 것) 일단 init() 함수를 만들고 맨 마지막에 호출하는 코드를 넣는다. const COORDS = 'coords'; function loadCoords(){ const loadedCoords = localStorage.getItem(COORDS); if(loadedCoords === null){ askForCoords(); } else{ //getWeather } } function init(){ loadCoords(); } init(); loadCoords() 함수를 다음과 같이 일단 작성한다. 만약 loadCoords가..

To-do list를 지우기 위해서는 2가지를 해야 한다. 1) local storage에서 todo 하나를 지워야 하고 그리고 저장해야 한다. 2) 그리고 HTML 에서도 지워야 한다. 먼저 HTML을 먼저 지우는 것부터 하겠다. 우리는 li를 지울 것이다. 그러기 위해서 함수를 하나 만든다. deleteToDo라는 함수 만들기 function deleteToDo(event){ } delBtn.addEventListener("click",deleteToDo); paintToDo 함수에서, delBtn(삭제버튼)을 눌렀을 때 deleteToDo 함수가 실행되도록 addEventListener를 사용한다. function deleteToDo(event){ console.log(event); } consol..

★to-do를 저장하기 이제 to-do(할 일)를 저장하는 것부터 시작할 것이다. 그리고 to-do list(할 일 목록)는 array가 되어야 한다. 왜냐하면 할 일 항목이 많아질 수 있기 때문이다. 해야할 일을 하나만 저장하는 게 아니라 여러 개가 모인 목록으로 저장해야 하는 것이다. const toDos = []; toDos라는 이름의 빈 배열을 만들어 준다. 처음엔 빈 배열로 만들고, 해야할 일을 생성했을 때 그게 이 toDos라는 Array에 추가되도록 한다. 그러기 위해서 일단 toDoObj 라는 것을 만들어야 한다. const toDoObj = { text: text, id : toDos.length + 1 //맨 처음엔 toDos Array가 비어있으니까 id 값은 1일 것이다. } toD..