노마드코더/바닐라JS로 크롬앱만들기5 weather 여기서는 이전 수업에서 사용하지 않았던 함수 두개를 배운다. navigator.geolocation.getCurrentPosition() getCurrentPosition은 두개의 argument가 필요하다. 하나는 모든 게 잘 됐을 때 실행되는 함수, 다른 하나는 에러가 발생했을 때 실행 될 함수이다. function onGeoOk(position){ const lat = position.coords.latitude; const lag = position.coords.longitude; console.log("You live in",lat,lag); } function onGeoError(){ alert("can't find you. No weather for you."); } navigator.geo.. 2022. 10. 9. To do list 이전 로그인이랑 비슷하게 form 안에 input태그를 넣어 text를 입력할 수 있도록 하였다. 그리고 form의 기본적으로 동작하는 엔터를 누르면 새로고침이 되는 현상도 막았다. 이제 text를 입력하고 엔터를 누르면 입력칸에 text가 사라 지는 것을 하고 싶다. 그러기 위해서 toDoInput.value 에 빈값("")을 넣는다. 그리고 paintToDo 라는 함수를 만든다. 이 함수는 todo를 그리는 역할을 할 것이다. 이 함수 안에 아까 html에 있는 ul태그 안에 li를 추가하는 코드를 작성한다. const toDoForm = document.querySelector("#todo-form"); const toDoInput = toDoForm.querySelector("input"); co.. 2022. 10. 9. quotes and background 앞써 진행한 페이지에 내가 추가한 명언과 배경화면을 새로고침 할 때마다 랜덤하게 나오게 하는 결과를 만들어 보겠다. 이것을 하기 위해서 Math module을 사용할 것이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math Math - JavaScript | MDN **Math**는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. developer.mozilla.org Math 의 function 중 rondom() 함수를 사용할 것이다. random()은 0과 1사이에 랜덤한 숫자를 제공한다. 그럼 내가 필요한 0 - 10까지의 랜덤한 숫자를 하기 위해서 어떻게.. 2022. 9. 29. Clock setTimeout() 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용한다. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연시간 밀리초(ms) 단위로 받는다. setTimeout(() => console.log("2초 후에 실행됨"),2000); 예를들어, 위의 코드는 2초를 기다린 후 콘솔에 출력된다. setIntervar() 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용한다. setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다. setIntervar(() => console.log(new Date()),2000);.. 2022. 9. 26. Log In addEventListener addEventListener()는 document의 특정요소( id, class, tag 등등)event(ex - click함수를 실행하라, 마우스를 올리면 함수를 실행하라 등..) 를 등록할 때 사용된다. 자주 사용되는 이벤트 종류 click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mo.. 2022. 9. 26. 이전 1 다음 728x90
