자바스크립트 2.0~2.4

function sayHello(){
  console.log('hello!');
}

sayHello();

결과
hello!

외부에 있는 데이터를 읽는 함수를 만드는 방법

function sayHello(yejin){
  console.log('hello!',yejin);
}

sayHello("yejin");

결과
hello! yejin

function sayHello(name, number){
  console.log("hello!", name, "you have", number);
}

sayHello("yejin",200);

결과

hello! yejin you have 200

function sayHello(name, number){
  console.log(`hello! ${name} you are ${number} years old`);
}

sayHello("yejin",200); 

결과
hello! yejin you are 200 years old

function sayHello(name, number){
  console.log(`hello! ${name} you are ${number} years old`);
}

const a = sayHello("yejin",200)

console.log(a)

결과
hello! yejin you are 200 years old
undefined

function sayHello(name, number){
  return `hello! ${name} you are ${number} years old`;
}

const a = sayHello("yejin",200)

console.log(a)

결과
hello! yejin you are 200 years old

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

const plus = calculator.plus(5, 5)
console.log(plus)

결과
10

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

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

  multiply: function(a, b) {
    return a*b;
  }

}

const plus = calculator.plus(5, 5)
const minus = calculator.minus(5, 5)
const multiply = calculator.multiply(5, 5)

console.log(plus, minus, multiply)

결과
10 0 25

---

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

title.innerHTML = " this is js "

결과

<h1 id="title">hihihihi!!!!</h1> 로 되어있는데 결과창에는 html에서 설정한 hihihi문구가 아니라 바꾼 this is js로 나옴.
const title = document.getElementById("title");
이거 안써도 this is.. 저렇게 나옴

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

title.innerHTML = " this is js ";
title.style.color = "blue";
document.title = "want"

결과

querySelector는 노드의 첫번째 자식을 반환해

title로 할 수 있는 모든 것

1. id 속성을 가진 요소를 찾아 객체 반환하기
   const title = document.getElementById("title");
2. 내용수정
   title.innerHTML = "Hi! From JS"
   3.색상변경
   title.style.color = "red"
3. 타이틀 변경
   document.title = 'I own you now'

이처럼 각종 html 문서를 감지하고 추가하고 변경하는 등의 것들을 js로 객체화 하는 것을 통해 바꿀 수 있다.

document.queryselector()
정의 : queryselector는 특정 name이나 id를 제한하지 않고 css선택자를 사용하여 요소를 찾을 수 있다.

객체를
id로 찾고싶다면 "#title"
class로 찾고 싶다면 ".title"

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

title.innerHTML = " this is js ";
title.style.color = "blue";
document.title = "want"

결과

---

window.addEventListener("resize", handleResize);
이렇게 썼을경우 handleResize라는 함수를 호출 하는 거야 내가 필요한 시점에

handleResize() 이거는 지금 바로 호출하라는거야.

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

function handleResize(){
    console.log("i have been resized")
}

window.addEventListener("resize", handleResize);

결과

화면 크기를 변경하니 메세지가 뜨는 모습.
handleResize(); 이렇게 하면 화면크기 변경 안해도 메세지 떠있음.

이벤트를 다룰 함수를 만들때 마다 자바스크립트는 자동적으로 함수를 객체에 붙이지

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

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

window.addEventListener("click", handleClick);

결과