자바스크립트(JavaScript)는
웹 페이지에 생명과 상호작용을 부여하는 언어다.
HTML이 ‘뼈대’, CSS가 ‘옷’이라면, 자바스크립트는 ‘행동과 뇌’라고 할 수 있다.
단순히 버튼을 클릭했을 때 문구를 바꾸거나,
입력값을 검증하는 정도가 아니라
이제는 전체 웹 애플리케이션을 움직이는 중심축이다.
💡 1. 자바스크립트의 역할
구분 설명
| 🧱 HTML | 구조(Structure) |
| 🎨 CSS | 디자인(Style) |
| ⚙️ JavaScript | 동작(Behavior) |
즉, HTML + CSS + JS 세 가지가 함께 작동해
우리가 보는 모든 웹사이트를 만든다.
🌍 2. 어디에서 동작할까?
과거엔 브라우저 전용 언어였다.
하지만 지금은 서버, 데스크톱, 모바일, 심지어 IoT까지 영역이 확장됐다.
환경 설명
| 💻 브라우저 | Chrome, Edge, Safari 등에서 UI 제어 |
| 🌐 서버 | Node.js 환경에서 백엔드 구축 가능 |
| 📱 앱 | React Native로 모바일 앱 개발 |
| ⚙️ 데스크톱 | Electron 기반으로 데스크톱 앱 제작 가능 |
⚡ 3. 자바스크립트의 주요 특징
✅ 인터프리터 언어
→ 별도의 컴파일 없이 브라우저가 즉시 실행
✅ 동적 타입(Dynamic Typing)
→ 변수의 타입을 코드 실행 중에 결정
✅ 이벤트 기반(Event-driven)
→ 사용자 입력이나 시스템 이벤트에 따라 실행
✅ 비동기 처리 가능(Asynchronous)
→ 서버 요청, API 호출 등을 기다리지 않고 처리
✅ 객체 기반(Object-based)
→ 거의 모든 요소가 객체로 구성됨
🔁 4. 자바스크립트의 진화 — ECMAScript(ES)
JS는 한 번 정해진 문법이 아니라,
ECMAScript(ES) 라는 표준을 기반으로 계속 발전해왔다.
버전 주요 추가 기능
| ES5 (2009) | JSON, strict mode |
| ES6 (2015) | let/const, 클래스, 화살표 함수, 템플릿 리터럴 |
| ES7~ES13 | async/await, Promise, Optional chaining 등 |
💡 ES6 이후는 “모던 자바스크립트”라고 부른다.
🧠 5. 자바스크립트로 할 수 있는 일
분야 예시
| 💬 프론트엔드 | SPA, UI/UX 인터랙션, 애니메이션 |
| 🧰 백엔드 | Node.js 서버, Express.js API |
| 📦 데이터 | JSON 파싱, API 통신 |
| 📱 모바일 | React Native 앱 제작 |
| 🧠 AI/ML | TensorFlow.js 활용한 모델 학습 |
| ⚙️ 데스크톱 | Electron 기반 앱 (VSCode 같은 툴) |
즉, “자바스크립트 하나면 전 세계 대부분의 플랫폼을 제어할 수 있다.”
⚙️ 6. 첫 코드 작성해보기
HTML 파일에 자바스크립트를 직접 삽입할 수 있다. 👇
<!DOCTYPE html>
<html>
<head>
<title>Hello JS</title>
</head>
<body>
<h1>JavaScript 시작하기</h1>
<script>
console.log("Hello, JavaScript!");
alert("자바스크립트 세계에 오신 걸 환영합니다!");
</script>
</body>
</html>
✅ 브라우저에서 콘솔(F12)을 열면 메시지가 출력된다.
✅ alert()는 브라우저 팝업창으로 결과를 보여준다.
🧩 7. 자바스크립트 파일 분리 방식
보통은 .js 파일로 분리해 관리한다.
<script src="main.js"></script>
이렇게 하면 HTML과 JS를 분리해
유지보수성과 재사용성을 높일 수 있다.
🎯 8. 마무리 — “HTML이 몸이라면, 자바스크립트는 두뇌다.”
자바스크립트는 단순히 언어가 아니라
웹의 상호작용을 설계하는 두뇌다.
단 한 줄의 코드로 페이지가 반응하고,
사용자 경험이 완전히 달라진다.
다음 편에서는
✅ 1-2. var, let, const 완벽 비교 — 변수 선언의 모든 것
을 통해 자바스크립트의 기초 중 핵심 개념을 파헤쳐보자.
'frontend > javascript' 카테고리의 다른 글
| 🟨 1-5. 조건문(if, switch)과 반복문(for, while, for...of) 실전 예제 (0) | 2025.11.05 |
|---|---|
| 🟨 1-4. 연산자 총정리 — 산술, 비교, 논리, 삼항, typeof 완벽 이해 (0) | 2025.11.05 |
| 🟨 1-3. 자료형 완전 정리 — String, Number, Boolean, Null, Undefined, Symbol (0) | 2025.11.05 |
| 🟨 1-2. var, let, const 완벽 비교 — 변수 선언의 모든 것 (0) | 2025.11.05 |
| ⚡ 자바스크립트 쉽게 배우는 법 (0) | 2025.11.03 |