자바 스크립트 삽입법
자바 스크립트는 HTML 문서에서 <Head> 태그나 <Body> 태그 사이에 삽입합니다.
자바 스크립트의 기본 구조는 다음과 같습니다.
<HTML>
<HEAD>
<TITLE>자바스크립트구조</TITLE>
<script language = "javascript">
<!--
자바스크립트내용
-->
</script>
<BODY>
</BODY>
</HTML>
자바스크립트의 삽입과 실행
자바스크립트는 삽입 방법이나 위치에 따라 실행되는 시기가 달라집니다.
1) 내장형 : HTML 문서 내에 소스를 직접 입력하는 방식으로, <head>태그나 <body> 태그 사이에 입력할 수 있지만
대부분 해석 순서를 고려하여 <head> 태그 사이에 입력합니다. 자바스크립트 소스를 만나자마자 실행됩니다.
<HTML>
<HEAD>
<TITLE>자바스크립트구조</TITLE>
<script language = "javascript">
<!--
자바스크립트내용
-->
</script>
</HEAD>
<BODY>
<script language = "javascript">
<!--
자바스크립트내용
-->
</script>
</BODY>
</HTML>
------------ 사용예 ----------------
<body bgcolor=green>
<script language=javascript>
alert("환영합니다.")
</script>
</body>
위의 실행결과 웹브라우져에 녹색 배경의 창이 뜨고 그다음에 메시지 박스가 뜰것입니다.
만약에 <head> </head> 안에다가 넣으면 메시지 박스가 먼저 뜨고나서 <body>가 뜰것입다.
2) 행 입력형 : HTML 문서의 태그내에 이벤트 핸들러와 함께 사용합니다. 프로그램이 복잡하지 않고 단순한 경우 사용하면 편리합니다.
<태그 이벤트핸들러="자바스크립트 소스">
----------- 사용예 ------------------
<a href="#" onclick="alert('환영')">클릭</a><br>
<a href="javascript
3) 함수형 : 문서 내장형과 같이 <head>나 <body> 태그 사이에 삽입할 수 있지만 해석순서를 고려하여
<head> 태그 사이에 입력하는 것이보편적입니다. 함수를 호출할 경우에만 실행됩니다.
<head>
<script language=javascript>
<!--
function 함수명()
{
자바스크립트 소스가 들어갑니다.
}
-->
</script>
</head>
----------------- 사용예 --------------------------
<html>
<head>
<title> 자바스크립트 함수형 테스트 </title>
<script language=javascript>
function hello()
{
alert("환영합니다");
}
</script>
</head>
<body bgcolor=green>
<input type=button value="클릭" onclick="hello()">
</body>
</html>
4) 링크형 : 링크형은 자바스크립트 소스 확장자 *.js 인 외부 파일로 저장하여 불러옵니다. 링크형을 사용하면 다음과 같은 점이 좋습니다.
1. HTML 문서가 길어지는 것을 방지하고 소스를 간략화시킵니다.
2. 자바스크립트 소스의 노출을 방지하여 보안성을 향상시킵니다.
3. 자바스크립트 소스를 여러 페이지에 적용할 수 있어 효과적인 작업을 할 수 있고 용량을 줄여줍니다.
- 사용형태 : <script language=javascript src="js 파일의 전체 경로"></script>
- 사용예 : <script language=javascript src="test.js"></script>
주의사항
1. 대소문자 구분해야 합니다. 특히 내장 객체, 메소드, 속성, 변수 등은 대소문자를 혼동하여 사용하시면 절대 안됩니다.
2. 구문을 한줄에 한개 한줄에 두 개 이상의 구문은 두려면 세미콜론으로 구분해야 합니다.
3. 객체, 속성, 메소드, 함수의 구분은 마침표(.) 연산자를 사용합니다.
4. 한 개의 구문을 한줄에 모두 쓰지 못할 경우 밑줄(_)을 이용하여 다음 줄과 연결되었음을 표시합니다.
5. 문자열 표시에는 따옴표를 사용해야 합니다. 큰따옴표와 작은 따옴표 둘다 사용가능합니다.
6. 다옴표 자체를 문자열에 포함 시킬땐 역슬래쉬와 따옴표를 함께 사용합니다.
ex) alert("안녕\"하세요\" ")
--------------- 특수문자의 종류 -------------------
\f : 한장 넘어가서 출력
\r : 커서를 그 줄의 처음으로 이동
\\ : 역슬래쉬 문자 출력
\' : 작은 따옴표 문자 출력
'" : 큰따옴표 문자 출력