비전공자를 위한 JS기초

티스토리 뷰

IT/IT 이것 저것

비전공자를 위한 JS기초

KS짱짱맨 2025. 4. 8. 10:49

아래 내용은 원문을 최대한 유지하되, 반말 표현을 모두 정중한 표현으로 바꾼 것입니다.

1. JavaScript란 무엇일까요?

웹페이지를 움직이게 하는 마법사

인터넷에서 보는 대부분의 웹페이지는 보통 HTML과 CSS로 만들어집니다.

HTML은 웹페이지의 뼈대(기본 구조)를 담당합니다.
CSS는 웹페이지의 외관(꾸미기)을 담당합니다.

그리고 **JavaScript(자바스크립트)**는 웹페이지를 움직이게 하고, 여러 가지 일을 수행하도록 만드는 마법사 같은 역할을 합니다.

일상생활에서도 자주 사용됩니다

예를 들어, 온라인 게임에서 버튼을 누를 때 점수가 올라가거나, 유튜브에서 동영상을 재생하거나 멈출 때 모두 JavaScript가 동작하고 있는 것입니다.

참고서 : https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/What_is_JavaScript

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글에서는 "JavaScript는 무엇인가요?", "JavaScript로 무엇을 할 수 있나요?"와 같은 질문에 답하며 JavaScript의 용도에 익숙해지도록 높은 수준에서 J

developer.mozilla.org

2. 변수(Variable)와 함수(Function)를 이해해봅시다

2-1. 변수(Variable)란?

보물을 담아두는 상자

변수는 이름이 붙은 상자와 같습니다. 컴퓨터 속에서 필요한 숫자나 글자 같은 정보를 안전하게 보관할 수 있습니다.
예를 들어,

let score = 0;

라고 작성하면, score라는 이름의 상자 안에 0이라는 숫자를 담은 것입니다.

왜 변수를 사용할까요?

게임 점수처럼 수시로 바뀌는 값을 저장할 때
이름이나 문장처럼 계속 사용해야 하는 값을 보관해야 할 때

이러한 경우에 변수를 사용합니다.

2-2. 함수(Function)란?

반복되는 일을 처리하는 요술 주문

함수는 여러 번 쓰이는 작업을 한 번에 정리해두는 것입니다.
자주 사용하는 동작을 미리 묶어두고, 필요할 때마다 이름으로 불러와 사용할 수 있습니다.

예를 들어, 계산기를 떠올려보면 ‘더하기’ 버튼이 항상 같은 일을 합니다.
이 기능을 함수로 만들면, 필요할 때마다 ‘더하기 함수’를 불러서 쓸 수 있게 됩니다.

함수 만들기 예시

function sayHello() {
  console.log("안녕!");
}

위와 같이 function sayHello()로 sayHello라는 함수를 만들었습니다.
이후에

sayHello();

라고 작성하면, 함수를 실행하여 콘솔에 “안녕!”이라는 문장을 표시합니다.

3. Event(이벤트)란?

어떤 일이 일어났을 때 이를 알려주는 신호

이벤트는 “누군가가 버튼을 클릭했다!”와 같은 특별한 일을 말합니다.
예를 들어, 클릭 이벤트, 화면이 켜질 때의 이벤트, 키보드를 눌렀을 때의 이벤트 등이 있습니다.

이벤트를 이용해서 동작하기

JavaScript에 “버튼이 눌렸을 때 이러한 동작을 해주세요!”라고 미리 작성해두면, 버튼이 눌리는 순간 그 일이 자동으로 실행됩니다.

이벤트 예시

<button id="myButton">누르지 마세요!</button>

<script>
  // 버튼을 찾아서 button이라는 이름으로 변수에 담기
  const button = document.getElementById("myButton");

  // 클릭 이벤트 설정
  button.addEventListener("click", function() {
    alert("버튼을 누르셨네요!");
  });
</script>

button.addEventListener("click", ...)에서 "click"은 **“버튼을 클릭했을 때”**를 의미합니다.
두 번째 인자로 들어간 함수가 실제로 어떤 일을 할지 정해놓은 것입니다.

4. DOM(Document Object Model)의 개념 이해하기

DOM은 웹페이지를 JavaScript가 다룰 수 있게 해주는 지도

웹페이지 안에는 버튼, 문장, 이미지 등 여러 가지 요소가 있습니다.
DOM은 이러한 요소들을 컴퓨터가 이해할 수 있는 구조(지도)로 만들어둔 것입니다.

DOM을 통해 JavaScript가 웹페이지를 변경할 수 있습니다!

예를 들어,

“이 문장의 글씨 크기를 바꿔주세요!”
“이 버튼을 화면에서 숨겨주세요!”

등과 같이 JavaScript가 웹페이지 요소를 자유롭게 수정하고 이동시킬 수 있도록 돕는 역할을 합니다.

DOM 사용 예시

DOM을 통해 text라는 문단에 접근해 색깔을 바꾸거나, 내용을 바꿀 수 있게 됩니다.

