웹 페이지에 작은 꽃(눈)들이 흩날리는 효과를 만들 수 있고, 마우스를 따라 다니는 글자 효과를 만들 수 있다. 이러한 다양하고 생동감 있는 효과들은 HTML이 아닌 자바스크립트로 구현된 것이다.
HTML에서 작성한 입력 상자에 입력받은 사용자의 정보를 서버 측으로 넘겨주기 위해[보내기]버튼을 누른다.
이때 버튼을 누르는 사건을 사용자가 브라우저에 발생시킨 이벤트로 보고 이를 처리한다.
이벤트의 발생이 일어났을 때 이를 알아내어 처리할 수 있도록 하는 활동들이 자바스크립트를 통하여 가능하다.
조금 어려운 이야기처럼 들릴지 모르겠지만 특정 사이트의 웹 페이지에 접속한 후 일어나는 모든 일들은 서버가 모두 처리하는 것이 아니다. 해당 사이트 서버의 부하를 줄이기 위해서 대화 상자를 통해서 인사말을 하거나,
경고 메시지를 보내는 등의 간단한 작업은 스크립트언어를 통해서 사용자(클라이언트)들의 컴퓨터에서 직접
실행한다.
사용자들의 컴퓨터의 성능이 빠른 속도로 발전하면서 대화상자의 처리나 자료 검증과 같은 간단한 처리들은
사용자(클라이언트)들의 컴퓨터에서 직접 실행한다. 자바스크립트를 사용하는 이유도 서버가 아닌 클라이언트에서 간단한 작업이 이루어지도록 하기 위한 것이다.
|
서버와 클라이언트
서버와 클라이언트는 웹 환경에서 사용되는 언어이다. 어원적으로 해석하면 서버는 정보를 제공하는
측이고 클라이언트는 서버에 요청하는 측이다. 홈페이지를 제작하여 사용자에게 정보를 제공하는 측을
서버로 볼 수 있으며, 클라이언트는 웹 브라우저를 이용하여 해당 사이트의 홈페이지 정보들을
제공받는 쪽이라고 할 수 있다. |
-----------------------------------------------------------------------------------------------------------자바스크립트의 기본 구조.
자바스크립트는 html 문서에 <script> 태그를 삽입한 후 작성한다. <script> 태그는 자바스크립트 전용 태그가
아니므로 language 속성에 "javascript"를 지정해야 한다.
사용법,
<script language = "javascript">
자바스크립트 코드
</script>
자바 스크립트는 3가지 방법으로 기술한다.
1. html의 <head>. . .</head>사이에 작성.
2. html <body> . . . </body> 사이에 작성.
3.외부 파일(js형식)로 작성하여 source 속성을 이용하여 삽입한다.
1) head 부분에 자바스크립트 포함하기---------------------------------------------------------------------
html 문서의 여러부분에 자바스크립트를 삽입할 수 있지만 가장 안전하고 일반적인 형태는 head부분에 삽입하는 것이다. head부분에 삽입하면 다른 문장들에 비해 먼저 해석되어 처리된다는 장점이 있다.
head부분에 변수의 초기화나 사용자 정의함수를 기술한다.
페이지를 읽는 도중 중단되었을 경우 에러를 발생하므로 페이지가 읽혀지기 전에 수행되는 영역인 head부분에 자바스크립트를 기술한다. 그러므로특별한 경우가 아니면 head에 포함하는 것이 바람직하다.
ex)
<html>
<head>
<title>
자바스크립트의 기본구조
</title>
<script language ="javascript">
document.write("head 부분에 자바스크립트 문장을 기술합니다.");
</script>
</head>
<body>
<hr> 본문이 여기서부터 시작됩니다.
</body>
</html>
★★★★★★★꼭 세미콜론 찍자!!★★★★★★★
이렇게 웹 브라우저에 출력하고 싶은 내용은 document.write("쓰고픈내용");
이렇게 쓴다!!
2)body 부분에 자바스크립트 포함하기-------------------------------------------------------------------
일반적이지는 않지만 body 부분의 문장이 수행되는 도중에 자바스크립트 문장들이 반드시 기술되어야 하는
경우에 사용한다. 자바스크립트 문장을<body>태그에 추가한다.
ex)
<html>
<head>
<title>
자바스크립트의 기본구조
</title>
</head>
<body>
본문이 여기서부터 시작됩니다.
<hr>
<script language ="javascript">
document.write("head 부분에 자바스크립트 문장을 기술합니다.")
</script>
</body>
</html>
3) 자바스크립트 외부에서 불러들이기---------------------------------------------------------------------
자바스크립트로 구성된 내용을 완전히 독립된 다른 파일로 작성한다. 이 때 파일의 확장자는 "js"로 지정!!
작성된 자바스크립트 파일을 html문서에 삽입하는 방법은 <script>태그의 src 속성에 해당 자바스크립트
파일을 지정한다.
"js" 확장자를 붙인 파일은 순수하게 자바스크립트로만 구성되어야 한다.
<script>는 html문서 내에서 스크립트 구문이 시작되는 위치를 알려주기 위한 html태그이므로 자바스크립트
파일에서는 제외되어야한다.
ex)
ㅡ> 외부 파일로 자바스크립트 작성 (파일명 : js01-03.js)
document.write("여기는 자바스크립트 파일 내부입니다.<br>");
document.write("html 파일에서 이 자바스크립트 파일을 삽입하면 <br>");
document.write("html 파일에 의해 이 부분이 실행됩니다.<br>");
ㅡ>외부 자바스크립트 파일을 포함하기 (파일명 js01-03.html)
<html>
<head>
<title>
자바스크립트의 기본구조
</title>
html 파일이 시작됩니다.<hr>
<script language="javascript" src="C:\Users\김창호\Desktop\js01-03.js">
</script>
</head>
<body>
본문이 여기서부터 시작됩니다.
</body>
</html>
★★★★★★★★★★★★여기서 주의할점!!★★★★★★★★★★★★★
document.write("여기는 자바스크립트 파일 내부입니다.");
여기서 이 줄 다음에 한 줄을 띄우려고 <br>을 쓸때,
내용 끝나는 지점에 써야함 꼭!!
document.write("여기는 자바스크립트 파일 내부입니다.<br>");
-----------------------------------------------------------------------------------------------------------
자바스크립트 부분을 주석 문으로 처리하기
브라우저의 종류나 버전에 따라서 자바스크립트를 지원하지 않는 경우가 있다.
지원되지 않는 브라우저에서는 자바스크립트 소스가 그대로 노출이 된다.
자바스크립트를 지원 받지 못하는 브라우저에서는 <script> 태그 다음에 나오는
<!-- 주석 //--> 태그 사이의 내용들을 읽을 수 없도록 한다.
자바스크립트를 지원하는 브라우저의 경우에는 <!-- //--> 기호의 영향을 받지 않고 정상적으로 동작한다.
따라서 <script> 태그를 시작 한 이후에 주석문으로 처리하고 </script> 태그를 끝내기 전까지 주석처리한다.
ex)
<html>
<head>
<title> 자바스크립트의 기본구조</title>
<script language = "javascript">
<!--
document.write("자바스크립트 부분을 주석 문으로 처리하였습니다.");
//-->
</script>
</head>
<body>
</body>
</html>
참고로, html에서의 주석은 <!-- 주석 --> 이거였는데 //(슬러쉬)만 추가되었다.
---------------------------------------------------------------------------------------------------------
★★★★★★★★★★★★★★지금까지 정리★★★★★★★★★★★★★★
지금까지 느낀 걸 말하자면, 자바랑은 약간 다른점이 있다.
원래 내 생각대로라면 문법(태그)은 "큰따옴표" 안에 있으면 안되는데,
얘넨 안에다가 넣는다. 그래서 막 출력하고픈 내용이랑 문법이랑 큰따옴표안에 섞어쓴다.
이상하지만 외워야지뭐
System.out.print(); 얘와 같은것은 document.write(" "); 이것이다.
주의할점은, println이 아니라는것, <br>을 써서 직접 띄어줘야함!!
그것도 "큰따옴표" 안에다가!!!
