자바스크립트에 대한 기본적인 조작 방법은 끝났고, 자바스크립트의 이상한 this ES5 ES6 차이점 같은 것은 나중에 다루기로 하고, 일단 실습을 해보자. 뭐든 가장 빨리 배우는 것은 실습이니.. 노마드 코더의 바닐라 JS 무료강의를 듣고 몰랐거나 얘매하게 알던 것을 정리하겠다.
css 파일
body{
background-color: aliceblue;
}
.btn{
cursor: pointer;
}
h1{
color: burlywood;
transition: color 0.5s ease-in-out;
}
.clicked{
color: slategray;
}
.form
.greetings{
display: none;
}
.showing {
display: block;
}
.bgImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
animation: fadeIn 0.5s linear;
}
clock.js
// ,로 구분
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1"); //꼭 js-clock 안에 h1태그가 포함되어있는지 체크하자..
function getTime(){
const date= new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText=`${hours < 10 ? `0${hours}`: hours}:${minutes < 10 ? `0${minutes}`: minutes}:${seconds < 10 ? `0${seconds}`: seconds}`;
}
function init(){
getTime();
setInterval(getTime,1000); //첫번째 인자는 함수, 1초마다 실행
}
init();
gretting.js
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greetings = document.querySelector(".js-greetings");
const USER_LS = "currentUser", //local storage key 값
SHOWING_CN = "showing";
function saveName(text){
localStorage.setItem(USER_LS, text); //Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.
}
function handleSubmit(event){
event.preventDefault();
const currentValue = input.value;
paintGreetings(currentValue);
saveName(currentValue);
}
function askForName(){
form.classList.add(SHOWING_CN);
form.addEventListener("submit", handleSubmit); //submit 리스너 등록
}
function paintGreetings(text){
form.classList.remove(SHOWING_CN);
greetings.classList.add(SHOWING_CN);
greetings.innerText = `Hello ${text}`;
}
function loadName(){
const currentUser = localStorage.getItem(USER_LS);
if(currentUser === null){
askForName();
}else{
paintGreetings(currentUser);
}
}
function init(){
loadName();
}
init();
//local storage : 아주 작은 정보를 컴퓨터에 저장시키는 방법
localStorage 는 세션 만료가 없어 브라우저가 닫혀도 지워지지 않는다. 만약 세션이 만료된 경우에 데이터를 지워야 한다면, sessionStorage 에 저장한다. JWT를 여기다 저장시키면 되겠군 ㅎㅎ
todo.js
const toDoForm = document.querySelector(".js-toDoForm"),
toDoInput = toDoForm.querySelector("input"),
toDoList = document.querySelector(".js-toDoList");
const TODOS_LS = "toDos";
let toDos = []; //전역
function deleteToDo(event) {
const btn = event.target; //이벤트가 발생한 dom. 여기서는 button 태그
const li = btn.parentNode; //부모 태그를
toDoList.removeChild(li); //html part에서 지우고
const cleanToDos = toDos.filter(function(toDo) { //li.id가 아닌 것만 걸러내기
return toDo.id !== parseInt(li.id); // li.id는 string이라 number로 형변환
});
toDos = cleanToDos; //대체
saveToDos(); //로컬스토리지에 저장
}
function saveToDos() { //로컬에 저장해서 휘발되지 않게
localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); //자바스크립트 오브젝트를 string으로 변환
}
function paintToDo(text) {
const li = document.createElement("li");
const delBtn = document.createElement("button");
const span = document.createElement("span");
const newId = toDos.length + 1; //1부터
delBtn.innerText = "❌";
delBtn.addEventListener("click", deleteToDo); //클릭 리스너 등록
span.innerText = text;
li.appendChild(delBtn);
li.appendChild(span);
li.id = newId;
toDoList.appendChild(li); //여기까지는 추가했지만 휘발성(새로고침하면 날라감)
const toDoObj = {
text: text,
id: newId
};
toDos.push(toDoObj);
saveToDos();
}
function handleSubmit(event) { //form submit시(Enter)
event.preventDefault(); //기본 form 동작을 막아주고
const currentValue = toDoInput.value; //input 박스 안의 내용을 가져온 다음
paintToDo(currentValue); //넘겨준다.
toDoInput.value = ""; //다시 비워줌
}
function loadToDos() { // userName 없다면 toDolist 출력되지 않음. 새로고침해도 로컬내용보고 불러옴
const loadedToDos = localStorage.getItem(TODOS_LS);
if (loadedToDos !== null) {
const parsedToDos = JSON.parse(loadedToDos); //자바스크립트 object로 변환
parsedToDos.forEach(function(toDo) {
paintToDo(toDo.text);
});
}
}
function init() {
loadToDos();
toDoForm.addEventListener("submit", handleSubmit); //리스너 등록
}
init();
bg.js
const body = document.querySelector("body");
const IMG_NUMBER = 3;
function paintImage(imgNumber) {
const image = new Image(); //이미지 객체 생성
image.src = `images/${imgNumber + 1}.jpg`;
image.classList.add("bgImage");
body.prepend(image); //선택한 요소의 내용의 앞에 콘텐트를 추가합니다.
}
function genRandom() { // 0~2까지 난수 생성
const number = Math.floor(Math.random() * IMG_NUMBER); //floor = 소수점 이하 버리기
return number;
}
function init() {
const randomNumber = genRandom();
paintImage(randomNumber);
}
init();
weather.js
const weather = document.querySelector('.js-weather');
const API_KEY = 'Your API Code Here'; //가입하기 귀찮다 그냥 넘어가자
const COORDS = 'coords';
// function getWeather(latitude, longitude) {
// fetch(
// `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric` //http가 아니라 https로
// )
// .then(function (response) {
// return response.json();
// })
// .then(function (json) {
// const temperature = json.main.temp;
// const place = json.name;
// weather.innerText = `🌡${temperature.toFixed(1)}℃ 🇰🇷${place}`;
// });
// }
function saveCoords(coordsObj) {
localStorage.setItem(COORDS, JSON.stringify(coordsObj)); //성공했으면 저장.
console.log("coordsObj: "+coordsObj);
}
function handleGeoSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude,
};
saveCoords(coordsObj);
//getWeather(latitude, longitude);
}
function handleGeoError() {
console.log('cant access geo location'); //에러시
}
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError); //내 현재 위치를 가져온다.
}
function loadCoords() {
const loadedCoords = localStorage.getItem(COORDS);
if (loadedCoords == null) {
askForCoords();
} else {
const parsedCoords = JSON.parse(loadedCoords);
//getWeather(parsedCoords.latitude, parsedCoords.longitude);
}
}
function init() {
loadCoords();
}
init();
여기에 잘 정리된 글이 있다. https://velog.io/@devseunggwan/Javascript-%EB%B0%94%EB%8B%90%EB%9D%BC-JS%EB%A1%9C-%ED%81%AC%EB%A1%AC%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0-3
시간대비효율