공부기록/[강의노트] 바닐라 JS로 크롬 앱 만들기 (17) 썸네일형 리스트형 바닐라 JS로 크롬 앱 만들기 #8.0~#8.2 #8.0 Geolocation 브라우저에서 사용자의 위치를 가져오기 위해 navigator.geolocation.getCurrentPosition() 함수를 사용한다. navigator.geolocation.getCurrentPosition(success, error, [options]) geolocation의 syntax이다. (출처 MDN) function onGeoOk(position){ console.log(position) ;} function onGeoError(){ alert("Can't find you. No Weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); 이렇게 입력하고 브라우저 창을 .. 바닐라 JS로 크롬 앱 만들기 #7.7~#7.8 #7.7 Deleting To Dos part Two Delete 하기 위해 paintToDo를 제대로 이해하자. const numbers = [{text:"1", id:123345}, {text:"2", id:152242}] function niceFilter () {true} numbers.filter(niceFilter) filter함수로 array에서 원하지 않는 object를 제외한다. 만약 해당 함수의 값이 true라면 filter함수를 통해 출력된다. 만약 해당 함수의 값이 false라면 filter함수를 통해 출력되지 않고 제외된다. 이렇게 되면 출력값은 아래와 같다. 0: {text:"1", id:123345} 1: {text:"2", id:152242} function niceFilte.. 바닐라 JS로 크롬 앱 만들기 #7.5~#7.6 #7.5 Loading To Dos part Two const ToDos = []; console.log(saveToDos); if(saveToDos !== null){ const parsedToDos = JSON.parse(saveToDos); parsedToDos.forEach(paintToDo); } 이제 해야 할 것은, parsedToDos array 내부의 item들을 가지고 paint(나타내기)하는 것이다. 그러려면 parsedToDos의 인자를 각각 넣은 paintToDo 함수를 호출하면 된다. 그 함수가 바로 forEach 함수이다. function paintToDo(newTodo) { const createLiList = document.createElement("li"); createL.. 바닐라 JS로 크롬앱 만들기 #7.0~#7.4 #7.0 Set Up const toDoForm = document.getElementById("todo-form"); const toDoInput = toDoForm.querySelector("input"); const toDoList = document.getElementById("todo-list"); function handleToDoSubmit(event) { event.preventDefault(); const newTodo = toDoInput.value; toDoInput.value = ""; } toDoForm.addEventListener("submit", handleToDoSubmit); #7.1 Adding ToDos const toDoForm = document.getElement.. 바닐라 JS로 크롬앱 만들기 #6.0~#6.2 #6.0 Quotes 인용문구를 만들어서 array를 만든다. Math 함수를 사용해서 랜덤 숫자를 가지고 온다. Math 함수를 랜덤하게 만들면 실수가 오는데, 그것에 10을 곱한 뒤 floor함수를 덧씌우면 1~10까지 정수가 나오게 된다. Math.floor(Math.random() * 10) console.log(quotes[Math.floor(Math.random() * 10)]); quotes라는 array의 요소를 가져오려면 console.log(함수명[인덱스명]) 그런데 우리가 가지고 있는 인용어구 array의 길이를 기억해야하는 문제가 있다. 요소 수를 하나 더 추가하게 되면 또다시 숫자를 변경해야 하는 것이다. 그러지 않으려면 숫자가 아닌 함수로 하면 된다. 숫자 10을 quotes.l.. 바닐라 JS로 크롬앱 만들기 #5.1~#5.3 #5.0 Intervals const clock = document.querySelector("h2#clock"); function sayHello() { console.log("Hello"); } setInterval(sayHello, 5000); clock 이란 아이디의 h2태그를 가져와 clock변수에 할당해 준 다음 setInterval이란 메서드를 사용하여 매 ??초마다 sayHello 함수를 실행시켜준다. 콤마다음 실행 단위는 밀리초(millisecond, 1000밀리초 = 1초) #5.1 Timeouts and Dates setTimeout 메서드 setTimeout(실행하고자하는 함수, 실행시간 단위) const clock = document.querySelector("h2#clock");.. 바닐라 JS로 크롬앱 만들기 #4.3~#4.7 #4.3 Events 이전것의 복습 #4.4 Getting Username 이번 강의에서는 log in 버튼으로 submit하면 input 기능이 없어지게 만들기를 원한다. function onLoginSubmit(event) { event.preventDefault(); loginForm.classList.add(HIDDEN_CLASSNAME); const username = loginInput.value; greeting.innerText = `Hello ${username}`; greeting.classList.remove(HIDDEN_CLASSNAME); } classList.add와 classList.remove를 사용한다. css파일에 .hidden{ display : none; } 를 넣는다.. 바닐라 JS로 크롬앱 만들기 #4.0~#4.2 #4.0 Input Values Log In 그 안에 input 과 button 기능을 삽입한다.html에서 login-form이라는 id를 가진 div태그를 만들고 js에서 html의 해당 태그를 가지고 오기 위해 document.querySelector을 사용한다. 사용방법은 document.querySelector("#login-form input"); console.dir(loginInput); console.log("click!!!"); function안에 출력하고자 하는 내용을 입력 console.dir(loginInput)을 하게되면 트리구조로 property의 출력을 받게 되는데, 그 중에 사용자가 브라우저에서 input태그에 무언가를 입력 후 버튼을 클릭하게 되면 property 중 va.. 이전 1 2 3 다음 목록 더보기
