프로그래밍/HTML

2장 자바스크립트의 종류와 기본 작성법

웹 페이지에서는 자바스크립트를 사용해 사용자 반응 등을 처리합니다. 이 절에서는 웹 페이지에서 자바스크립트를 사용하는 방법을 살펴보겠습니다. 앞에서 살펴본 스타일시트처럼 두 가지 방법으로 웹 페이지에 자바스크립트를 추가할 수 있습니다.


내부 자바스크립트

HTML 페이지에 자바스크립트 코드를 추가하는 가장 쉬운 방법은 HTML 페이지 내부에서 자바스크립트 코드를 곧바로 작성하는 것입니다. script 태그를 사용해 HTML 페이지 내부에 자바스크립트 코드를 작성합니다.


외부 자바스크립트


실제로 자바스크립트 코드를 입력하다 보면 1000행이 넘을 때가 많습니다. 이러한 코드를 한 파일에 입력하면 매우 복잡해지기 때문에 자바스크립트 파일을 분리해서 사용합니다. 외부 자바스크립트 파일은 script 태그의 src 속성에 파일 경로를 입력해 HTML 페이지로 불러옵니다.


최근에는 자바슼느립트 파일을 추가하는 다양한 방법이 등장하고 있습니다. 여기에서 살펴본 두 가지는 HTML 페이지에서 자바스크립트 파일을 추가하는 가장 기본적인 방법이라고 생각해 주세요.


기본 예제 2-4 내부 자바스크립트 작성


다음 코드처럼 head 태그 내부 또는 body 태그 내부에 script 태그를 생성하고 코드를 작성합니다.


<코드 2-5> 내부 자바스크립트 작성


<!DOCYTPE html>

<html>

<head>

<title>JavaScript Baisc</title>

<script>

// 경고창을 출력합니다.

alert('Hello JavaScript .. !);

</script>

</head>

<body>


</body>
</html>


기본 예제 2-5 외부 자바스크립트 작성


다음 코드를 작성하고 OuterJavaScript.js로 저장합니다.

[ alert('외부 자바스크립트 파일 사용'); ]


<코드 2-7> 외부 자바스크립트 추가


<!DOCTYPE html>

<html>

<head>

<title>Outer JavaScript</title>

<script src="OuterJavaScript.js"></script>

</head>

<body>


</body>

</html>


HTML5 이하에서는 다음 코드처럼 script 태그의 type 속성을 입력해 외부 자바슼느립트 파일을 추가했습니다. 하지만 이제는 type 속성을 사용하지 않아도 자바스크립트를 기본으로 인식합니다.


<head>

<title></title>

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

</head>


HTML5를 처음 공부하는 독자는 외부 파일을 추가하는 방법이 혼란스러울 수 있습니다. 외부 스타일시트를 추가할 때는 link 태그를 사용하고, 외부 자바스크립트 파일을 추가할 때는 script 태그를 사용하는 것을 꼭 기억해 둡니다.



'프로그래밍 > HTML' 카테고리의 다른 글

글자 태그  (0) 2017.08.22
2장 검사를 이용한 오류 확인  (0) 2017.08.21
2장 CSS3의 종류와 기본 작성법  (0) 2017.08.19
2장 HTML5 기본 구조와 작성법  (0) 2017.07.29
1장 웹 개요와 실습 환경 구축  (0) 2017.07.28
TAGS.

Comments