게으른개발너D

Canvas Events 캔버스에 발생하는 이벤트를 세팅해 주려고 한다. ​ 1. mousemove 캔버스 안에서 마우스를 움직였을 때 스크립트에서 감지를 해야 한다. 먼저 캔버스를 불러오자. const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); } 캔버스 안에서 마우스를 움직였을 때 onMouseMove라는 함수가 작동하게 만들었다. console에서 해당 이벤트를 들여다보면 이렇게 나온다. 마우스를 캔버스 바깥에서 움직이면 아무것도 찍히지 않지만 캔버스 안에..

모든 브라우저에서 스타일을 동일하게 적용할 수 있도록 reset.css를 가져온다. 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 you're inter meyerweb.com 코드를 모두 복사하여 reset..

지금까지 만들었던 Momentum App을 CSS로 꾸몄다. 중앙엔 시간과 이름을, 왼쪽 위엔 날씨정보를, 오른쪽 위엔 to do list를 작성할 수 있게 만들었고. 아래쪽엔 명언이 나오게 했고 마우스 hover 하면 아래에 author가 나오게 만들었다. ​ 페이지 새로고침을 하면 배경화면과 아래의 명언이 새로운 것으로 교체된다. ​ 이름 입력 후 로그인을 하고 to do list를 작성하면 다음과 같이 나타난다. 삭제버튼은 css로 checkbox처럼 만들었고, 그걸 클릭하면 체크 처리된 후 사라진다. JS 코드도 몇몇개는 바꾸었는데 날씨 API 사용하는 부분에서 특정 날씨가 나오면 그 날씨를 글자로 보여주는게 아니라 className으로 박아서 css로 해당 날씨에 대한 그림을 보여주도록 변경했다..

Geolocation 이제 내 Momentum App에 현재 날씨를 추가해주고싶다. 날씨를 추가하기 위해선 현재 사용자의 위치 정보가 필요하다. 그건 navigator.geolocation로 알 수 있다. navigator.geolocation.getCurrentPosition(함수1, 함수2); getCurrentPosition function을 호출하면 되는데, 첫번째 파라미터엔 함수 호출이 성공했을 때, 두번째 파람엔 함수 호출에 실패했을 때 보여줄 이벤트를 집어넣으면 된다. function onGeoSuccess(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."..

Quotes 명언을 랜덤으로 보여주기위해 일단 명언 11가지를 Array와 Object로 구현했다. const quotes = [ { quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde" }, { quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero" }, { quote: "Without music, life would be a mistake.", author: "Friedrich Nietzsche" }, { quote: "You know you're in love when you can't fall aslee..

Intervals and Timeouts 1. interval 시간에따라 무언가 표현하려할 때 interval과 timeout을 사용할 수 있다. interval은 특정한 시간마다 특정한 이벤트를 실행시킬 수 있는 것이다. 예를 들어 2초마다 주식 시장을 확인하던가 1초마다 코인 업다운을 확인하던가 하는 것들이다. function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setInterval(실행시킬 이벤트, 반복할 시간) 위의 코드는 5초마다 콘솔창에 hello를 찍어낸다. ​ ​ 2. timeout timeout은 지정한 시간이 지난 후 어떠한 이벤트를 실행시킬 수 있는 것이다. function sayHello() { con..

Form Submission form 안에 input text가 하나 존재하고 input submit 또는 button이 있다면 button을 클릭했을 때 submit이 되어버린다. 그리고 화면은 리로딩이 되어 버리고 input에 적었던 글자는 사라진다. ​ 이걸 막기 위해 preventDefault를 한다. 아래에서 계속... Event 1. PreventDefault loginForm.addEventListener("submit", onLoginSubmit); eventListener가 submit 이벤트를 리슨하면 onLoginSubmit 함수를 호출한다. 함수를 호출할 때 JavaScript는 기본적으로 어떠한 정보를 우리에게 넘겨주는데 우리가 파라미터를 적으면 그 첫번째 파라미터에 그 정보를 담..