[JavaScript] 바닐라JS로 크롬 앱 만들기 #2 Practice

JS Fuction

`` 으로 function 의 내용 구성 가능

 

1. 함수를 만들고 함수의 반환값을 console log로 출력해보자.

• name, age : argument

function sayHello(name, age){
  return `Hello ${name} you are ${age} years old.`;
}
// 또는
function sayHello(name, age){
  return 'Hello', name, 'you are', age, 'years old.';
}

const greetNicolas = sayHello("Nicolas", 15);
//greetNicolas는 sayHello의 return 값

console.log(greetNicolas);
// 1개의 console log 만 가지게 된다.

 

2. 함수로 계산기를 만들어보자.

const calculator = {
  plus: function(a, b) {
    return a+b;
  },

  minus: function(a, b) {
    return a-b;
  },
  
  power: function(a, b) {
    return a**b;
  }
}

const plus = calculator.plus(5,5);
const minus = calculator.minus(5,5);
const power = calculator.power(2,4);
console.log(plus, minus, power);

 

JS DOM Functions

• DOM 형태로 변경 가능
• document : 문서 내 HTML 다 보여줌]
• DOM : Document Object Module : HTML 태그를 모두 가져다가 객체로 만든다.

const title = document.getElementById("title");

title.innerHTML = "HI! from JS"; // title text 바뀜

 

 

Modifying the DOM with JS

• 자바스크립트로 HTML 수정 가능
• querySelector : 노드의 첫번째 자식 반환 (id : #title // class : .title)

const title = document.querySelector("#title");
// id = title인 부분을 찾는다.

title.innerHTML = "HI! from JS";
title.style.color="purple";
document.title="I own you";

console.dir(title);
// 객체의 메소드까지 보고 싶을 때 dir 사용

 

Events and Event Handlers

• Event : 웹사이트에서 발생하는 사건들
• JS는 이 Event들을 처리하기 위한 것
• event 종류 보는 곳
  https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조

 

클릭 했을 때 title 색깔을 blue로 바꾸자.

const title = document.querySelector("#title");

function handleClick(event) {
	title.style.color="red";
}

title.addEventListener("click", handleClick);
// handleClick : 원할 때(이벤트 발생할 때) 함수 호출
// handleClick() : 바로 함수 호출

 

If, Else, And, Or

1. IF문

if(condition) {
	block
} else {
	block
}

2. And(&&), Or(||)

// AND
if((20 > 5) && ("ncolas" === "nicolas")) {
	console.log("hi");
} else {
	console.log("ho");
}

// OR
if((20 > 5) || ("ncolas" === "nicolas")) {
	console.log("hi");
} else {
	console.log("ho");
}

3. 예시

const age = prompt("How old are you"); // 요즘 사용 안함

if(age >= 18 && age <=21) {
	console.log("you can go");
} else if (age> 22) {
	console.log("wow");
} else {
	console.log("you have to stay");
}

 

4. 예시2 - 마우스를 갖다대면 색깔이 바뀝니다.

const title = document.querySelector("#title");
const BASE_COLOR = "rgb(52, 73, 94)";
const OTHER_COLOR = "#ff7675";

function handleClick() {
	const currentColor = title.style.color;
	if (currentColor === BASE_COLOR) {
		title.style.color = OTHER_COLOR;
	} else {
		title.style.color = BASE_COLOR;
	}
}

function init() {
	title.style.color = BASE_COLOR;
	title.addEventListener("mouseenter", handleClick);
}

init();

 

5. 예시3 - 클릭할 때마다 색깔이 바뀝니다.

• css에서 style을, JS에서 이벤트 처리를 담당하는 것이 좋다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
	const currentClass = title.className;
	if(currentClass !== CLICKED_CLASS) {
		title.className = CLICKED_CLASS;
	} else {
		title.className = "";
	}
}

function init() {
	title.addEventListener("click", handleClick);
}

init();

 

• 2가지 클래스를 동시에 나타내고 싶다면?

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick() {
	title.classList.toggle(CLICKED_CLASS);
}

function init() {
	title.addEventListener("click", handleClick);
}

init();