Javascript

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을 누른 시점인 함수로 돌아가..

ToDo 리스트 만들기 - 만들고 싶은 기능 1) 먼저 HTML에 입력 폼을 만들어준다. 2) Javascript 먼저 자바스크립트에서 쓰일 요소들을 변수로 만든다. // form, input, ul 태그를 변수로 가져오기 const toDoForm = document.querySelector("#todo-form"); const toDoInput = document.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); 입력폼에 할일을 적고 엔터를 치면, input값을 저장하고, input칸을 비운다. function handleToDoSubmit(event) { event.preventDefaul..

더보기 appendChild, createElement - 만들고 싶은 기능 1) 먼저 배경화면으로 만들고 싶은 파일들을 저장하여, img파일에 넣어주었다. 2) Javascript 1. 먼저 이미지파일을 images라는 array에 담아주었다. // 이미지 파일명을 array에 담아준다. const images = ["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; 2. 랜덤화 하는 변수만들기 (=명언 랜덤과 같음) const todaysImage = images[Math.floor(Math.random() * images.length)]; 3. img 태그를 document에서 만든다. const bgimage = document.createEleme..