버튼을 눌러도 아무 일도 없다면?#
HTML로 버튼을 만들 수 있습니다. CSS로 예쁘게 꾸밀 수 있습니다. 하지만 버튼을 눌렀을 때 무언가 일어나게 하려면 JavaScript가 필요합니다.
- 버튼 클릭 시 팝업이 나타난다
- 텍스트를 입력하면 실시간으로 글자 수가 표시된다
- 스크롤하면 내비게이션이 바뀐다
- 서버에서 데이터를 가져와 화면에 보여준다
이 모든 것이 JavaScript(JS) 의 영역입니다.
HTML, CSS, JavaScript의 역할 비교#
Text
HTML → 구조 (내용, 뼈대)
CSS → 스타일 (디자인, 외관)
JS → 동작 (기능, 인터랙션)
집에 비유하면:
- HTML = 벽, 바닥, 천장 (구조)
- CSS = 도배, 가구, 조명 (인테리어)
- JavaScript = 전기, 수도, 엘리베이터 (기능)
JavaScript를 HTML에 연결하는 방법#
외부 파일 연결 (권장)#
HTML
<!-- body 닫는 태그 바로 앞에 추가 -->
<body>
<!-- ... HTML 내용 ... -->
<script src="script.js"></script>
</body>script.js 파일을 만들고 거기에 JavaScript를 작성합니다. </body> 직전에 두는 이유는 HTML이 다 로드된 뒤에 JavaScript가 실행되게 하기 위해서입니다.
<script> 태그 안에 직접 작성#
HTML
<script>
console.log("안녕하세요!");
</script>간단한 테스트에 쓰지만, 코드가 많아지면 외부 파일로 분리합니다.
브라우저 콘솔 — 첫 번째 실험실#
JavaScript를 배울 때 가장 먼저 친해져야 하는 도구가 브라우저 콘솔입니다.
여는 방법:
- 브라우저에서 F12 (또는 우클릭 → 검사)
- 상단 탭에서 Console 클릭
- 입력창에 코드를 치고 Enter
JavaScript
// 콘솔에 직접 입력해보세요
console.log("안녕하세요!");
1 + 2
"Hello" + " " + "World"
Math.random()첫 번째 JavaScript 코드#
script.js 파일을 만들어 봅니다.
JavaScript
// 콘솔에 출력
console.log("안녕하세요, JavaScript!");
// 경고창 표시
alert("첫 번째 JavaScript!");
// 계산
console.log(10 + 20); // 30
console.log(100 / 4); // 25
console.log(2 ** 10); // 1024 (2의 10승)// 뒤는 주석입니다. 코드 실행에 영향을 주지 않는 설명 글입니다.
변수 — 값을 저장하는 상자#
JavaScript
// 변수 선언
let name = "홍길동";
let age = 16;
let isStudent = true;
// 출력
console.log(name); // 홍길동
console.log(age); // 16
console.log(isStudent); // true
// 변수 값 변경
age = 17;
console.log(age); // 17let vs const#
JavaScript
let score = 90; // 나중에 바꿀 수 있음
score = 95; // OK
const PI = 3.14; // 한 번 정하면 못 바꿈
PI = 3.15; // 오류!바뀌지 않는 값은 const, 바뀔 수 있는 값은 let을 씁니다. var은 오래된 방식으로 지금은 잘 쓰지 않습니다.
기본 데이터 타입#
JavaScript
// 숫자 (Number)
let num = 42;
let pi = 3.14;
// 문자열 (String)
let greeting = "안녕하세요";
let name = '홍길동';
let message = `${name}님, 안녕하세요!`; // 템플릿 리터럴
// 불리언 (Boolean)
let isLoggedIn = true;
let hasError = false;
// 빈 값
let nothing = null; // 의도적으로 비어 있음
let notDefined = undefined; // 아직 값이 없음템플릿 리터럴#
JavaScript
let name = "홍길동";
let age = 16;
// 이렇게 하면 불편
let msg1 = "안녕하세요, " + name + "! 나이는 " + age + "살이군요.";
// 템플릿 리터럴 (백틱 `)로 편하게
let msg2 = `안녕하세요, ${name}! 나이는 ${age}살이군요.`;
console.log(msg2); // 안녕하세요, 홍길동! 나이는 16살이군요.typeof — 타입 확인#
JavaScript
typeof 42 // "number"
typeof "hello" // "string"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object" (역사적 버그이므로 주의)직접 해보기 ✏️#
index.html과script.js파일을 만들어 연결하세요.script.js에서 자신의 이름, 나이, 학년을 변수로 선언하세요.- 템플릿 리터럴로
"안녕하세요! 저는 OO중학교 O학년 OOO입니다."를 출력하세요. - 브라우저 콘솔에서 결과를 확인하세요.
JavaScript
// 힌트
const name = "여기에 본인 이름";
const grade = 2;
const school = "OO중학교";
console.log(`안녕하세요! 저는 ${school} ${grade}학년 ${name}입니다.`);정리#
| 개념 | 내용 |
|---|---|
| JavaScript | HTML/CSS에 동작을 추가하는 언어 |
<script src=""> | 외부 JS 파일 연결 |
console.log() | 콘솔에 출력 |
let | 변경 가능한 변수 |
const | 변경 불가 상수 |
| 템플릿 리터럴 | 백틱()과 $` 로 문자열 안에 변수 삽입 |
다음 편에서는 조건문과 반복문 — 프로그래밍의 핵심 흐름 제어를 배웁니다.
