자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file

자바스크립트는 확장자가 js로 되어있는 외부 파일로 만들어 실행시킬 수 있다. html 내부에 자바스크립트 실행코드가 많아지면 관리가 어렵다. 목적이 비슷한 것들끼리 묶어 관리하면 편하다. 외부 자바스크립트 파일을 불러오려면 <script/> 태그의 src 속성을 이용하여 파일경로를 입력해 주면 된다.

자바스크립트 html 외부 js 호출 실행하는 방법
Executing javascript external js file

기업체나 혹은 단위 프로젝트를 만들 때 보통 자바스크립트 파일은 별도로 관리한다.

공통된 기능들이 있을 수 있고 파일마다 다를 수 있다.

자바스크립트 파일을 유연하게 관리하려면 별도의 공간에 따로 저장해서 필요할 때 호출하여 사용하는 것이 좋다.

자바스크립트 파일을 외부에서 별도로 관리하기 위해 확장자가 js 로 되어 있는 파일을 만들어 호출하면 된다.

외부 js 파일을 가져오기 위해선 <script/> 태그의 src 속성에 파일의 경로를 적어주면 된다.

외부 js 호출

외부 js 파일을 불러오는 것 또한 html 문서 내의 어디에 위치하든 상관이 없다.

다만, js 파일의 함수를 불러오는 작업이 있다면 script 태그를 이용하여 js파일을 먼저 불러와야 한다.

<!DOCTYPE html>
<html>

    <head>
    	<script type="text/javascript" src="test.js" />
        <script type="text/javascript">
        	// call external js function
        </scipt>
    </head>

    <body>
	<!-- // Tag -->
        
        <script type="text/javascript" src="test.js" />
        <script type="text/javascript">
        	// call external js function
        </scipt>
    </body>
</html>

자바스크립트는 html 문서 내 어디에 위치하든 상관이 없다.

외부 자바스크립트 파일을 불러오는 구문 또한 html 내 어디에 위치하든 상관이 없다.

다만, 외부 자바스크립트 파일의 함수를 불러오는 작업이 있다면 외부 js 파일을 먼저 호출한 후 사용해야 한다.

위의 코드는 그것을 보여준다.

외부 자바스크립트 js 파일 만들기

아래의 작업은 visual studio code 로 작업했다.

이전에 만들었던 내용을 가지고 외부 js 파일을 만들어 보려고 한다.

html 문서와 같은 위치에 폴더를 만들고 그 위치에 새로운 js 파일을 만들어 본다.

그리고 그 js 파일을 불러온 후 이전 포스팅에서 했던 작업을 그대로 진행해 본다.

먼저 외부 js 파일을 만들기 위해 폴더를 만들고 그 폴더에 새로운 js 파일을 만들었다.

외부 js 파일을 호출하기 위해 먼저 폴더를 만들었다.

폴더의 이름은 js 이며, 새로운 외부 자바스크립트 파일은 extenal.js 으로 만들었다.

그리고, 이전에 만든 자바스크립트 내용을 external.js 파일에 복사하여 붙어넣었다.

이미지에 보이는 코드는 일부분이다.

function fnChangeString() {
    document.getElementById('content').innerHTML = '문자열을 변경합니다.';
}

function fnChangeFont() {
    document.getElementById('content').style.fontSize = '35px';
}

function fnChangeDisplayNone() {
    document.getElementById('content').style.display = 'none';
}

function fnChangeDisplayBlock() {
    document.getElementById('content').style.display = 'block';
}

function fnChangeImageChar() {
    document.getElementById('imgFgoChar').src = 'janedarc.png';
}

function fnChangeImageCharAlter() {
    document.getElementById('imgFgoChar').src = 'janedarc_alter.png';
}

html 에서 외부 js 호출 실행

외부 js 파일을 호출하려면 먼저 script 태그의 src 속성으로 파일을 지정해야 한다.

<!DOCTYPE html>
<html>

    <head>
        <!--
        <script type="text/javascript" src="js/external.js"></script>
        -->
    </head>

    <body>

        <h2>html 외부 js 에 작성된 자바스크립트</h2>

        <p id="content">
            자바스크립트로 html 를 변경할 수 있을까?
        </p>

        <button type="button" onclick="return fnChangeString();">
            글자변경
        </button>
        <button type="button" onclick="return fnChangeFont();">
            글자크기변경
        </button>
        <button type="button" onclick="return fnChangeDisplayNone();">
            글자숨기기
        </button>
        <button type="button" onclick="return fnChangeDisplayBlock();">
            글자보이기
        </button>

        <p>
            <img id="imgFgoChar" src="janedarc.png" style="width:200px">
        </p>
        <button onclick="return fnChangeImageChar();">
            이미지_1
        </button>
        <button onclick="return fnChangeImageCharAlter();">
            이미지_2
        </button>

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

    </body>
</html>

외부 js 파일을 호출하는 부분은 2군데이다.

같은 파일이며, 같은 내용이다.

head 에 있는 것은 주석으로 처리하였다.

물론 head 에 있어도 실행이 되고, body 태그 내에 있어도 실행은 된다.

외부 js 파일을 호출하는 것 또한 html 문서의 어디에 있던 상관없는 것을 알 수 있다.

정상적으로 스크립트 파일이 호출되어 실행이 되는 것을 알 수 있다.

'programming > javascript' 카테고리의 다른 글

자바스크립트 직접 출력 document.write() 사용 javascript output (0)	2021.09.17
자바스크립트 화면 출력 innerHTML innerText 차이 사용 javascript output (0)	2021.09.15
자바스크립트 html body 태그에서 실행하는 방법 Executing javascript in html body tag (0)	2021.09.12
자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag (0)	2021.09.10
자바스크립트 html 코드 작성 위치 javascript code in html (0)	2021.09.08

자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file