태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

1. 인터프리터 언어인 자바스크립트



2. html 내 사용
<script language="javascript">
<!--

//-->
</script>


HTML에서는 여러 줄의 주석을 처리할 때 <!-- 와 --> 를 사용한다. 자바스크립트를 인식하지 못하는 브라우저에서도 HTML 주석은 인식하기 때문에 <!-- 와 --> 사이의 내용은 모두 주석으로 처리해서 실행하지 않는다.

 자바스크립트를 인식하는 브라우저에서는 <!-- 를 소스의 시작으로 본다. -->를 만나면 자바스크립트 안의 연산자로 인식할 수 있기 때문에 그 줄을 무시하도록 하기 위해 --> 앞에 // 를 사용한다.


3. 주석
한줄 주석
//

여러 줄 주석
/*
*/



4. ; 사용
한줄에 여러 개의 문장을 쓸 경우 구분을 위해 사용한다.



5. 변수
1. 첫 글자는 영문 대문자 또는 소문자이거나 언더스코어(_)여야 한다. 숫자는 안된다.
2. 변수 이름 사이에 공백을 두면 안된다.
3. 대소문자를 구분을 하며, 키워드(예약어)를 쓰면 안 된다.

변수 선언 방법
var 변수 이름 = 선언 내용




5. 자바스크립트의 키워드
abstract, boolean, break, byte, case, catch, char, class, const, continue, default, do, double, else, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, pacakage, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, var, void, while, with




6. 자바스크립트의 데이터 유형
숫자(number)       따옴표가 붙지 않는 모든 숫자         ex) 123
문자열(string)       따옴표 안에 있는 여러 문자들          ex) "글자", "123"
불린(boolean)      참과 거깃으로 구분되는 논리값         ex) true, false
null                     키워드, 아무 값도 없음                 ex) null


frue와 false는 1과 0이란 숫자로 표현할 수도 있습니다. 여기서 1은 참(true)을 나타내고, 0은 거짓(false)을 나타낸다. 그리고 true 대신 사용하는 1은 0이 아닌 숫자로 사용해도 된다.  즉, 0은 거짓이고 0이 아닌 숫자는 참이 되는 것이다.
 그러나 자바스크립트에서는 0이나 1보다는 true나 false를 많이 사용한다. 더구나 네스케이프 브라우저의 경우, 숫자 표현을 완벽하게 지원하지 못하기 때문에 논리형을 표현할 때 숫자를 사용하지 않는 것이 좋다.


** 오버플로 : 실수 연산의 결과로 나온 값이 그것을 저장할 레지스터나 기억 장소의 용량보다 큰 것
** 언더플로 : 실수 연산의 결과가 컴퓨터가 표현 할 수 있는 가장 작은 양보다 작을 때 발생

*** 자바스크립트는 실수 계산에 약하다


7, 연산자
산술 연산자 : 수학에서 사용하는 숫자 관련 연산자
문자열 연산자 : 문자열을 합할 때 사용하는 연산자
비트 연산자 : 데이터를 저장하는 최소 단위인 비트별로 조작하는 연산자
할당 연산자 : 변수에 특정값을 저장할 때 사용하는 연산자
비교 연산자 : 두 가지 수나 문자열을 비교할 때 사용하는 연산자
논리 연산자 : 참과 거짓을 구별하는 연산자
데이터 유형 연산자 : 특정 자료의 데이터 유형을 알아내는 연산자


단항 연산자 : 피연산자가 하나만 필요한 연산자 (ex. ++, --, !)
이항 연산자 : 피연산자가 두 개 필요한 연산자 (ex. +, -)




7-1 산술연산자
+    더하기,     -    빼기,    *    곱하기,     /  나누기,     %   나머지
++   증가,     --   감소,   + 문자열 연산자




