JavaScript의 문법에는 연산자, 제어문, 전역함수가 있다.

연산자는 JavaScript의 가장 기초가 되는 구문으로 C 언어와 같은 동작을 한다. 

제어문은 연산자와 함께 JavaScript의 가장 기초가 되는 구문으로, C언어와 거의 유사하다.

전역함수는 브라우저에 내장되어 있는 함수로 별도의 객체를 지정하지 않고도 사용할 수 있
는 함수이다.

이들은 JavaScript를 사용하기 위해 최소한 알아두어야 할 문법으로 웹페이지에 JavaScript
를 사용한다면 반드시 익혀둘 필요가 있다.

연산자

  연산자는 JavaScript의 가장 기초가 되는 구문으로 C 언어와 같은 동작을 한다. C언어를
안다면 이 페이지는 건너 뛰어도 상관없지만 C언어를 모른다고 이 페이지가 어려운 것은
아니다. 간단한 산수에 불과할 뿐이다. JavaScript를 사용할 때 가장 기초가 되는 것들이다.

◈ 지정(Assignment) 연산자 

변수에 값을 지정하는 연산자이다. 

x = y

변수 x에게 값 y를 지정한다. 왼쪽에 있는 것이 변수이고 오른쪽에 있는 것이 지정할 값으
로 수학의 같다(equal)라는 개념이 아니고 값을 지정하는 것이다. 항상 변수는 왼쪽에 있고
지정할 값은 오른쪽에 위치한다. 

x = 5

로 지정하면 변수 x에게 정수 5를 저장해서 alert(x) 로 하면 5가 나온다. 

var x = 5
x = x + 5
alert(x)

로 하면 x는 10이 된다. 처음 5에서 5를 더해주고 x 에 더한 값을 지정해서 10으로 된다. 

◈ 산술(Arithmetic) 연산자

-는 빼기, +는 더하기, *는 곱하기, /는 나누기, ++ 는 증가 연산자, -- 는 감소연산자, 
-변수는 부정연산자 이다. 

var x = 4 / 2

로 하면 x는 2가 된다.  4나누기 2를 수행한 값이다. 

x = 5 % 2

위의 값은 1이 된다. %는 앞 값을 뒤의 값으로 나누었을 때의 나머지 값을 반환한다. 

var x = 5
x++

x는 6이다. x++ 는 x = x + 1 과 같은 작동을 한다. 즉, 1을 더해주고 1이 증가한 값을 지
정해 준다. 짧게 쓸 수 있어서 많이 사용한다. ++x도 비슷하지만 차이점이 있다. 

var x = 5; var y = 5
var w = 0; var z = 0
w = x++
z = ++y

로 하면 변수 w는 5가 되고 z는 6으로 된다. 뒤에 있는 ++은 지정식을 수행한 후에 증가연
산을 하고 앞에 있는 ++은 증가연산을 먼저 하고 지정식을 수행해서 w, z가 1이 차이가 나
게 된다. 

var x = 5
x--

x는 4가 된다. x = x - 1 과 같고 나머지 사항도 위의 ++과 같다. 

var x = 5
x = -x

x는 -5 이다. 변수에 "-" 빼기 기호를 붙이면 값의 부호를 바꾸는 부정 연산자로 양수는 음
수로 음수는 양수로 바꾼다. 

x + = y, x = x + y
x - = y, x = x - y
x * = y, x = x * y
x / = y, x = x / y
x % = y, x = x % y
x << = y, x = x << y
x >> = y, x = x >> y
x >>> = y, x = x >>> y
x & = y, x = x & y
x * = y, x = x * Y
x | = y, x = x | y

위의 지정식에서 왼쪽의 지정은 오른쪽의 지정과 같은 식으로 작동한다. 각 부호의 사용법
은 -는 빼기, +는 더하기, *는 곱하기, /는 나누기, %는 나누고 남은 나머지, <<, >>, >>>
는 비트연산, &, ^, |는 조건 비트연산이다.

◈ 비교(Comparison) 연산자 

두개의 값에서 크기를 비교하여 참, 거짓을 반환해 주는 것으로 보통 if, for, while 같은 조
건문에서 사용한다.

연산자 의미
== 같다
|= 같지 않다
> 크다
>= 크거나 같다
< 작다
<= 작거나 같다

if( 3 < 5 ) alert("참입니다")

로 3이 5보다 작으므로 "참입니다" 가 나온다. 

var x = 12
var y = 20
if( x >= y ) alert("참입니다")

로 하면 12가 20보다 같거나 크지 않으므로 거짓을 반환한다. 그래서 if문은 수행되지 않아
서 "참입니다"는 나오지 않는다. if () 조건문은 비교식이 참이면 자신의 문장을 실행하고 거
짓이면 실행하지 않는다. 자세한 설명은 아래의 조건문 페이지에서 설명하겠다. 

