UI 공부

JS

Rocomi 2024. 8. 15. 12:00

VS Code에서 JavaScript(JS)를 작성하는 방법은 HTML과 CSS처럼 간단합니다. VS Code는 JavaScript 개발을 지원하는 다양한 기능과 확장 프로그램을 제공하여, 개발자들이 효율적으로 코드를 작성하고 디버깅할 수 있도록 돕습니다. 아래에 VS Code에서 JavaScript를 작성하는 방법과 간단한 코드 예제를 소개하겠습니다.

1. JavaScript 파일 생성 및 작성

  1. 프로젝트 폴더 열기: VS Code에서 새로운 폴더를 열거나 만들고, 해당 폴더를 작업 폴더로 설정합니다.
  2. JavaScript 파일 생성: script.js와 같은 이름으로 새로운 JavaScript 파일을 생성합니다.
  3. JavaScript 코드 작성: 새로 생성한 JS 파일에 원하는 JavaScript 코드를 작성합니다.

2. JavaScript 파일 HTML에 연결

  • JavaScript 파일을 HTML 파일에 연결하려면 HTML 파일의 <body> 태그 끝 부분에 <script> 태그를 추가하여 JavaScript 파일을 불러옵니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 예제</title>
</head>
<body>
    <h1>JavaScript 예제</h1>
    <button id="myButton">클릭하세요</button>
 
    <!-- script 태그를 body 끝에 삽입 -->
    <script src="script.js"></script>
</body>
</html>
 
 cs

3. 간단한 JavaScript 코드 예제

아래는 JavaScript 파일에 작성할 수 있는 간단한 코드 예제입니다. 이 예제는 버튼을 클릭할 때 메시지를 표시하는 기능을 구현합니다.

script.js (JavaScript 파일)

1
2
3
4
5
6
7
8
// 버튼 요소 선택
const button = document.getElementById('myButton');
 
// 버튼 클릭 시 실행할 함수 정의
button.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});
 
 cs

4. JavaScript 파일 실행 및 확인

  • HTML 파일을 브라우저에서 열면, JavaScript가 동작하는 것을 확인할 수 있습니다. 버튼을 클릭하면 경고창(alert)이 표시됩니다.
  • Live Server 사용: HTML 파일을 실시간으로 업데이트하면서 JavaScript 기능을 확인하려면, Live Server 확장 프로그램을 사용할 수 있습니다.

* JavaScript 파일 없이 실행

  • 아래와 같이 script 태그를 이용하여 파일을 생성하지 않고 HTML 내부에서 JS를 실행할 수도 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 예제</title>
</head>
<body>
 
</body>
 
    <script>
        // 버튼 요소 선택
        const button = document.getElementById('myButton');
        // 버튼 클릭 시 실행할 함수 정의
        button.addEventListener('click', function() {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
 
</html>
 cs

이 예제에서는 JavaScript를 사용하여 HTML 요소와 상호작용하는 방법을 보여줍니다. JavaScript는 웹 페이지에 동적인 기능을 추가하는 데 매우 중요한 역할을 합니다.