[ 노마드코더 바닐라JS ] 크롬앱 만들기에서 배운 것

자바스크립트 사용하는 방법에는 2가지가 있다.(맥북 M1 기준) func + F12 를 누르면, 개발자 도구로 들어가진다.콘솔을 클릭해서 콘솔 화면을 보자.console.log 또는 alert 등을 입력하면 반응이 돌아오는 것을 확인할 수 있다.콘솔에 자바스크립트가 항

자바스크립트는 자료형을 어떻게 설정할까? c언어는 변수를 만들 때, int, char, char*, float 등을 선언한다. 메모리 관리를 직접할 수 있는 언어이기 때문에 자료형을 정확히 알아야 하기 때문이다. 하지만 자바스크립트는 따로 자료형을 선언하지 않는다. 콘솔 화면에서 확인해 보면 따로 자료형을 말하지 않고 숫자, 문자열을 입력해도 연산이 문제...

자바스크립트는 boolean 자료형을 표현할 수 있다.또한 값이 없는 경우와 정해지지 않는 경우를 표현하는 null, undifined 이 있다.true 와 false 로 참, 거짓을 나타낼 수 있는 자료형이다.값이 없는 것으로 처리한다.메모리를 할당 받은 변수이지만,

배열 배열은 [ ] 과 , 로 선언한다. 배열에 요소를 추가하고 싶다면 push 를 이용한다. ❗️const 인데 어떻게 요소를 바꿀 수 있는가? const 로 정의된 배열 변수를 재정의 하는 것은 불가능하다. 하지만 요소를 추가하는 것은 가능하다. [ ] 를

객체는 속성과 기능으로 이루어진 집합이다.사람을 객체로 예를 들어보자.사람은 어떤 속성과 기능이 있을까?속성에는 성별, 키, 몸무게, 이름, 나이 등이 있을 것이다.기능에는 걷기, 달리기, 밥먹기와 같은 것이 있을 것이다.개발에서 객체의 속성과 기능은 변수와 함수라고

document 는 뭘까? document 란 무엇인가? 브라우저 콘솔 창에 입력하면 어떤 걸 의미하는지 바로 알 수 있다. 바로 해당 페이지의 html 코드가 보인다. 즉, document는 웹사이트이다. console.dir 을 하면 객체의 속성을 JSON 과

자바스크립트를 이용해서 기능을 구현하기 넣기 위해서는 html 요소를 찾아야한다.html 요소를 찾는 방법은 다양하다.getElementsByTagName( ) : 인자로 전달된 태그명에 해당하는 객체들을 찾아서 리스트로 반환 (array를 반환)getElementsB

우리는 요소 가져오는 방법을 안다.가져온 요소에 이벤트를 어떻게 적용할까?addEventListener를 사용하자.이 함수는 첫 번째 인자로 이벤트 종류를 받고 두 번째 인자로 실행할 함수를 받는다.실행하면 다음과 같이 이벤트가 발생한다.두 번째 인자로 오는 함수 뒤에

css는 js가 아닌 css 파일에서 변경하는 것이 적절하다. 어떻게 하면 될까?css파일에서 변화할 css 값을 가진 클래스를 하나 선언해놓자..active 를 만들고, js에서 if else 문을 통해 css를 간접적으로 변화시키자.classList 는 classN

일전에 document 객체를 console 로 입력해본 적이 있다. 이와 같은 방법으로 input 태그의 내용을 알 수 있다.console.dir(원하는 요소) 를 입력하면 해당 요소에 대한 자세한 정보가 console 화면에 출력된다. 아래 이미지에서는 input

우리는 사용자의 정보를 모으기 위해 input 과 button 을 활용할 수 있다. 하지만 이런 방식은 js의 도움을 필요로 한다.js 대신 브라우저의 도움을 받기 위해 html 의 form 태그을 사용할 수 있다. form 과 input 및 input type 을 활

첫 번째 방법의 규칙은1\. 문자열을 쌍따옴표로 감싸기2\. 변수 더하기두 번째 방법의 규칙은백 틱 안에 문자열 적기변수를 ${ } 로 감싸기두 번째 방법이 더 최신 방법이며, 보기에 깔끔한 것 같다.

html 의 form 태그를 통해 받은 정보를 어떻게 저장할까?코드를 바로 입력하기 전에 개발자 도구를 통해 localStorage에 대한 이해를 높여보자.개발자도구 → 애플리케이션을 보면 로컬 스토리지가 있다.이제 콘솔 창에서 다음과 같은 구조로 입력을 해보자.loc

아래 3가지 함수를 활용해서 시계를 만들 수 있다.setIntervals (함수, ms)setTimeout (함수, ms)padStart 는 자리수를 채워준다. 예를 들어 2자리 숫자가 있을 때 1 ~ 9 를 그냥 출력하면 '1' 과 '9' 한 자리로 출력된다. 이때

to do list 를 로컬 저장소에 저장하기 로컬 저장소에 배열을 그대로 저장하면 배열이 아닌 텍스트의 형태로 저장된다. 텍스트의 형태가 아닌 배열 같은 모양 저장하고 싶다면 JSON.stringify 를 사용해야한다. 그 후 배열 모양의 문자열을 배열로 바꾸기