자바스크립트 개요

2025-02-12 2 분 소요

웹 프론트엔드의 핵심 언어 자바스크립트 기초를 차근차근 익히면, HTML·CSS로 만든 정적인 페이지를 동적(인터랙티브) 으로 변신시킬 수 있습니다. 이 글에서는 초보자도 이해할 수 있도록 기본 문법부터 DOM 조작, 자바와의 차이까지 한눈에 정리했습니다.

자바스크립트 학습 전에 알아둘 HTML·CSS 기본

자바스크립트를 배우기 전, HTML·CSS 구조를 짚어 두시면 학습 속도가 크게 빨라집니다.

HTML (HyperText Markup Language) – 웹 콘텐츠의 뼈대 역할
CSS (Cascading Style Sheets) – 색상·크기·배치 등 스타일 지정

HTML 요소가 페이지 구조를, CSS가 시각적 디자인을 담당한 뒤, 자바스크립트가 기능 을 맡아 세 언어가 완벽한 삼위일체를 이룹니다.

자바스크립트란?

자바스크립트(JavaScript)는 객체 기반 스크립트 언어 로, 브라우저·Node.js 등에서 실행됩니다. 주요 특징은 다음과 같습니다.

동적 타이핑: 변수 선언 시 타입을 명시할 필요가 없습니다.
객체 지향 & 함수형 패러다임을 모두 지원합니다.
호환성: 크롬, 파이어폭스 등 모든 현대 브라우저와 Node.js 런타임에서 동일 문법 사용.

활용 예시

// HTML 요소 내용 변경
document.getElementById("example").innerHTML = "새로운 내용!";

자바스크립트 기본 문법

명령문(Statement)과 세미콜론

각 명령문 끝은 세미콜론(;)으로 구분합니다. ES6 이후 자동 삽입 기능(ASI)이 있지만, 명시적 세미콜론이 버그를 줄입니다.

var x = 10;
var result = x + 5;

대소문자 구분 & 리터럴

식별자·키워드는 대소문자를 철저히 구분합니다. 리터럴(literal)은 값을 직접 표현합니다.

var firstVar = 10;
var FirstVar = 20; // 서로 다른 변수
42;          // 숫자 리터럴
"Hello";     // 문자열 리터럴
true;        // 불리언 리터럴

식별자 규칙

알파벳, 숫자, 밑줄(_), 달러($)만 사용
숫자로 시작 불가
주로 CamelCase(firstVarName) 표기

예약어(키워드)

var, function, if 등 예약된 단어는 변수·함수 이름으로 사용할 수 없습니다.

주석 작성법

한 줄 주석: // 뒤에 작성

여러 줄 주석: /* … */ 로 감싸기

// 한 줄 주석
var x = 10;
/* 여러 줄 주석
   내부에 작성 가능 */

⚠️ 주석은 중첩 할 수 없습니다.

/* This is a /* nested comment */ */ → SyntaxError

DOM 조작으로 동적 웹 만들기

자바스크립트의 가장 실용적인 용도는 DOM(Document Object Model) 조작입니다.

작업	코드 스니펫
내용 변경	`document.getElementById("msg").innerHTML = "안녕하세요!";`
속성 변경	`document.getElementById("logo").src = "new-logo.png";`
스타일 변경	`document.getElementById("text").style.color = "blue";`

위같이 한 줄로 HTML 내용·속성·스타일을 실시간 제어해 동적 콘텐츠 를 구현합니다.

자바 vs 자바스크립트: 무엇이 다를까?

특징	자바(Java)	자바스크립트(JavaScript)
실행 방식	컴파일 언어	인터프리터 언어
타입 지정	엄격(Static)	동적(Dynamic)
객체 모델	클래스(Class) 기반	프로토타입(Prototype) 기반

두 언어 이름이 비슷하지만 용도·철학이 완전히 다르므로 혼동에 주의하세요.

요약 정리

자바스크립트 기초 문법: 세미콜론·대소문자·리터럴·식별자
주석: //, /* … */ 두 종류
DOM 조작으로 HTML 내용·속성·스타일을 실시간 변경
브라우저·Node.js에서 실행되며, 웹 동적 콘텐츠와 사용자 상호작용을 손쉽게 처리

질문 정리

Q1. 자바스크립트를 배우려면 HTML·CSS를 꼭 알아야 하나요?

A. 기본 구조(HTML)·스타일(CSS)을 이해해야 자바스크립트가 어디를, 어떻게 조작하는지 명확히 보입니다.

Q2. ES6는 자바스크립트와 다른 언어인가요?

A. 아닙니다. ES6(ECMAScript 2015) 는 최신 자바스크립트 표준 규격 이름입니다.

Q3. TypeScript와 자바스크립트 차이점은?

A. TypeScript는 정적 타입을 추가한 자바스크립트 상위 집합 입니다. 결과물은 일반 자바스크립트로 트랜스파일됩니다.

Q4. 콘솔 오류 “undefined is not a function”이 뜰 때 해결법은?

A. 대상 변수나 함수가 선언 전 호출되었을 가능성이 큽니다. 스코프·호이스팅 구조를 확인하세요.

X Facebook LinkedIn Bluesky