노마드코더

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(4)_To do and Weather

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. To do Set up input에 to do를 입력하고 버튼 또는 엔터를 눌렀을 때 해당 to do 데이터를 변수에 보관하고, 사용자가 input에 입력한 값은 지워 화면에서 보이지 않도록 설정한다. // HTML Log In 00:00:00 // JavaScript const toDoForm = document.querySelector('#todo-form'); const toDoInput = toDoForm.querySelector('#todo-form input'); const toDoList = document.querySelector('#todo-list'); function ha..

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(3)_Clock, Quetes and Background

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Clock Interval interval이란, '매번' 일어나야 하는 무언가를 말한다. (ex. 매 2초) 서버를 주기적으로 확인한다거나, 매 시간마다 주식시장 API를 확인한다거나 해야 할 때 주로 사용한다. 이러한 기능을 제공하는 것이 setInterval()이다. ✨ setInterval(code | func[, delay]) - 첫번째 매개변수: 내가 실행하고자 하는 code 또는 function (단, code는 보안 상의 이유로 사용을 권장하지 않음) - 두번째 매개변수: 호출되는 code 또는 function의 간격을 몇 ms로 할 것인지 설정 Timeout timeout은 '..

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(2)_Login

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. Input Values 이름을 입력받을 input과 버튼을 만든 후, 버튼 클릭을 감지해서 input의 입력값을 console.log에 찍어본다. // HTML Log In // JavaScript /* const loginForm = document.querySelector('#login-form'); const loginInput = loginForm.querySelector('input'); const loginButton = loginForm.querySelector('button'); */ // * 위의 코드를 더 짧게 바꿔보기 // 이와 같이 document 또는 하나의 eleme..

Front-End/JavaScript

[노마드코더 / 바닐라JS] momentum 클론 코딩(1)_JS in browser

📚 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다. HTML in JavaScript 1. document.getElementById() document JavaScript가 HTML과의 상호작용을 가능하게 한다. 브라우저에서 그냥 사용이 가능하다. (콘솔 창에서 document를 바로 출력해 볼 수 있음) document.getElementById() document의 함수 중 하나이다. HTML에서 id를 통해 element를 찾아낸다. 예시 // string을 전달받는 함수이므로 괄호 안에 ''를 쓴다. document.getElementById('title'); // Olivia! // log보다 더 자세히 출력되는 console.di..

Olivia Kim
'노마드코더' 태그의 글 목록