💛 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..

[ 학습 키워드 및 목차 ] 프로그래밍이란? 프로그래밍 언어 Syntax & Semantics 기본 개념과 동작 원리 이해의 중요성 프런트엔드 개발자 학습방향 [1] 프로그래밍 이란? 사람과 컴퓨터 간의 커뮤니케이션을 프로그래밍이라고 한다. 컴퓨터에게 실행을 요구하는 것은 문제를 해결하기 위해서이다. 즉, 프로그래밍은 0과 1의 바이너리인 컴퓨터가 문제를 해결할 수 있게 정확하게 요구사항을 전달하는 작업이고 그 결과물로 우리는 코드를 만들어낸다. 개발자는 Computational thinking ( 컴퓨터의 관점으로 사고 ) 이 필요하다. ( why? 컴퓨터는 인간과 다르기 때문임 ) [2] 프로그래밍 언어 컴퓨터는 1과 0 밖에 모르기에 인간이 사용하는 자연어를 이해하지 못한다. 그래서 기계어를 통해서..