본문 바로가기
목차
자바스크립트

[javascript] 노마드 무료 자바스크립트 공부[크롬 앱]

by 지각생 2022. 6. 15.
728x90

#2 [2021 UPDATE] WELCOME TO JAVASCRIPT

https://nomadcoders.co/javascript-for-beginners/lectures/2886

 

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co

예제

const age = parseInt(prompt("How old are you?"));
const age = parseInt("9") // 15
const age = parseInt("nine") // NaN (Not a Number)
console.log(isNaN()); 숫자이냐 아니냐에 대한 bool 값

 

#3 [2021 UPDATE] JAVASCRIPT ON THE BROWSER

element가 가진 속성들을 콘솔 창에서 확인 해보는 방법

 

엘리먼트를 지정할때 querySelector , querySelectorAll추천

const title = document.querySelector(".hello h1");
console.log(title)

위와 같이 쓸때 ".hello h1"이 여러개일 수도 있는데 이럴땐 첫번째꺼만 1개만 가져온다.

 

만약 조건에 해당하는 여러개 모두를 가져오고 싶다면 아래와 같이 querySelectorAll 을 쓰자.

const title = document.querySelectorAll(".hello h1");
console.log(title)

 

Envents

<body>
    <div>
        <h1 class="hello">Grab me!</h1>
    </div>
    <script src="app.js"></script>
</body>

 

const title = document.querySelector("div .hello");

function handleTitleClick(){
    console.log("title was clicked");
}

//방법1 - 추천
title.addEventListener("click", handleTitleClick); 

//방법2
//title.onclick = handleTitleClick; 이런 방식도 가능하다. 하지만

//방법1 추천 이유
//title.removeEventListener //방법1은 이런식으로 제거도 가능하기 때문이다.

 

document.body

document.head

document.title

정보는 가져올 수 있지만

 

document.div는 안된다

div는 document.querySelector("div .hello"); 와 같은 방법으로 가져와야 한다.

 

개발하면서 버그를 줄이는 방법

아래 영상 6분부터 보기 (그 다음편까지 이어짐)

https://nomadcoders.co/javascript-for-beginners/lectures/2897

 

All Courses – 노마드 코더 Nomad Coders

초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!

nomadcoders.co

요약

- 변수에 담아서 쓰기

- className 을 자바스크립트 구문으로 변경하면 기존의 값을 날려버리는 문제가 있음.

- classList : class 들을 목록으로 사용할 수 있게 함. 따라서 기존 값 유지가 가능해진다.

<body>
    <div>
        <h1 class="hello">Grab me!</h1>
    </div>
    <script src="app.js"></script>
</body>
function handleTitleClick(){
    const clickedClass = "clicked";
    if (title.classList.contains(clickedClass)){
        title.classList.remove(clickedClass);
    } else {
        title.classList.add(clickedClass);
    }
}

위와 같이 만들면 되지만 많은 개발자들이 자주 쓰는 기능이므로 더 쉽게 해줄 function이 존재한다.

 

아래 "clicked"와 같은 string을 반복하는 순간, 그때가 const clickedClass 를 생성할 때이다.

function handleTitleClick(){
    title.classList.toggle("clicked");
}

 

앱 만들기 시작

노마드 local storage 소개 강의( 3분50초)

https://nomadcoders.co/javascript-for-beginners/lectures/2904

local storage API 싸이트

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

 

Window.localStorage - Web API | MDN

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.

developer.mozilla.org

 

1. 저장방법

localStorage.setItem("username","nico")

 

2. 확인 방법

: 개발자도구(F12) - Application -Strorage - local Storage

 

3. 값을 불러오는 방법

localStorage.getItem("username")

4. 값을 삭제하는 방법

localStorage.removeItem("username")

#4.7 Super Recap (13:58)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css"/>

</head>
<body>

<form id="login-form" class="hidden" >
    <input type="text" placeholder="what is your name?"/>
    <input type="submit" value="log in" />
</form>
<h1 class="hidden" id="greeting"></h1>
    <script src="app.js"></script>
</body>
</html>
.hidden {
    display: none;
}
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreetings(savedUsername);
}

VS 명령어 팁

 

Ctrl + Shift + L  (같은 단어 한번에 모두 선택)

1. 변경하려는 단어를 선택하고

2. Ctrl + Shift + L 단축키를 누르면, 선택한 단어와 같은 단어가 모두 선택됩니다.

3. 이 때, 단어를 수정하면, 동시에 수정이 됩니다.

Tip :  Ctrl + F2 (같은 기능 )

 

Ctrl + D (같은 단어 하나씩 추가 선택)

1. 누를 때마다 해당 단어와 같은 단어가 하나씩 추가 선택됨.

(선택한 단어 위치에서 아래로 순차 선택됨)

 

Ctrl + K

하나씩 추가하다가 하나를 건너뛰고 싶을 때

 

Ctrl + U

하나씩 추가하다가 마지막 선택을 취소하고 싶을 때

 

JSON.stringify() // JSON.parse()

JSON.stringify() : something? -> String

JSON.parse() : something? -> Array

https://nomadcoders.co/javascript-for-beginners/lectures/2918

 

