자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag

자바스크립트는 html 문서 어디에 위치하든 상관이 없다. 다만 코드의 규칙성을 위해 head 태그에 넣고 사용하는 경우들이 많기는 하다. 일관되게 정리된 코드는 추후 관리가 쉽기 때문이다. 모든 문서가 그렇듯 관리하기 편하도록 분류해서 작성하는 것이 좋다.

자바스크립트 html head 태그에서 실행하는 방법
Executing javascript in html head tag

html은 웹문서이고 head 태그는 html 문서정보를 가지고 있는 부분이다.

자바스크립트를 html 문서의 어디 위치에 있던 상관이 없다.

다만, 자바스크립트가 웹문서의 동작을 담당하는 부분이며 독립적인 구성체이기도 하기 때문에 코드의 구분을 위해 head 태그에 위치시켜 관리의 편의성을 도모할 수 있다.

html head 태그

아래의 코드는 html 웹문서에서 자바스크립트가 head 태그내에 위치한 것을 보여준다.

자바스크립트 코드는 <script/> 코드내에 작성하면 된다.

이런 경우 함수를 사용하고, html 태그에는 onclick 같은 이벤트로 연결한다.

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        	// Javascript To do
        </script>
    </head>

    <body>
		<!-- // Tag -->
    </body>
</html>

head 태그와 자바스크립트

아래는 head 태그에 메세지를 띄우는 자바스크립트 함수이다.

html 의 버튼에 onclick 으로 이벤트로 연결하였다.

head 태그에 위치한 경우 이런 방법으로 버튼을 동작하도록 구성한다.

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
        	// Javascript To do
            function fnViewMessage() {
            	alert("메세지입니다.");
            }
        </script>
    </head>

    <body>
		<!-- // Tag -->
        <button onclick="return fnViewMessage()">메세지보기</button>
    </body>
</html>

버튼을 누르면 메세치창으 나타나는 것을 볼 수 있다.

자바스크립트 실행

이전에 만들었던 코드를 가지고 조금 복잡하게 구성했다.

눈으로 볼때는 복잡하지만 알고보면 별거 없다.

버튼 태그를 만들어 주고 하나하나 자바스크립트 함수를 만들어 연결해 준 것 뿐이다.

중요한 것은 자바스크립트 코드를 동작시키기 위해 head 태그 내에 위치시킬 수 있다는 것이다.

<!DOCTYPE html>
<html>

    <head>
        
        <script type="text/javascript">

            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';
            }
            
        </script>
    </head>

    <body>

        <h2>head 에 작성된 자바스크립트 함수로 html 변경하기</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>

    </body>
</html>

아래는 결과화면이다.

body 태그 내의 모든 버튼에 onclick으로 자바스크립트 함수를 연결해 주었다.

head 태그 내에 자바스크립트를 구성하고 실행할 수 있도록 함수로 만들었다.

다시 언급하지만, 자바스크립트를 head 에 위치시켜 실행시킬 수 있다는 것이 중요하다.

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

자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file (0)	2021.09.14
자바스크립트 html body 태그에서 실행하는 방법 Executing javascript in html body tag (0)	2021.09.12
자바스크립트 html 코드 작성 위치 javascript code in html (0)	2021.09.08
자바스크립트 html 속성 변경하는 방법 여러가지 (0)	2021.09.07
웹프로그래밍 자바스크립트란 기초 강좌와 튜토리얼 빠르게 보기 (0)	2021.09.05

자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag