자바스크립트(JavaScript) 사용법

티스토리 뷰

Front-End-Web/javascript

자바스크립트(JavaScript) 사용법

jsBae 2026. 7. 4. 14:56

1. 자바스크립트의 기본 사용 흐름

자바스크립트(JavaScript)는 웹페이지에 동작, 반응, 변화를 추가하기 위하여 사용한다.
웹프로그래밍 수업에서는 다음 흐름으로 이해하면 좋다.

HTML 요소를 만든다 → JavaScript로 요소를 선택한다 → 사용자의 행동을 감지한다 → 화면을 변경한다

예를 들어 버튼을 누르면 문구가 바뀌는 기능은 다음 순서로 동작한다.

HTML에서 문구와 버튼을 만든다.
JavaScript에서 문구 요소를 선택한다.
버튼 클릭 이벤트(event)를 감지한다.
문구 내용을 변경한다

2. 자바스크립트를 작성하는 세 가지 방법

자바스크립트(JavaScript)는 HTML 문서 안에 직접 작성하거나, 별도의 .js 파일로 분리하여 사용할 수 있다. HTML 문서 안에서는 <script> 태그를 사용하여 자바스크립트 코드를 넣는다. W3Schools의 설명에 따르면, 자바스크립트 코드는 <script>와 </script> 태그 사이에 작성하며, 예전 예제에서 사용하던 type="text/javascript" 속성은 필수가 아니다. HTML에서 JavaScript가 기본 스크립트 언어로 처리되기 때문이다.

2.1 HTML 태그 안에 직접 작성하기

가장 간단한 방법은 HTML 태그 안에 JavaScript 코드를 직접 작성하는 것이다.

<button onclick="alert('버튼을 클릭하였습니다.')">
  클릭
</button>

이 방식은 초보자가 JavaScript의 동작을 빠르게 확인하기에는 좋다.
그러나 코드가 길어지면 HTML과 JavaScript가 섞여 관리하기 어렵다. 따라서 실제 수업에서는 개념 확인용으로만 사용하고, 본격적인 실습에서는 외부 JavaScript 파일을 사용하는 것이 좋다.

2.2 HTML 문서 안의 <script> 태그에 작성하기

가장 기본적인 방법은 HTML 문서 안에 <script> 태그를 넣고 그 안에 자바스크립트 코드를 작성하는 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 사용법</title>
</head>
<body>
  <h1 id="title">처음 문구</h1>
  <button onclick="changeTitle()">문구 변경</button>

  <script>
    function changeTitle() {
      document.getElementById("title").textContent = "문구가 변경되었습니다.";
    }
  </script>
</body>
</html>

위 코드에서 <h1> 태그의 id 값은 title이다. 자바스크립트는 document.getElementById("title")을 사용하여 해당 요소를 찾고, innerHTML을 사용하여 제목 내용을 변경한다.

여기서 중요한 흐름은 다음과 같다.

HTML 요소를 만든다 → JavaScript로 요소를 찾는다 → 요소의 내용을 변경한다

<head> 영역에 작성하기

자바스크립트는 HTML 문서의 <head> 영역 안에 작성할 수 있다. W3Schools는 HTML 문서 안에 여러 개의 스크립트를 둘 수 있으며, <head> 또는 <body> 영역, 또는 두 영역 모두에 스크립트를 둘 수 있다고 설명한다.

<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>head 영역의 JavaScript</title>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "문단 내용이 변경되었습니다.";
    }
  </script>
</head>
<body>
  <h1>head 영역의 JavaScript</h1>
  <p id="demo">처음 문단입니다.</p>
  <button type="button" onclick="changeText()">변경</button>
</body>
</html>

이 예제에서 changeText() 함수는 <head> 영역에 작성되어 있다. 버튼을 클릭하면 onclick 속성에 의해 changeText() 함수가 실행된다. 함수가 실행되면 id="demo"인 문단의 내용이 변경된다.

<body> 영역에 작성하기

자바스크립트는 <body> 영역 안에도 작성할 수 있다. W3Schools는 <body> 영역에 함수를 작성하고, 버튼 클릭과 같은 이벤트가 발생했을 때 그 함수를 호출하는 예제를 제시한다. 또한 <script>를 <body>의 아래쪽에 두면 화면 표시 속도에 도움이 될 수 있다고 설명한다. 스크립트 해석 과정이 화면 표시를 늦출 수 있기 때문이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>body 영역의 JavaScript</title>
</head>
<body>
  <h1>body 영역의 JavaScript</h1>
  <p id="demo">처음 문단입니다.</p>
  <button type="button" onclick="changeText()">변경</button>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "문단 내용이 변경되었습니다.";
    }
  </script>
</body>
</html>

<body> 아래쪽에 스크립트를 작성하면 HTML 요소가 먼저 만들어진 뒤 자바스크립트가 실행된다. 따라서 자바스크립트가 HTML 요소를 찾기 쉬운 구조가 된다

2.3 외부 JavaScript 파일로 분리하기

자바스크립트 코드는 별도의 외부 파일로 분리할 수 있다. W3Schools는 외부 자바스크립트 파일의 확장자가 .js이며, <script> 태그의 src 속성을 사용하여 연결한다. 또한 외부 자바스크립트 파일 안에는 <script> 태그를 넣지 않는다.

project/
 ├─ index.html
 ├─ style.css
 └─ script.js

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 외부 파일 연결</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="title">자바스크립트 수업</h1>
  <button id="btn">문구 변경</button>

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

script.js

const title = document.getElementById("title");
const btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  title.textContent = "버튼을 클릭하였습니다.";
});

이 방식이 가장 권장되는 방식이다.

외부 파일 방식에서는 HTML 문서에 자바스크립트 코드를 직접 길게 작성하지 않는다. HTML 파일은 문서 구조를 담당하고, .js 파일은 동작을 담당한다.

외부 JavaScript 파일을 사용하는 이유

외부 JavaScript 파일을 사용하면 HTML과 JavaScript 코드가 분리된다. W3Schools는 외부 파일을 사용하면 HTML과 코드가 분리되고, HTML과 JavaScript를 더 쉽게 읽고 관리할 수 있으며, 캐시된 JavaScript 파일을 통해 페이지 로딩 속도에도 도움이 될 수 있다.

예를 들어 여러 HTML 페이지에서 같은 JavaScript 기능을 사용한다고 가정하여 보자.

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

위와 같이 하나의 script.js 파일을 여러 HTML 문서에 연결하면, 같은 기능을 여러 번 작성하지 않아도 된다. 메뉴 열기, 다크모드 전환, 공통 버튼 동작처럼 여러 페이지에서 반복되는 기능을 하나의 파일에서 관리할 수 있다.

여러 개의 JavaScript 파일 연결하기

하나의 HTML 문서에 여러 개의 JavaScript 파일을 연결할 수 있다.

<script src="menu.js"></script>
<script src="slider.js"></script>
<script src="form.js"></script>

각 파일은 서로 다른 기능을 담당할 수 있다.이처럼 파일을 기능별로 나누면 코드 구조를 이해하기 쉬워진다

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

multiking

티스토리 뷰