<노마드클론코딩>크롬앱 만들기

url- https://chromapp.netlify.app/

🐝login

preventDefault()

preventDefault()를 통해 form의 기본동작인 submit을 막는다

변수생성

관습:string만 포함된 변수는 대문자로 쓴다
자주쓰는 단어는 변수로 만들어서 실수를 줄인다

const HIDDEN_CLASSNAME="hidden'

classlist

html의 어느 한 부분을 잡고 거기에 class를 추가하거나 빼고 싶을 때는

classlist.add("클래스이름")
변수명.classlist.remove("클래스이름")
변수명.classlist.toggle("클래스이름")

를 사용한다
위에는 css가 display:none;이 되어있기 때문에 해당 html태그를 hide or show할 수 있다

local storage

local storage는 우리가 브라우저에 뭔가를 저장하고 나중에 가져다 쓸 수 있게 해주는 저장고

localStorage.setItem("key","value")
localStorage.getItem("key","value")
localStorage.removeItem("key","value")

🐝clock

Date object

호출하는 당시의 현재 날짜랑 시간을 알려준다

//2021년 16일 일요일 19시 14분 37초
const date=new Date();
date.getDate() //16
date.getDay() //0
date.getFullYear() //2021
date.getHours() //19
date.getMinutes() //14
date.getSeconds() //37

Date()앞에 new Date()로 만드는 이유🧐❓

• typeof Date;
  를 입력해보면 function이라고 알려준다
• const date=new Date();
  를 입력하여 date변수를 선언하고 typeof date;
  를 입력하해보면 object로 반환한다

javascript에는 생성자 함수라는 것이 있다
new를 선두에 쓰고 생성자 함수를 호출하면 instance object를 반환한다
->이는 생성자 함수로 객체를 생성할 때 하기로 한 약속이다

timeset

setInterval(함수이름,1000);
함수이름()을 1초마다 반복한다는 의미
단, 바로 실행되지 않고 1초 후 첫 시작이 되고 계속 1초마다 반복

setTimeout(함수이름,1000);
1초 기다렸다가 한번만 실행

add pad in string

padStart(글자수,넣을것) 앞쪽에 부족한 글자 수 넣기
padEnd(글자수,넣을것) 뒤쪽에 부족한 글자 수 넣기
padStart와 padend는 string타입에만 사용가능하다

🐝quotes and background

Math 객체기능

Math.random() 0부터 1사이 무작위의 값을 반환
Math.floor() 내림
Math.ceil() 올림
Math.round() 반올림

js에서 html요소를 생성

createElement("")
예를 들어,
document.createElement("img")일 경우 html내에 img 태그를 생성하는 것과 같다

생성한 태그를 아래 함수를 통해 html에 붙여넣기한다.
appendChild() 함수 안에 경로에 정의한 값을 가장 뒤에서 기입
prependChild() 반대로 앞에서 기입

const h=document.querySelector("h1")
const p=document.createElement('p');
p.innerHTML="DOM"
p.className="dom"; //""안에 클라스네임 만들기

h.appendChild(p)

🐝 todo list

JSON

localstorage는 오직 텍스트만 저장가능(배열로 저장 x)

• JSON.STRINGIFY() 문자열로 바꿈
• JSON.PARSE() 문자열을 array로 바꿈(우리가 자유자재로 요리할 수 있는)

localStorage.getItem("todos") //"[\"a\"\b\",\c\"]"
JSON.parse(localStorage.getItem("todos") //["a","b","c"]

filter function

const life=["희망","불안","행복","비꼬는마음"]
function goodlife(item){return item !=="비꼬는마음"}
life.filter(goodlife)
life=["희망","불안","행복"]

const arr=[1,2,3,4]
arr.filter(item=>item>2)
//[3,4]

🐝 weather

navigator.geolocation.getCurrentPosition(성공,실패)
function(성공){ }
function(실패){ }

api key, lon, lat 세 변수는 반드시 필요!

fetch(url) 실제로 url에 갈 필요없이 js가 대신 url을 호출
.then(response=>response.json()) fetch를 사용하면 약속이기 때문에 기다리는 시간이 필요하다, JSON은 경량은 data교환형식
.then(data=>{보여줄정보}) 받아온 data로 정보를 보여준다