[JS] 바닐라 JS로 구글 크롬앱 만들기 #1 Theory ~ #2 Practice

노마드코더의 바닐라 JS로 구글 크롬앱 만들기 강의를 정리하는 글입니다.

---

#1.2 Super Powers of JS

Awesome Javascript

• three.js : https://threejs.org/
• world draw : https://worlddraw.withgoogle.com/
• Impact Games : https://impactjs.com/games

---

#1.4 VanillaJS

Why Vanilla JS?

• jQuery, DOJO... 등 수많은 Library들은 결국 Javascript를 대체하기 위한 것들.
• make-up(대체할 수단)이 아닌 근본적이고 실질적인 것을 아는 것이 중요함.

---

#2.1 Your first JS Function ~ #2.1.1 More Function Fun

const newstarInfo = {
  name: 'newstar',
  age: '28',
  favSinger: [
    {
      group: 'SNSD',
      favMem: 'Taeyeon'
    },
    {
      group: 'RedVelvet',
      favMem: 'Irene'
    }
  ],
};

console.log(newstarInfo.favSinger[0].favMem);

// console은 Javascript의 내장 객체(Build-in Object)
console.log(console);

function sayHi(name, coin) {
  console.log("Hi! " + name + ". You have " + coin + ' coins :)');
};
sayHi("newstar", 390);

function sayHiNew(name, coin) {
  // 백틱을 사용하는 새로운 선언 방식
  return (`Hi! ${name}. You have ${coin} coins :)`);
};
const greetNewstar = sayHiNew("newstar", 390);
// greetNewstar의 값은 sayHiNew 함수의 return 값.
console.log(greetNewstar);

const cal = {
  plus: function(a, b) {
    return a + b;
  }
}
const plus = cal.plus(5, 5);
console.log(plus);

---

#2 Practice #2.1.1 More Function Fun 과제

const cal = {
  plus: function(a, b) {
    return a + b;
  },
  minus: function(a, b) {
    return a - b;
  },
  multiply: function(a, b) {
    return a * b;
  },
  divide: function(a, b) {
    return a / b;
  },
  sqrt: function(a) {
    return a ** (1/2);
  },
  remainder: function(a, b) {
    return a % b;
  }
}

const result = {
  plus: cal.plus(5, 5),
  minus: cal.minus(5, 5),
  multiply: cal.multiply(5, 5),
  divide: cal.divide(5, 5),
  sqrt: cal.sqrt(9),
  remainder: cal.remainder(12, 5)
}

console.log(result);

---

#2.2 JS DOM Functions

// #2.2 JS DOM Functions

const title = document.getElementById('title');
title.innerHTML = "Hi! From JS."

// 모든 html은 객체

// #2.4 Events and event handlers

---

#2.4 Events and event handlers

// #2.4 Events and event handlers

function resizeHandler(event) {
console.log('I have been resized.')
console.log(event); // event라는 argument를 이용해 이벤트가 발생한 element를 불러올 수 있다.
}
window.addEventListener('resize', resizeHandler); // resizeHandler() (X) resizeHandler (O)
// 이 안에서 함수 뒤에 ()괄호를 붙여 사용하면 resize 이벤트가 일어날 때 함술르 실행하는 것이 아니라 렌더링 즉시 해당 함수를 실행하게 됨.

function clickHandler(e) {
    e.target.style.color = 'red';
}
window.addEventListener('click', clickHandler);

---

#2.7 DOM - If else - Function practice part Two

//#2.7 DOM - If else - Function practice part Two
// CSS는 CSS가, 로직은 JS가 처리하도록. 각 언어의 역할을 생각하여 코딩하는 것이 좋다.

const clickedClass = "clicked"; 

function handleClick() {
    //const currentClass = title.className;
    const hasClass = title.classList.contains(clickedClass); // contains : value를 가지는지 체크하는 메소드
     if (hasClass) {
        //title.className = clickedClass; // 안 좋은 방식. element가 가지는 기존 class는 고려하지 않고 강제로 class를 교체해버린다.
        title.classList.remove(clickedClass);        
    } else {
        title.classList.add(clickedClass);
    } 
}
function init() {
    title.addEventListener('click', handleClick);
}
init();

위 함수를 간단히 요약하면 아래와 같다.

//#2.7 DOM - If else - Function practice part Two

const clickedClass = "clicked"; 

function handleClick() {
    const hasClass = title.classList.contains(clickedClass); // contains : value를 가지는지 체크하는 메소드
    title.classList.toggle(clickedClass);
}
function init() {
    title.addEventListener('click', handleClick);
}
init();