HTML과 CSS로 웹페이지의 구조와 스타일을 만들었다면, 이제는 페이지에 ‘동작’과 ‘반응’을 추가할 차례입니다.
바로 오늘의 주인공, **JavaScript(JS)**입니다.
JavaScript는 웹에 **인터랙티브 기능(동적인 요소)**을 추가해주는 스크립트 언어입니다.
오늘은 JavaScript의 기초 문법과 간단한 버튼 클릭 이벤트를 중심으로 살펴보겠습니다.
🧠 JavaScript란?
JavaScript는 브라우저에서 실행되는 프로그래밍 언어입니다.
클릭, 입력, 움직임 등 사용자와의 상호작용을 제어하고, 웹페이지를 더 풍부하게 만듭니다.
📌 예를 들어…
- 버튼을 누르면 알림이 뜨거나
- 특정 값을 계산하거나
- 화면 요소를 숨기거나 보여주는 기능을 구현할 수 있습니다.
🛠️ JavaScript를 적용하는 3가지 방법
1️⃣ 인라인 방식
HTML 태그 내부에 직접 작성
html
복사편집
<button onclick="alert('안녕하세요!')">클릭해보세요</button>
- 초보자에게 익숙하지만 규모가 커지면 비효율적
2️⃣ 내부 스크립트 (<script> 태그 사용)
HTML 안에 <script> 태그로 작성
html
복사편집
<script> function sayHello() { alert("반가워요!"); } </script> <button onclick="sayHello()">인사하기</button>
3️⃣ 외부 JS 파일 연결
별도의 .js 파일을 만들어 HTML에 연결
html
복사편집
<!-- HTML --> <script src="main.js"></script>
js
복사편집
// main.js function sayHello() { alert("외부 JS 파일에서 실행된 인사!"); }
✅ 가장 추천하는 방식 – 유지보수가 쉽고 깔끔함
🔤 JavaScript 기초 문법
✅ 변수 선언
js
복사편집
let name = "홍길동"; const age = 30;
- let: 바뀔 수 있는 값
- const: 변하지 않는 상수
✅ 함수 만들기
js
복사편집
function greet() { alert("안녕하세요!"); }
- function 키워드로 선언
- 함수 이름과 괄호를 사용해 호출
✅ 이벤트와 DOM 제어
HTML 요소와 JavaScript를 연결하려면 **DOM(Document Object Model)**을 사용합니다.
html
복사편집
<p id="text">이 문장을 바꿔볼까요?</p> <button onclick="changeText()">변경</button> <script> function changeText() { document.getElementById("text").innerText = "변경되었습니다!"; } </script>
📌 document.getElementById()를 통해 HTML 요소를 선택하고, 그 값을 변경할 수 있어요.
💡 실습 예제 – 버튼 클릭 시 색상 변경
html
복사편집
<!DOCTYPE html> <html> <head> <title>JS 실습</title> <style> #colorBox { width: 200px; height: 200px; background-color: lightblue; margin: 20px auto; } </style> </head> <body> <div id="colorBox"></div> <button onclick="changeColor()">색상 바꾸기</button> <script> function changeColor() { document.getElementById("colorBox").style.backgroundColor = "orange"; } </script> </body> </html>
- 처음엔 파란색 박스가 보이고
- 버튼을 누르면 오렌지색으로 바뀝니다!
📌 마무리 정리
- JavaScript는 웹페이지를 동적으로 만들어주는 언어
- 사용자 입력, 버튼 클릭 등 이벤트 제어가 가능
- getElementById, onclick으로 HTML과 JS 연결
- 외부 JS 파일로 관리하면 코드가 깔끔해짐