본문 바로가기

JavaScript6

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #1~3이론 https://nomadcoders.co/javascript-for-beginners/lobby #1.4 ~ 1.6 Why JS Javascript를 통해 웹사이트를 인터렉티브하게 만들었고, Javascript는 브라우저에 내장되어 있기 때문에 따로 설치할 것이 없고, 프론트엔드로 쓸 수 있는 유일한 언어이다. #2.1 Basic Data Types Javascript에서는 자료형을 따로 선언할 필요가 없다. #2.2 ~2.3 const, let const: 선언 이후에 값을 변경할 수 없다. let: 선언 이후에 값을 변경할 수 있다. var: 재선언, 재할당이 모두 가능 var은 웬만하면 쓰지 말고 const를 쓴다! let은 필요한 경우에!! veryLongVariableName: 낙타 등 모양 (.. 2021. 8. 13.

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #8 WEATHER *weather 부분은 처음 접한 내용이 대다수였어서 비교적 어려웠다. getCurrentPosition(모든 게 잘 됐을 때 실행 함수, 에러 발생 시 실행 함수 )로 user의 위치를 알 수 있다. JS가 함수의 input parameter로 GeolocationPosition object를 준다. position의 위도와 경도를 도시이름으로 표현하고 그 위치의 날씨를 알기 위해서 https://openweathermap.org/api의 Current Weather Data를 활용한다. https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metrid에 접근하면 위치명과 날씨를 알 수 있다.. 2021. 8. 13.

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #7 TO DO LIST #7.0 ~ 7.1 Setup, Adding ToDos greetings에서 사용한 코드를 바탕으로 만들 수 있다. input에 텍스트를 입력하면 화면에 보이지만, 새로고침 하면 사라지는 문제가 있다. #7.2 Deleting To Dos 삭제 버튼을 만드는 것도 위의 내용과 같다. createElement를 통해 버튼을 만들어주고 EventListener를 통해 클릭을 감지하면 된다. 하지만 이대로 버튼을 클릭하면, 어떤 리스트에서 버튼을 클릭하였는지 알 수가 없다. 따라서 deleteToDo 함수의 console.log(event); 를 통해 확인해보면 target > parentElement 또는 parentNode > innerText에서 클릭한 리스트의 내용을 알 수 있었다. 따라서 다음과 같은.. 2021. 8. 11.

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #6 QUOTES AND BACKGROUND #6.0 Quotes Math.random() : 0~1사이의 랜덤한 숫자(float) 제공 Math.random() * 10 : 0 ~ 10사이의 랜덤한 숫자(float) 제공 Math.round(x.x) : 반올림한 정수 제공 Math.ceil(x.x) : 올림한 정수 제공 ex)Math.ceil(1.1) = 2, Math.ceil(1.0) = 1 Math.floor(x.x) : 내림한 정수 제공 ->Math.floor(Math.random()*10) : 0 ~ 9의 랜덤한 숫자 제공 #6.1 Background const bgImage = document.createElement("img"); : JS에서 HTML 태그 만들 수 있다. bgImage.src = `img/${chosenImage}`;.. 2021. 8. 10.

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #5 CLOCK #5.0 Intervals setInterval(실행 function, function 간격(ms단위) ); #5.1 Timeouts and Dates setTimeout(실행 function, function 간격(ms단위) ); :setInterval 함수와 같지만 setTimeout은 일정시간이 흐른 뒤 딱 1번만 실행한다는 차이가 있다. JS가 가지고 있는 Date object를 이용하면 시계를 만들 수 있다. 다음과 같이 현재의 날짜, 요일, 시간 등을 알 수 있다. *getDay()는 0부터 일요일, 1은 월요일 식으로 표현된다. 해당 요일이 화요일이라 2로 표시되었다. #5.2 PadStart padStart를 통해 string의 자릿수를 채워줄 수 있다. 시계 끝!! 2021. 8. 10.

[노마드 코더]바닐라 JS로 크롬 앱 만들기 - #4 LOGIN #4.0 Input Values *둘다 같은 표현. querySelector에서는 id, class임을 따로 나타내줘야한다. #4.1 Form Submission 아래와 같이 표현하면 브라우저에서 자동으로 조건을 지원한다. 다만 form안에서 작성해야한다. form은 input안에 있는 버튼을 누르거나 type이 submit인 input을 클릭하면 submit된다. 따라서 따로 click 이벤트를 신경쓸 필요가 없다. form 안에서 input이 더 없다면 엔터를 누르고 자동으로 submit 할 수 있다. 하지만 브라우저에서 submit될 때 웹 페이지가 새로고침되는 기능을 기본적으로 제공하고 있다. #4.2 ~ 4.3 Events preventDefault()함수를 통해 브라우저의 기본 동작으로서 새로.. 2021. 8. 10.

이전 1 다음

티스토리툴바