목록Javascript/노마드코더 - JS로 크롬앱 만들기 (8)
개발자입니다
노마드코더 JS로 크롬앱만들기) #8 WEATHER - geolocation, fetch
■ 날씨 *navigator.geolocation.getCurrentPosition(성공시 실행할 함수, 실패시 실행할 함수) *console.log 확인시 latitude(위도), longitude(경도) 확인 가능 function onGeoOk(position) { console.log(position); } function onGeoError() { alert("Can't find you. No weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); 위를 토대로 위도, 경도 가져온다. function onGeoOk(position) { const lat = position.coords.latitude; ..
노마드코더 JS로 크롬앱만들기) #7 TO DO LIST - parentElement, JSON.stringify(), filter()
■ adding To Dos 새로운 코드는 없다. // todo.js const toDoForm = document.getElementById("todo-form"); const toDoInput = document.querySelector("#todo-form input"); // toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function paintToDo(newTodo) { const li = document.createElement("li"); const span = document.createElement("span"); li.appendChild(span); span.innerTex..
노마드코더 JS로 크롬앱만들기) #6 QUOTES AND BACKGROUND - Math, createElement, appendChild
■ 랜덤 명언 코딩 Math.random() : 0~1 사이 숫자를 랜덤으로 반환한다. Math.round(숫자) : 숫자를 반올림한다. Math.ceil(숫자) : 숫자를 올림한다. Math.floor(숫자) : 숫자를 내림한다. // quotes.js const quotes = [ { quote: "약한 자일수록 상대를 용서하지 못한다.용서한다는 것은 강하다는 증거다.", author: "- 마하트마 간디" }, { quote: "보이지 않는 곳에서 친구를 좋게 말하는 사람이야말로 신뢰할 수 있다.", author: "- 영국의 신학자 풀러" }, { quote: `하루만 행복하고 싶다면, 이발소를 가라. 일주일만 행복하고 싶다면, 차를 사라. 한달만 행복하고 싶다면, 결혼을 해라. 일년만 행복하고 ..
노마드코더 JS로 크롬앱만들기) #5 CLOCK - Date, setInterval, padStart
00:00 ; ■ clock 만들기 setInterval(함수, 시간(ms)) : 함수를 시간 설정한 간격마다 실행한다. setTimeout(함수, 시간(ms)) : 함수를 설정 시간 이후 실행한다. // clock.js const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); setTimeout(sayHello, 2000); -페이지에 시계 표시하기 getDate() : 오늘 날짜를 가져온다. getDay() : 오늘 요일을 숫자로 가져온다. (일요일은 0, 월요일은 1, 화요일은 2, ...) getHours(), getMinutes()..
노마드코더 JS로 크롬앱만들기) #4 LOGIN - 유효성 검증, preventDefault, `${변수명}`, localStorage
Log In -이름 입력 창과 로그인 버튼 만들기 id: login-form을 상수 저장해서 querySelector로 선택하는 방법이 있다. // app.js const loginForm = document.getElementById("login-Form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); 하지만 아래처럼 바로 축약해서 가져오는 방법이 있다. // app.js const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelec..
노마드코더 JS로 크롬앱만들기) #3 JAVASCRIPT ON THE BROWSER - document, querySelector, addEventListener, CSS 변경
■ JS에서 HTML 태그 선택 document. 다음 아래와 같이 HTML 태그를 선택할 수 있다. document.title = "Hi" // HTML 을 Hi로 변경한다. document.body // HTML document.location // HTML page 주소 getElements의 여러 방법들 const title = document.getElementById("title"); const hellos = document.getElementsByClassName("hello"); const hellos = document.getElementsByTagName("h1"); ■ querySelector 노마드 코더에서는 99% querySelector 방식을 사용한다. querySelecto..