[노마드코더] HTML, CSS, JavaScript 클론코딩 chrome-app

HTML
Hyper Text Mark-up Language
: 구조를 만들고 요소를 적어넣기

css
Cascading Style Sheet 
: 만들어진 HTML을 조립,꾸미고 정렬하는 언어

 

HTML, CSS: 로그인 구현 X, 검색 기능 X, 단순히 페이지를 나타낸다.

 

JavaScript: 브라우저가 가지는 HTML을 읽어옴. 브라우저 환경에서는 자바스크립트가 HTML에 연결되어 있음. 자바스크립트는 HTML의 element를 가져오고 변경할 수 있음.

 

 

✅ eventListener를 사용하여 이벤트가 발생하는 순간에만 function이 실행되도록 함.

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {title.style.color = "blue";}
function handleMouseEnter() {title.innerText = "Mouse is here!";}
function handleMouseLeave() {title.innerText = "Mouse is gone!";}
function handleWindowResize() {document.body.style.backgroundColor = "tomato";}
function handleWindowCopy() {alert("copier!");}
function handleWindowOffline() {alert("SOS no WIFI");}
function handleWindowOnline() {alert("ALL GOOOD");}

title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

=> handleTitleClick()과 같이 괄호를 이용해 직접 실행시키지 않고 선언?만 해준다. eventListener가 실행시킬 것이기 때문이다.

 

 

✅ const, let 활용하여 상태를 변경하는 if-else문

function handleTitleClick() {
  const currentColor = h1.style.color;
  let newColor;
  if (currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}

 

 

✅ form 태그 안의 <input/>에서 <button/>을 누르거나 또는 <input type="submit"/>인 경우

<form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>

=> form이 submit 된다. (submit될 때마다 브라우저가 새로고침됨. input 안의 내용만 처리됨.)

form 태그 안에 <input/>이 존재하는 경우 클릭외에 엔터도 가능!!!

 

 

✅ eventListener를 통해 실행되는 function의 ()에 자동으로 argument가 인자로 전달된다(argument는 관행적으로 event로 선언함). 이때, 함수에 대해 브라우저가 기본적으로 수행하는 동작을 막는 함수: event.preventDefault();

Ex) form 태그가 submit되면 브라우저가 새로고침되는 현상

function onLoginSubmit(event) {
  event.preventDefault();		//submit에 해당하는 브라우저 기본동작인 새로고침 방지
  console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

=> 브라우저가 함수를 실행시키면서 event에 대한 정보를 함께 전달해줌.

 

 

✅ 변수를 문자열에서 나타내는 법

1. "Hello " + username

2. `Hello ${username}`

 

 

✅ HTML 태그에 class 추가, 삭제

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

const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  greeting.innerText = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

loginForm.addEventListener("submit", onLoginSubmit);

=> 태그를 가리키는 변수.classList.add("hidden")

 

 

✅ localStorage.setItem()을 활용해 브라우저에 정보를 저장할 수 있다. 브라우저가 새로고침되더라도 정보가 유지됨!!! Console -> Application

  const username = loginInput.value;
  localStorage.setItem("username", username);

=> local storage: 브라우저가 가지고 있는 작은 DB같은 API, 데이터베이스가 아니고 값을 복사해두는 곳이다.

 

 

✅ 이벤트를 기다리는 function과 화살표 함수

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

setInterval(sayHello, 5000);

// 두 개의 setInterval은 동일함.

// shortcut
setInterval(() => {
  console.log("hello");
}, 5000);

 

 

✅ <input/> 태그 안의 required 속성을 활용하여 submit할 때 value를 항상 가지고 있도록 한다.

    <form id="todo-form">
      <input
        type="text"
        placeholder="Write a  To Do and Press Enter"
        required
      />
    </form>

 

 

✅ 배열에 대한 함수인 forEach의 shortcut. 배열의 각 item에 대해서 함수를 실행한 결과를 반환함.

function sayHello(item) {
  console.log("this is the turn of ", item);
}
parsedToDos.forEach(sayHello);

// 두 개의 함수는 동일함.

// shortcut
parsedToDos.forEach((item) => {
  console.log("this is the turn of ", item);
});

 

 

✅ 배열에 대한 함수인 filter의 shortcut. 배열의 각 item에 대해서 true, false에 따라 새로운 배열을 반환함.

arr = [1232, 1111, 1000, 50, 230, 3204, 232];
function sexyFilter(item) {
  return item <= 1000;
}
console.log(arr.filter(sexyFilter));

// 두 개의 함수는 동일함.

// shortcut
console.log(
  arr.filter((item) => {
    return item <= 1000;
  })
);