출처 : https://nomadcoders.co/ Geolocation 핵심 : Geolocation를 위해 기본 환경을 세팅한다. 0. weather.js를 만들어주고, html에 import해준다. 1. weather JS에서 navigater 함수를 이용해서 사용자의 위치를 값으로 받는다. tip // navigator 함수는 첫번 째 인자로 위치를 받는데 성공했을 때의 함수를 받고, 두번째 인자로는 에러가 발생했을 때 실행될 함수를 받는다. // 위치를 받는데 성공했을 때의 함수 function onGeoOk(position) { // 위도 값을 저장함. const lat = position.coords.latitude; // 경도 값을 저장함. const lng = position.coords..

출처 : https://nomadcoders.co/ Intervals 핵심 : intervals과 timeout 기능에 대해 알아본다. . 한 파일에 모든 코드들을 넣는게 아닌 Devide and Conquer 방식으로 예를 들어 clcok.js 에서는 시계 기능만, greetings.js 기능에서는 greeting 기능만 다룸. 이렇게 세분화하여 파일을 관리하면, 코드도 짧아지고, 정리도 쉬워짐. . intervals이란? intervals은 "매번" 일어나야 하는 무언가를 뜻한다. ex) "매 2초"는 interval이다. 즉 매 2초마다 무슨 일이 일어나게 하는 것이 interval이다. ex) 2초마다 주식 시장 확인하는 기능etc... JS에서는 intervals이 이미 저장되어있다. /* se..

출처 : https://nomadcoders.co/ Input Values 핵심 : user에게 질문을 하고, 어떻게 정보들을 받을지에 대해 배운다. . HTML에서 모든 것이 시작 되어야 한다. ( element들을 JS로 가져오기 위해서 ) 1. HTML에서 input과 button을 생성하고, div id로 묶어준다. ( 이 때 id는 중복되면 안된다! ) Log In 2. JS에서 HTML element( id = "login-form) 불러오기 // querySelector는 id를 찾는지, class를 찾는지 분명히 해줘야 함 ex) id는 앞에 #붙임. const loginForm = document.querySelector("#login-form"); // id나 클래스를 변수에 연결했으면..

출처 : https://nomadcoders.co/ CSS in Javascript 핵심 : Event에 If문을 사용해보자. . 참고로 JS의 if문 문법은 아래와 같다. if(조건문) { 조건문이 참이라면 실행될 문장 } OR if(조건문) { 조건문이 참이라면 실행될 문장 } else { 조건문이 거짓이라면 실행될 문장 } Ex) const age = parseInt( promt("How old are you?") ); if(isNaN(age)) { console.log("Please write a number"); } else { console.log("Thk!"); } - if, else if, else . 만약 h1.style.color가 yellow라면, tomato로 변경하고 그리고 만약 ..

출처 : https://nomadcoders.co/ The Document Object 핵심 : Js가 어떻게 브라우저를 움직이게 하는지 . Js를 사용하는 이유는 HTML과 상호작용하기 위해서이다. HTML의 Element들을 JS를 통해 변경하고, 읽을 수 있다. . document는 브라우저에 이미 존재하는 object이다. HTML을 가르키는 객체이다. 나의 웹사이트를 가리킨다. document는 JS의 관점으로 HTML을 가르키는 객체이다. ! 우리는 HTML 코드를 JS 관점에서 볼 수 있다. 이는 HTML에 있는 것들을 JS로 가져다 쓸 수 있다는 것(변경, 수정, 추가)을 의미한다. JS에서 Html을 변경할 수 있다는 것을 보여줌 HTML in JS 핵심 : JS에서 HTML의 특정한 무..

출처 : https://nomadcoders.co/ 핵심 : event를 설정할 수 있다. . JS를 통해 HTML의 내용을 가져올 수 있다는 것은 app.js를 HTML에 연결한 덕분이다! document가 HTML이 app.js를 load하기 때문에 존재하는 것임. Grab me! . console.dir을 사용하면 object로 표시한 element를 보여줌. . 위 항목들은 전부 JS object임. 이는 object 내부에 있는 property들의 값을 변경할 수 있다는 것을 의미함. . 위 사진의 style을 보면, js형식으로 작성되어 있음. 이는 js에서 변경할 수 있음을 의미함. const hellos = document.querySelector("div.hello:first-child ..