개요: 필자가 공부하면서 정리한 게시물이다.
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");
querySelector에서 id를 #으로 통해 불러올 수 있다.
const loginInput=document.querySelector("#login-form input");
const loginButton=document.querySelector("#login-form button");
function onLoginBtnClick(){
console.log(loginInput.value);
}
loginButton.addEventListener("click",onLoginBtnClick);
input의 value값을 얻을 수 있다.
preventDefault() - event의 기본 행동이든지 발생되지 않도록 막는것이다.
function onLoginSubmit(evnet){
event.preventDefault();
즉 form을 submit하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. << 우리가 원하는 것이 아님!
preventDefault() 함수를 추가함으로써 브라우저의 기본 동작을 막을 수 있다!!
greeting.innerText="Hello" + username;
greeting.innerText=`Hello ${username}`;
둘이 같은 표현 방식이다 ''절대로아니다 ``이거다.
localStorage 라는 API가 있는데 정보를 저장할 수 있다. 웹브라우저가 제공해주는거다.
이렇게 정보를 DB에 저장할 수 있다.
localStorage.setItem("username",username);
JS에서는 다음과 같이 해주면 된다.
const clock=document.querySelector("h2#clock");
h2태그 바로 id 붙여써야된다.
function sayHello(){
console.log("hello");
}
setInterval(sayHello, 5000);
sayHello함수를 5초마다 출력한다.
function sayHello(){
console.log("hello");
}
setTimeout(sayHello, 5000);
5초 뒤에 hello가 뜬다.
이런식으로 날짜를 불러올 수 있다.
clock.innerText=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
clock.innerText=`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
js에서 이렇게 불러올 수 있다. 둘다 같은 표현이다.
다음과 같이 길이가 1인 문자를 padStart를 통해 위와 같이 바꿀 수 있다. padEnd도 있다.
const clock=document.querySelector("h2#clock");
function getClock(){
const date=new Date();
const hours=String(date.getHours()).padStart(2,"0");
const minutes=String(date.getMinutes()).padStart(2,"0");
const seconds=String(date.getSeconds()).padStart(2,"0");
//clock.innerText=date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//clock.innerText=`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
clock.innerText=`${hours}:${minutes}:${seconds}`;
clock.style.color="cadetblue";
}
getClock();
setInterval(getClock, 1000);
이렇게 시간을 불러올 수 있다.
const quotes=[
{
quote:"삶이 있는 한 희망은 있다.",
author:"최승호"
},
{ quote:"산다는것 그것은 치열한 전투다",
author:"최승호"
},
{ quote:"피할수 없으면 즐겨라",
author:"최승호"
},
{ quote:"내일은 내일의 태양이 뜬다.",
author:"최승호"
},
{ quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에",
author:"최승호"}
];
배열이 내가 생각하는거랑 다르다. 한번 눈여겨보자! key value 구조인거 같다.
const todaysquotes= quotes[Math.floor(Math.random()*quotes.length)];
배열에서 랜덤을 뽑는 코드 어디서 많이 봤으니깐 잘 알것이다!
const images=[
"일본.webp","중국.jpg","한국.jpeg"
];
const chosenImage=images[Math.floor(Math.random()*images.length)];
const bgImage=document.createElement("img");
bgImage.src=`img/${chosenImage}`;
document.body.appendChild(bgImage);
코드 설명을 하겠다. chosenImage에다 랜덤생성하는 문자열을 삽입하고 bgImage에다가 img 새로운 요소를
생성한다. 그후 bgImage 소스에다 다음과 같이 해당 소스를 넣고 appendChild 함수를 이용해서 body 맨 끝 부분에
사진을 랜덤으로 추가시킨다. 즉 자식이 된다. appendChild 대신 앞에오는거 prepend도 있다!
const li=document.createElement("li");
const span=document.createElement("span");
li.appendChild(span);
li안에 span을 넣겠다!
function deleteToDO(event){
console.dir(event.target.parentElement.innerText);
}
다음과 같은 코드를 통해 어떤 버튼이 클릭되었는지 확인할 수 있다.
localStorage.setItem("toDos",JSON.stringify(toDos));
JSON~~ 배열을 문자열로 바꿔준다.
console에서 진행한건데 이렇게 나타낼 수 있다.
forEach는 배열을 즉 array에 있는 각각의 item에 대해서 실행시켜준다.
const savedToDos=localStorage.getItem(TODOS_KEY);
if(savedToDos){
const parsedToDos=JSON.parse(savedToDos);
parsedToDos.forEach((item)=>console.log("hello",item));
}
function sayHello(item){
console.log("hello",item);
}
const savedToDos=localStorage.getItem(TODOS_KEY);
if(savedToDos){
const parsedToDos=JSON.parse(savedToDos);
parsedToDos.forEach(sayHello);
}
람다식 이랑 아래 함수 호출이랑 코드는 동일하다! 갑자기 람다가 나오네... (7-4 보기)
filter 함수는 forEach함수랑 비슷하다.
filter는 위와 같이 true를 반환해줘야 된다. 그래야지 array의 item을 유지할 수 있다.
이렇게 응용이 된다.
function onGeoOk(position){
const lat=position.coords.latitude;
const lng=position.coords.longitude;
console.log(`경도: ${lat} 위도: ${lng}`);
}
function onGeoError(){
alert("위치를 찾을 수 없습니다.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
위치를 나타내는 코드! 그냥 JS에 내장되있는 녀석들이다! 참고하자
https://openweathermap.org/api
Weather API - OpenWeatherMap
Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections.
openweathermap.org
날씨 API 정보 사이트다!
fetch는 직접 url에 갈 필요없고