◈ 논리(Logical) 연산자

두개의 비교식을 검사하여 참, 거짓을 말해준다. 

연산자 의미
&& 두개의 비교식이 둘 다 참이면 참(true)을, 하나나 둘 다 거짓이면 거짓(false)을 반환한
다.
||= 두개의 비교식 중에서 하나 이상이 참이면 참을, 둘 다 거짓이면 거짓을 반환한다.
! 한 개의 변수가 참이면 거짓, 거짓이면 참을 반환한다.

if( 3 < 5 && 10 < 20 ) alert("참입니다")
if( 100 < 50 || 200 > 150 ) alert("참입니다")

위는 둘 다 "참입니다" 가 나온다. 

var x = 0
if( !x ) alert("참입니다")

로 하면 "참입니다" 가 나온다. 정수 0은 if문에서 거짓인데 반대로 하는 연산자 ! 를 지정
하여서 참으로 된다. 

◈ 특수 연산자 

new 는 브라우저 내장 객체인 Array, Boolean, Date, Function, Math, Number, String 객체
를 변수에 지정할 수 있게 한다. xx = new Function(인자)로 xx를 Function 객체의 생성자
로 만든다.

typeof 는 값이 어떤 종류인지 확인한다. 종류는 string, boolean, number, object, func,
undefined 이다. 비교한 값이 맞으면 true 값을 반환한다. 

var XX = "123A" 
if ( typeof XX == "string" ) 
  alert("XX는 string입니다.") 
else 
  alert("XX는 string이 아닙니다.") 

다른 값도 마찬가지로 확인할 수 있다 

void 는 링크의 'href'에서 JavaScript 구문을 지정하는 것으로 void()로 사용한
다. 괄호 안에 값을 넣어주면 그 값을 실행하는데 0이나 null은 아무런 실행을 하지 않는다.
주로 사용하는 곳은 링크에게 javaScript 구문을 지정시 문서를 이동하지 않게 하는데 사용
한다. 

< a href="void(0)">링크 < / a >
-->주의 : < a ..... < / a > 공간이 있는데 없이 붙여 써야함. 아래는 붙여쓸경우
예)<a href="void(0)">링크</a>

() ? : 는 괄호 속에 있는 값이 참이면 물음표 다음의 구문을, 거짓이면 colon(:) 다음의 구
문을 지정한다. 조건문 if else 문과 비슷한 작동을 하는 것이다. 

var xx = (true) ? 100 : 200

으로 하면 xx는 100으로 지정되고 (false)라면 xx는 200으로 지정된다. 

this 는 객체 자신을 말한다. 브라우저에 있는 내장 객체나 new 연산자로 만든 객체일 수
있는데 자기 자신을 가리킨다. 

function xx() {
   this.zz = "Hellow"
}
myThis = new xx()

로 하면 "myThis"는 함수 객체 xx의 생성자가 되어서 alert(myThis.zz)로 하면 "Hellow"가
나온다. 

◈ Bitwise 연산자

&, |, ^, >>, <<, >>>, >>> 는 0과 1로 이루어져 있는 bit 단위로 사용되는 연산자로 컴퓨
터에서 사용하는 모든 값은 0과 1로 구성되어 있는 이진수로 이루어져 있는데 이 0과 1을
조작하는 연산자이다. 

10 & 7

&는 Bitwise AND연산자이다. 1이나 0중에서 서로 같은 값을 가지고 있는 값을 지정하는데
위의 식은 1010 & 111 으로 컴퓨터 안에서 작동해서 이진수 10으로 되고 십진수로는 2이
다. 그래서 alert(10&7)은 2로 나온다. 

10 | 7

|는 Bitwise OR 연산자이다. 바(|)를 두개의 값 사이에 지정하여 사용한다. 1이나 0중에서
하나라도 1이면 1을 둘 다 0이면 0을 지정한다. 10 | 7은 1010 | 111 으로 작동하고 1111로
되어 십진수15가 된다. 

10 ^ 7

^는 Bitwise XOR 연산자이다. 1이나 0이 서로 다른 값을 가지는 값을 1로 같은 값을 가지
면 0으로 지정한다. 10 ^ 7은 1010 ^ 111 로 계산되고 1101로 되어 13이 된다. 

>>, <<, >>> 는 Bitwise Shift 연산자이다. >>는 오른쪽으로 비트를 이동시키고 <<는 왼
쪽으로 이동시킨다. 이동시킨 곳의 빈곳은 0으로 채운다. 음수를 이동시켜도 부호값은 보존
한다. 

10 << 2

<<는 왼쪽의 값을 오른쪽의 값만큼 왼쪽으로 bit 이동시킨다. 위의 지정은 1010에서 101000
으로 되어서 십진수 40으로 나온다. 10 >> 2 는 이진수 10이 되어 2로 나온다. 