7-2 대입연산자
연산자 오른족의 실행 결과를 왼쪽에 대입하는 것으로, 자바스크립트에서 많이 사용하는 연산자이다.
=     연산자 오른쪽 값을 왼쪽 변수에 대입합니다.
-=    OP1 = OP1 - OP2      x -= y
+=   OP1 = OP1 + OP2      x += y
*=    OP1 = OP1 + OP2      x += y
/=   OP1 = OP1 / OP2      x /= y
%=   OP1 = OP1 % OP2      x %= y




7-3 비교연산자
두 개의 값을 비교해서 참과 거짓으로 불린 결과값을 반환하는 연산자이다. 이항연산자이다.
==   같은지 비교
!=   같지 않은지 비교
<   작은지 비교
<=   작거나 같은지 비교
>   큰지 비교
>=   크거나 같은지 비교

문자의 비교도 가능하다. 숫자보다는 문자의 ASCⅡ값이 더 크고 대문자보다는 소문자의 ASCⅡ값이 더 크다.




7-4 논리 연산자
논리 연산자는 불린 값을 피연산자로 한다.

|| (OR)   피연산자 중 true가 하나라도 있으면 true
&&(AND)   피연산 중 false가 하나라도 있으면 false
!(NOT)   피연산자의 값과 정반대의 값을 가진다.





7-5 시프트 연산자
<<   왼쪽시프트   이항연산자
>>   오른쪽시프트   단항연산자
>>>   0 채우기 오른쪽 시프트   단항연산자





7-6 기타 연산자
? :       ? 앞의 조건을 체크하여 true이면 : 왼쪽문장을, false이면 : 오른쪽의 문장을 실행한다
,           여러개의 식을 나열할때 사용
typeof   피연산자의 데이터 유형을 체크하는 연산자





8. 대회상자
경고창   alert(메세지)
확인창   confirm(메세지)
프롬프트 상자   prompt(메세지) 또는 prompt(메세지, 기본값)





9. 조건문

if (조건)
    문장

if (조건) {
    문장1
    문장2
    문장3
    ....
}
   

if (조건)
    문장
    else
       문장



9-1. 중첩된 if-else 문
if (존건1) 문장 1
else
    if(조건2) 문장2
    else
       if(조건3) 문장3
       else 문장4

if(조건1) 문장1
    else if(조건2) 문장2
    else if(조건3) 문장3
    else 문장4

if(조건1) 문장1
if(조건2) 문장2
if(조건3) 문장3
else 문장4




9-2. swich문
체크해야 할 조건이 많으면서 서로 중복되지 않을 경우에는 여러 개의 if문을 사용하는 것보다 switch문을 사용하는 것이 편리하다. switch문은 변수를 체크해서 case문에 따라 지정한 동작만 하면 된다.

switch (변수)
{
    case 상수1:문장1
                   break
    case 상수2:문장2
                   break
       ....
default:문장n
}










10. 반복문

10-1. for문
for (초기값; 조건; 반복 ) {
    문장1
    문장2
    ....
}
for (i=0; i <5; i++)
    document.write("i는 " + i + "<br>")

** for문안에 for문 사용가능



10-2. while문
while 반복문은 조건이 참(true)인 동안 문장을 반복합니다.
while (조건)
    문장



10-3. do .. while문
while문과 달리 do ..  while문은 조건이 맨 뒤에 붙는다. do .. while문은 일단 문장을 한번 실행한 후 조건을 체크한다. 그러므로 조건이 false라도 일단 문장이 최소한 한번은 실행되는 것이다.
do {  
    문장
} while (조건)


** for, while, do.. while 의 삼각관계
    세가지 모두 특정 문장을 여러 번 반복해서 실행할 수 있다는 공통점이 있다.
for문은 초기값과 반복 크기가 일정할 때 주로 사용.
while문과 do...while 문은 초기값이나 반복 크기 없이 조건만 주어졌을 때 주로 사용.
      while문과 do... while문의 차이는 조건을 체크하기 전에 문장을 한번 실행하느냐 하지 않느냐의 차이


