Geolocation weather.js를 만들고 navigator.geolocation.getCurrentPosition 를 사용하면 내가 있는 곳의 위도와 경도를 알 수 있다. 날짜 정보는 https://openweathermap.org/api 에서 Current weather data 사용 Weather API 🎈 API 다른 서버와 이야기할 수 있는 방법 🎈 fetch fetch 를 사용해서 실제로 URL에 갈 필요 없이 JS가 대신 URL 부른다. fetch 은 당장 일어나지 않고 시간이 좀 걸린뒤 일어나므로 then 사용 weather.js const API_KEY = "api key 값"; function onGeoOk(position){ let lat = position.coords.lat..

5. Loading To Dos part One 1. localStorage에 저장된 값들을 가져와서 string으로 저장되어 있는 값을 JSON.parse 사용해서 변환 1-2. localStorage에 값을 저장하거나 가져올 떄 동일한 key 를 사용하므로 TODOS_KEY 로 선언해 사용 2. forEach 사용해 array 의 item 갯수 만큼 console.log 출력 const toDoFrom = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); const TODOS_..

1. Setup index.html todo.js const toDoFrom = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { // submit 의 기본동작인 새로고침이 안되도록 event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; // toDoInput 에 입력한 내용 지우기 } toDoFrom.addEventListener("..

Quotes quotes.js 를 만들고 quotes 배열에 명언을 넣어서 랜덤으로 출력 index.html Lon In 00:00:00 quotes.js const quotes = [ { quote: "The greatest glory in living lies not in never falling, but in rising every time we fall", author: "Nelson Mandela", }, { quote: "Never let the fear of striking out keep you from playing the game.", author: "Babe Ruth", }, { quote: "Life is either a daring adventure or nothing at all..

디데이를 나타내줄 태그에 id 값을 지정해준다. index.html Time Until Christmas querySelector을 사용해 id 값으로 찾은 h2 요소를 변수에 저장해준다. const clockTitle = document.querySelector(".js-clock"); 함수를 만들고 2022년 12월 25일 기준과 현재를 기준으로 변수 2개를 만든다. function getChristmasEve() { // Sat Dec 25 2021 00:00:00 GMT+0900 (한국 표준시)를 생성 const christmas = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`); const today = new Date(); } dif..

Intervals - 주기적으로 설정한 행동이 실행되도록 해준다. clock.js function sayHello(){ console.log("hello"); } // 실행하려는 함수, 몇 ms 간격으로 할지 setInterval(sayHello, 5000); // 5초마다 sayHello 함수 호출 setTimeout(sayHello, 5000); // 5초 뒤 sayHello 함수 호출(한번만 실행) Timeouts and Dates clock.js function getClock() { const date = new Date(); clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; } // 웹 사이트가 l..

Input Values input.html app.js // const loginForm = document.getElementById("login-form"); // const logininput = loginForm.querySelector("input"); // const loginutton = loginForm.querySelector("button"); const logininput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick(){ console.log(logininput.value) } logi..

JS를 사용하는 이유는 HTML과 상호작용을 하기 위해서다. HTML의 Element들은 JS를 통해 변경하고 읽을 수 있다. Document - 브라우저에 이미 존재하는 obejct - html코드를 JS 관점으로 보고 있는 것이다. - JS는 html에 접근하고 읽을 수 있을 뿐만아니라 변경 가능하다. console.dir : 객체의 속성을 계층 구조로 출력 console.log : document.body 객체를 출력하면 태그 내용 출력 JS로 정보를 가지고 올 수 있는 방법 document 객체와 element 를 가져오는 수 많은 함수들을 이용하는 것이다. document.getElementById("title"); // html에서 id를 통해 element를 찾아준다. const title ..