안녕하세요~~ 케이치입니다~
오늘은 자바스크립트를 삽입하는 방법
자바스크립트 코드는 헤드, 바디 태그 안에 들어갈 수도 있고 두 태그 모두에 들어갈 수도 있고, 외부파일로 정의해서 include할 수도 있습니다. 각각 어떻게 하는지 한번 알아보죠.
사용자가 발생시키는 특정 이벤트에 대해서 자바스크립트가 동작을 해야한다면 헤드태그 안쪽에 코드를 삽입합니다.
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
|
웹페이지가 로드될 때 자바스크립트 코드에 의해서 어떤 내용물이 화면에 출력되어야 한다면 바디 태그 안에 스크립트를 넣어주세요. 이 경우에는 자바스크립트 코드로 정의된 함수는 가질 수 없습니다.
<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 |
<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를 좀더 확장해서 쓰려면 외부파일로 정의해서 쓰는 방법이 있습니다. 기능별로 파일을 분리해서 정리하면 관리하기가 편해지겠죠. 이건 뭐 어떻게 관리하느냐에 따라 달렸지만요 ㅋ 여러 페이지에서 동일한 스크립트를 사용해야 한다면 분리해서 사용하시는 것이 편리할겁니다.
자바스크립트 코드를 외부파일로 저장하려면 .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
| [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 |