>>> 는 음수 값을 오른쪽 bit 이동 시킬 때, 부호값을 보존하지 않는 연산자로 양수에서는
>>, >>>가 같은 동작을 한다. 

◈ 연산자 우선 순위

여러 연산자를 두개 이상 사용할 때에는 연산자 사이에 먼저 실행되는 우선순위가 있다. 아
래의 여러 연산자에서 가장 높은 우선순위는 함수와 배열이고 아래로 내려갈수록 순위가 낮
아진다. 

함수 배열
! ~ - ++ -- typeof void 
* / % 
+ - 
<< >> >>> 
< <= > >= 
== !=
&
^
|
&&
||
?: 
= += -= *= /= %= <<= >>= >>>= &= ^= |=  (이 줄은 오른쪽으로 우선순위가 높다)

이들 연산자를 여러 개 사용하여 우선순위를 구분하기가 복잡할 때, 가장 쉬운 방법은 가장
먼저 실행할 연산자를 괄호로 감싸주면 가장 높은 우선순위가 된다. 

var x = 5 * (4 + 2)

x는 30이다. 곱셈(*)이 덧셈(+)보다 우선순위가 높지만 괄호로 지정해 주어서 곱셈보다 먼저
실행하기 때문이다. 

▶ <head>...</head>에서 background-image 를 이용한 배경 설정

<head>

<style>
body { background-image:url(http://blogfiles15.naver.net/data11/2005/11/22/78/sweet_spy.jpg);
background-attachment: fixed;}
table { background-color: transparent; }
td { background-color: transparent; }
</style>

</head>

▶ Table 에서 background-image 를 이용한 배경 설정

<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TR>
<TD style="FONT-SIZE: 9pt; FONT-FAMILY: '돋움; 굴림'; TEXT-ALIGN: justify; background-image: url(http://blogfiles15.naver.net/data11/2005/11/22/78/sweet_spy.jpg);">
<pre>블로그에 배경화면 넣기입니다.
background-image: url 에 자신이 원하는
배경화면을 넣어보세요
^^)/
</pre></TD></TR></TABLE>

<예시>

<html>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TR>
<TD style="FONT-SIZE: 9pt; FONT-FAMILY: '돋움; 굴림'; TEXT-ALIGN: justify; background-image: url(http://blogfiles15.naver.net/data11/2005/11/22/78/sweet_spy.jpg);">
<pre><nobr>블로그에 배경화면 넣기입니다.
background-image: url 에 자신이 원하는
배경화면을 넣어보세요
^^)/ </nobr>
</pre>
</TD></TR></TABLE>
</body>
</html>

<결과>

JavaScript Reference
      
1.자바스크립트 기본문법
  [1] 기본형식
   1)
<script language="javascript">
스크립트내용
</script> 의 형식으로 스크립트를 기술한다
   2) 스크립트 블록은 주로 head태그나 body태그내에 기술한다
   3) 한문장이 끝날때마다 문장끝에 ;를 붙인다
   4) 변수는 대소문자를 구별하며 숫자로 시작해서는 안된다
변수 선언은 var 변수명=초기값; 형식으로 한다
예) var a=3;
   5) document.write구문 --> 문서내에 내용을 출력하는 구문
document.write구문내에서 문자는 ""로 감싸고 변수와 문자를 결합시는
기호를 사용한다
예)
var a=3;
var b=2;
var c=a*b;
document.write("a*b=" c);
=> 출력결과 a*b=3 즉 ""안에 쌓이 값은 문자로서그냥 출력된다
   6) 산술연산자
더하기, -빼기, *곱하기, /나누기, %정수나머지
   7) 관계연산자
> 크다, >=크거나 같다, < 작다, <=작거나 같다, == 같다, != 같지않다
   8) 논리 연산자
!(부정) ,&&(그리고:둘다 참일때만 참),||(또는:둘중하나만 참이어도참)
   9) 함수선언과 호출
함수선언은 function 함수명(인자들){ 함수내용;} 의 형식으로한다
함수호출은 이벤트 핸들러에 의해 이벤트핸들러="함수명(인자들)" 의
형식으로 한다
예)
function myFun(a,b){
var c=a b;
window.alert(c);
}

이런씩으로 코딩되었다면 body태그의 onload이벤트 핸들러(문서가 로드될때호출됨)에 의해 myFun() 함수가 호출되는데 그인자값으로 3과4
를 넘긴다 . a에는 3 b에는 4가 각각 입력된다
그리고 경고창으로 두개를 더한값(c) 7을 띄운다

      
  [2] 제어문
   1) for문 - 동일한 작업의 반복수행
     구조는
