Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

자바스크립트(javascript) 파일을 html파일에 연결하기 본문

javascript

자바스크립트(javascript) 파일을 html파일에 연결하기

제뉴어리맨 2021. 1. 18. 20:08

아래의 내용들은 Thymeleaf를 적용하지 않은 경우이다.

 

그러므로 Thymeleaf가 적용되 있는 프로젝트라면

 

동적 자료가 들어가는 속성들은 th와 @{/}를 적용해줘야한다.

 

ex:)

 

<script type="text/javascript" src="practice.js"></script> 

 

==> <script type="text/javascript" th:src="@{/practice.js}"></script>

 

그리고 한가지 더.

 

html 현재 페이지를 제어하는 if문이나 그런것들은 해당 html에 직접 써서 작성해야함.

 

그러므로 .js파일에는 함수로 감싸서 함수형태들만 저장가능함

 

 

---------------------

 

html파일에 자바스크립트를 적용하는 경우는 아래와 같은 방법들이 있다.

html 파일 내에 javascript 작성

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>practice</title>
    </head>
    <body>

        <button onclick="btn_alert('안녕하세요!')"> 인사하세요! </button>
        <script>
        // 경고창
            function btn_alert(str) {
                alert(str);         }
        </script>

    </body>
</html>

1. html의 <body> 태그 안에 <script> 태그를 작성한다.  


2. html 파일 안에 자바스크립트를 작성하는 경우, 코드의 유지 보수가 어렵다.

만약, html 파일이 100개가 있고, 그 파일마다 같은 <script> 태그를 써줬다고 생각해보자.
그런데 <script> 태그를 변경해야하는 일이 생겼다. 이 경우, 모든 html 파일 코드에 있는 <script> 태그를 일일이 바꿔줘야 한다.

이런 경우를 대비해, 아래처럼 .js 파일을 따로 만들어 그 파일 안의 코드만 바꿔주면 
해당 js 파일을 이용하는 html 파일에 모두 적용될 수 있도록 할 수 있다.



javascript 파일 생성 후, html 파일에 연결

 

1. 먼저 .js 파일을 생성하고 코드를 작성한다. 

// 경고창 띄우기
function alert_button(str) {
    alert(str);
}

.js 파일 안에 경고창을 띄우는 간단한 함수를 생성했다.



2. 그 후, html 파일에 내가 만든 practice.js 파일을 연결시킨다. (.js 앞의 파일명은 본인이 원하는 대로~)

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>practice</title>
    </head>
    <body>

        <button onclick="btn_alert('안녕하세요!')"> 인사하세요! </button>

        <script type="text/javascript" src="practice.js"></script> 

    </body>
</html>

자바스크립트 파일을 연결하고 싶은 html 파일에 아래와 같은 코드를 <body> 태그 안의 맨 아래에 적어준다. (컴파일 처리 순서때문에)

 

 

<script type="text/javascript" src="practice.js"></script>

 

위에서 든 예와 달리, practice.js 파일에 영향을 받는 html이 100개라 해도 해당 js파일에 있는 코드만 변경해주면
모든 html파일에 일괄적으로 적용이 가능하기 때문에 코드의 유지· 보수가 매우 간편해진다.  



3. js 파일을 따로 만드는 경우에 대하여

웹 페이지를 열 때 다운로드 받아야 하는 파일이 늘어나 페이지가 느려지지 않을까?라고 생각할 수 있다.
그러나 한 번 다운하면 캐시로 임시저장되어서 더 이상 다운받지 않아도 된다. 
즉, 여러 html 파일에 같은 <script> 태그를 반복해서 쓰지 않아도 한 파일로 정리가 되어 
코드 관리도 편하고, 코드의 길이도 짧아지기 때문에 처음 방법보다 훨씬 좋다.

 

 

출처: 자바스크립트(javascript) 파일을 html파일에 연결하기 : 네이버 블로그 (naver.com)

'javascript' 카테고리의 다른 글

jQuery 이벤트 바인딩(on 함수 이용)  (0) 2021.04.01
textarea에서 enter 감지하여 이벤트 발생시키기  (0) 2021.03.30
[ 자바스크립트 ] 정규식 ─ search, test, replace  (0) 2021.03.28
javascript로 문자열 다루기  (0) 2021.03.18
다양한 웹페이지 호출 방법 (jquery 포함)  (0) 2021.03.18
'javascript' Related Articles more