Inline JavaScript (HTML Tag속에 지정하여 사용)

JavaScript를 사용하는 방법은 페이지 목차에서 나열한대로

Inline JavaScript (HTML Tag속에 지정하여 사용)
Embedded JavaScript와 Script Block (Script Block 속에 일괄 지정)
Linked JavaScript (외부 파일을 링크하여 여러개의 파일에 일괄 지정)

이렇게 3 가지 방법이 있는데, CSS와 너무 닯아 있는 것 같지 않습니까? 닮아 있는 정도가 아니고 CSS의 Imported URL 방식만 빼면 똑 같습니다. 우선 Inline 방식은 HTML Tag 속에 직접 지정하는 방식입니다. 이 방식은 대게 JavaScript Event Handler 에 의해서 작동하게 됩니다. 아래에 문서나 주소를 JavaScript로 Scripting한 몇 가지 예를 보겠습니다.
A Tag에 지정하여 문서나 주소를 링크시키는 경우의 예

A Tag이 아닌 Block Element에 Event Handler를 이용하여 링크 시킨 경우

<body>
    <table border="1">
        <tr align="center">
            <td onclick="location.href='http://www.cadvance.org/';">My Site</td>
        </tr>
    </table>    
</body>

위의 2 가지 경우, 결과는 똑 같이 나오게 됩니다. 하지만 차이점은 A Tag의 경우에는 href 값 속에 javascript: 가 붙었고, TD 의 경우는 생략되어 있습니다.

그 이유는 href 는 A Element 의 속성이고, onclick 은 JavaScript 의 Event Handler 라는 차이 때문에 그렇습니다. Event Handler 의 경우는 따로 javascript: 를 앞에 붙이지 않아도 당연히 어떤 script가 들어 오는 것으로 인정하기 때문에 생략이 가능(물론 붙여도 됩니다.)한 것 이고, href 의 경우는 값 속에 script가 들어 간다는 표시로 앞에 javascript:를 붙이지 않으면 에러가 나죠. 따라서 Event Handler가 아닌 경우 반드시 javascript:를 앞에 붙인다는 것을 잊지 마세요.

Embedded JavaScript와 Script Block (Script Block 속에 일괄 지정)

이 방식은 마치 <style type="text/css">...</style> 로 Style Block 속에 style Property 들을 지정한 것 처럼 <script type="text/javascript"> ... </script> 와 같이 Script Block 속에 Script 명령들을 지정하는 방식 입니다. 경우에 따라 다르지만 일반적으로 CSS와 마찬 가지로 아래와 같이 문서의 <head>와 </head> 속에 지정합니다.
입력

<html>
    <head>
        <title>Embedded JavaScript</title>
    <script type="text/javascript">
    <!--
    JavaScript 명령줄
    //End of JavaScript -->
    </script>
    </head>
    <body>
    
    </body>
</html>

위의 내용 중,



부분은 JavaScript를 지원하지 않는 브라우저나 NN, IE중에서도 버전이 낮은 경우 JavaScript를 지원하지 않는 경우, 심지어 Script Block 자체를 인식하지 않을 경우 Script 코드가 브라우저 창에 그대로 노출이 되기 때문에 HTML 주석 Tag인  속에 script를 넣어서 코드의 노출을 방지하게 위해서 붙이게 됩니다. 하지만 NN, IE Version 3.0 이상의 브라우저에서는 문제 없이 돌아 갑니다.

Linked JavaScript (외부 파일을 링크하여 여러개의 파일에 일괄 지정)

이 경우는 여러 개의 문서에서 공통적으로 필요로 하는 JavaScript Function 들의 JavaScript Code 만을 저장하여 Link 시켜서 사용하는 방식입니다. 이 때 사용하는 확장자는 .js(JavaScript) 가 됩니다. 예를 들어 abc.js , doc.js 등이 되며 파일 이름은 영문을 사용해야 합니다. 그리고 역시 아래와 같이 문서의 Head 부분에 들어 가며 Start Tag과 End Tag 사이에 내용 없이 </script>로 닫아 줍니다. 만약 여러개의 .js 파일을 Link 시켜서 사용한다면 아래의 예 처럼 필요한 파일들을 나열 합니다.
입력

<html>
    <head>
        <title>Linked JavaScript</title>
    <script type="text/javascript" src=".js 파일의 uri 1"></script>
    <script type="text/javascript" src=".js 파일의 uri 2"></script>
    </head>
    <body>
    
    </body>
</html>

document.write - 브라우저 창(Body)에 출력하라!