for(변수명=초기값;반복종료기준;증감값){
반복수행 내용;
}
의 형식으로 한다
예)
for(i=0;i<3;i ){
document.write("앗사
");
}
i 은 i=i 1 과 같은 의미임.
i--는 i=i-1 과 같은 의미임.
이구문은 i=0에서 시작해서 3보다 작은동안(즉i=0,1,2)총 3번 반복 i를 1식증가하여 앗사와 줄바꿈을 반복 출력한다
반복문에도 몇가지 더있지만 for만으로도 충분합니다...
      
   2) if else구문 - 조건에 따른 제어
     구조는
if(조건식){
조건식이 참일때 수행될문장;
}else{
조건식이 거짓일때 수행될 문장;
}

여기서 조건식이 거짓일때 수행할 문장이 없다면 else부분은 생략할수있다
예)
var a=3;
if(a>5){
alert("a는 5보다 큰값이다");
}else{
alert("a는 5보다 작은값이다");
}
여기서 a는 5보다 작으므로 조건식이 거짓이다 따라서 else이후의 문장이
수행되어 경고창으로 a는 5보다 작은값이다라는 메세지가뜨게 된다
if,else구문대용으로 삼항연산자 ? 기호 가있으나 처음부터 넘 많이 알려고하면 머리 아플것이므로 일부러 설명하지 않겠습니다...
꼭필요한 구문만 설명합니다

   3) switch case 구문 - 조건에 따른 제어
     구조는

switch(변수){
case(변수의 값1):
실행문1;
break;
case(변수의 값2):
실행문2;
break;
..... 계속 case더 있을수 있슴
default:
위조건중 하나도 일치하는것이 없을때 실행할 문장;
break;
}

예)
var a=5;
switch(a){
case(1):
alert("1이다");
break;
case(2):
alert("2다");
break;
case(3):
alert("3이다");
break;
default:
alert("a는 1,2,3은 아니다");
break;
} => 수행결과 a는 1,2,3은 아니다 라는 경고메세지가 뜨게 된다
      
  [3] 내장함수
   1) eval 
     문자열을 숫자로 변환하여 계산결과를 반환한다
     그외에도 루프를 사용해야 하는 부분에서 다양하게 쓰인다
      
   2) parseInt
     문자열로 표시된 정수값을 숫자로 변환한다
     예)
var a="3";
var b="4"; //a,b는 따옴표로 둘러싸여있으므로 현재 문자로 취급됨
var c1=a b; --> c1="34";가 입력된다
var c2=parseInt(a) parseInt(b); --> parseInt에 의해
a,b는 숫자로 변환되며 기호는 덧셈으로 인식되어 c2에는 7이 입력된다
      
   3) parseFloat
     문자열로 표시된 부동소수를 숫자로 변환한다
      
  [4] 문자열 관련 함수
   1) length - 문자열의 길이
     예)
var str="abcdeabc";
var sLen=str.length; sLen에는 8이 입력된다
   2) charAt - 특정위치의 문자
     예)
var str="abcdeabc";
var myChar=str.charAt(2); => myChar에는 "c"가 입력된다
인덱스가 0부터시작하므로 0,1,2 즉 세번째 문자 c가 입력된다
   3) indexOf - 특정문자가 첫번째로 나타나는 위치
     예)
var str="abcdeabc";
var myIdx=str.indexOf("b"); => myIdx 에는 b가 처음으로 나타나는위치 1 이 입력된다
   4) lastIndexOf - 특정문자가 마지막으로 나타나는 위치
     예)
var str="abcdeabc";
var myIdx=str.lastIndexOf("b"); => myIdx에는 b가 마지막으로 나타나는 위치 6이 입력된다
   5) charCodeAt - 특정위치의 문자의 문자코드
     예)
var str="abcdeabc";
var myChar=str.charCodeAt(2); => 세번째 위치의 문자 "c" 의 문자코드인 99가 입력된다
   6) split - 문자를 특정문자를 기준으로 분리한다
     예)
var str="abc-dea-bc";
var partStr=str.split("-");
partStr에는 abc,dea,bc 가 입력된다
partStr[0]에는 abc가 partStr[1]에는 dea가 partStr[2]에는 bc가 입력된다
      
  [5] alert,prompt,confirm
   1) alert - 단순한 경고창을 띄운다.
     alert("메세지 내용");
      
   2) prompt - 사용자로부터 데이타를 입력받는 창을 띄운다
     구조 var 변수명=prompt("메세지내용","기본입력값");
예)
var n=prompt("숫자를 입력하세요","3"); => 숫자를 입력하세요라는 메세지와 기본적으로 입력값 3이 입력된 prompt창이 뜨고 사용자가 여기
숫자를 넣고 확인을 누르면 n에 그값이 입력된다
      
   3) confirm - 사용자에게 다음작업처리의 방향을 물어본다
     주로 if등의 조건제어문과 같이 쓰인다.