*** 소스를 간편하게 만들어 주는 with 문
    document.write ("안녕하세요?")
    document.write ("<br />")
    document.write ("이 문서의 배경색은" + bgcolor + "입니다")

    with(document) {
        write ("안녕하세요?")
        write ("<br />")
        write ("이 문서의 배경색은" + bgcolor + "입니다")
        }
로 변경가능




10-4. break 문
반복문을 빠져 나올떄 사용.
break문은 단독으로 쓰이지 않고 조건문과 함꼐 사용



10-5. continue문
주어진 조건에서 해당값을 만났을때 실행하던 반복문장을 건너뛰고, 다음 반복 과정으로 넘어감




11. 변수와 함수
변수에는 지역 변수(local variable)과 전역 변수(global variable)이 있다.

지역 변수는 함수 안에서 선언이 되어, 그 함수 안의 문장에서만 사용 가능.
전역 변수는 함수 영역 밖에서 선언되어 진다.

지역 변수는 반드시 var라는 키워드를 사용해서 함수 안에서 선언을 한다. var라는 키워드가 없으면 그 변수는 전역 변수로 취급을 한다.


11-1 결과값 반환하기 - return
retern문의 값을 변환하고 함수를 종료한다.





12. 이벤트와 이벤트 핸들러
12-1. 이벤트
abort      웹페이지를 읽어오는 동안 사용자가 [중지] 버튼을 누르거나 enter 키를 눌렀을 때
blur      현재 보고 있는 페이지에서 다른 페이지로 이동하거나 폼 요소에서 포커스를 다른 곳으로 이동했을때

click       클릭했을 때
change   목록 등에서 다른 값을 선택했을 때
error      웹 페이지를 읽어오는 동안 오류가 발생했을 때
focus      폼 요소 안으로 커서를 옮기거나 브라우저 창 내부를 클릭해서 그 브라우저 창을 활성화 시켰을 때

load   웹 페이지를 모두 읽어 왔을 때
mouse Out   링크나 이미지맵 밖으로 마우스 커서를 옮겼을 때
mouse Over   링크나 이미지맵 위로 마우스 커서를 올려 놓았을 때
select   폼 필드를 선택했을 때
submit   폼 양식에서 전송[submit] 버튼을 클릭했을 때
unload   현재 보고 있던 웹페이지를 빠져 나갈때


12-2. 이벤트 핸들러
    <태그 이벤트 핸들러 = 함수 >
이벤트 앞에 on를 붙인다.
ex) onClick, onMouseOver, onMouseOut...


** 이벤트 핸들러는 대소문자를 구별하지 않는다.
onMouseOver같은 이벤트 핸들러는 HTML 태그에서 사용하는 속성이다. 그래서 대소문자를 구별하지는 않는다. 하지만 대부분 이벤트 핸들러를 표시할때는 on은 소문자 뒤에 오는 이벤트 이름은 시작 부분만 대문자로 시작한다.



13. 객체
객체 인스턴스 만들기
var 변수 = new 객체 이름()

** 중복 객체를 만들 수 있다.

13-1. 내장 객체
window
    브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 책체

navigator 
    현재 사용중인 브라우저에 대한 정보를 가지고 있는 객체

frame 
    프레임마다 하나씩 만들어지는 객체로, <frame> 태그를 쓸 때마다 하나씩 만들어집니다.
document
    웹 페이지마다 하나씩 만들어지는 객체. <body>태그에 의해 만들어진다. HTML문서에 대한 정보를 가지고 있다.


location
    현재 페이지에 대한 URL 정보를 가지고 있는 객체
history
    현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
plugin
    브라우저에 설치된 플러그인 정보를 저장하고 있는 객체. 플러그인 하나마다 객체가 만들어진다.
mimeType
    브라우저 마임(Mime) 지원 정보를 가지고 있는 객체
image
    웹페이지에 삽입된 이미지 정보를 가지고 있는 객체. <img>를 쓸때 마다 객체 생성
link
    하이퍼링크 정보를 가지고 있는 객체. <a href=""> 를 쓸때마다 객체 생성
