728x90

아래 글은 “웹 개발 기초부터 실무까지” 시리즈의 세 번째 글입니다. 이번에는 자바스크립트의 기초와 DOM(Document Object Model) 조작에 대해 살펴보겠습니다. HTML과 CSS로 웹페이지의 구조와 스타일을 잡았다면, 이제 자바스크립트를 통해 동적인 기능을 구현할 차례입니다.

1. 자바스크립트란?

1-1. 클라이언트 사이드 스크립트

  • 자바스크립트(JavaScript): 웹 브라우저 상에서 동작하는 대표적인 프로그래밍 언어입니다.
  • HTML과 CSS가 정적(Static)이라면, 자바스크립트는 **동적(Dynamic)**인 부분을 담당해 웹페이지의 기능을 강화합니다.
    • 예: 버튼 클릭 시 메시지 표시, 사용자 입력 검증, 실시간 데이터 업데이트 등

1-2. 자바스크립트의 특징

  1. 인터프리터 언어: 별도의 컴파일 과정 없이, 브라우저가 바로 해석(Interpret)하여 실행
  2. 플랫폼 독립적: 웹 표준을 지원하는 브라우저에서는 OS와 상관없이 동일한 코드를 수행
  3. 넓은 생태계: Front-end, Back-end(Node.js), Mobile, Desktop(전자, NW.js) 등 활용 범위가 확장됨

2. 자바스크립트 기초 문법

2-1. 변수 선언

ES6부터는 var 외에도 **let**과 const 키워드가 추가되었습니다.

  • var: 함수 스코프(Function scope), 중복 선언 가능(권장되지 않음)
  • let: 블록 스코프(Block scope), 중복 선언 불가능
  • const: 블록 스코프, 상수(값 재할당 불가능)
let userName = "홍길동";
const PI = 3.14;
var oldVar = "옛날 방식";

2-2. 자료형(Data Types)

  1. 기본 자료형: number, string, boolean, undefined, null, symbol
  2. 객체(Object): 배열, 객체 리터럴, 함수 등 
    const age = 25;                     // number
const isStudent = true;             // boolean
let myVar;                          // undefined
const person = { name: "Bob" };     // object

2-3. 연산자와 제어문

  • 연산자: 산술(+, -, *, /), 비교(===, !==), 논리(&&, ||, !), 할당(=, +=, -=) 등
  • 제어문: if/else, switch, for, while, do/while 등을 사용하여 프로그램 흐름을 제어

3. DOM(Document Object Model) 조작

3-1. DOM이란?

  • DOM은 웹 페이지의 구조(HTML 요소)를 객체 모델로 표현한 것입니다.
  • 브라우저는 HTML 문서를 트리(Tree) 구조로 변환해 자바스크립트로 접근하고 조작할 수 있게 합니다.

예시)

<body>
  <h1 id="title">Hello, World!</h1>
  <button id="btnChange">Change Title</button>
</body>

이 HTML에서 <h1> 요소는 자바스크립트에서 document.getElementById("title")로 접근할 수 있습니다.

3-2. DOM 접근 메서드

  1. getElementById: document.getElementById("아이디")
  2. getElementsByClassName: document.getElementsByClassName("클래스") (HTMLCollection 반환)
  3. getElementsByTagName: document.getElementsByTagName("태그명") (HTMLCollection 반환)
  4. querySelector: CSS 선택자로 요소 1개를 찾음(가장 많이 쓰임)
  5. querySelectorAll: CSS 선택자로 여러 요소를 NodeList로 반환
const title = document.querySelector("#title");

3-3. DOM 조작 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>DOM 조작 예시</title>
</head>
<body>
  <h1 id="title">안녕하세요!</h1>
  <button id="btnChange">제목 변경</button>

  <script>
    const title = document.getElementById("title");
    const btnChange = document.getElementById("btnChange");

    btnChange.addEventListener("click", () => {
      title.textContent = "반갑습니다! 자바스크립트로 변경되었어요.";
      title.style.color = "blue";
    });
  </script>
</body>
</html>
  1. **getElementById("btnChange")**로 버튼 요소를 가져옴
  2. **addEventListener("click", 콜백함수)**를 통해 클릭 이벤트 설정
  3. 클릭 시 title.textContent와 title.style.color 변경

3-4. 이벤트(Event) 처리

  • 클릭 이벤트: 마우스로 요소를 클릭할 때 발생 ("click")
  • 폼 이벤트: submit, change, input 등
  • 키보드 이벤트: keydown, keyup, keypress 등
  • 마우스 이벤트: mouseover, mouseout, mousemove 등

자바스크립트를 이용해 이벤트 기반으로 요소를 제어하면, 사용자의 상호작용에 따라 동적으로 변화하는 웹페이지를 쉽게 만들 수 있습니다.

4. 예제 프로젝트 아이디어

  1. 간단한 계산기
    • 숫자 입력 필드와 사칙연산 버튼을 구성
    • DOM으로 입력 값을 읽고, 클릭 이벤트로 결과를 출력
  2. 할 일(To-Do) 리스트
    • 할 일 목록을 입력받아, 리스트에 추가하고 삭제하는 기능
    • DOM으로 <ul>, <li>를 조작하고 이벤트로 삭제 구현
  3. 퀴즈 앱
    • 질문과 보기, 정답을 배열이나 객체로 구성
    • 선택한 답에 따라 다음 문제로 이동, 점수 계산 후 결과 출력

이러한 예제를 통해 DOM 조작, 이벤트 처리에 익숙해지면 실무 수준의 웹 애플리케이션을 만드는 기초를 닦게 됩니다.

5. 마무리 및 다음 글 예고

이번 글에서는 자바스크립트 기초 문법부터 DOM 조작까지 다뤄봤습니다. 변수, 자료형, 연산자 같은 기본 개념을 먼저 숙지하고, 이벤트 리스너, DOM 접근 등을 연습해보세요. 자바스크립트를 통해 웹페이지가 동적으로 작동하는 재미를 느낄 수 있을 것입니다.

다음 글에서는 프론트엔드 개발에서 흔히 사용하는 자바스크립트 라이브러리 및 프레임워크(React, Vue, Angular 등)에 대해 가볍게 개념을 살펴보고, 왜 사용하면 좋은지 간단한 예시를 들어볼 예정입니다.

다음 글 예고
“웹 개발 시리즈 #4 – 자바스크립트 라이브러리와 프레임워크: React, Vue, Angular 비교”

자바스크립트 학습 중 궁금한 점이나 다뤄줬으면 하는 내용이 있다면, 댓글로 자유롭게 남겨주세요. 함께 이야기를 나누며 웹 개발 역량을 키워봅시다!

 

728x90

'project > 웹 개발 기초부터 실무까지' 카테고리의 다른 글

웹 개발 기초부터 실무까지#6 - 풀스택 미니 프로젝트 실습 (React + Express + MongoDB)  (0) 2025.02.21
웹 개발 기초부터 실무까지#5-백엔드 기초  (1) 2025.02.21
웹 개발 기초부터 실무까지#4 - 자바스크립트 라이브러리와 프레임워크  (0) 2025.02.21
웹 개발 기초부터 실무까지 #2 – HTML/CSS 기초와 반응형 웹  (0) 2025.02.21
웹 개발 기초부터 실무까지 #1 웹 개발이란?  (0) 2025.02.21

+ Recent posts

티스토리툴바