728x90 반응형 0254 [바닐라 js로 크롬 앱만들기] 인강정리 (#8) 목차 내 위치를 찍어보자 navigator.geolocation.getCurrentPosition(); api로 날씨정보를 가져와보기 2번을 이용하여 원하는 데이터를 추출해보기 1.좌표를 찍어보자 navigator.geolocation.getCurrentPosition(); : 두개의 2개의 아규먼트가 필요함. 하나는 정상적으로 실행했을때의 함수, 하나는 실패했을때의 함수. html 00:00 weather.js function onGeoOk(position) { const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng); console.log(position).. 2022. 4. 7. [바닐라 js로 크롬 앱만들기] 인강정리 (#7) 목차 todo리스트만들기 todo리스트삭제기능 새로고침해도 todo리스트를 유지하고싶어 : 로컬스토리지 리스트가 덮어씌워지는걸 개선해보자 로컬스토리지 데이터 삭제하기 1. todo리스트 만들기 indext.html 00:00 Log in required: 필수요소로 지정하기 const toDoForm = document.getElementById("todo-form"); const toDoList = document.getElementById("todo-list"); const toDoInput = document.querySelector("#todo-form input") function paintToDo(newTodo) { const li = document.createElement("li"); co.. 2022. 4. 2. [바닐라 js로 크롬 앱만들기] 인강정리 (#5, #6) 목차 시계만들기 (일정간격으로 동작하도록하는 interval) 시계만들기 (자릿수를 채워주는 padStart()) 랜덤텍스트 (1이하의 랜덤한 소수를 만들어주는 Math.random()) 랜덤이미지 (html에서 요소를 새롭게 생성하는 createElement()) 1. interval :매번 일어나야하는 무언가. (ex. 2초마다), html 00:00 clock.js const clock=document.querySelector("h2#clock"); function getClock() { const date = new Date(); //console.log(`${date.getHours()}:${date.getMinutes}:${date.getSeconds`) clock.innerText = `${.. 2022. 3. 26. [바닐라 js로 크롬 앱만들기] 인강정리 (#4) #4강 (실습위주) 목차 id와 class document.getElementByid() input박스 버튼이 눌리는 이벤트추가해보기 div가 아닌 form을 사용해보자. submit은 새로고침되는 특징이있다. 새로고침하지않도록 submit조작하기 링크의 동작을 막는 조작하기 hidden을이용한 숨기기 스토리지 사용하기 1. document.querySelecor("#login-form") 버튼클릭시 이벤트 발생 -> 값을 입력하면 console에 찍히도록 추가 index.html Log in script.js //input과 button을 가져와봅시다. const loginForm = document.getElementById("login-form"); const loginInput = loginFor.. 2022. 3. 21. [바닐라 js로 크롬 앱만들기] 인강정리 (#3) #3 목차 element를 가지고오는 방법들 이벤트 2번을 좀 다른 방법으로 한다면... 컬러와같은 스타일은 css에서 적용하도록 해보자. classList 사용해보기 1. element를 가지고오는 방법들... ha 1 ha 2 ha 3 document.getElementsByClassName("클래스 명") : 여러개의 같은 element이름을 가진 애들을 한꺼번에 불러올때. -> document.getElementsByClassName("hello") // result : [h1.hello, h1.hello, h1.hello] document.querySelector(".hello h1") : class명이 hello인것중 하위의 h1에대해 가져오기 단,여러개인경우 처번째것만 가져온다. ->cons.. 2022. 3. 20. [http] 쿠키와 세션 (작성중) 쿠키와 세션.. 너무나도 많이 들어본.. 이 두가지에대해 간단하게 정리해보자. 쿠키와 세션이 생긴이유 1. http 프로토콜은 비연결성과 비상태성이라는 특징을 가진다. 즉, 한번 사용자의 요청을 수행하고 답을주고나면, 연결을 딱 끊어버린다는것이다. 그게 아주 불편하다. 예를 들면 로그인을 한번하고나면 유지되는것이아니라 다른 페이지로 넘어갈때마다 로그인을 계속해줘야한다.. 2. 이런 번거로운 과정을 보완하기위해 만든것이 바로 쿠키와 세션 그렇다면 쿠키와 세션의 공통점은? 1. http의 비연결성과 비상태성을 보완하여 서버가 클라이언트를 식별하게 해주는것이 쿠키와 세션. 쿠키의 개념 - 웹 사이트에 접속할때 생성되는 정보를 담은 임시 파일 - 데이터 형태는 key와 value로 구성되고 String.으로 이.. 2022. 3. 19. 이전 1 ··· 3 4 5 6 7 8 9 ··· 43 다음 728x90 반응형
