웹 개발을 시작하려면 반드시 마주하게 되는 언어, 자바스크립트(JavaScript).
프로그래밍 초보자에게는 다소 낯설지만,
이 언어는 오늘날 웹의 90% 이상을 움직이는 핵심 기술이다.
이 글에서는 자바스크립트를 ‘쉽게, 직관적으로’ 배우는 방법을 정리했다.
기초 개념부터 실전 예시까지, 웹 브라우저만 있으면 바로 실습 가능한 방식으로 안내한다.
#자바스크립트입문 #코딩공부 #웹개발기초
💡 1. 자바스크립트란 무엇인가?
“HTML이 구조를 만들고, CSS가 꾸민다면, JavaScript는 움직이게 한다.”
자바스크립트는 웹페이지를 동적으로 변화시키는 언어다.
버튼을 클릭했을 때 팝업이 뜨거나, 입력창에서 실시간으로 글자가 바뀌는 등
웹에서 ‘움직이는 모든 것’은 대부분 자바스크립트가 담당한다.
🌱 2. 첫 코드 — 콘솔 출력하기
브라우저의 개발자 도구(Console)에 아래 코드를 입력해보자.
console.log("Hello, JavaScript!");
결과:
Hello, JavaScript!
이 한 줄이 자바스크립트의 첫걸음이다.
console.log()는 코드 실행 결과를 확인할 때 가장 많이 사용하는 함수다.
⚙️ 3. 변수 선언과 자료형
자바스크립트에서 값을 저장하려면 변수가 필요하다.
세 가지 키워드(var, let, const)로 변수를 선언한다.
let name = "기범";
const age = 25;
var city = "서울";
- let: 재할당 가능
- const: 상수(값 변경 불가)
- var: 오래된 방식(지양하는 추세)
let count = 1;
count += 1; // 2
💡 Tip: 최신 자바스크립트(ES6+)에서는 let과 const를 사용하는 것이 표준이다.
🔁 4. 조건문과 반복문
조건문 (if, else)
let score = 90;
if (score >= 90) {
console.log("A등급");
} else {
console.log("B등급");
}
반복문 (for)
for (let i = 1; i <= 5; i++) {
console.log(i);
}
이 코드를 실행하면 콘솔에 1 2 3 4 5가 출력된다.
조건문은 분기, 반복문은 루프의 개념이다.
🧩 5. 함수(Function)
함수는 코드를 재사용하기 위한 가장 기본적인 단위다.
function greet(name) {
return `안녕하세요, ${name}님!`;
}
console.log(greet("기범"));
결과:
안녕하세요, 기범님!
💡 Tip: 함수 표현식도 가능하다.
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
🎨 6. HTML과 함께 쓰기
HTML 파일에 직접 자바스크립트를 삽입할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS 예제</title>
</head>
<body>
<button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>
<script>
console.log("페이지가 로드되었습니다!");
</script>
</body>
</html>
버튼을 누르면 알림창이 뜨고, 콘솔에는 메시지가 출력된다.
즉, 자바스크립트는 HTML 요소와 직접 상호작용할 수 있다.
🔍 7. DOM 조작 (Document Object Model)
DOM은 웹페이지를 구성하는 HTML 구조를 자바스크립트로 제어할 수 있게 만든 개념이다.
<p id="text">기본 문장</p>
<button onclick="changeText()">변경</button>
<script>
function changeText() {
document.getElementById("text").innerText = "문장이 변경되었습니다!";
}
</script>
버튼을 누르면 <p> 태그의 문장이 바뀐다.
이처럼 자바스크립트는 이벤트(클릭, 입력 등) 를 감지하고 HTML을 실시간으로 수정할 수 있다.
⚡ 8. 배열과 객체
배열 (Array)
const fruits = ["사과", "바나나", "포도"];
console.log(fruits[1]); // 바나나
객체 (Object)
const person = { name: "기범", age: 25 };
console.log(person.name); // 기범
파이썬의 리스트·딕셔너리처럼,
자바스크립트도 데이터를 구조적으로 저장할 수 있다.
🚀 9. 초보자를 위한 학습 루틴
- 개념 → 실습 → 응용 3단계로 반복하라.
- 브라우저 콘솔에서 바로 코드를 테스트해라.
- 30줄 이하의 간단한 미니 프로젝트를 꾸준히 만들어라.
(ex. 계산기, 할 일 목록, 랜덤 문구 생성기 등)
💡 실습이 곧 학습이다.
이론만 공부하면 금방 잊지만, 손으로 친 코드는 몸에 남는다.
🎯 10. 마무리 — “눈에 보이는 결과로 재미를 느껴라”
자바스크립트의 장점은 즉각적인 시각적 피드백이다.
내가 입력한 코드가 바로 화면에서 반응하는 경험은
프로그래밍의 ‘재미’를 가장 빠르게 느낄 수 있는 순간이다.
- 복잡한 기능보다 작은 변화를 먼저 시도하자.
- HTML 요소 하나라도 바꿔보면, 코드가 살아 있다는 걸 느낄 수 있다.
- 익숙해지면 React나 Next.js 같은 프레임워크로 자연스럽게 확장 가능하다.
👉 코드는 어렵지 않다. 결과가 재미있어야 오래 간다.
'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 |
| 🟨 1-1. 자바스크립트란 무엇인가? (0) | 2025.11.05 |