profile
hello world explorer
post-thumbnail

Javascript-14.weather API 호출하기

우선 html에 영역을 만든다. 그런 다음 영역을 js에서 선택해준다. weather API에서 (https://openweathermap.org/api) 좌표에 따라 api를 호출하는 주소를 찾는다. api.openweathermap.org/data/2.5/wea

2021년 7월 11일
·
0개의 댓글
·
post-thumbnail

Javascript-13.geolocation 가져오기

위치를 가져오는 것은 쉽다. navigator.geolocation.getCurrentPosition(성공, 실패)을 이용한다.성공, 실패 경우에 대한 함수를 정의한다.성공 시에는 인자에 position을 전달한다. 실패시에는 실패 메시지를 출력한다.

2021년 7월 8일
·
0개의 댓글
·
post-thumbnail

Javascript-12.DB에서 특정값 제거하기2

array에서 특정값을 제거하는것은삭제가 아니라 제외다.이를 위해 filter를 사용한다.

2021년 7월 8일
·
0개의 댓글
·
post-thumbnail

Javascript-11.DB에서 특정값 삭제하기1

화면에 있는 것을 단순히 지우는 것이 아니라DB에서 특정값을 삭제하기 위해서는텍스트, id 형태를 할당해야 한다.newTodo를 newTodoObj로 변경해서 저장한다.id에는 Date.now()를 이용해 랜덤값을 준다.그다음에 toDos array에는 newTodoO

2021년 7월 8일
·
0개의 댓글
·
post-thumbnail

Javascript-10.todo list 새로고침해도 저장하기

화면에 todo list가 그려져도,새로고침하면 없어진다. local storage에 기록된 todo list는 새로고침해도화면에 그려진채 있어야 한다. 그러기 위해서 우선 savedTodos를 변수로 만든다.그런다음, 저장된 todos가 존재한다면 그것을 parse해

2021년 7월 7일
·
0개의 댓글
·
post-thumbnail

Javascript-09.todo 저장하기

todo리스트를 저장하기 위해우선 빈 array를 만든다.그런다음, newTodo가 생길때마다, todo에 push한다.console에서 toDos array에 변수가 잘 들어갔는지 확인한다. 그러나 어차피 새로고침하면 없어지므로 local storage에 저장해야 한

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

Javascript-08.todo list 삭제하기

작성해놓은 todo list를 삭제하기 위해서는먼저 span 옆에 x 라는 버튼을 추가한다.어차피 js 안에서 파일을 수정하고 html은 손대지 않는다.다음의 코드를 추가한다.그리고 당연히 button이 클릭되었을 때 이벤트를 리슨해주어야 한다.그런다음 deleteTo

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

Javascript-07.todo list추가하기

우선 html에 영역을 만들어준다.그다음에 todo.js에서 해당영역을 선택해 준다.form에 대한 event를 listen하기 위해 다음 코드를 추가해준다.그다음 함수에 대해 정의해준다.자동으로 새로고침되는 것을 막고,인풋에 추가되는 밸류를 newTodo로 할당한다.

2021년 7월 6일
·
0개의 댓글
·
post-thumbnail

Javascript-06. js에서 html에 요소 추가하기

js에서 html에 이미지를 추가해본다.먼저, img 폴더를 만들고, 0.jpeg, 1.jpeg, 2.jpeg를 추가한다.그리고 background.js 파일을 생성한다.생성한 후 html에도 당연히 연결해준다.background.js에는 img의 array를 만든다.

2021년 7월 5일
·
0개의 댓글
·
post-thumbnail

Javascript-05. random quote출력하기

먼저 quote와 author의 세트를 quote.js파일로 만든다. html에 공간을 만들어 둔다. 그리고 quotes.js를 html에 불러온다.quotes.js에서 html의 quotes 영역을 선택한다.const todaysQuote = quotesMath.fl

2021년 7월 5일
·
0개의 댓글
·
post-thumbnail

Javascript-04.clock만들기

clock을 만들기 위해 우선 html에 영역을 추가한다. 이제 app.js에서 html의 영역을 선택한다. 다음으로 clock의 데이터를 가져올 수 있는 function을 만든다.

2021년 7월 5일
·
0개의 댓글
·
post-thumbnail

Javascript-03. Local Storage에 특정값 저장하기

local storage는 작은 DB와도 같음. setItem, getItem, removeItem이 가능함. console에서 localStorage.setItem("username", "chloepark") 식으로Key- Value의 조합으로 저장 가능함. 이것을

2021년 7월 4일
·
0개의 댓글
·
post-thumbnail

Javascript-02. 사용자의 인풋을 화면에 출력하기

Javascript-01에 이어서 사용자의 인풋을 화면에 출력하는 방법이다. 사용자가 이름을 넣고 제출 버튼을 누르면, 제출 버튼 양식이 없어지고 h1으로 환영 메시지가 나타나게 해본다. 그러려면 h1 태그를 html의 form태그 아래에 추가한다. 기본적으로는 h1이

2021년 7월 4일
·
0개의 댓글
·
post-thumbnail

Javascript -01. js에서 사용자의 인풋 가져오기

자바스크립트에서 사용자의 인풋을 받는 것은 간단하다.우선 index.html에, script src를 통해 app.js를 연결해 준다.그리고 form태그를 만든 후 자바스크립트에서 form을 제어하면 된다. 이제 app.js에서 우선 form 태그부분과login Inp

2021년 7월 4일
·
0개의 댓글
·