[4주차] JavaScript (2)

ming·2023년 1월 12일

STUDY SOJU

목록 보기
15/19

이번 주 과제

학습한 내용 정리하기
https://goryangju.github.io/html-css-js/ 를 참고해서 비슷하게 만들어 보기!
https://github.com/GoRyangJu/html-css-js 에서 필수 요구사항 확인 가능

자바스크립트로 만드는 투두리스트~!!

WELCOME TO JAVASCRIPT 🎉

변수를 만들 때 let, const, var 차이

  • let 재선언 금지, 재할당 가능
let a = b;
let a = c; X
//재선언 금지
let a = b;
a = c;
//재할당 가능
  • const 재선언 금지, 재할당 금지
    :변하지 않음(상수)
const a = b;
const a = c;
//재선언 금지
const a = b;
a = c;
//재할당 금지
  • var 재선언 가능, 재할당 가능
    :이런 var hoisting 때문에 var 사용을 권장하지 않음
var a = b;
var a = c;
a = d;
//재선언, 재할당 가능

=> 프로그램에서 몇몇 중요한 부분을 업데이트해야 할 때에 let을 사용하고, 대부분은 const를 사용한다.

booleans

  • true or false 값을 리턴
const dogIsCute = true;
console.log(dogIsCute);

--> console 창에 true가 출력됨

null & undefined

  • null
    : 값은 있지만 그 값이 "아무것도 아닌" 것
    : null은 절대 자연적으로 발생하지 않음
    : 이 공간이 비어있다는 것을 확실히 하고 싶을 때 사용
const refrigerator = null;
  • undefined
    : 공간은 있지만 값이 정의되지 않은 것
let something;

array

  • 데이터로 이뤄진 리스트
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

일요일을 불러오고 싶다면
console.log(dayOfWeek[6]);

object

  • 속성을 가진 데이터들을 저장한다
  • {} 사용
const playerName = "ming";
const playerPoints = 10;
const playerCook = true;
↓
const player = {
    name: "ming",
    points: 10,
    cook: true,
};

위와 같이 정리할 때의 장점
: 어떤 속성의 값인지 지정해줄수 있고, 한 그룹으로 모아 인식하기에 좋다.
  • 속성 불러오는 2가지 방법
console.log(player.name); => tomato
console.log(player["name"]); => tomato
  • 데이터 변경/추가 가능
    : const는 let과 다르게 update가 안 되지만 object 안의 내용은 전체를 변경하는 게 아닌 속성값을 수정/추가하는 경우이기에 가능하다.

function

  • 반복해서 사용할 수 있는 코드 조각

  • argument(인수)
    function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법

: argument를 받는 방법

