DAY 5

#2.13 Conditionals

prompt();

사용자에게 창을 띄워 값을 받아오지만, 값을 받아올 때 까지 코드의 실행을 멈추는 오래된 방식으로 css를 바꿀 수도 없다.

typeof 라는 키워드는 variable의 type을 볼수 있는 키워드인데, prompt()에서는 숫자를 입력받고 이를 typeof로 출력해도 string이라고 입력된다. prompt의 type은 string이 default이기 때문이다.

parseInt();

숫자로 구성된 string type을 number type으로 변환시켜준다.

console.log(typeof "15", typeof parseInt("15")); 
// string number

const age = parseInt(prompt("Please write your age"));
console.log(typeof age);
// 이 때 prompt에 명백한 string값을 입력하면 콘솔에는 age의 type이 NaN이라고 할 것이다.
// 그러나 typeof age는 number로 출력된다. NaN이 number로 취급되는 듯하다..
// console.log(isNan(age));는 true가 될 것. 

// 만약 prompt 안에 123dfad 같이 숫자와 문자열을 입력하고
// console.log(age);를 하면 123이 출력된다.
// 이는 parseInt가 숫자가 아닌 글자를 만나게 되면
// 그 글아 이후는 무시하고 해당 지점까지의 정수갔을 리턴해주기 때문이다.

#2.14 Conditionals part Two

const age = parseInt(prompt("How old are you?"));

if (isNaN(age)) {
  console.log("Please write a number.");
} else if (age < 18) {
  console.log("You are too young.");
} else {
  console.log("You can drink.");
}

연산자	내용
&&	조건문 둘 다 true (AND)
\|\|	조건문 둘 중 하나만 true (OR)
==	동등 연산자 (값만 같으면 true)
===	일치 연산자 (값과 값의 종류(data type)가 모두 같은지 비교하여 같으면 true)

== vs ===

- 배열형 : 배열의 데이터 값이 같더라도 배열을 할당할 때 각 변수는 각 메모리의 주소를 참조하기 때문에, 주소가 다르므로 두 배열은 같지 않다.

let a = [1, 2, 3];
let b = [1. 2. 3];
console.log(a==b); // false
console.log(a===b); // false

let x = {}
let y = {}
console.log(x==y); // false
console.log(x===y); // false

동등 연산자(==)보다는 일치 연산자(===)를 훨씬 권장한다.

#3.6 CSS in Javascript

current color = h1의 현재 color

newColor : 변경될 색상 값을 담는 let 변수

// #1. event를 적용시킬 element를 찾아라
const h1 = document.querySelector(".hello:first-child h1");

// #3. 그 event에 반응해라 
function handleTitleClick() {
  const currentColor = h1.style.color;
  let newColor; // 아무것도 없는 빈 let 변수
  if (currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}

// #2. event를 listen해라
h1.addEventListener("click", handleTitleClick);

#3.7 CSS in Javascript part Two

위의 코드는 잘 작동하는 코드지만, style에 적합한 도구는 css이기 때문에 웬만한 스타일 속성은 css에, javascript에는 cs에서 설정한 값을 element에 전달만 시키고 싶다. 때문에 html, css, js 모두 일부 수정했다.

index.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>Momentum</title>
    <!-- link:css 시 자동완성 -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="hello">
      <h1 class="title">Hello</h1>
    </div>
    <script src="app.js"></script>
  </body>
</html>

style.css

body {
  background-color: beige;
}

h1 {
  color: cornflowerblue;
  transition: color 0.5s ease-in-out;
}

.title {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.clicked {
  color: tomato;
}

app.js

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

function handleTitleClick() {
  const clickedClass = "clicked";
  if (h1.className === clickedClass) {
    h1.className = "";
  } else {
    h1.className = clickedClass;
  }
}

h1.addEventListener("click", handleTitleClick);

그러나 위 코드는 만약 h1 태그를 클릭했을 때, h1 태그에 미리 설정해준 title 클래스가 사라지고 clicked 클래스가 있을 때와 클래스가 없을 때의 상태만 반복될 것이다.

#3.8 CSS in Javascript part Three

이 버그를 해결해주는 것이 classList이다. className은 모든 클래스를 교체해버리지만, classList에서는 class들의 목록으로 작업할 수 있게끔 허용해준다.

classList에는 많은 function이 있는데, 그 중 contains() function은 명시된 class가 html element의 class에 포함되어 있는지 알려준다. add와 remove는 classList에서 명시된 class를 추가하거나 제거할 수 있다.

이를 한눈에 확인하기 위해 style.css에서 title 클래스의 font-family: 'Times New Roman', Times, serif; 를 추가해줬다.

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

function handleTitleClick() {
  const clickedClass = "clicked";
  if (h1.classList.contains(clickedClass)) {
    h1.classList.remove(clickedClass);
  } else {
    h1.classList.add(clickedClass);
  }
}

h1.addEventListener("click", handleTitleClick);

toggle()은 토큰이 존재하면 토큰을 제거하고, 존재하지 않으면 추가해줌으로써 위의 코드를 더욱 간략하게 짤 수 있다.

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

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

h1.addEventListener("click", handleTitleClick);

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

DAY 10 (0)	2023.01.04
DAY 8 (0)	2023.01.03
DAY 4 (0)	2022.12.30
DAY 3 (0)	2022.12.28
DAY 2 (1)	2022.12.28

hykim

DAY 5

#2.13 Conditionals

#2.14 Conditionals part Two

#3.6 CSS in Javascript

#3.7 CSS in Javascript part Two

#3.8 CSS in Javascript part Three

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

티스토리툴바

DAY 5

#2.13 Conditionals

#2.14 Conditionals part Two

#3.6 CSS in Javascript

#3.7 CSS in Javascript part Two

#3.8 CSS in Javascript part Three

'javascript > 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글

'javascript/바닐라 JS로 크롬 앱 만들기' Related Articles

티스토리툴바