확인을 누르면 true반환하고 취소를 누르면 false를 반환한다
구조
if(confirm("확인받을 메세지")){
확인을 눌렀을때 실행할문장;
}else{
취소를 눌렀을때 실행할문장;
}
예)
if(confirm("당신머리는 큽니까?")){
alert("좋으시겠습니다 --;;");
}else{
alert("다행입니다");
} 
      
      

 
2.Event Handler
    
  [1] 이벤트란?
   쉽게 설명해서 어떤웹페이지에서 일어나는 사건.일등을 말합니다.
예를들어 마우스를 클릭한다든가 더블클릭한다든가 브라우저를 닫는다든가 특정객체에 포커스를 가져간다든가 하는 모든것을 이벤트라 할수있습니다.
      
  [2] 이벤트 핸들러란?
   어떤 이벤트가 일어났을때 어떤처리를 해줄것인지를 정의하는 데 사용합니다
      
  [3] 이벤트 핸들러의 종류와 의미
   모든 이벤트 핸들러를 설명하지는 않습니다. 모든걸 한번에 다할려면 골깨집니다.
웹페이지를 만드는데 기본적으로 알아야 할것들만 설명하겠습니다.
      
   onLoad 문서가 로드될때
   onUnLoad 문서를 닫을때 다른 페이지로 이동하려 할때
   onFocus 문서에서 특정객체가 활성화 되었을때,특정입력박스에 포커스가 이동되었을때
   onBlur 문서에서특정객체가 비활성화 되었을때,
특정입력박스에서 포커스가 다른곳으로 떠날때
   onClick 버튼이나 이미지를 클릭했을때
   onDblClick 버튼이나 이미지를 더블클릭 했을때
   onChange 셀렉트박스나 파일 입력상자의 내용이 변경되었을때
   onMouseOver 특정객체위에 마우스를 올렸을때
   onMouseDown 마우스를 눌렀을때
   onMouseOut 특정객체위에 있던마우스가 영역밖으로 나갈때
   onMouseUp 마우스를 눌렀다가 놓았을때
   onKeyDown 키보드를 눌렀을때
   onKeyUp 키보드를 눌렀다 놓을때
   onReset 폼내용이 리셋버튼으로 초기화 될때
   onSubmit 폼내용이 전송되려고 할때
      
      

3.Object
  
  -객체(object)란?
   자바스크립트에서 객체란 브라우저창,이미지,입력양식등...웹문서속의 각각의 모든
항목들을 말한다고 보면 되겠습니다
  -속성이란?
   각 객체가 지닌 특성을 말합니다.
사용법 : 객체명.속성="속성값";
예) window.status="반가워여"; --> 브라우저 상태바에 반가워여라는 글자를 보입니다.
  -메서드란?
   각 객체에게 어떤 동작을하도록하는 명령어라고보면 됩니다.
예를들어 window객체의 close라는 메서드는 브라우저창에게 창을닫도록 명령합니다.
사용법 : 객체명.메서드(인자값);
예) window.alert("경고한다.밥무라"); --> 경고한다.밥무라라는 메세지로경고창을띄웁니다
    
  * 자바스크립트와 DHTML
   객체의 메서드나 속성중에서 근래에는 잘쓰여지지 않는 것들도 있습니다, style을
이용한 다이나믹html이 대체되어 쓰이는경우가 많이 있습니다.
예로 문서의 배경색깔을 동적으로 변경시키고자 할때 예전에는
document.bgColor="#ff00ff";이렇게 썼으나
요즘은 document.body.style.background="#ff00ff";로 쓰는경우도 많이 볼수있습니다.
    
    
  [1] window 객체
   속성 closed 브라우저 창이 닫혔는지를 체크
     opener 현재창이 새창일경우 현재창을열개한 브라우저창
     status 브라우저의 상태표시줄의 정보
     screenLeft 윈도우화면 좌측상단모서리에서 브라우저 상단까지의
x축 거리
     screenTop 윈도우화면 좌측상단모서리에서 브라우저 상단까지의
y축 거리
        
   메서드 alert 경고창을 띄운다
     blur 현재창을 최소화한다.포커스를 잃게 한다
     focus 현재창에 포커스를 준다,활성화 시킨다.
     moveTo(x,y) x,y좌표로 브라우저를 이동시킨다
     moveBy(dx,dy) 현재위치에서 dx,dy만큼 창을 이동
     resizeTo(w,h) 브라우저창 크기를 w(폭),h(높이)로 변경한다
     resizeBy(dx,dy) 브라우저창 크기를 dx,dy만큼 변경한다
     open 새창을 연다
     close 브라우저를 닫는다
     print 문서를 인쇄한다
     setTimeout 특정시간후에 특정작업을 호출합니다
     clearTimeout setTimeout으로 설정한 Timer를 해제합니다
        
       예제보기
  [2] document 객체
   속성 title 문서의 제목
     lastModified 마지막으로 수정된 날짜
     bgColor 문서의 배경색
     fgColor 문서의 글자색
     linkColor 링크의 색상
     alinkColor 링크 클릭시의 색상
     vlinkColor 방문했던 링크의 색상
        
   콜렉션 -문서에 존재하는 여러개의 이미지들이나 링크들 폼들에대한 정보를 배열형식