function sayHello(nameOfPerson, age) {
	console.log("Hello my name is " + nameOfPerson + " and I'm " + age
    
:위와 같이 하나가 아닌 여러개도 가능

function food(potato) {
	console.log(potato - 5);
}

food(10, 10, 12, 53, 3, 11);

:argument는 potato 하나뿐이기 때문에 받을 수 있는 데이터도 앞의 10 뿐이다

: argument를 보내는 방법

sayHello("ming", 100);
sayHello("nico", 300);
sayHello("bibi", 2);

: object 안의 function에 argument를 받는 방법

Return

  • 데이터를 받아서 사용하거나 콘솔이 아닌 화면에 결과를 출력하고 싶을 때 사용
    : console.log는 console창에 log만 해주는 것(화면에 보여주기만 함)이기 때문에 사용을 권장하지 않음.
    : 위처럼 return을 해주면 값을 불러와서 다른 변수를 지정해줄 수도 있고 그 변수를 출력했을 때 화면에서 내용을 확인할 수 있다.

Tip! 바꾸고 싶은 단어를 드래그한 상태에서 ctrl+d를 누르면 해당하는 단어 모두 변경 가능. (혹은 VSCode 기준, 드래그 후 ctrl + shift + L)

Conditional

  • prompt
    : 사용자가 대답을 할 때까지(입력창에 입력할 때까지) 자바스크립트는 일시정지인 상태
    : 창의 어떤 style도 변경이 불가

  • if

if(condition){
condition === true --- 실행
condition === false ---- 다음 else 값 실행
} else{
}

  • if/else if


JAVASCRIPT ON THE BROWSER 💻


The Document Object

  • document
    : HTML을 가리키는 Object
    : HTML에서 설정한 Momentum이라는 title을 document로 접근하고 읽을 수 있다.
    : title을 읽어올 뿐 아니라 변경도 가능하다.

HTML in Javascript

  • 함수(function)를 통해 HTML에서 id를 통해 element 찾기

  • 찾은 element의 속성 변경 가능

Searching For Elements

  • getElementsById
    : (CSS에서 Id는 하나만 존재함) 하나의 값을 불러옴

  • getElementsByClassName
    : class의 이름으로 element를 불러옴
    : 많은 element를 가져올때 씀(array를 반환)

  • getElementsByTagName()
    : name을 할당할 수 있음(array를 반환)

  • querySelector
    : element를 CSS 방식으로 검색할 수 있음

    : 같은 이름을 가진 element가 여러 개여도 첫 번째 element만 가져온다

: querySelector("#hello); 와 getElementById("hello"); 는 같은 값을 불러온다. 하지만 후자는 하위 요소 가져오는 것을 못하므로 querySelector를 주로 사용.

  • querySelectorAll
    : 동일한 이름의 element를 여러 개 검색하고 싶을 때 사용

Events

  • hover, click, enter, write 등의 동작을 모두 이벤트라고 한다.

  • click event
    : 해당 element를 클릭했을 때 동작하는 이벤트
    : h1('Grab me!')을 다섯 번 클릭함.
    : 클릭하면 컬러 변경.

  • mouseEnter / mouseLeave
    : 해당 element에 마우스 커서를 갖다댈 때와 멀어졌을 때 동작하는 이벤트

More Events

  • 두 가지 방법

  • resize
    : window resize할 때 동작하는 이벤트

  • copy
    : ctrl+c(혹은 오른쪽 마우스로 복사)할 때 동작하는 이벤트

  • online / offline
    : wifi가 연결됐을 때 동작하는 이벤트 / wifi 연결이 끊어졌을 때 동작하는 이벤트

CSS in Javascript

  • if 조건식을 이용해 click event로 색 변경하기

: 변수를 지정해 코드를 더 간단하게 짤 수도 있다

하지만 위처럼 JavaScript로 CSS 작업이 가능하기는 하지만 별로 추천하지는 않는다. style 작업에 적합한 도구는 CSS이고, JavaScript는 animation에 적합한 도구이기 때문이다.

THIS IS BETTER

  • CSS로 active에 속성을 지정하고, JavaScript에서 해당 className을 지정해주면 더 적은 JavaScript 코드로 동일한 결과를 얻을 수 있다.
  • classList
    : element의 class를 목록으로 작업할 수 있게 허용한다.
  • toggle
    : 토큰을 toggle한다. 토큰이 존재한다면 토근을 제거하고, 존재하지 않는다면 토큰을 추가한다.

h1의 classList에 clicked class가 이미 있는지 확인해서 만약 있다면 clicked를 제거해준다. 없다면 추가해준다. (if문으로 길게 작성해야 했던 코드와 같은 결과를 toggle은 한줄로 보여준다!)



LOGIN 🔓

Input Values

  1. querySelector로 HTML의 element를 가지고 온다.

  2. function()으로 기능을 만들어준다.

function onLoginBtnClick(){
	console.log(loginInput.value);
    //loginInput의 value(값)을 출력
    console.log("click!!!");
    //"click!!!"을 출력
   }
  1. loginButton을 click했을 때 onLoginBtnClick이 작동한다.

Form Submission

조건
1. username이 비어있으면 안 됨
2. 너무 긴 username 안 됨

: JavaScript로 alert 창이 뜨게끔 코드를 작성할 수 있지만 권장하는 방식은 아니다. HTML 내에서 직접 제어가 가능하기 때문이다.


: 캡처 화면에 뜬 것처럼 공란 상태로 버튼을 클릭할 경우 안내 메시지가 뜬다. HTML에 작성된 required 속성이 폼 데이터(form data)가 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 명시하기 때문.

Events

  • preventDefault
    : 브라우저가 기본 동작을 실행하지 못하게 막음

: addEventListener 안의 함수는 직접 실행되지 않는다. 브라우저가 실행시켜주고 브라우저에서 해당 이벤트에 대한 정보(object)를 가지게 된다.

: submit 될 경우 전송이 되면서 페이지가 새로고침이 되고 input 창에 있던 정보가 날아간다. 그런데 preventDefault를 호출했기 때문에 "ming"이라는 글자도 그대로 남고(기본 동장 실행X) addEventListener의 함수에서 object에 대한 자리(event)를 할당해줬기 때문에 지금 막 벌어진 event에 대한 정보를 가지고 있는 것을 console창을 통해 확인할 수 있다.

Getting Username

  • hidden

: loginForm을 submit 하면 onLoginSubmit 함수가 작동한다. preventDefault = 기본 동작(submit)을 실행하지 못하게 막고, username에 loginInput의 값을 담고, loginForm의 class 이름에 "hidden"을 추가한 후 console 창에 "username"을 띄운다.

CSS에 display: none; style을 만들어놨기 때문에 전송을 누르면 form이 숨겨지고, console 창에 username이 보여진다.


: h1(Hello ${username})의 class(hidden)을 지워서 loginForm을 보냄과 동시에 user에게 인삿말을 건넬 수 있도록 한다. 하지만 여기까지의 코드로는 username이 완전히 저장되지 않아서 새로고침을 할 때마다 새로 입력을 해 줘야 한다.

Saving Username

  • localStorage
    : 사용자가 브라우저에 뭔가를 저장해서 나중에 가져다 쓸 수 있게 해준다.

  • localStorage.setItem(key, value);
    : 값을 저장하고 불러오기

: Console과 동일한 창에 있는 Application에서 Local Storage에 저장된 key와 value를 확인할 수 있다.

: "username"(key), username(const로 지정한 loginInput의 value)를 localStorage에 저장한다.

: localStorage에도 username이 저장되고 인삿말도 뜬 걸 확인할 수 있다.

Loading Username



Clock ⏰

Intervals

  • setInterval
    : 웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우 사용
    : setInterval(실행할 코드를 담은 함수, 반복주기(밀리초(ms))


: 5초에 한번씩 sayHello function이 반복해서 실행된다

Timeouts and Dates

  • setTimeout
    : 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용

  • Date
    : date Object를 활용해서 현재 날짜와 요일, 시간, 분, 초 등을 불러올 수 있다.


: Date와 setInterval을 활용해서 console 화면에 시계처럼 보이게 만들 수 있다.


: console.log로 출력했던 내용을 innerText로 HTML에 불러오면 위와 같이 시계를 웹에 띄울 수 있다.

PadStart

  • padStart
    : 문자열의 시작을 다른 문자열로 채워서 주어진 길이를
    만족하는 새로운 문자열을 반환한다. (+비슷한 성격의 padEnd(문자열의 끝에 추가)도 있다)
String.prototype.padStart(maxLength, ?fillString);
String.prototype.padEnd(maxLength, ?fillString);


: "1"은 2자리가 아니라서 0이 추가되지만 2자리 조건을 충족하는 12에는 0이 추가되지 않는다.


: Date로 불러온 getHours는 숫자이기 때문에 String으로 감싸서 문자열로 만들어준 후 padStart를 이용하여 1자리 숫자에 0을 추가해준다.

QUOTES AND BACKGROUND ✒️

Quotes

  • Math.random
    : 0~1 사이의 랜덤한 숫자

  • Math.floor
    : 1.999 일 경우에도 1, 1.242여도 1이 나오게 숫자를 아래로 내림 해줌

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

: quotes의 배열 길이(quotes.length)만큼 숫자를 곱해서 나온 숫자의 소수점이 사라지게 floor(내림) 해준다

Background

: 배경 이미지를 랜덤하게 넣어주기 위해 html요소가 아닌 javaScript에서 element를 만들어 추가한다.



TO DO LIST 📝

Setup


Adding ToDos


: 추가한 element로 입력하면 밑에 todo-list가 생성되지만 여기까지 작성한 코드는 삭제가 불가능하고, 새로고침을 하면 사라진다.

Deleting To Dos

Saving To Dos



: local storage에 저장되는 배열이 단순 텍스트로만 저장되기 때문에 배열 형태로 텍스트를 저장해주기 위해 JSON.stringify를 사용해줌.

Loading To Dos

local storage에 저장은 됐지만 화면상으로 보이지 않는 todo-list들을 보이게 하기 위해서는 어떻게 해야 할까?

: savedToDos로 localStorage에 저장돼있는 todos들을 불러온 후에 null이 아닐 경우 localStorage의 배열들을 불러온다. 이때 전에 저장한 것들이 덮어씌워지지 않기 위해 toDos를 let(변경 가능한 변수)로 지정하고 toDos에 parsedToDos의 값을 넣어 toDos를 복원해준다.

Deleting To Dos

local storage에 저장한 내역까지 불러오고 버튼으로 삭제가 가능하지만, 새로고침하면 local storage에 있던 내역이 그대로 뜬다. local storage에서 삭제하지 않았기 때문이다. todo list를 완전히 삭제해보자.


: li.remove() (const li = event.target.parentElement; 클릭한 부모태그로 접근해서 삭제) -> toDos = toDos.filter((todo) => todo.id !== parseInt(li.id)); (기존 toDos 배열에 필터 메서드로
기존 toDos배열에서 클릭한것을 뺀 배열을 새롭게 업데이트) -> function saveTodos() (새롭게 업데이트된 toDos 배열을 다시 locarStorage에 저장)



WEATHER ⛅️


Geolocation

  • navigator
    : 브라우저 정보를 뜻하는 객체
    : 브라우저의 종류나 모바일에서 접속했는지 등을 확인

  • navigator 속성
    : geolocation - 사용자의 위치를 찾는데 사용


: 사용자의 위치를 확인할 수 있다

Weather API

https://openweathermap.org/
날씨 관련 API 제공 웹사이트
(가입후 이메일 인증 몇시간 후 활성화된다고 함)


: 가입후 API key를 받아서 사용 가능

const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`;



: API가 제대로 작동한다면 위처럼 도시와 그 도시의 날씨를 알 수 있다

profile
ming
이전 포스트

[3주차] JavaScript

다음 포스트

[5주차] React

0개의 댓글