DOM을 어떻게 사용할까요?

DOM을 통해 요소를 찾아서 조작합니다

JavaScript로 “이 문장의 색을 빨간색으로 바꿔주세요!”라고 요청하면, 실제 화면에서도 해당 문장이 빨간색으로 변경됩니다.
만약 DOM이 없다면, JavaScript는 어떤 문장을 수정해야 하는지 정확히 알 수 없습니다.
그러나 DOM을 통해 다음과 같이 작성하면 가능해집니다.

document.getElementById("text").style.color = "red";

위처럼 getElementById("text")로 요소를 찾고, .style.color = "red"처럼 원하는 대로 변경할 수 있는 것입니다.

DOM을 사용하는 몇 가지 방법

document.getElementById("아이디")
- HTML에서 id="text"처럼 이름표를 붙여두면, 해당 요소를 쉽게 찾아서 변경할 수 있습니다.
document.querySelector("CSS선택자")
- CSS에서 사용하는 선택자(.클래스이름, #아이디이름, 태그 이름 등)를 그대로 활용해 요소를 찾을 수도 있습니다.

4. 조금 더 구체적인 예시 살펴보기

<!DOCTYPE html>
<html>
<head>
  <title>DOM 예시</title>
</head>
<body>
  <h1 id="title">안녕하세요!</h1>
  <p class="content">이것은 문단입니다.</p>
  <button id="changeTextBtn">문장 바꾸기</button>

  <script>
    // 1. 버튼, 제목, 문단을 찾아서 담기
    const button = document.getElementById("changeTextBtn");
    const title = document.getElementById("title");
    const paragraph = document.querySelector(".content");

    // 2. 버튼이 눌렸을 때(클릭 이벤트) 실행할 함수
    button.addEventListener("click", function() {
      // 제목 바꾸기
      title.innerText = "DOM을 통해 바뀐 제목!";
      // 문단 글씨 색 바꾸기
      paragraph.style.color = "blue";
      // 문단 내용도 바꾸기
      paragraph.innerText = "나는 파란색 문단으로 바뀌었다!";
    });
  </script>
</body>
</html>

document.getElementById("title")를 통해 id="title"인 요소(<h1>)를 찾아서 변수 title에 담습니다.
document.querySelector(".content")는 클래스가 "content"인 요소(<p>)를 찾아서 변수 paragraph에 담습니다.
그리고 버튼을 클릭하면 미리 정해둔 동작(제목과 문단을 바꾸는 코드)이 실행됩니다.

이 모든 것은 DOM을 통해 가능해집니다.

5. DOM이 왜 중요할까요?

웹페이지를 ‘살아있게’ 만들 수 있습니다!

단순히 글만 써 있으면 정적인(가만히 있는) 페이지입니다.
DOM을 사용하면 JavaScript가 버튼을 누를 때 글씨를 바꾸거나, 사진을 크게 만들고, 숨겨진 메뉴를 보이게 하는 등 동적(Dynamic) 기능을 구현할 수 있습니다.

즉, 사용자의 행동(이벤트)에 따라 웹페이지가 바뀌는 동적 웹페이지가 만들어집니다.

인터랙티브(Interactive)한 경험

사용자가 버튼을 누르거나 화면을 드래그할 때, 바로바로 화면이 반응하면 더욱 재미있고 편리합니다.
이 모든 것을 가능하게 해주는 것이 결국 DOM + JavaScript입니다.

정리

DOM은 웹페이지를 JavaScript가 다룰 수 있도록 만든 지도이자 구조입니다.
HTML 요소들은 부모, 자식, 형제로 이어져 있고, JavaScript는 이를 탐색하고 수정할 수 있습니다.
getElementById나 querySelector 같은 방법을 사용해 필요한 요소를 찾고, innerText나 style 등의 속성을 통해 내용이나 모양을 변경할 수 있습니다.
이를 통해 JavaScript가 웹페이지를 자유자재로 움직일 수 있게 됩니다.

마무리

JavaScript는 웹페이지를 움직이고 반응하게 해주는 역할을 합니다.
**변수(Variable)**는 정보를 담아두는 상자와 같고, **함수(Function)**는 자주 쓰는 동작을 미리 묶어놓은 주문과 같습니다.
**이벤트(Event)**는 “클릭”처럼 특별한 일이 일어났을 때 실행되는 신호입니다.
DOM은 웹페이지를 JavaScript가 쉽게 다룰 수 있도록 만든 지도와 같습니다.

728x90

'IT > IT 이것 저것' 카테고리의 다른 글

비전공자를 위한 CSS 기초 (0)	2025.04.08
비전공자를 위한 HTML 기초 (0)	2025.04.08
Figma_아이콘을 어떻게 바꿀까? (How to change Icon in instance) (0)	2024.11.18
Django 시작하기 (1)	2024.03.27
Chat GPT API Document 공부 정리 (0)	2023.05.04

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
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

글 보관함

250x250

Doitman

티스토리 뷰