반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
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
Archives
Today
Total
관리 메뉴

taenyLog

[JavaScript] JavaScript와 HTML 연결하기. 본문

Web

[JavaScript] JavaScript와 HTML 연결하기.

taenyLog 2023. 9. 22. 13:38
반응형

자바스크립트와 html을 연결하는 방법에 대해 알아봅시다.

 

1.<script> 태그 사용

JavaScript 코드를 HTML문서에 직접 포함시킨다.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 연결 예제</title>
</head>
<body>
    <h1>안녕, JavaScript!</h1>
    <script>
        // JavaScript 코드를 이곳에 작성
        alert("Hello, JavaScript!");
    </script>
</body>
</html>

<script> 태그 내부에 자바스크립트 코드 작성하면 웹 페이지 로드시 실행

 

2. 외부 JavaScript  파일 사용

JavaScript 코드를 외부 파일로 작성하고 HTML 문서에서 이 파일을 참조하는 방법.  코드를 재사용하거나 유지보수 하기 쉽다. 

// script.js 파일
alert("Hello from external JavaScript file!");
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 연결 예제</title>
</head>
<body>
    <h1>안녕, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

 

<script>의 src 속성을 사용하여 script.js 파일을 참조하고, 이 파일에 포함된 JavaScript 코드가 실행된다.

이 방법을 사용하면 JavaScript 코드를 별도의 파일로 분리하여 관리할 수 있다.

 

반응형