[노마드 코더] 바닐라 JS로 크롬 앱 만들기

바닐라 JS로 크롬 앱 만들기 [1-1]

true, false만 존재null : 아무것도 없다는 뜻, false와 다름undefined : 정의되지 않음결과 : true정의는 되어 있지만 값이 없다는 의미어떤 것이 없다는 것을 확실하게 할 때 사용결과 : undefined공간은 있지만 값이 없다는 의미

정리하는 것효율적으로 코드를 작성하기 위해서 사용활용 : todo list대괄호\[] 사용각 항목은 쉼표로 분리number, string, booleans 등 모두 넣을 수 있다첫번째부터 0, 1, 2, 3 ... 순서결과 : montuewedthufrisatsun문제

복잡한 객체를 저장할 때 사용설명이 필요한 정보가 있을 경우 사용한 개의 개체에 대한 설명이지만 player와 뒤에 오는 설명을 분리할 필요가 있다.중괄호 사용':' 사용결과{name: "marmot", points: 10, fat:true}marmot결과{name:

바닐라 JS로 크롬 앱 만들기 [1-5] Functions & return > 'console.log' 는 그림의 떡, 먹으려면 return이 필요하다! Function >- 계속 반복해서 사용할 수 있는 코드 조각 코드를 캡슐화해서 계속 반복가능 예시 적용 전

true & false를 알려주기 때문에 중요if, else 사용prompt -> css 적용이 되지 않고 js 작동이 멈춰서 사용 안함js는 작은 괄호부터 시작해서 큰 괄호로 넘어간다입력 값의 타입을 확인하는 방법prompt에 넣은 값의 타입을 알려줌숫자도 기본으로

document : 브라우저에 존재하는 object, 자바스크립트에서 HTML 항목을 가져오고 사용할 수 있다콘솔에서 자바스크립트를 활용해서 HTML을 변경할 수 있다.

getElementsByClassName : ClassName이 "hello"인 요소 호출getElementsByTagName : 태그 이름 호출두가지 모두 배열만 호출결과 : <h1>grab me!</h1>CSS 방식으로 검색hello 클래스에 여러개의 h

참고: HTMLHeadingElement - Web APIs | MDNWeb APIs : 자바스크립트 관점console.dir 사용해서 코드 내부를 보면 on으로 시작하는 것들이 있는데 이것들이 event listener예) 클릭 하면 event, 마우스가 h1 위로

참고: HTMLHeadingElement - Web APIs | MDN자바스크립트에는 애니메이션 기능을, CSS에는 스타일 기능클릭 시 글자색이 blue 이면 tomato 색으로 변경tomato 색이면 blue로 변경const, let 활용해서 더 깔끔하게 정리색상,

input의 유효성 검사를 하려면 input이 form안에 있어야 함링크의 기본 동작 : 클릭 시 링크된 사이트로 이동하는 것alert : 모든 동작을 막음(이제 아무도 사용 안함)결과id가 “login-form”인 HTML 요소 호출\-> 좀 더 정밀하게 검색이 가능

hidden 클래스를 CSS로 숨길 수 있음로그인을 하면 로그인 입력 창에 class = hidden이 추가되어 사라지고 “Hello + username” 출력이 두가지는 같은 결과가 나옴 \`(백틱) → ₩ 영문으로 치면 됨Hello ${username} 에 두가지

명령어 : setInterval매번 일어나야 하는 무언가예시 : 매 2초마다 무슨 일이 일어나게 하고 싶을 때 사용두개의 인자를 받는다.첫번째 인자 : 실행하고자 하는 함수두번째 인자 : 함수의 실행 간격(ms)5초마다 콘솔에 "hello" 출력명령어 : padStar

함수를 한번만 호출하는데 일정시간 흐른 뒤에 호출명령어 : setTimeout첫번째 인자 : 실행하고자 하는 함수 이름두번째 인자 : 실행 간격, ms(milliseconds)로 표기5초뒤에 콘솔에 hello 호출콘솔에 new Date() 입력 시 호출 당시 현재 날짜

Math의 random() function 활용기본 문법 : Math.function_name5개의 배열에서 마지막 item은 4번째이기 때문에 필요한 숫자는 40부터 1사이의 랜덤한 숫자 제공10을 곱하면 0에서 10사이의 숫자를 랜덤으로 호출⟩ Math.random

자바스크립트에서 이미지 불러올 때 이미지의 이름과 동일해야 함이제 HTML에 만든 자바스크립트를 보내야함→ document.createElement 사용결과 : <img src="img/2.jpg">document.body.appendChild() : body에

Greetings 참고newToDo 라는 함수에 toDoInput.value 가 복사되는 것이기 때문에 toDoInput이 사라져도 상관 없음 → 이후에 무슨 짓을 해도 상관 없음위 두가지는 같은 기능

newToDo 에 입력 값을저장하기 때문에 이후에 toDoInput.value 가 사라져도 상관 없음문제점 : 새로고침하면 리스트가 사라지고 완료한 리스트를 지울 수 없다.

목표 : 작성한 투두리스트 삭제append는 항상 마지막에 작성button이 클릭 이벤트를 기다리고 있어야 함투두리스트가 append 되기 전에 삭제 버튼을 만들어야 함삭제 버튼은 있지만 기능이 없고, 어떤 삭제 버튼을 눌렀는지 알 수 없음composedPath를 사용

JSON.parse : Array로 변경해주는 기능JSON.parse(localStorage.getItem("todos"))< (4) 'a', 'b', 'c', 'd'콘솔에 배열의 수 만큼 sayHello 실행문제점 : 어떤 item을 사용하고 있는지 모름item

리스트를 삭제해도 localStorage에 그대로 남아있기 때문에 새로고침하면 다시 리스트가 나타나는 문제 발생local storage → 데이터베이스를 복사해두는 곳id를 사용하는 이유 : 각 항목을 구별하기 위해서\[Date.now] : 현재 시각id를 사용하려면

Geolacation : 사용자 위치 확인latitude : 위도 / longitude : 경도브라우저에서 위치 좌표를 주는 기능 (WIFI, 위치, GPS 등)2개의 argument 필요1 모든 게 잘 됐을 때 실행 될 함수2 에러가 발생 했을 때 실행 될 함수suc

API : 프로그램간의 통신을 이루어 주는 것(비유 : 키보드)코드끼리 서로 소통할 수 있게 해준다.openweathermap.org가입 → API → \*\*Current Weather Data(API Doc)\*\*https://api.openweather

강의 마무리와 앞으로의 목표, 소감

배경화면 웹페이지 전체크기로 맞추기

HTML header, main, footer 구분 및 메인 영역 CSS 적용

헤더(날씨) & 푸터(명언) 반응형 위치 고정

웹 페이지 완성 / 반응형 웹 구현