area
    이미지맵 영역 정보를 가지고 있는 객체. <area>를 쓸때 마다 객체 생성
form
    폼 전체에 대한 정보를 가지고 있는 객체. <form> 태그를 쓸 때마다 만들어 진다.
applet
    애플릿에 대한 정보. <applet> 태그를 쓸 때마다 만들어진다.
layer
    익스플로어 DHTML에서 사용하는 레이어 정보를 가지고 있다.
anchor
    웹 페이지 안의 앵커 정보를 가지고 있다. <a name="">쓸 때마다 하나씩 만들어 진다.
text
    폼 텍스트 필드에 대한 정보. <input type="text">를 쓸 때마다 만들어진다.
password
    폼 패스워드 필드에 대한 정보. <input type="password">를 쓸 때마다 만들어진다
hidden
    폼 히든 필드에 대한 정보. <input type="hidden"> 를 쓸 때마다 만들어진다
textarea
    폼 텍스트에 대한 정보. <textarea>를 쓸 때마다 만들어진다.
button
    폼의 버튼에 대한 정보. <input type="button"> 를 쓸때마다 만들어 진다.
submit
    폼의 submit에 대한 정보.
reset
    폼의 reset에 대한 정보
checkbox
    폼의 체크박스에 대한 정보
radio
    폼의 라이오 버튼에 대한 정보
fileUpload
    폼의 '찾아보기'버튼에 대한 정보
select
    select 버튼에 대한 정보.
option
    option 버튼에 대한 정보
array
    배열 사용을 위한 객체
date
    날짜와 시간을 다루는 객체
function
    함수를 객체처럼 사용할 수 있게 한다.
math
    수학적인 함수와 특수 함수를 제공하는 객체
number
    문자를 숫자로 바꾸는 객체
screen
    현재 사용중인 화면에 대한 정보
string
    문자열을 처리하는 객체



Array 객체
배열의 선언 - 변수를 배열로 선언하려면 new를 이용해서 Array 객체의 인스턴스를 만들어야 한다.

변수 = new Array( )
변수 = new Array(배열의 크기)

Array 객체의 메서드
concat() - 기존 배열에 새로운 배열을 추가합니다.
join() - 배열 요소를 합하여 문자열로 만듭니다
reverse() - 배열 요소의 배치 순서를 역순으로 바꿉니다
slice() - 배열을 나눕니다.
sort() - 배열 요소를 특정 기준에 따라 정렬합니다.


concat() 메서드
var 배열 이름3 = 배열 이름1.concat(배열 이름2)

join() 메서드
var 배열 이름1 = new Array
var 배열 이름2 = 배열 이름1.join(구분기호)

reverse() 메서드
var 배열 이름1 = new Array
var 배열 이름2 = 배열 이름1.reverse()

slice()
var 배열 이름1 = new Array
var 배열 이름2 = 배열 이름1.slice(시작 위치, 끝 위치)

두 인수의 범위는 시작 위치부터 끝 위치의 이전까지, 즉 끝 위치는 범위에 포함되지 않는다.




Date 객체
var 변수 = new Date() 또는 var 변수 = new Date(년, 월-1, 일, 시, 분, 초)

Date 객체의 메서드
getYear() - 1970년도 이후의 연도를 알아내는 메서드
getMonth() - 월을 알아내는 메서드. 이 메서드의 반환값은 0부터 11까지이므로 정확한 현재 달을 알려면 getMonth()의 반환값에 1을 더해야 한다.
getDate() - 일을 알아내는 메서드
getDay() - 요일을 알아내는 메서드. 이 메서드의 반환값은 0부터 6까지이며 0은 '일요일', 1은 '월요일' 순으로 해당됩니다.
getHours() - 시간을 알아내는 메서드. 반환값은 24시간제로 표시된다.
getMinutes() - 분을 알아내는 메서드
getSeconds() - 초를 알아내는 메서드
getTime() - 1970년 1월 1일 이후의 시간을 1/1000초로 표현
getMiliseconds() - 1970년 1월 1일 이후의 시간을 1/100초로 표현