드디어 실습으로 들어 왔습니다. 먼저 아래의 코드를 '실행하기' 단추를 눌러 실행 결과를 보시죠.
브라우저 창으로 출력하기(document.write) - 1

<html>
    <head>
        <title>브라우저 창에 출력하기</title>
    <script type="text/javascript">
    <!--
    document.write("처음으로 작성한 script")
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

출력 결과를 보면 Script Block 의 내용인

document.write("처음으로 작성한 script")

의 실행 결과는 document.write("") 의 괄호속의 문자열인 처음으로 작성한 script 가 되겠습니다. 여기서 'document'란 브라우저 창 즉, HTML 문서 의 body 부분을 뜻하는 것이고, 'write' 는 출력하라는 뜻입니다.

JavaScript를 배우는데 가장 중요한 부분 중에 하나가 DOM(Document Object Model)을 이해하는 것 입니다. 무턱대고 어떤 명령들을 외워서 쓸게 아니라 근본적인 이해가 중요하져. 일단 앞으로 자주 봐야 될 아래의 '브라우저 내장 객체' 에 대한 그림을 봅시다.

그림에서 최상위 객체가 Window와 Navigator 이고, Window 객체 아래 Document 객체가 있습니다. 그렇다면 실험삼아 아래의 코드를 '실행하기' 단추를 눌러 실행 결과를 보죠.
브라우저 창으로 출력하기(document.write) - 2

<html>
    <head>
        <title>브라우저 창에 출력하기</title>
    <script type="text/javascript">
    <!--
    document.write("처음으로 작성한 script<br>")
    window.document.write("처음으로 작성한 script")
    // -->
    </script>
    </head>
    <body>
    
    </body>
</html>

결과는 같습니다. 무슨 말을 하고 싶어서 그러냐 하면... 최상위 객체인 Window 는 생략이 가능하다는 말을 하고 싶어서 그렇습니다. 이번에는 굵은 글씨로 출력하기 위해 아래의 코드를 '실행하기' 단추를 눌러 실행 결과를 봅시다.
브라우저 창으로 출력하기(document.write) - 3

<html>
    <head>
        <title>브라우저 창에 출력하기</title>
    <script type="text/javascript">
    <!--
    document.write("처음으로 작성한 script<br>")
    // -->
    </script>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    document.write("<b>처음으로 작성한 script</b><br>")
    window.document.write("<b>처음으로 작성한 script</b>")
    // -->    
    </script>
    </body>
</html>

이 결과를 보면 Head 부분의 보통 굵기로 출력 명령이 들어있는 Script Block 과 굵은 글씨체로 지정한 Body 부분의 Script Block 모두 브라우저 창에 출력된 것을 알 수 있습니다. 뒤에 나올 Function 으로 기능을 지정하지 않고, 어떤 명령이 Script Block 속에 들어 있으면 문서가 Load 되면서 곧 바로 위에서 부터 아래로 실행 됩니다. 그리고 이 결과는 아래의 HTML 문서를 출력한 결과와 똑 같습니다.
입력

<html>
    <head>
        <title>브라우저 창에 출력하기</title>
    </head>
    <body>
    처음으로 작성한 script<br>
    <b>처음으로 작성한 script</b><br>
    <b>처음으로 작성한 script</b>
    </body>
</html>

그렇다면 document.write는 왜 쓸까요? JavaScript를 처음 접하는 사람은 어쩌면 알 것 같으면서도 이런 것을 왜 하는지 궁금할테죠? 위에서 한 3 가지 예제의 결과 자체만을 목적으로 Script를 작성하지는 않습니다. 마지막 예제의 경우 위의 코드와 같은 출력 결과가 나오는데 구테여 Script 를 작성할 필요가 없겠죠. 이 document.write는 수식을 연산하거나 명령을 수행한 결과를 화면에 출력할 필요가 있을 때 사용합니다. 많이 사용하기 때문에 잘 알아 두어야 겠습니다. 초보자들의 이해를 돕기 위해 document.write에 대해 간단히 정리하고 이 페이지를 마치도록 하겠습니다. document.write 명령을 하면

브라우저에 내장된 JavaScript 해석기가 Script Code를 해석해서 오류가 없으면
document.write 부분을 HTML Parser로 순서대로 보내고
그 것을 받은 HTML Parser는 출력할 부분을 body 부분의 지정된 부분으로 보내어 문서를 브라우저 창에 출력한다.

뭐 이 정도로 이해하면 무리가 없으리라 봅니다.

Tel. 042-353-2371

평일 오전 9시 ~ 오후 7시

기업은행

010-8649-6758

예금주:제주사랑(송진아)

Inline JavaScript (HTML Tag속에 지정하여 사용)