💛 8.0 Geolocation 🔷 navigator.geolocation.getCurrentPosition() wifi, gps 등 정보 function onGeoOk(position) { console.log(position); const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng) } function onGeoError() { alert("Can't find you. No weather for you.") } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError) 🔷 openweathermap (a..

💛 7.0 Setup const toDoForm = document.getElementById("todo-form"); const todoInput = toDoForm.querySelector("input"); // const todoInput = document.querySelector("#todo-form input"); 둘이 동일 const toDoList = document.getElementById("todo-list"); function handleToDOSubmit(event) { event.preventDefault(); console.log(todoInput.value); const newTodo = todoInput.value; todoInput.value = ""; console.lo..

💛 6.0 Quotes 🔷 Math.random() 0~1 사이 숫자 랜덤 하게 줌 // 반올림 Math.round(Math.random() * 30) // 올림 Math.ceil(Math.random() * 30) // 내림 Math.floor(Math.random() * 30) const quote = document.querySelector("#quote span:first-child"); const author = document.querySelector("#quote span:last-child"); const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)]; quote.innerText = todaysQuote.quote; au..

💛 5.0 Intervals const clock = document.querySelector("h2#clock"); // clock.innerText = "TESTSTT"; function sayHello(){ console.log("hello"); } setInterval(sayHello, 5000); //5s setInterval(’함수’, ‘시간’); 💛 5.1 Timeouts and Dates 🔷 setTimeout( function , time) 💛 5.2 PadStart 🔷 padStart() String에 쓸수 있는 함수임 "1".padStart(2, "0") // padStart(길이, "추가할문자") // 길이가 2가 아니면 앞에 0을 추가해줌 // "01" "12".padStart(2..

💛 4.0 Input Values //* 방법1 // const loginForm = document.getElementById("login-form"); // const loginInput = loginForm.querySelector("input"); // const loginButton = loginForm.querySelector("button"); // 방법2 const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function handleBtnClick(){ console.dir(loginInput.value); co..

💛 3.0 document Object html의 elment는 js를 통해서 console.dir // doucuemnt 확인 가능 console에 document 입력시 해당 정보를 콘솔창에서 볼 수 있음 document : HTML을 가르키는 객체임 안에 많은것이 들어 있음 document.title object의 값도 바꿀수 있음(update) ex) document.title=”HI” JS 에서 HTML을 읽어올 뿐만 아니라 변경이 가능!! JS는 이미 HTML에 연결이 되어 있음 Document가 html 웹사이트를 말함 document.body …. SUPER COOL~~~ 💛 3.1 HTML in Javascript 🔶매우 * 13 자주 사용 할 거임!! getElementById() do..

💛2.0 your first js project HTML, JS 🔶 브라우저의 console 이용 개발자 도구의 conlse 콘솔탭에 작업을 하면 브라우저에 영향을 미침 >alert("hi"); 콘솔에서 작성하는게 귀찮음 콘솔은 긴코드를 작성하기 위해서 만들기 위한것이 아님 콘솔을 한줄씩 작성할 수 있음 → JS 파일을 만들어야함 html은 접착제임 css, js 파일을 html에 가져와서 사용 css, js 파일은 브라우저에 열어도 제대로 반영이 안됨 참고) ! + tab : html 탬플릿 자동완성 🔶 개발자 도구- 크롬 html - element tab css - style tab js - console 콘솔은 Js 오류를 확인할 수 있음 💛2.1 basic data types number int ..