Java Script (JS) - GeoLocation (2)

open weather API에서 API키를 받아온다. 이미 좌표값이 있을 경우 콘솔로 찍어주자. 위 처럼 수정 후 네트워크 상태를 확인해보자 then으로 대기 후 실행 온도와 장소를 가져와서 html에 뿌려준다. 끝

2020.05.10

Java Script(JS) - GeoLocation

loadCoords : 로컬스토리지에서 getItem null이면 askForCoords로 이동 위도와 경도 정보를 가져온 후 local storage에 넣는다. 새로 고침해도 위치 정보를 묻지않는다. 이유는 이미 local storage에 저장되었기 때문 다음엔 API를 활용해보자

2020.05.10

Java Script(JS) - IMG

2020.05.10

Java Script(JS) - ToDoLIst (2)

ToDo 리스트를 제거하기 위해서는local storage에서 데이터가 없어야하고 그 상태를 저장해야한다.또한 html에서도 지워져야한다. 그래서 html의 li를 없애주도록 하자 먼저 기존에 있던 삭제 버튼에 이벤트 클릭 이벤트 리스너를 만들고 삭제 함수를 만들자. 각각의 버튼은 parent Node(상위 노드)가 있다. 그래서 버튼을 삭제할 때는 각각에 대해 상위 노드가 누구인지 알아야 해당 버튼을 지울 수 있다. 콘솔로 parentNode를 찍어보면 버튼을 클릭할 때마다 버튼에 대한 상위 노드가 찍힌다. 이제 삭제를 하기 위해 아래와 같이 수정한다. 잘 지워진다 근데 문제점은 새로고침을 하면 다시 생긴다는 것이다. 그래서 filter를 사용하도록 하자 cleanToDos는 삭제한 toDos를 의미하..

2020.05.10

Java Script (JS) - ToDoList

이전에 했던 UserName에 이어서 작성했다. 새 js 파일을 만들고 toDos 조건은 아직 놔둔채로 입력했을 때 로그가 찍히는지 먼저 확인 무리없이 작동하지만 내가 원하는 것은 엔터를 입력하면 input 박스 안의 내용이 사라지는 것이다. 그래서 아래와 같이 초기화를 해주도록 하자 이제 JS에서 직접 태그를 생성해보자 우선 html 파일에서 li를 하나 만들어 둔다 그 다음 JS에서 직접 child 태그를 생성하고 html의 Li 태그의 자식으로 묶어주자. createElement로 li와 버튼, span을 생성하고 버튼과 span을 li의 자식 태그 지정한 후 js의 li를 html의 li의 자식으로 넣는다. 문제점을 발견했는데 난 버튼을 특수문자로 지정해놨는데 보이지 않는 현상이 생겼다. 이럴 때..

2020.05.10

Java Script(JS) - Username

form 태그로 사용자 정보를 받아서 local storage에 저장하도록 할 것이다. loadName 함수로 사용자가 신규인지 아닌지를 판별한 후 화면에 이름을 뿌려주도록 하자. 사용자가 기존 사용자일 경우 paintGreeting 함수로, 신규 사용자일 경우 askForName()함수로 이동한다. askForName 함수를 보면 form태그 클래스명에 SHOWING_CN을 추가하도록 되어있다. -> 즉, display:none에서 block으로 변경된다는 의미. 그 후 submit 이벤트로 hadleSubmit 함수를 호출한다. paintingGreeting 함수는 기존 사용자의 이름을 인자로 받아서 화면에 뿌려준다. handleSubmit 함수의 event.preventDefault()는 유저가 정..

2020.05.09

Java Script(JS) - Clock

이제 시간을 업데이트 해보자 setInterval()함수를 이용하면 된다. 1000은 1000 millisecond로 1초를 의미한다. 한 가지 문제점이 있다. 0 ~ 9까지 숫자가 00, 01 ..... 09가 아니라 0, 1, 2,....9로 표현이 되는데 이것은 내가 원하는 표현방식이 아니다. ${seconds}를 ${seconds < 10 ? `0${seconds} : seconds}`;로 변경 ?는 미니 조건문이라고 보면 이해하기 쉽다. 앞 조건인 seconds < 10가 참이면 '0${seconds}`를 실행하고 참이 아니면 seconds를 실행한다. 이제 시, 분 부분도 바꾸어 보자 깔끔하게 변경했다.

2020.05.09

Java Script(JS) ClickEvent 시 ClassName 생성

color 0.5s ease-in-out은 0.5초 시간으로 fade in, fade out을 하라는 의미. 내가 파이썬으로 크롤링할 때마다 자주 봤던 현상이었는데 이게 JS로 구현된 거라 생각하니까 가슴이 두근거린다. 한 가지 문제를 발견했다. 만일 클래스명을 기존에 가지고 있었다면 상황이 좀 다르다. css에 포인터 옵션을 주고 테스트를 해보자. 기본 상태의 클래스명은 btn이고 글자에 마우스를 가져가면 포인터가 생긴다. (포인터는 캡쳐에 포함되지 않았다...) 글자를 클릭하자 클래스명이 변하고 컬러도 변하였다. 여기까지는 괜찮은데 문제는 커서가 생기지 않았다는 것이다. -> 즉, 이전 상태를 기억하지 않는다는 의미이다. (이것은 내가 원하는 것이 아님) 해결 방법 1 classList.contain..

2020.05.09

Java Script(JS) - 조건문을 활용한 ClickEvent

Condition에 의해 이벤트가 작동한다.

2020.05.09

Java Script (JS) - If, else

JS의 조건문 생김새를 알게 되었다.

2020.05.09