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

자바스크립트는 html 어디에 위치하든 상관이 없다. body 태그에 있다고 해도 문법만 맞으면 실행이 된다. 자바스크립트를 body 태그에서 사용하는 경우는 특수한 경우들이 몇가지 있다. 객체보다 먼저 실행을 방지하거나 하는 경우들이지만 지금은 크게 의미가 없다. 하지만 인터프리터 구조의 특성상 자바스크립트를 body 태그 마지막에 위치하여 사용하는 경우들도 여전히 존재 한다.

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

자바스크립트는 html의 body 태그에 위치해도 실행이 된다.

어디에 위치하든 의미는 없다.

다만 html 의 객체가 로드되기 전에 자바스크립트가 실행되는 코드가 있다면 자바스크립트는 가급적 body 태그 마지막에 위치하는 것이 좋다.

지금은 크게 의미가 없을 수도 있는 것이기도 하다.

과거에는 이런 버그들 때문에 body 태그 마지막에 자바스크립트를 위치시키곤 했다.

html body 태그

body 태그는 우리가 이미 알고 있는 컨텐츠의 내용이나 버튼 또는 기타 입력항목 등을 위치시킨다.

컨텐츠의 내용은 단순히 글이 될 수도 있고, 입력항목이 될 수도 있으며, 공지나 안내문이 될 수 있다.

head 태그가 html 웹문서 정보를 가지고 있다면, body 태그는 html 웹문서의 실질적인 내용을 가지고 있다.

이런 body 태그 내에도 <script/> 태그를 이용하여 자바스크립트 구문을 사용하면 동적인 페이지처리를 할 수 있다.

당연하겠지만, 일반적인 태그들과 혼재되어 괜히 복잡해 질 수 있다.

굳이 자바스크립트를 body 태그 내에 위치시킬 것이라면 body 마지막에 위치시키는 것이 좋다.

<!DOCTYPE html>
<html>

    <head>
    </head>

    <body>
	<!-- // Tag -->
        
        <script type="text/javascript">
        	// Javascript To do
        </script>
    </body>
</html>

body 태그와 자바스크립트

body 태그내에서 간단한 자바스크립트를 실행시켜 본다.

버튼을 누르면 메세지가 나타난다.

<!DOCTYPE html>
<html>

    <head>
    </head>

    <body>
	<!-- // Tag -->
        <button onclick="return fnViewMessage()">메세지보기</button>
        
        <script type="text/javascript">
        	// Javascript To do
            function fnViewMessage() {
            	alert("메세지입니다.");
            }
        </script>
    </body>
</html>

body 태그내에서도 자바스크립트가 실행되는 것을 알 수 있다.

자바스크립트 실행

이전에 만든 코드를 이용해 자바스크립트 코드를 body 태그에서 실행시켜 본다.

head 태그에 있던 자바스크립트 함수들을 body 태그 마지막에 위치시켰다.

자바스크립트가 body 태그 내에 위치할 것이라면 <script/> 태그로 묶고, body 태그 마지막에 위치시키는 것이 좋다.

<!DOCTYPE html>
<html>

    <head>
    </head>

    <body>

        <h2>html body 에 작성된 자바스크립트</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">

            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>

    </body>
</html>

자바스크립트가 body 내에 있더라도 실행이 된다.

당연한 결과이다.

html 웹문서라면 자바스크립트는 어느 위치에 있던지 상관이 없다는 것을 알 수 있다.

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

자바스크립트 화면 출력 innerHTML innerText 차이 사용 javascript output (0)	2021.09.15
자바스크립트 html 외부 js 호출 실행하는 방법 Executing javascript external js file (0)	2021.09.14
자바스크립트 html head 태그에서 실행하는 방법 Executing javascript in html head tag (0)	2021.09.10
자바스크립트 html 코드 작성 위치 javascript code in html (0)	2021.09.08
자바스크립트 html 속성 변경하는 방법 여러가지 (0)	2021.09.07

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