으로 저장하고있는 속성을 말합니다.
     forms 문서에 여러개의 폼이 있을경우 각폼들은 폼이름대신
document.forms[index]으로 접근할수있습니다
index는 0부터시작합니다.
     links 문서에서의 a href태그들의 정보를 가진 콜렉션
     images 문서에서의 모든 img태그들의 정보를 가짐
     applets 문서에서 여러개의 자바애플릿을 사용했을경우 모든애플릿들의 콜렉션
     embeds 문서에서 embed태그의 콜렉션
        
   메서드 write 문서에 내용쓰기
     writeln 문서에 줄바꿈을 포함한 내용쓰기
        
       예제보기
        
  [3] screen 객체
   속성 width 시스템 스크린의 폭(픽셀)
     height 시스템 스크린의 높이(픽셀)
     availWidth 시스템 스크린중 브라우저의 문서영역 폭
     availHeight 시스템 스크린중 브라우저의 문서영역 높이
        
       예제보기
        
  [4] navigator 객체
   속성 userAgent 브라우저 전체정보
ex) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
     appCodeName 브라우저 CodeName
ex) Mozilla
     appVersion 브라우저 Version
ex) 4.0 (compatible; MSIE 6.0; Windows NT 5.0)
     appName 브라우저 이름
ex)Microsoft Internet Explorer
     cookieEnabled 브라우저 쿠키이용 가능여부
반환값 : true/false
   메서드 javaEnabled 브라우저의 자바이용가능여부
반환값 : true/false 
        
       예제보기
        
  [5] history 객체
   속성 length history목록(방문한사이트목록)의 갯수
        
   메서드 go(숫자) 지정숫자만큼 사이트이동
ex) go(2) 앞으로 2번째로 이동
     back 현재사이트 기준에서 이전사이트로 이동
     forward 현재사이트 기준에서 다음사이트로 이동
        
       예제보기
        
  [6] Event 객체
   속성 keyCode 이벤트를 일으킨 키보드의 키코드값
     altKey altKey를 눌렀는지의 여부
     ctrlKey ctrlKey를 눌렀는지의 여부
     shiftKey shiftKey를 눌렀는지의 여부
     button 마우스 오른쪽버튼을 눌렀는지
왼쪽버튼을 눌렀는지의 여부
     clientX 마우스 클릭시 브라우저기준의 x축거리
     clientY 마우스 클릭시 브라우저기준의 y축거리
   * srcElement 이벤트가 일어난 엘리먼트
        
       예제보기
        
  [7] Form 관련객체
   input type="text" 각값은 document.form이름.엘리먼트이름.value 로
접근할수 있다
   input type="password"
   input type="checkbox" 어떤 값이 선택되었는지는 루프를 돌며 checked속성이 true인지 false인지로 체크할수있다
   input type="radio"
   input type="file" 파일업로드를 위한 객체로서 파일값이 변할때
onChange이벤트 핸들러를 사용한다
   input type="button" submit이나 reset버튼의 제한된 기능에 다른여러기능을 추가적으로 스크립트로 제어할때는
input type="button"을 쓰고 onClick이벤트
핸들러를 사용한다
   input type="submit" 폼을 전송한다
   input type="reset" 폼을 초기상태로 reset한다
   select 선택값은 document.forms이름.엘리먼트이름.value로접근할수있습니다
      
       예제보기
       
        
   속성 disabled 버튼이나 셀렉트박스등을 클릭 선택하지 못하게 합니다
     readonly 텍스트 박스의 내용을 읽기 전용으로 합니다
        
       예제보기
        
        
    
        
  [8] Date 객체
   특징 다른 객체와 달리 new연산자와 생성자 함수 Date()를 사용해서 객체인스턴스를
생성한후 그메서드들을 이용할수있다
사실 생성자함수에는 몇가지유형 인자를 가지는 유형이 있으나 인자없는 단순한 Date(); 함수만으로도 충분하다 ..다른 인자를 가지는 생성자들까지 공부할려면
이야기주제는 자바스크립트라기보다 자바에 가까와 질듯하다...
        
   메서드 getTime 1970년 1월1일 오전0시0분0초로 부터 현재까지의 시간을 m초로 반환한다
     getYear 현재의 년도를 반환한다
     getMonth 현재의 월을 반환한다 (1월:0 2월:1...)
     getDate 날짜(1~31)를 반환한다
     getHours 현재의 시간을 반환한다 (5시 --> 17)
     getMinutes 현재의 분을 반환한다
     getSeconds  현재의 초를 반환한다
     getDay 요일(0:일요일 1:월요일)에 대한 숫자를 반환한다
        
   사용예 초를 이용한 랜덤 숫자 생성방법
