Efficient, Rapid, Accurate

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치

안녕하세요~~ 케이치입니다~

오늘은 자바스크립트를 삽입하는 방법

자바스크립트 코드는 헤드, 바디 태그 안에 들어갈 수도 있고 두 태그 모두에 들어갈 수도 있고, 외부파일로 정의해서 include할 수도 있습니다. 각각 어떻게 하는지 한번 알아보죠.

<head> 태그 내의 JavaScript

사용자가 발생시키는 특정 이벤트에 대해서 자바스크립트가 동작을 해야한다면 헤드태그 안쪽에 코드를 삽입합니다.

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

<body> 태그 내의 JavaScript

웹페이지가 로드될 때 자바스크립트 코드에 의해서 어떤 내용물이 화면에 출력되어야 한다면 바디 태그 안에 스크립트를 넣어주세요. 이 경우에는 자바스크립트 코드로 정의된 함수는 가질 수 없습니다.

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

결과는 아래처럼 보이겠죠?

Hello World
This is web page body

<body> 와 <head>에 동시에 쓰이는 JavaScript

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
   alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

외부 파일로 정의된 JavaScript

JavaScript를 좀더 확장해서 쓰려면 외부파일로 정의해서 쓰는 방법이 있습니다. 기능별로 파일을 분리해서 정리하면 관리하기가 편해지겠죠. 이건 뭐 어떻게 관리하느냐에 따라 달렸지만요 ㅋ 여러 페이지에서 동일한 스크립트를 사용해야 한다면 분리해서 사용하시는 것이 편리할겁니다.

자바스크립트 코드를 외부파일로 저장하려면 .js확장자를 사용합니다. 그리고 이 파일을 include하는 방법은 src속성을 이용해서 파일경로를 지정해주면 됩니다.

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

filename.js

function sayHello() {
   alert("Hello World")
}

한번씩 다 해보시고 안된다 하시는게 있으시면 댓글로 질문 남겨주세요~ ^-^

이상 케이치였습니다~

즐프하세요~~ ^-^

Reference : http://www.tutorialspoint.com/javascript/javascript_placement.htm

저작자표시 비영리 변경금지

'💻 Programming > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 강좌 #6 - Switch - Case 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #5 - IF, IF-ELSE, IF-ELSE IF-ELSE 문 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #4 - DataType ( 데이타 타입, 변수 ) (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #2 - 자바스크립트 미지원 브라우저에 경고하기 (0)	2015.08.05
[Javascript / 자바스크립트] 강좌 #1 - Syntax ( 기본 문법 ) (0)	2015.08.05

💻 Programming/Javascript

[Javascript / 자바스크립트] 강좌 #3 - 스크립트 코드의 위치

<head> 태그 내의 JavaScript

<body> 태그 내의 JavaScript

<body> 와 <head>에 동시에 쓰이는 JavaScript

외부 파일로 정의된 JavaScript

'💻 Programming > Javascript' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바