JavaScript 5

[Vanilla JS] Weather API

#08 Weather APInavigator.geolocation.getCurrentPosition(onGeoOk,onGeoError); • navigator브라우저에 대한 정보를 제공하는 객체 • geolocationGeolocation API에 접근할 수 있게 해 준다 • getCurrentPosition()현재 위치를 비동기적으로 얻기 위해 사용 , 3가지 인자를 받는다위치 정보를 성공적으로 가져왔을 때 호출될 콜백 함수.위치 정보를 가져오는 데 실패했을 때 호출될 콜백 함수 (선택 사항).추가 옵션을 지정하는 객체 (선택 사항) (OpenWeather에서 By geographic coordinates , My API key 사용)      shyeon GitHub - Nomad_VanillaJS

[Vanilla Js] To do list

#07 To do list• target이벤트가 발생한 요소 가리킨다 • parentElement()현재 요소의 부모 요소 가리킨다 • JSON.stringify()js 객체나 배열을 문자열로 변환 function saveToDos(){ localStorage.setItem("todos", toDos);}  function saveToDos(){ localStorage.setItem("todos", JSON.stringify(toDos));} • JSON.parse()JSON 문자열을 JS 객체로 변환 • forEach()array에 있는 각각의 item에 대해 function 실행 + arrow function() => 으로 나타낸다function sayHello(item){ conso..

[Vanilla JS] Clock, Quotes and background

#5  Clock • setInterval()interval : 특정 작업이 반복되는 시간 간격setInterval(sayHello, 5000); ➣ setInterval(실행하고자 하는 function, 시간 간격(ms))  • setTimeout()setInterval(sayHello, 5000); ➣ setTimeout(실행하고자 하는 function, 지연 시간(ms)) • new Date() • padStart()padStart(2, "0"); ➣ padStart(문자열의 목표 길이, *앞부분에 채우는 데 사용할 문자열)*기본값 : " "※  number일 경우 String으로 바꿔서 사용 • Math.random()Math.random() * n; ➣ 0 ~ n 사이의 숫자 얻을 수 있다 (소..

[Vanilla JS] Login

#4 Login• input사용자로부터 데이터를 입력받기 위해 사용되는 폼 ※ input 요소를 form 요소 안에 넣어야 하는 상황데이터를 서버로 전송할 때브라우저의 기본 폼 기능을 사용할 때클라이언트 측 유효성 검사를 할 때접근성을 높일 때폼 데이터를 그룹화할 때form 요소 안에 넣어야 하는 이유!- 사용자가 데이터를 입력하고 엔터 키 or 버튼 누를 때 해당 데이터가 자동으로 서버로 제출  • Eventfunction onLoginSubmit(event){ event.preventDefault(); console.log(event);} ➣ preventDefalut 함수 브라우저가 기본적으로 수행하는 동작을 막는다 ex) 새로고침 onLoginSubmit(event)→ event : ..

[Vanilla Js] Js on the browser

#2 Welcome to JavaScript array.push('hi'); ➣ array 마지막에 추가 • typeofvalue의 type 알 수 있는 함수ex) (type number) • parseInt()string을 number로 변환 ex) parseInt("15") -> 15 • isNaN() number인지 아닌지 boolean으로 알려주는 함수 #3 JavaScript on the browser • getElementById()  document.getElementById("name");  → html에서 id이름이 name인 element 찾아준다 • getElementByClassName()많은 element를 한 번에 가지고 와야 하는 경우 사용  • querySelector()→ ..