자바스크립트7 크롬 앱 만들기 [바닐라 JS] Day7 Summary #8.0 ~ #8.2 #8.0 Geolocation 이게 우리가 사용할 API이다. 내 위치와 날씨 국가 지역을 다 알려준다! 내가 할 일은 위도와 경도와 API key와 함께 API를 부르는 것! JS에 weather.js 를 생성해주고 , html에 script 파일을 추가해 주자. function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("you live it", lat, lng); } function onGeoError() { alert("I can't found"); } navigator.geolocation.getCurren.. 2021. 12. 1. 크롬 앱 만들기 [바닐라 JS] Day 6 드디어 실습 로그인 버튼을 구현해 볼꺼다. Summary #7.0 ~ #7.8 #7.0 Set up JS todo.js를 만들어 연결해주었고, 새로운 form을 만들어 id를 todo-form으로 했다. list를 만들기 위해 ul을 하나 만듬. 안에 li 태그가 없는 이유는 JS로 구현할것이기 때문. const toDoForm = document.querySelector("#todo-form"); const toDoInput = document.querySelector("#todo-form input"); const toDoList = document.querySelector("#todo-list"); function handleToDoSubmit(event) { event.preventDefault(.. 2021. 12. 1. 크롬 앱 만들기 [바닐라 JS] Day5 이제 점점 뼈대가 완성되고 있다. Login Submit 부분을 제외하고는 따라가는 중이다. Summary #6.0 ~ #6.2 #6.0 Quotes 명언 10개를 JS파일에 넣었다. quote와 quotes 햇갈림 주의~ const quotes = [ { quote: "It is impossible to live without failing at something, unless you live so cautiously you might as well not have lived at all – in which case, you fail by default.", author: "JK Rowling", }, { quote : "Nobody is a villain in their own story. We’re.. 2021. 11. 26. 크롬 앱 만들기 [바닐라 JS] Day4 Day 3 이해하기 어려웠다. 이제 함수의 기초를 공부하는 단계인데, 너무 복잡했다.시간날때마다 하나하나 지워가며 구현을 해봐야할듯하다. Summary #5.0 ~ #5.3 #5.0. Clock 모든 js코드를 한 file에 담는것은 혼란스러우니, 기능별로 file을 만드는 것을 추천 받았다. html : css : js --> 1 : 1 : 여러개 00:00 HTML 에 id가 clock인 h2를 추가했다. const clock = document.querySelector("h2#clock"); function sayHello() { console.log("hello"); } setInterval(sayHello, 5000); 이렇게 코드를 작성하면 브라우저 console에서 5초마다 hello가 출력.. 2021. 11. 25. 크롬 앱 만들기 [바닐라 JS] Day3 드디어 실습 로그인 버튼을 구현해 볼꺼다. Summary #4.0 ~ #4.7 #4.0 Input Values what your name?에 입력된 값을 Log In이 눌렸을때 읽고싶다.Log In 버튼은 click event로 처리하자 Log In placeholder : input 박스안에 문자를 입력하기 위해 login-form : input을 구분하기 위해 const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick() { console.dir(loginInput); } loginBu.. 2021. 11. 25. 크롬 앱 만들기 [바닐라 JS] Day2 Summary #3.0 ~ #3.8 1. Document 개념 document는 브라우저에 이미 존재하는 object (documnet는 자바스크립트 관점에서의 HTML) 모든 것은 documnet로 부터 시작함(document는 web site를 의미함) 2. HTML in JavaScript Grab me! documet.getElementByID("") : HTML에서 ID를 통해 element를 찾아 줌 --> console창에서 확인 가능 element를 찾고 나면, 해당 HTML에서 변경 가능 자바스크립트는 HTML elemet를 가지고 오는 것 뿐, 자체를 보여주지는 않음 const title = document.getElementById("title"); title.innerText = ".. 2021. 11. 24. 이전 1 2 다음
