Javascript Theory - Functions · 도전하는 개발자

Function

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

sayHello("Harry");

함수 선언

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

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

객체 안의 함수 선언

JS DOM Functions

자바스크립트에서는 DOM Function이라고 하는 브라우저 상의 DOM을 조작할 수 있는 기능들을 제공해준다.

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

title.innerHTML = "Hi! From JS";

console.log(title);

document는 Object이며 브라우저에 렌더링 되는 DOMㅡㄹ 갖고 있다.

그리고 getElementById를 통해 id에 접근할 수 있다.

그 후 innerHTML의 값을 바꾸면 브라우저에서 바뀌는 것을 확인할 수 있다.

DOM을 조작해보자

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

title.innerHTML = "Hi! From JS";

console.dir(title);

console.log를 dir로 바꾸면 꽤 많은 것들을 볼 수 있다.

HTML을 조작할 수도 있고, 심지어 CSS도 조작이 가능하다.

console.dir(document);를 입력해보면 현재 DOM에서 조작가능한 Object의 요소들을 보여준다.

즉, 자바스크립트는 코드로 HTML,CSS를 조작하는 것이 가능하다!

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

title_id.innerHTML = "Hi! From JS";
title_id.style.color = "red";
console.dir(document);

querySelector 메소드를 사용하면 CSS Selector처럼 id나 class 이름으로 가져오는 것이 가능해진다.

Reference

Vanilla Javascript for Beginners - 노마드 코더