자바스크립트 파일 생성 후 연결

2023. 1. 27. 13:02 
<script src="파일 위치"></script>

위 코드를 사용해서 자바스크립트 파일을 html파일에 연결할 수 있다.

 

아래 코드는 이전 포스트에서 사용하던 예시 코드에서 자바스크립트 부분을 파일로 따로 만들어 html 파일에 연결한 예시이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>external</title>
        <script src="color.js"></script>
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>
        <input type="button" value="night" onclick="
            nightdayhandler(this);
        ">
        <ol>
            <li><a href="1.html">html</a></li>
            <li><a href="2.html">css</a></li>
            <li><a href="3.html">javascript</a></li>
        </ol>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
        </p>
    </body>
</html>
//color.js 파일
var Links = {
    setColor(color) {
        var alist = document.querySelectorAll('a');
        var i = 0;
        while (i < alist.length) {
            alist[i].style.color = color;
            i++;
        }
    }
}

var Body = {
    setColor(color) {
        var target = document.querySelector('body');
        target.style.color = color;
    },

    setBackgroundColor(color) {
        var target = document.querySelector('body');
        target.style.backgroundColor = color;
    }
}

function nightdayhandler(self){
    if(self.value === 'night') {
        Body.setBackgroundColor('black');
        Body.setColor('white')
        self.value = 'day'

        Links.setColor('powderblue')
    } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night'

        Links.setColor('blue')
    }
}

 

이렇게 파일을 분리하면 유지보수의 장점도 있지만, js파일을 한 번 다운로드해서 캐시에 저장해두면 후에 별도의 다운로드 없이 사용할 수 있기 때문에 웹 측면에서도 장점을 갖게 된다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs124

 

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

'공부 > JavaScript' 카테고리의 다른 글

객체 속성 삭제(delete 연산자)  (0) 2023.01.30
jQuery  (0) 2023.01.27
객체  (0) 2023.01.26
함수  (0) 2023.01.26
반복문  (0) 2023.01.12

BELATED ARTICLES

more

티스토리툴바