1. 출력문
어떠한 프로그래밍 언어를 배우든지 가장 첫 번째로 배우는 것은 결과를 어떻게 출력하느냐 하는 것이다. 밑의 코드는 자바 스크립트로 작성된 모범적인 "자바 스크립트를 배웁시다" 라는 프로그램을 나타내고 있다.
자바 스크립트를 배웁시다.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 이 스크립트의 내용을 자바 스크립트를 지원하지 않는 브라우저가 읽지 못하도록 숨긴다.
document.write("<P><B> 자바 스크립트를 배웁시다.</B>"); // 자바 스크립트를 지원하지 않는 브라우저가 위의 스크립트를 읽지 못하도록 숨기는 작업을 끝낸다. -->
</SCRIPT>
</HEAD>
<BODY>
<P>자바 스크립트를 배웁시다.
</BODY>
</HTML>
위의 코드에서는 document.write("<P> 자바 스크립트를 배웁시다.") 명령이 HTML 문서로의 출력 작업을 수행한다. 이 명령은 현재의 문서에 문자열을 출력할 것을 명령하고 있다. 이 문자열에서는 HTML 명령 또는 추가로 문자 포맷 명령이 포함될 수 있다. 예를 들어, document.write("<P><B> 자바 스크립트</B>를 배웁시다")라는 명령을 사용하여 그 문자열의 일부를 볼드체로 나타낼 수도 있다. 밑의 그림에서 HTML의 "자바스크립트" 메시지 전에 나오는 자바 스크립트의 "자바스크립트" 메시지를 주의하여 보면 이것은 자바 스크립트 코드를 문서의 앞부분, 그러니까 HTML 메시지의 본문 앞에 위치시켰기 때문이다. 만약 HTML 문서의 앞부분에, 그리고 자바 스크립트 본문의 앞부분에 위치되었다면 그 순서가 뒤바뀌었을 것이다.
2. HTML에 스크립트 삽입하기
원하는 페이지의 HTML 도큐먼트에 스크립트를 직접 집어넣고 싶을 때가 많다. 그러려면, 스크립트의 시작과 끝을 나타내는 스크립트 태그와 스크립트 끝맺음 태그를 사용한다.
페이지의 제목 부분과 본문 부분에 스크립트를 배치시킬 수 있다. 자바 스크립트를 보다 능숙하게 사용하게 되면, 스크립트를 제목에 집어넣어 그것이 맨 처음으로 로드되게 해 놓을 수 있다.
HTML에 스크립트 삽입하기
<html>
<head>
<title>자바스크립트 삽입</title>
</head>
<body>
<h1>자바스크립트 삽입...
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE
document.write("자바스크립트!")
// STOP HIDING -->
</SCRIPT>
</h1>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
- <SCRIPT>
스크립트 태그로 스크립트가 시작된다는 것을 나타낸다.
- LANGUAGE="JavaScript"
자바 스크립트 언어를 사용하고 있다는 것을 나타낸다.
- <!-- HIDE
<!-- 을 써넣어 HTML 주석을 단다. 이것은 자바 스크립트 형 브라우저가 아닌 브라우저로는 그 스크립트를 읽을 수 없게 한다.
스크립트와 주석 태그 내에 스크립트를 삽입한다.
- //STOP HIDING-->
주석 끝맺음 태그 (-->)를 사용하여 다른 브라우저들이 그 도큐먼트를 다시 읽을 수 있도록 해놓는다. 그 앞에 두개의 슬래시를 위치시켜 자바 스크립트가 이 행을 읽을 수 없도록 한다.('스크립트에 주석 삽입하기' 참조)
- </SCRIPT>
스크립트 끝맺음 태그로 자바스크립트 코드가 끝났음을 나타낸다.
3. 별개의 파일에서의 스크립트
넷스케이프 3.0이상의 버전은 자신의 스크립트를 별개의 도큐먼트에 보관할 수 있다. 웹 페이지에 똑같은 스크립트를 사용하거나 유저들이 이 코드를 읽지 못하게 하고 싶을 때 이것을 사용한다.
브라우저가 자신의 스크립트를 알게 하려면, 그 파일이 있는 장소를 알려 주어야 한다. 이것은 스크립트 태그에 있는 소스 속성으로 가능하다. 별개의 소스 파일들을 사용하면 유저들이 읽지 못하도록 주석을 달 필요가 없다. 외부 소스 도큐먼트를 사용하기 전에, 자신의 서버 관리자로 하여금 MIME 유형의 application/x-javascript에 .js를 붙여 놓도록 해야 한다.
| 주소 |
의미 |
| http://www.mysite.com/script.js |
일반적인 주소 |
| script.js 또는 ./script.js |
HTML 파일과 같은 디렉토리 |
| ../script.js |
HTML 파일보다 한 단계 위 디렉토리 |
| .../script.js |
HTML 파일보다 두 단계 위 디렉토리 |
| /script.js |
도메인의 최상위 디렉토리 |
|
별개의 파일에 스크립트 위치시키기
<html>
<head>
<title>별개의 파일에서의 스크립트</title>
</head>
<body>
<h1>별개의 파일에서의 스크립트
<SCRIPT LANGUAGE="JavaScript" SRC="../myScript.js">
</SCRIPT>
</h1>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript" SRC="../myScript.js">
- <SCRIPT LANGUAGE="JavaScript"
스크립트의 시작을 알리는 스크립트 태그이다.
- SRC=
SRC=를 써넣어 별개의 스크립트 도큐먼트를 사용하고 있다는 것을 브라우저에게 알린다.
- "../myScript.js">
인용 부호 안에 자바 스크립트 도큐먼트의 위치를 지정해 줍니다. 표에 설명해 놓은 것처럼 상대적이거나 절대적인 파일 위치를 사용할 수 있다. 반드시 스크립트 파일 끝에는 .js라고 써넣어야 한다.
- </SCRIPT>
스크립트의 끝을 알리는 스크립트 끝맺음 태그이다. HTML 도큐먼트에 스크립트를 집어넣지 않아도 이것은 꼭 써넣어야 한다.
4. 자바스크립트가 아닌 내용
자바 스크립트를 해석할 수 없는 브라우저들이 자신의 스크립트를 읽지 못하게 가려 놓은 것 외에, 사용자에게 더 좋은 브라우저를 사용하라는 메시지를 나타내고 싶을 때가 있다. 이것은 noscript 태그로 가능하다.
넷스케이프 3.0은 noscript의 시작과 끝맺음 태그 사이에 있는 모든 것을 무시한다. 이 두 태그 내에 다른 대체 내용을 집어넣을 수 있다.
이 noscript 태그는 넷스케이프 3.0에 새로 등장한 것이다. 만약 유저가 네트웍 설정에서 자바스크립트를 불능으로 해 놓아도 텍스트가 디스플레이된다.
자바 스크립트를 해석하지 못하는 브라우저를 위한 메시지 담기
<html>
<head>
<title>자바스크립트가 아닌 내용</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
alert("자바스크립트의 세계에 오신 것을 환영합니다.");
// stophiding -->
</SCRIPT>
<NOSCRIPT>
<H2>이 페이지는 자바스크립트를 읽을 수 있는 브라우저가 필요합니다.</H2>
</NOSCRIPT>
</body>
</html>
- <NOSCRIPT>
대체 내용 앞에 noscript 태그를 삽입한다.
- <H2>이 페이지는 자바스크립트를 읽을 수 있는 브라우저가 필요합니다.</H2>
원하는 메시지를 써넣는다. 넷스케이프 3.0이상의 브라우저들은 noscript 태그 내의 모든 것을 무시하지만, 다른 브라우저들은 표준 HTML로서 그 내용을 읽는다. (요즘은 거의 사용하지 않는 태그이지만 알 필요가 있는 것 같아서 설명한다.)
- </NOSCRIPT>
메시지 뒤에 끝맺음 noscript 태그를 삽입한다. 이렇게 하면 브라우저가 계속해서 그 도큐먼트를 읽게된다.
5. 자바스크립트에서 HTML 쓰기
자바 스크립트를 사용하여 도큐먼트에 HTML을 쓸 수 있다. 이것을 하려면, 현재의 도큐먼트에 괄호 안의 텍스트와 HTML을 더해 주는 기본 명령인 document.write()를 사용한다.
자바 스크립트에 대해 더 배우게 되면, document.write()를 이용하여 HTML 도큐먼트를 유저의 상호 반응에 따라 개별화시킬 수 있다는 것을 알게 될 것이다.
스크립트로부터 텍스트와 HTML 쓰기
<html>
<head>
<title>자바스크립트에서 HTML 쓰기</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
document.write("자바스크립트")
document.write("<FONT SIZE='+3'>강좌!</FONT>")
document.write("<FORM><INPUT type='button' value='버튼'></FORM>")
// stophiding -->
</SCRIPT>
</body>
</html>
document.write("<FONT SIZE='+3'> 강좌!</FONT>)
- document.write
사용하고 있는 명령어를 지정한다. 이 경우 document.write를 써넣어 HTML 도큐먼트로 출력하게 한다.
- ( )
명령어 뒤에 괄호를 넣는다. 자바 스크립트 명령어를 사용할 때는 항상 이것을 집어넣는다.
- "<FONT SIZE= > 강좌!</FONT>
괄호 안에 원하는 HTML을 써넣는다.
이것을 인용부호로 감싸서 자바스크립트 코드와 구분지어 놓는다.
- '+3'
인용 부호가 있는 HTML 태그를 써넣을 경우에는, 이중 인용 부호 위치에 단일인용 부호를 사용하여 자바스크립트가 그 두개를 혼동하지 않도록 해 놓는다.
6. 미리 포맷된 텍스트 쓰기
HTML은 태그로 지정되지 않은 모든 포맷을 무시해 버린다. 자신이 써넣은 대로 똑같이 텍스트를 디스플레이하려면, 미리 포맷된 텍스트 블록이나 대화 상자를 사용해야 한다.
스크립트가 미리 포맷된 텍스트 블록 안에 텍스트를 내 놓으면, 특별한 자바 스크립트 기능들을 이용하여 포맷을 지정할 수 있다. 텍스트를 새로운 행으로 분리시키고 싶을 때는, document.writeln()으로나 새로운 행용의 특별한 문자를 포함시키는 것으로 할 수 있다.
| 문자 |
의미 |
| \f |
양식 |
| \n |
새로운 행 |
| \r |
신규행 리턴 |
| \t |
탭 |
|
자바 스크립트는 탭이나 양식과 같이 여러 가지 유형의 포맷을 만들어 내는 특수한 문자를 인식한다. 이 특수 문자에 대해서는 위의 표를 참조하시기 바란다.
미리 포맷된 텍스트 쓰기
<html>
<head>
<title>자바스크립트에서 미리 포맷된 텍스트 쓰기</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide
document.writeln("<PRE> \r\t\tdkssud하세요 </PRE>")
// stophiding -->
</SCRIPT>
</body>
</html>
document.writeln("<PRE> \r\t\t안녕하세요 </PRE>")
- document.writeln(" ")
document.writeln()을 사용하여 새로운 행에 집어넣을 내용을 삽입한다. 이 명령은 행분리를 일으키는 것만 제외하고는 document.write()와 동일하다.
- <PRE>
미리 포맷된 텍스트 블록의 시작을 나타내는 미리 포맷 태그를 써넣는다.
- \r\t\t
원하는 포맷을 나타내는 특수 문자를 지정한다. 탭 문자로는 텍스트를 들여 쓰고, 리턴 문자로는 새로운 행을 만든다.
- </PRE>
미리 포맷된 텍스트 블록의 끝을 알리는 미리 포맷 끝맺음 태그를 써넣는다.
7. 스크립트에 주석 삽입하기
HTML과 자바 스크립트 같은 언어들은 도큐먼트 내의 모든 단어들을 평가하기 때문에, 무시하고 싶은 텍스트를 나타내는 데 특수한 심볼을 사용해야 한다. 이렇게 무시된 텍스트를 주석 (comment)이라고 하는데, 이것은 자신이나 독자로 하여금 그 코드를 이해하는 데 도움이 될 정보를 집어 넣을 수 있게 해준다. 스크립트 기능에는 별 필요가 없는 것이지만, 스크립트를 쉽게 읽고 편집할 수 있게 해준다.
밑의 코드는 주석에 대해 보여주고 있다. 스크립트가 작동하는 방법을 꼭 이해할 필요는 없지만, 주석이 사용되는 방법은 꼭 검사해 보는 것이 좋다.
자바 스크립트에는 단일 행과 복수 행의 두 가지 유형의 주석이 있다. 단일 행 주석은 브라우저로 하여금 그 뒤에 나오는 모든 것을 무시하게끔 한다. 복수행 주석은 무시될 코드 블록을 표시해 준다.
스크립트에 주석 삽입하기
<html>
<head>
<title>미리 포맷된 텍스트 쓰기</title>
<SCRIPT LANGUAGE="JavaScript">
<!--hide
var name = "" //사용자 이름
/* 프롬프트 대화 상자에서 사용자 이름을 저장하여 경고문으로 출력한다. */
function hello()
{
name = prompt("당신의 이름은?","")
alert("Welcome, " + name + ".")
}
// stophiding -->
</SCRIPT>
</head>
<body onLoad="hello()">
</body>
</html>
/*comment*/
- /*
한 행 이상에 걸쳐 있는 주석을 만들려면, 시작 부분에 주석 시작 표시를 한다. 이 것은 주석 끝까지 나오는 모든 것을 브라우저가 무시하게 만든다.
또는//
브라우저가 행의 나머지 부분을 무시해 버리게 만들려면, 이중 슬래쉬로 단일 행 주석을 나타낸다. 이렇게 하면 브라우저가 다음 행으로 건너뛰게 된다.
- comment
원하는 정보를 써넣는다. 위의 코드에서처럼 스크립트의 어느 부분이 실행되는지에 대한 간략한 설명을 써넣어야 한다.
- */
복수 행 주석의 끝 표시. 이것은 브라우저가 계속해서 스크립트를 읽게 해준다.
| 
기술국 관련 문의 :