setYear() - 연도를 설정하는 메서드
setMonth() - 월을 설정하는 메서드. 설정하려고 하는 월의 값보다 1 작게 설정해야 합니다
setDate() - 일을 설정하는 메서드
setDay() - 요일을 설정하는 메서드
setHour() - 시간을 설정하는 메서드
setMinutes() - 분을 설정하는 메서드
setSeconds() - 초를 설정하는 메서드
setTime() - 1970년 1월 1일 이후의 시간을 1/1000초로 설정하는 메서드
setMiliseconds() - 1970년 1월 1일 이후의 시간을 1/100초로 설정하는 메서드
toGMTString - 요일 일 월 연도 시간:분:초 UTC 형식으로 표시
toLocaleString() - 월/일/연도 시간:분:초 형식으로 표시
toString() - 요일 월 날짜 시간:분:초 UTC+대한민국 표준시 형식으로 표시



EVENT 객체
ie - window.event.프로퍼티 이름
altKey - 키보드에서 alt 키를 누름
altLeft - 키보드 왼쪽의 alt 키를 누름
button - 마우스의 어느 단추를 클릭했는지 나타냄 (0:없음, 1:왼쪽, 2:오른쪽, 3:왼쪽+오른쪽, 4:가운데, 5:왼쪽+가운데, 6:오른쪽+가운데, 7:왼쪽+가운데+오른쪽)
clientX - 현재 브라우저 창을 기준으로 이벤트가 발생한 x 좌표
clientY - 현재 브라우저 창을 기준으로 이벤트가 발생한 y 좌표
ctrlKey - 키보드에서 ctrl 키를 누름
ctrlLeft - 키보드에서 왼쪽 ctrl 키를 누름
fromElement - onMouseOver나 onMouseOut 이벤트의 대상이 되는 웹 페이지 요소
keyCode 키를 눌렀을 때 키의 유니코드 값
offsetX - 이벤트가 발생한 객체를 기준으로 마우스의 x 좌표
offsetY - 에벤트가 발생한 객체를 기준으로 마우스의 y 좌표
propertyName - 이벤트가 발생한 객체에서 변경된 프로퍼티 이름
repeaton - keydown() 이벤트 반복 횟수
returmValue - 이벤트에서 발생한 값 설정
screenX - 화면을 기준으로 이벤트가 발생한 X좌표
screenY - 화면을 기준으로 이벤트가 발생한 Y좌표
shiftKey -  키보드에서 shift 키를 누름
shiftLeft- 키보드에서 왼쪽 shift 키를 누름
srcElement - 이벤트가 발생한 웹 페이지 요소. (예를 들면, 이미지에서 이벤트가 발생했으면 <img> 반환)
srcFilter - onFilterChange 이벤트가 발생한 필터 객체
toElement - 현재 마우스 포인터가 있는 객체
type - 이벤트의 종류
x - 선택한 객체에 있는 x 좌표값 설정
y - 선택한 객체에 있는 y 좌표값 설정


NS - 매개변수.프로퍼티 이름
layerX - 레이어를 기준으로 한 x 좌표
layerY - 레이어를 기준으로 한 y 좌표
modifiers - 마우스와 함께 누른 키
pageX - 문서를 기준으로 한 x 좌표
pageY- 문서를 기준으로 한 y 좌표
srcElement- 이벤트가 발생한 객체
target - 이벤트를 넘겨줄 객체
type- 이벤트의 종류
which - 누른 마우스 단추 값이나 키보드이 키 값을 ASCⅡ값으로 설정

    NS event 전용 객체의 메서드
    captureEvents - 특정한 이벤트를 캡쳐합니다
    handleEvent - 이벤트를 지정한 이벤트 핸들러로 전달합니다
    releaseEvent - captureEvents로 설정한 이벤트를 중지시킵니다
    routeEvent - 캡쳐한 이벤트를 전달합니다.
신고
Posted by 고시랑

티스토리 툴바