자바스크립트 filter() 사용법!

https://nomadcoders.co/javascript-for-beginners/lectures/2921

영상 2분 부터 참고~

 

function sexyFilter(){

}

a = [1, 2, 3, 4]

a.filter(sexyFilter)

//7행의 구동을 설명하면 아래와 같이 리스트 항목 1개씩 반복하여 함수 실행한다는 것임.   //.foreach()와 유사함.
sexyFilter(1)
sexyFilter(2)
sexyFilter(3)
sexyFilter(4)

 

weather API

https://openweathermap.org/

 

Source

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css"/>

</head>
<body>

<form id="login-form" class="hidden" >
    <input type="text" placeholder="what is your name?"/>
    <input type="submit" value="log in" />
</form>
<h1 class="hidden" id="greeting"></h1>
<h2 id="clock"> 00:00 </h2>
<form id="todo-form">
    <input type="text" placeholder="Write a To Do and Press Enter" required />
</form>
<ul id="todo-list">
</ul>


<div id="quote">
    <span></span>
    <span></span>
</div>
    <script src="js/greeting.js"></script>
    <script src="js/clock.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
    <!-- <script src="js/weather.js"></script> -->
</body>
</html>

 

JavaScript

background.js

const images = [
    "0.jpeg", "1.jpeg", "2.jpeg", "3.jpeg"
];

const chosenImage = images[Math.floor(Math.random()*images.length)];


const bgImage = document.createElement("img")

bgImage.src = `img/${chosenImage}`

document.body.appendChild(bgImage)

 

clock.js

const clock = document.querySelector("h2#clock");

function sayHello() { 
    console.log("hello");
}

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 = `${hours}:${minutes}:${seconds}`;
}
getClock()
setInterval(getClock, 1000);

//setInterval(sayHello,5000);
//setTimeout(sayHello,5000);

//문자시작 길이가 2자리가 아니라면 0을 앞에 채우는 함수
//"1".padStart(2,"0")
//"01"

//문자끝 길이가 2자리가 아니라면 0을 앞에 채우는 함수
//"1".padStart(2,"0")
//"10"

 

greeting.js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username){
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    paintGreetings(savedUsername);
}

 

quotes.js

const quotes = [
    {quote:"The way.",author:"walt"},
    {quote:"Life is.",author:"John"}
]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;

 

todo.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos"

let toDos = [];

function saveToDos(){
    console.log("toDos:",toDos);
    localStorage.setItem("toDos1",toDos);
    localStorage.setItem(TODOS_KEY,JSON.stringify(toDos)); //로컬 스토리지에 Array를 저장할 수 없다는 문제점이 있음. //원래 로컬 스토리지는 텍스트로만 저장되지만 배열로 저장하기 위해 JSON.stringify()를 씀. 
}

function deleteTodo(event) {
    const li = event.target.parentElement;
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    li.remove();
    saveToDos();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    li.id = newTodo.id;
    const span = document.createElement("span");
    span.innerText = newTodo.text;
    const button = document.createElement("button");
    button.innerText = "❌ ";
    button.addEventListener("click", deleteTodo)
    li.appendChild(span);
    li.appendChild(button);
    toDoList.appendChild(li);
}

function handleToDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value ="";
    const newTodoObj = {
        text:newTodo,
        id: Date.now(),
    };
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY);  //예시형태 : [{"text":"aa","id":1656909651614},{"text":"bb","id":1656909653861}] //타입은 String이란다..


console.log("savedToDos:", savedToDos)

if(savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos); //예시형태 : {text: 'ㅁ', id: 1656909651614} 이런식으로 복수갯수를 가짐.. //타입은 Array안에 {text: 'ㅁ', id: 1656909651614}이란 오브젝트 타입들임.
                                                //JSON.parse(savedToDos)를 쓰면 죽어있는 String 타입을 살아있는 오브젝트 타입 등으로 변환할 수 있다.
    console.log("parsedToDos:",typeof parsedToDos)
    console.log("parsedToDos:", parsedToDos)
    parsedToDos.forEach(paintToDo)
}

 

weather.js


//https://openweathermap.org 싸이트에 회원 가입한 후 API키 받는 곳 있는 듯.
const API_KEY = "241051bf13976dd3ddf8b8d9f247255e";

function onGeoOk(position){
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        console.log("You live in", lat, lon);
        const url = `https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API_key}&units=metric`;
        fetch(url).
        then(response => response.json())
        .then((data) => {
            const weather = document.querySelector("#weather span:")
            const city = document.querySelector("#wather span:")
            city.innerText = data.name;
            weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
        });
    }
function onGeoError() {
    alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

 

CSS

.hidden {
    display: none;
}
728x90
저작자표시 비영리

'자바스크립트' 카테고리의 다른 글

자바스크립트 공부  (0) 2022.04.21
자바스크립트 정규식  (0) 2022.04.21
JS[JavaScript] 이전 페이지로 돌아가기, History.Back(), History().Go()  (0) 2022.02.22
select 태그 안에 직접입력 만들기  (0) 2022.02.04
자바스크립트 공부중  (0) 2022.01.31

관련글

댓글

티스토리툴바