var myDate=new Date();
var sec=myDate.getSeconds(); //이렇게 하면 sec에는 일단 0~59라는 숫자가 들어있다
var rndNum=sec%7; // %나머지를 구하는 연산자
따라서 rndNum에는 0~6중의 한숫자가 입력된다...
이해가 안되는것은 아닐것으로 보지만 그래도 설명하자면 어떤 수를 7로나누면
나머지는 반드시 0~6중에 하나이다... 아시겠져???
시간은 계속변하므로 웹페이지상에서 랜덤으로 이미지를 보여주고자 할때 사용하면 된다..
사실랜덤숫자 생성법은 다른 방법도 있겠지만 다른방법은 한번 생성된 숫자가
나중에 다시 생성될 가능성이 많아 랜덤의 의미가 떨어지는것 같다..
        
       예제보기
        
   지금까지 자바스크립트에서 사용되는 객체에 대해 개략적으로 알아 보았습니다... 이해가 안되신다면 한번더 읽어보시기 바라면 예제의 소스보기를 눈여겨 보시면 차차 이해가 될것입니다. 이해를 돕기위해 코드에 불필요한 부분은 모두 배제시켰습니다 모든 객체에 대해 알필요까지는 없습니다. 위 객체들에 대해 이해한후 자꾸 자바스크립트에 익숙해지다 보면 필요할때마다 정보를 보면서 자바스크립트를 이용하기만 하면 됩니다 --;;
        
4.CSS(stylesheet)
  stylesheet ?
걍 일반적인 태그의 한계(이미지나 테이블등의 정확한 위치나 테이블내의 셀과 글자
사이의 간격,줄간의 간격,링크의 색깔등)를 극복하고 나아가 동적인 웹페이지를 만들기위한것(?) 뭐 정의가 그렇게 중요한건 아니고 어디서먹느냐 어떻게 사용하느냐가 우선적인 문제일것입니다...
이 사이트가 추구하는바 속성으로 웹페이지 기본을 마스터 하자 이기때문에 모든것을
설명하지는 않습니다.기본적이고 꼭필요한것 만 설명합니다. 나머지는 그때그때 문서
찾아가며 적용해도 됩니다...
      
  [1] css
   1.태그와 태그사이에

2.스타일 정의 파일을 외부에따로 두고 불러오기

3.각태그내에서 정의하기
<태그 style="속성:값">
      
  [2] 선택자
   1) Type선택자
     문서내의 태그엘리먼트에 대한 스타일을 지정한다
예제)
=> 문서내의 input태그들은 모두 글자색을
붉은색으로 정한다는 의미임
      
   2) Class선택자
     문서내의 각요소들에 class속성을 부여할수 있는데 동일한 클래스가 부여된 태그들에 대해서는 동일한 스타일을 지정한다
예제)

본문부분

abc

abc

아래의 div태그의 클래스 속성이 redDiv로써 위에 정의된 클래스명과 같다.따라서 이div 의 배경색은 붉은색이 된다

      
   3) ID선택자
     문서내에 각요소에 대해 오직 하나의 id(다른것과 같아서는 안됨)를 지정할수 있는데 각 아이디가 부여된 태그에대해서 스타일을 지정한다

본문부분

굵은글씨
=> 이 div태그의 아이디가 special이므로 이태그내의 텍스트는 굵은 글자로 나타난다
      
     *head태그내에서 스타일정의할때 여러태그들을 중복해서 정의할수있다

      
  [3] 자주쓰이는 스타일 
   1) 색상
글자색 -> color:색상명 또는 rgb값
배경색 -> background:색상명 또는 rgb값
*** background-color로 써도 됨
      
   2) 배경그림
background:url(배경그림경로)
*** background-image로 써도 됨
-배경그림을 특정위치에 고정시키고 반복하지 않기
=>body{background:url(파일경로명) x위치 y위치 no-repeat fixed}
여기서 x위치 y위치는 %값이나 px값 사용
      
   3) 커서 모양변경
     원래 링크태그(a)에만 마우스를 올렸을경우 손모양으로 바뀌나 코딩하다보면 span태그나 div태그 또는 td태그내에 바로
onclick="location.href='이동파일명'" 이런씩으로 사용할경우
커서가 손모양으로바뀌지 않는다 이때 다음 스타일을 사용한다
 
      
   4) font속성
     물론 기본속성을 그대로 쓰려면 아래 스타일을 지정할 필요없다
font종류-> font-family:font명
font체 -> font-style:italic(기울임)
font굵기 -> font-weight:bold,bolder(굵게,더굵게)
font크기 -> font-size:폰트크기 px이나 pt
      
   5) border테두리
     주로 테이블의 셀이나 레이어태그(div,span)등의 테두리 설정에쓰이나
거의 모든 태그에 사용가능하다
     border:색상 크기 형태; 로사용하거나
