JavaScript 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文ではなく、変更されたis jsが表示されます.const title = document.getElementById("title");これを使わなくても...そのように

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

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

結果

querySelectorは、ノードの最初のサブノードを返します.
titleができることはすべて

idプロパティを持つ要素を検索し、オブジェクトを返します.
const title = document.getElementById("title");

修正

内容
title.innerHTML = "Hi! From JS"
3.色の変更
title.style.color = "red"

タイトル変更
document.title = 'I own you now'

このように、各種htmlドキュメントの検出、追加、変更などをjsにオブジェクト化することで置き換えることができます.
document.queryselector()
定義:queryselectorは、特定の名前や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(); これにより、画面サイズを変更しなくてもメッセージが表示されます.
JavaScriptは、イベントを処理する関数を作成するたびに、自動的に関数をオブジェクトに貼り付けます.

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

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

window.addEventListener("click", handleClick);

結果