2018. 10. 14. 18:41 javascript

javascript 삽입 위치

javascript는 css처럼 3가지 방법으로 html 문서에 삽입.


1) 내부 자바스크립트

<head>, <body> 안에~ ( <head>안에 넣는 것이 좋음. )

<script></script> 태그 사이에 위치.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
    <head lang="ko">
        <meta charset="utf-8">
        <title>My First Javascript </title>
        <script>
            document.write("자바스크립트 기초");
            document.write("<h1>자바스크립트 기초</h1>");
        </script>
    </head>
    <body>
        <script>
            document.write("자바스크립트 기초");
            document.write("<h1>자바스크립트 기초</h1>");
        </script>
    </body>
</html>
cs


html5 이전에는 <script type="text/javascript>처럼 어떤 스크립트 언어를 사용하는지 표기했지만,

html5 부터는 javascript가 공식 스크립트 언어이므로 표기 안해도 됨.


예전에는 javascript 미지원 브라우저가 많아서 javascript 코드 부분을 html 주석으로 감싸기고 했지만, 

이제 주석처리 안해도 됨.



2) 외부 자바스트립트

<head>, <body> 안에~

<script src="ext-js.js"></script> 와 같이 src 속성의 값에 .js파일의 경로 기재.

html

 ext-js.js
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>외부 자바스크립트</title>
        <script src="ext-js.js"></script>
    </head>
    <body>
    </body>
</html>
cs
1
document.write("자바스크립트 기초");
cs



3) 인라인 자바스크립트

html 내부 태그에 이벤트 속성으로 삽입.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>인라인 자바스크립트</title>
    </head>
    <body>
        <button type="button" onclick="alert('자바스크립트 기초')">클릭</button>
    </body>
</html>
cs



저작자표시

'javascript' 카테고리의 다른 글

javascript 조건문(conditional statement)  (0) 2018.10.15
javascript 기초2(자료형 변환, html요소 접근)  (0) 2018.10.14
javascript 기초(변수, 자료형, 연산자)  (0) 2018.10.14
posted by 해에게서소년에게

티스토리툴바