테두리중 특정부분 예로 위쪽테두리만 주고싶을경우는
border-top:색상 크키 형태;

예)
=> 테이블의 현재셀의 위쪽테두리는 1픽셀의 회색실선으로 하고 아래쪽 테두리는 1픽셀의 검은색 점선으로 한다는 의미임
      
   6) text-decoration
     글자에 줄을 긋거나 링크에서 줄을 없앨때 사용된다
속성값으로 underline -> 밑줄긋기
overline -> 윗줄긋기
line-through -> 글자를 가로질러 긋기
none -> 링크에밑줄 없애기
      
   7) 위치,크기관련 속성
     위치 : position:absolute;left:수평위치;top:수직위치;z-index:쌓이는 순서;
크기 : width:폭;height:높이;
overflow -> 내용이 컨테이너(내용을 포함하는 레이어)보다 클경우
속성값으로 hidden 넘치는 부분은 숨긴다
auto 필요한 방향으로만 스크롤바를 생성한다
scroll 상하,좌우스크롤바를 모두 생성한다
      
   8) 여백 관련
     -> padding : 컨테이너와 내용사이의 거리
예)  => 이셀내의 글자는 이셀의 좌측에서 10px떨어져서 부터 시작한다
-> margin : 컨테이너와 컨테이너 사이의 거리
예) 이테이블은 브라우저 좌측에서 20px부분에서 시작된다         
   9) text-align 글자 정렬
     특정 컨테이너(레이어나 테이블의셀등에서의 글자의 정렬위치)
속성값 : left , right , center

    
5.DHTML
  이 내용도 마찬가지로 DHTML의 모든것을 설명하지는 않습니다.
가장기본적이고도 꼭 필요한 내용만 설명합니다.
아래 내용만 이해하신다면 다른 것들은 모두 여러분이 응용하실수 있을것입니다
    
  [1] 레이어 보이기 감추기
   -스타일의 visibility 속성을 이용합니다
... 스크립트 방법...................................
=레이어를 감출려면 -> 레이어ID.style.visibility="hidden";
=레이어를 보일려면 -> 레이어ID.style.visibility="visible";
   예제보기
    
  [2] 레이어 크기 변경하기
   -스타일의 pixelWidth,pixelHeight 속성을 이용합니다
... 스크립트 방법 ...................................
=레이어 폭 변경 -> 레이어ID.style.pixelWidth=폭(숫자);
=레이어 높이 변경 -> 레이어ID.style.pixelHeight=높이(숫자);
   예제보기
    
  [3] 레이어 위치 변경하기
   -스타일의 pixelLeft,pixelTop 속성을 이용합니다.
... 스크립트 방법 .................................
=레이어 좌우위치 변경 -> 레이어ID.style.pixelLeft=x축방향위치(숫자);
=레이어 상하위치 변경 -> 레이어ID.style.pixelTop=y축방향위치(숫자);
   예제보기
    
  [4] 레이어 시간적 이동
   -스타일의 pixelLeft,pixelTop 속성과 함께 window객체의 setTimeout
메서드를 이용합니다. setTimeout 메서드를 함수내에 선언하여 반복호출합니다
예)
function goLeft(){
if(myLayer.style.pixelLeft < 200){
//만약 myLayer의 x방향위치가 200px보다 작다면
myLayer.style.pixelLeft=myLayer.style.pixelLeft 10;
//현재 myLayer의 x방향위치를 현재위치에 10을 더하라는 말
setTimeout("goLeft();",100);
//0.1초 뒤에 다시goLeft함수가 호출되어 myLayer위치가 200에 도달할때
//까지 계속이동하고 200에 도달하면 멈추게 됩니다
}

   예제보기
    
  [5] 그외의 속성변경
   예로 마우스를 특정 레이어 위에 올렸을경우 내렸을경우 배경색변경은

onmouseout="this.style.background='gold'" >
이렇게 코딩하면 이레이에 마우스를 올리면 배경색은 green으로 이레이어에서
마우스를 내리면 배경색은 gold로 바뀌게 됩니다

또다른예로 마우스를 특정레이어위에 올렸을경우 내렸을경우 글자크기변경은

onmouseout="this.style.fontSize='10px'">
이렇게 하면 이레이어에 마우스를 올리면 글자크기는 20픽셀로 되고 이레이어에서마우스를 내리면 글자크기는 10픽셀로 됩니다

*이때 주의 할것은 fontSize할때 "S"는 대문자입니다..
*다른경우도 마찬가지로 z-index같은 경우도 -로연결된 스타일은
자바스크립트로 접근시 -다음의 문자를 대문자로 해야 합니다
예-> background-image => 스크립트에서는
레이어ID.style.backgroundImage ...
또한 z-index => 스크립트에서는 레이어ID.style.zIndex 처럼
스타일에서의 "-"문자 뒤의 알파벳은 항상 대문자로 해주어야 합니다...