6일차 _JavaScript 기초

JavaScript 보기 전 알아야 하는 개념

JavaScript는 HTML을 새로 만드는 언어가 아니라, 이미 만들어진 HTML을 찾아서 제어하는 언어입니다.

예를 들어 HTML에 아래와 같은 코드가 있다고 가정해 봅시다.

<h1 id="title">안녕하세요</h1>

<button id="btn">확인</button>

JavaScript는 이 요소들을 직접 만들지 않습니다.

대신

"HTML에서 title이라는 이름표(id)를 가진 요소를 찾아와."

라고 명령합니다.

찾아온 요소를 JavaScript 안에서 사용할 수 있도록 변수(또는 상수)에 저장한 후 원하는 기능을 추가하는 것입니다.

즉,

HTML
        ↓
JavaScript가 HTML 요소를 찾는다.
        ↓
찾은 요소를 변수(상수)에 저장한다.
        ↓
저장된 요소를 이용해서 글자를 바꾸거나,
색을 바꾸거나,
클릭 이벤트를 추가한다.

 

const란?

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

먼저 const부터 살펴보겠습니다.

const는 상수(Constant)를 만드는 키워드입니다.

상수는 한 번 저장한 값을 다른 값으로 다시 바꾸지 않는 변수라고 생각하면 됩니다.

쉽게 말하면

html이나 css  a 인것을 JS에서 a로 하기 위한  코드

---

document는 무엇일까?

document

는

현재 열려 있는 웹페이지 전체(HTML 문서)를 의미합니다.

브라우저는 HTML을 하나의 document(문서)로 관리합니다.

---

querySelector()는 무엇일까?

document.querySelector("#title")

는

document 안에서 원하는 요소를 찾는 명령입니다.

쉽게 번역하면

웹페이지(document) 안에서

id가 title인 요소를 찾아라.

라는 뜻입니다.

---

#은 왜 붙을까?

HTML에서는

id="title"

이라고 작성합니다.

하지만 JavaScript에서 id를 찾을 때는

"#title"

처럼 **#**을 붙입니다.

---

코드 전체를 해석해 보기

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

한 줄씩 해석하면

const
↓
title라는 상수를 만든다.

document
↓
현재 웹페이지에서

querySelector("#title")
↓
id가 title인 요소를 찾는다.

=
↓
찾은 요소를 title 상자에 저장한다.

최종 해석

웹페이지에서 id가 title인 HTML 요소를 찾아 title이라는 상수에 저장한다.

---

또 다른 예제

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

이 코드도 같은 원리입니다.

 

HTML

<div id="a">안녕하세요</div>

 

JavaScript

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

해석

HTML에서 id가 a인 요소를 찾아 JavaScript에서 a라는 상수에 저장한다.

즉,

HTML의 요소를 JavaScript에서 사용할 수 있도록 연결하는 과정입니다.

---

addEventListener()는 무엇일까?

이번에는 아래 코드를 보겠습니다.

document.querySelector("#calc").addEventListener("click", () => {

});

처음 보면 길어 보이지만, 작은 단위로 나누면 쉽습니다.

---

① document.querySelector("#calc")

document.querySelector("#calc")

↓

웹페이지에서

id가 calc인 요소를 찾는다.

---

② addEventListener()

.addEventListener()

의 뜻은

이 요소에 이벤트를 등록한다.

입니다.

여기서 이벤트(Event)란

어떤 일이 발생하는 것입니다.

예를 들어

• 버튼 클릭
• 키보드 입력
• 마우스 이동
• 화면 스크롤

모두 이벤트입니다.

---

③ "click"

"click"

은

클릭 이벤트를 의미합니다.

즉,

사용자가 이 요소를 클릭하면

이라는 뜻입니다.

---

④ () => { }

() =>  에서 괄호 안에 아무것도 넣지 않는다. 의미는 바뀔거야   {}로 

() => {

}

은 화살표 함수(Arrow Function)입니다.

쉽게 말하면

{} 클릭했을 때 실행할 명령을 적는 공간

입니다.

---

전체 코드 해석

document.querySelector("#calc").addEventListener("click", () => {

});

순서대로 해석하면

① HTML에서 id가 calc인 요소를 찾는다.

↓

② 그 요소에 클릭 이벤트를 등록한다.

↓

③ 사용자가 클릭하면

↓

④ { } 안에 작성된 코드가 실행된다.

즉,

HTML에서 id가 calc인 요소를 찾아, 클릭 이벤트를 등록하고, 사용자가 클릭하면 { } 안의 코드를 실행하라는 의미입니다.

여기서 중요한 점은

{ }의 상태로 바뀌는 것이 아니라, { } 안의 코드가 실행되는 것입니다.

이 표현이 JavaScript의 동작 원리를 가장 정확하게 설명합니다.

() =>  이것의 의미는 이것을 클릭하면 이것이된다 라고 해석됨  정해진 양식으로 ()안에 무엇을 따로 입력할 필요는 없다.