티스토리 뷰

프로그래밍/Front end

[Front end] 바닐라 자바스크립트 기초 #2 Function, DOM, Event

Reference M1 2019. 11. 13. 21:56

 

이번 장에서는 함수, 이벤트, 조건문 등에 대해 이야기해보자. 우린 지난 시간에 console.log를 사용하여 여러 가지를 알아보았다. 여기서 console은 Object이다.

Function with Object

console.log(console);

console은 여러 가지 함수를 가지고 있는 Object이다. consle.log를 비롯해 alert 등 앞으로 사용하게 될 많은 함수들은 내장 함수(built-in function)라고 한다. 함수는 어떤 기능, 행위를 표현한 것이다. 필요한 곳에 원하는 만큼 사용할 수 있다.

console.log('VanilaJS With Single');
console.log("VanilaJS With Double");

function vanilaJS(param) {
  console.log(`VanilaJS With ${param}`);
}

vanilaJS('Object');
vanilaJS('function');
vanilaJS('argument');

function vanilaJS_retrun(param) {
  return `VanilaJS With ${param}`;
}

const vanila = vanilaJS_retrun('return');
console.log(vanila);

자바스크립트에서 스트링을 표현할 때 '(싱글), "(더블)로 표현해 준다. 이런 방식은 변수와 함께 문자열을 만들 때 조금 불편하다. 그래서 나온 것이 `(백틱)이다. 싱글, 더블과 매우 다르다. 백틱을 사용하여 ${변수}를 사용하면 간단하게 만들 수 있다.

const calculator = {
  plus: function(a, b) {
    return a + b;
  },
  minus: function(a, b) {
    return a - b;
  },
  muliti: function(a, b) {
    return a * b;
  },
  division: function(a, b) {
    return a / b;
  }
};

const plus = calculator.plus(7, 7);
const minus = calculator.minus(10, 5);
const muliti = calculator.muliti(15, 5);
const division = calculator.division(20, 5);

console.log(plus);
console.log(minus);
console.log(muliti);
console.log(division);

간단하게 calculator Object에 계산식 함수 4개를 만들어보았다. console.log와 유사하지 않은가? 유사한 점을 찾았으면 한다.

 

DOM(Document Object Moudel)

DOM을 설명을 위해 아래와 같이 3개 파일을 만들어 title을 컨트롤해보자. 

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel='stylesheet' href='index.css' />
    </head>
    <body>
        <h1 id='title'>This work!</h1>
        <script src='index.js'></script>
    </body>
</html>

 

index.css

body {
    background-color: peru;
}

h1 {
    color: white;
}

 

index.js

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

console.log(document);
console.log(title);

title.innerHTML = 'Hi! From JS';

document.getElementById를 통해 title 아이디를 가지는 요소에 접근할 수 있다. document 그 자체를 console.log로 확인하면 index.html이 그대로 나타난다. DOM은 자바스크립트 html에 있는 모든 요소를 반환하여 객체로 변환한다. 타이틀을 innerHTML를 통해 변경할 수도 있다. 이렇게 자바스크립트로 html을 바꿀 수 있다. 또한 getElementById 이외에도 getElementByClassName, getElementByTagName, querySelector 등을 숙지해야 한다.

HTML을 DOM(Document Object Moudel) 형태로 변경 가능하는 걸 기억해야 한다.

 

Event

자바스크립트는 이벤트에 반응하기 위해서 만들어졌다. 이벤트란 웹사이트에서 발생하는 것들을 말한다. click, resize, submit, change 등 이와 같은 것들이 모두 이벤트이며, 이런 이벤트를 제어할 수 있다.

function handleResize(event) {
    console.log(event);
}

window.addEventListener('resize', handleResize);

자바스크립트는 이벤트를 받기를 기다리고 있다. 여기서 어떤 이벤트를 기다리는지 이벤트를 다룰 함수와 함께 명시해 줘야 한다. 모든 이벤트를 기다릴 수는 없기 때문이다. 이벤트 함수를 정의할 때마다 자바스크립트는 event 객체를 자동적으로 함수에 주입한다.

 

이제 응용해보자. title를 click 할 때 색상을 바꾸는 이벤트를 제어해 보자.

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

function handleClick() {
    title.style.color = 'black';
}

title.addEventListener('click', handleClick);

querySelector를 통해 title 객체를 할당받았다. 자바스크립트는 또한 title객체의 click 이벤트를 기다리고 있다. click시 title에 대한 color를 변경한다.

 

'프로그래밍 > Front end' 카테고리의 다른 글

[Front end] JavaScript Json Key 추출 ( keys VS getOwnPropertyNames 비교)  (0) 2020.01.10
[Front end] JavaScript 동적 form 생성 및 submit  (0) 2020.01.09
[Front end] 바닐라 자바스크립트 기초 #1 Variable, Data Types  (0) 2019.11.09
[Front end] React 16 #5 set State null  (0) 2019.11.06
[Front end] React 16 #4 Error Boundaries  (0) 2019.11.05
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함