JavaScript란? 웹을 살아있게 만드는 언어

버튼을 눌러도 아무 일도 없다면?

HTML로 버튼을 만들 수 있습니다. CSS로 예쁘게 꾸밀 수 있습니다. 하지만 버튼을 눌렀을 때 무언가 일어나게 하려면 JavaScript가 필요합니다.

버튼 클릭 시 팝업이 나타난다
텍스트를 입력하면 실시간으로 글자 수가 표시된다
스크롤하면 내비게이션이 바뀐다
서버에서 데이터를 가져와 화면에 보여준다

이 모든 것이 JavaScript(JS) 의 영역입니다.

HTML, CSS, JavaScript의 역할 비교

HTML  → 구조 (내용, 뼈대)
CSS   → 스타일 (디자인, 외관)
JS    → 동작 (기능, 인터랙션)

집에 비유하면:

HTML = 벽, 바닥, 천장 (구조)
CSS = 도배, 가구, 조명 (인테리어)
JavaScript = 전기, 수도, 엘리베이터 (기능)

JavaScript를 HTML에 연결하는 방법

외부 파일 연결 (권장)

<!-- body 닫는 태그 바로 앞에 추가 -->
<body>
  <!-- ... HTML 내용 ... -->

  <script src="script.js"></script>
</body>

script.js 파일을 만들고 거기에 JavaScript를 작성합니다. </body> 직전에 두는 이유는 HTML이 다 로드된 뒤에 JavaScript가 실행되게 하기 위해서입니다.

`<script>` 태그 안에 직접 작성

<script>
  console.log("안녕하세요!");
</script>

간단한 테스트에 쓰지만, 코드가 많아지면 외부 파일로 분리합니다.

브라우저 콘솔 — 첫 번째 실험실

JavaScript를 배울 때 가장 먼저 친해져야 하는 도구가 브라우저 콘솔입니다.

여는 방법:

브라우저에서 F12 (또는 우클릭 → 검사)
상단 탭에서 Console 클릭
입력창에 코드를 치고 Enter

// 콘솔에 직접 입력해보세요
console.log("안녕하세요!");
1 + 2
"Hello" + " " + "World"
Math.random()

첫 번째 JavaScript 코드

script.js 파일을 만들어 봅니다.

// 콘솔에 출력
console.log("안녕하세요, JavaScript!");

// 경고창 표시
alert("첫 번째 JavaScript!");

// 계산
console.log(10 + 20);       // 30
console.log(100 / 4);       // 25
console.log(2 ** 10);       // 1024 (2의 10승)

// 뒤는 주석입니다. 코드 실행에 영향을 주지 않는 설명 글입니다.

변수 — 값을 저장하는 상자

// 변수 선언
let name = "홍길동";
let age = 16;
let isStudent = true;

// 출력
console.log(name);       // 홍길동
console.log(age);        // 16
console.log(isStudent);  // true

// 변수 값 변경
age = 17;
console.log(age);        // 17

`let` vs `const`

let score = 90;     // 나중에 바꿀 수 있음
score = 95;         // OK

const PI = 3.14;    // 한 번 정하면 못 바꿈
PI = 3.15;          // 오류!

바뀌지 않는 값은 const, 바뀔 수 있는 값은 let을 씁니다. var은 오래된 방식으로 지금은 잘 쓰지 않습니다.

기본 데이터 타입

// 숫자 (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; // 아직 값이 없음

템플릿 리터럴

let name = "홍길동";
let age = 16;

// 이렇게 하면 불편
let msg1 = "안녕하세요, " + name + "! 나이는 " + age + "살이군요.";

// 템플릿 리터럴 (백틱 `)로 편하게
let msg2 = `안녕하세요, ${name}! 나이는 ${age}살이군요.`;

console.log(msg2); // 안녕하세요, 홍길동! 나이는 16살이군요.

`typeof` — 타입 확인

typeof 42          // "number"
typeof "hello"     // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object" (역사적 버그이므로 주의)

직접 해보기 ✏️

index.html 과 script.js 파일을 만들어 연결하세요.
script.js 에서 자신의 이름, 나이, 학년을 변수로 선언하세요.
템플릿 리터럴로 "안녕하세요! 저는 OO중학교 O학년 OOO입니다." 를 출력하세요.
브라우저 콘솔에서 결과를 확인하세요.

// 힌트
const name = "여기에 본인 이름";
const grade = 2;
const school = "OO중학교";

console.log(`안녕하세요! 저는 ${school} ${grade}학년 ${name}입니다.`);

정리

개념	내용
JavaScript	HTML/CSS에 동작을 추가하는 언어
`<script src="">`	외부 JS 파일 연결
`console.log()`	콘솔에 출력
`let`	변경 가능한 변수
`const`	변경 불가 상수
템플릿 리터럴	백틱(`)과` $` 로 문자열 안에 변수 삽입

다음 편에서는 조건문과 반복문 — 프로그래밍의 핵심 흐름 제어를 배웁니다.