자바스크립트 함수, 백틱, DOM, querySelector

Web

자바스크립트 함수, 백틱, DOM, querySelector

노루룽 2021. 1. 15. 03:14

함수

function sayHello(arg){
  console.log('Hello!', arg);
}

sayHello("HJ");

함수는 인자(argument)를 받는다.

인자는 없어도 됨.

백틱(``)

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

const greetHJ = sayHello("HJ", 20);

console.log(greetHJ);

""와 ''는 둘 다 String이다.

하지만 백틱(``)은 완전히 다른 기능을 가지고 있다.

객체 안의 함수

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

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

  div: function(a, b){
    return a / b;
  },

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

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

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

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

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

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

콤마 주의!!

DOM (Document Object Module)

<!DOCTYPE html>
<html>
  <head>
    <title>Practice</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="title">This Works!</h1>
    <script src="script.js"></script>
  </body>
</html>

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

title.innerHTML = "Hi! From JS";

html(요소)에서 자바스크립트가 선택한 모든 것은 객체가 된다. → DOM

객체는 많은 키를 가지고 있다. (console객체의 .log, .error 등~~)

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

title.innerHTML = "Hi! From JS";

console.dir(title);

console.dir을 하면 객체가 어떻게 구성됐는지 쭉 볼 수 있다.

객체를 파악하면 title.style.color = 'red'; 같이 자유롭게 수정할 수 있다!

querySelector

querySelector는 id나 클래스를 만족하는 노드의 첫 번째 자식을 반환한다.

document.querySelector("#title"); → id가 title인 요소를 반환.

document.querySelector(".title"); → class가 title인 첫 번째 요소를 반환.

getElementById와 같은 명령어는 오직 id값으로만 요소를 반환하고,

getElementByClassName은 해당 class name을 사용하는 여러 요소를 반환하기 때문에 불편하다.

따라서, 앞으로는 querySelector()를 주로 사용할 것이다.

Event 호출 시

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

handleClick 필요할 때 호출

handleClick() 지금 바로 호출

'Web' 카테고리의 다른 글

노마드코더 바닐라JS 챌린지 8기 졸업 후기 (0)	2021.03.25
자바스크립트 classList를 써야하는 이유 (2)	2021.01.16
자바스크립트 변수, 배열(Array), 객체(Object) (0)	2021.01.14
자바스크립트, ES, 바닐라JS, SPA (0)	2021.01.13
CSS 링크 밑줄 없애기, 링크 색상 없애기 (2)	2020.08.29

현재글자바스크립트 함수, 백틱, DOM, querySelector

행뽁🐥