차근차근 배움터

https://uz1ns.github.io/paintjs/index.html PaintJS Fill Save Clear uz1ns.github.io

#2.0 Canvas Events 캔버스에 마우스를 두면 인식하게끔 mousedown은 내가 마우스를 클릭했을 때 mouseup은 내가 마우스를 클릭한걸 뗐을 때 mouseleave는 아마 마우스가 영역을 벗어났을 때 const canvas = document.getElementById("jsCanvas"); let painting = false; function stopPainting(){ painting = false; } function onMouseMove(event){ const x = event.offsetX; const y = event.offsetY; console.log(x, y); } function onMouseDown(event){ console.log(event); const x ..

Documents 폴더로 이동해서 터미널 실행 후 git clone 깃주소 깃에 올리기 git add . git commit -m "Initial commit" https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if ..

그림판 기능이 있는 웹사이트를 만들어본다 준비물은 크롬/vs code/git/github 정도!

위치정보 동의 이름 입력 새로고침하고 할 일 입력 랜덤하게 배경 결과는 아래 링크에서 확인할 수 있다! Momentum uz1ns.github.io

#8.0 Geolocation navigator 함수 사용 아주 간단하게 내 위치 정보를 확인할 수 있다 function onGeoOk(position){ const lat = position.coords.latitude; const long = position.coords.longitude; console.log("You live in ", lat, long ); } function onGeoError(){ alert("[Error : can't load your current location.]"); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); OPEN API를 이용해서 날씨 정보를 불러와보자 Weather API - OpenWe..

#7.0 Setup const todoFrom = document.getElementById("todo-form"); const todoList = document.getElementById("todo-list"); function todoSubmit(event){ event.preventDefault(); const todoList = document.getElementById("todo-list"); const todo = document.querySelector("#todo-form input").value; todoList.innerHTML += ""+todo+" [x] "; document.querySelector("#todo-form input").value = ""; } todoFrom.ad..

#6.0 Quotes Math.random() 은 0과 1사이의 정수를 반환한다. Math.floor() 소수점 버림 Math.ceil() 올림 Math.round() 반올림 const quotes = [ { quote: "삶이 있는 한 희망은 있다", author: "키케로" }, { quote: "산다는것 그것은 치열한 전투이다.", author: "로망로랑" }, { quote: "하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.", author: "사무엘존슨" }, { quote: "언제나 현재에 집중할 수 있다면 행복할 것이다.", author: "파울로 코엘료" }, { quote: "진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author: "찰리..

#5.0 Intervals const date = new Date(); new Date(); 를 이용해서 현재 월/일/시/분/초 등 다양한 값을 구할 수 있다 #5.1 Timeouts and Dates const clock = document.querySelector("h2#clock"); function getClock(){ const date = new Date(); let hour = addZero(date.getHours()); let minute = addZero(date.getMinutes()); let second = addZero(date.getSeconds()); let time = `${hour}:${minute}:${second}`; clock.innerText = time; } fu..

#4.0 Input Values input의 내용을 가져오려면 value 라는 property를 이용해야 함을 console.dir ( 객체 ) ; 사용하여 확인할 수 있었다. #4.1 Form Submission input 태그에 max-length 라던지, required 같은 속성은 input 태그가 form 태그 안에 존재할 때만 브라우저에서 작동하고 있다 #4.2 Events preventDefault() 메소드는 일반적으로 하는 기본 행동을 실행하지 않게 하는 것 (브라우저의 기본동작을 막아주는 메소드) (submit 버튼을 클릭했을 때 브라우저를 새로고침하는 기능을 포함) function login(tomato){ tomato.preventDefault(); console.log(tomato..