|
|
자바스크립트는 객체 지향적 프로그래밍 언어의 일종입니다. 즉, 웹 브라우저와 웹문서의 모든 요소를 객체(Object)로 인식하여 실행하고, 펄이나 C, C++ 등과 같이 서버에 설치되어 서버에서 실행되는 언어와는 달리, 사용자의 PC에서 동작하는 스크립트 언어입니다. 물론 서버측 자바스크립트도 있지만, 여기에서는 다루지 않습니다.
자바스크립트(JavaScript)는 선마이크로시스템즈라는 회사에서 LiveScript 라는 이름으로 처음 개발되었다가 네츠케이프사의 네비게이터 2.0 에 탑재되면서 자바스크립트라는 이름을 갖게 되었습니다.
자바스크립트는 버전별로 아래의 표처럼 발전되어 왔습니다. 마이크로소프트에서는 별도로 JScript를 사용하고 있습니다. 하지만 브라우저별로 완벽하게 호환되지는 않습니다
자바스크립트는 사용자 PC에서 작동하므로 그만큼 서버측의 부하를 줄일 수 있어 거의 모든 프로그래밍에서 폭 넓게 사용되고 있습니다.
|
자바스크립트 버전 |
네츠케이프 버전 |
익스플로러 버전 |
|
자바스크립트 1.0 |
2.0 이상 |
3.0 이상 |
|
자바스크립트 1.1 |
3.0 이상 |
4.0 이상 |
|
자바스크립트 1.2 |
4.0 이상 |
4.0 이상 |
|
자바스크립트 1.3 |
4.06 이상 |
5.0 이상 |
|
자바스크립트 1.4 |
5.0 이상 |
5.0 이상 |
자바스크립트(Java Script)와 자바(Java)는 그 이름이나 사용되는 스크립트 부분에서 상당히 유사한 면이 있기는 하지만 전혀 별개의 언어입니다. 자바스크립트는 텍스트 편집기 등으로 쉽게 내용을 읽어 볼 수 있는 반면, 자바는 코딩된 스크립트를 컴파일 하여 일반적인 텍스트 편집기 등으로 그 소스를 읽어 볼 수 없습니다.
이렇게 컴파일된 작은 프로그램을 애플릿(applet) 이라고 하며 보통은 class 라는 확장명을 갖게 됩니다.
자바스크립트는 보통의 HTML 문서안에서 스크립트의 형태로 삽입되어 사용되며, 자바 애플릿은 <OBJECT> 혹은 <APPLET> 태그등을 사용하여 웹 문서에 포함되어 사용됩니다.
자바스크립트는 일반적으로 아래와 같은 모양을 갖습니다.
|
01 : <SCRIPT LANGUAGE="JAVASCRIPT"> |
01 : <SCRIPT LANGUAGE="JAVASCRIPT">
자바스크립트를 시작하는 태그입니다. 여기에서 LANGUAGE="JAVASCRIPT" 부분은 스크립트로 사용할 언어를 자바스크립트로 하겠다는 의미로, 이것은 자바스크립트가 아닌 다른 언어에도 사용이 가능하다는 의미를 포함하고 있습니다. 또한, LANGUAGE="JAVASCRIPT1.2" 처럼 자바스크립트의 버전을 동시에 표시해 주고 웹 브라우저에서 해당 버전의 자바스크립트를 지원하지 않으면 실행 되지 않게 방지할 수도 있습니다.
02 : <!--
04 : //-->
자바스크립트를 지원하지 않는 웹브라우저인 경우에는 이 부호 안에 있는 코드 실행을 하지 않습니다. 하지만 최근의 대부분의 웹브라우저에서는 모두 자바스크립트를 지원하므로 굳이 넣어주지 않아도 에러가 생길 확률은 적습니다
자바스크립트에서는 다음과 같은 주석문 처리가 가능합니다
|
한줄 주석문 |
// 주석문 내용 <!-- 주석문 내용 --> |
|
여러줄 주석문 |
/* 주석문 내용 */ |
자바스크립트는 일반적으로는 HTML 문서의 <HEAD></HEAD> 사이에 들어갑니다.
하지만 <BODY></BODY> 부분에 들어가기도 하며, 두 군데 모두 들어 갈 수도 있습니다. 스크립트가 들어가는 위치는 자바스크립트의 처리시점과 관련이 있습니다. 즉, HTML 태그와 마찬가지로 위에서부터 아래로 순차적으로 처리됩니다.
또한, 한 문서내에 여러개의 자바스크립트가 들어가는 경우도 많습니다.
즉, 다음과 같은 형태가 모두 가능합니다
|
<HTML> |
같은 내용의 길고 복잡한 자바스크립트를 여러 문서에서 같이 사용하려면 모든 문서에 동일한 스크립트를 일일이 넣어 주어야 할까요?
아래의 방식처럼 자바스크립트를 외부파일로 저장하여 간단히 불러오는 방법도 많이 사용됩니다.
|
<HTML> |
myScript.js 의 내용은 다음과 같습니다.
|
<!-- document.write("안녕하세요? 반갑습니다") //--> |
즉, <SCRIPT></SCRIPT> 라는 태그 부분과 태그내에 들어가는 스크립트 구문을 분리해 저장해 두는 거죠.
물론 위의 myScript.js 파일은 하나의 예제일 뿐 스크립트에 따라 달라집니다. 이렇게 하면 HTML 문서의 내용도 훨씬 줄어들고 문서가 깔끔해 집니다.
js 파일은 윈도우의 메모장 등에서 텍스트 파일로 저장하여 확장명만 js 파일로 지정해 주면 됩니다.
자바스크립트가 들어 있는 웹문서를 편집하려면 윈도우에 내장되어 있는 메모장으로 가능합니다.
하지만 텍스트 전용 에디터들을 사용하면 여러면에서 훨씬 편리합니다.
국산 텍스트 에디터인 EditPlus(http://www.editplus.com)와 같은 프로그램을 사용하면 html 태그, 자바스크립트의 변수, 함수, 문자열 등 종류별로 각각 다른 색상으로 보여주어 에러가 생긴 부분이나 사용자가 수정해서 사용할 수 있는 부분등의 시각적 편리성을 제공합니다.
자바스크립트의 비주얼 저작도구로는 Adobe GoLive, Macromedia사의 Dreamweaver 등과 같은 많은 종류가 있습니다.
나모 웹에디터를 사용하시는 분이라면 나모 웹에디터의 HTML 편집창에서도 사용할 수 있습니다.
자바스크립트는 객체 지향적 언어라고 하였습니다. 생활주변에서 볼 수 있는 사람, 동물, 자전거, 꽃 등 모든 사물이 객체입니다.
자바스크립트에서 객체(object)란 웹브라우저를 포함한 웹 문서의 모든 구성요소를 말합니다. 즉, 웹브라우저의 상태표시줄, 스크롤바, 웹문서 자체, 레이어, 하이퍼링크, 이미지, 폼버튼 등등 대부분의 구성요소를 객체라고 합니다. 객체들은 또다른 하위 객체들을 가지고 있을 수 있습니다. 이런 이유로 자바스크립트의 객체구조를 계층적구조라고 말할 수 있습니다.
모든 객체는 속성(Property)을 가집니다. window 객체는 frames(프레임), name(윈도우 이름), location(위치) 등의 속성을 가지며 이미지 객체는 가로크기, 세로크기등의 속성을 가집니다.
예를들어 어떤 웹문서의 배경색상이 검정색이라면 이 웹문서의 배경색은 검정이라는 속성을 가지며 자바스크립트에서는 다음과 같이 표현할 수 있습니다.
|
document.bgColor="black" (객체.속성="속성값") |
객체와 속성, 객체와 메소드를 연결 할 때에는 (.) 으로 연결합니다
메소드(method)는 객체의 동작과 관련된 것입니다. 「토끼」라는 객체를 예를 들면, 「빛깔이 희다」, 「앞다리가 짧다」 등은 속성에 관한 사항이고, 「뛰어간다」, 「풀을 뜯어 먹는다」 등의 행동은 메소드에 해당합니다.
자바스크립트에서 open() 메소드는 팝업 윈도우를 열어주고, write() 메소드는 문자열을 출력 합니다.
자바스크립트에는 크게 브라우저 객체와 내장객체로 나누어 볼 수 있습니다. 브라우저객체는 웹브라우저(익스플로러, 네츠케이프 등)와 관련된 객체들이고, 내장객체는 자바스크립트 자체에 내장되어 있는 객체들입니다
브라우저 관련 객체로는 navigator, window, document, frame, history, location, form, image, link, radio, text, checkbox, select, textarea 등이 있으며, 내장객체로는 Date, Array, String, Math 등이 있습니다
자바스크립트에서는 브라우저관련 객체에 계층적으로 접근합니다.
☆ 네츠케이프와 익스플로러의 브라우저 객체 모형
2.3.1. navigator : 브라우저의 이름, 버전 등 브라우저 관련 정보를 알려줍니다
|
속성 |
appCodeName |
브라우저 코드 이름을 알려줍니다 |
|
appName |
브라우저의 이름을 알려줍니다 |
|
|
appVersion |
브라우저의 버전정보를 알려줍니다 |
|
|
userAgent |
브라우저의 User Agent를 알려줍니다 |
|
|
platform |
사용중인 시스템 정보를 알려줍니다 |
|
|
메소드 |
JavaEnabled() |
자바 사용이 가능한지 여부를 true, false 형태로 알려줍니다 |
2.3.2. event : 이벤트에 관한 속성 정보를 알려줍니다
|
네츠케이프 |
익스플로러 |
||
|
pageX |
페이지를 기준으로 이벤트가 발생한 X 좌표 |
clientX |
클라이언트 영역 내에서 이벤트가 발생한 X 좌표 |
|
pageY |
페이지를 기준으로 이벤트가 발생한 Y 좌표 |
clientY |
클라이언트 영역 내에서 이벤트가 발생한 Y 좌표 |
|
screenX |
화면을 기준으로 이벤트가 발생한 X 좌표 |
screenX |
화면 영역 내에서 이벤트가 발생한 X 좌표 |
|
screenY |
화면을 기준으로 이벤트가 발생한 Y 좌표 |
screenY |
화면 영역 내에서 이벤트가 발생한 Y 좌표 |
|
which |
마우스버튼의 종류(1=왼쪽, 2=가운데, 3=오른쪽) 또는 입력키의 ASCII 값 |
keyCode |
눌려진 키보드의 ASCII 값 |
|
target |
이벤트가 발생한 HTML 요소 |
button |
마우스 버튼의 종류 (0=없음, 1=왼쪽, 2=오른쪽, 3= 왼쪽+오른쪽, 4=중간,5=왼쪽+중간,6=오른쪽+중간,7=왼쪽+중간+오른쪽) |
|
type |
이벤트의 종류 |
srcElement |
이벤트가 발생한 HTML 요소 |
|
type |
이벤트의 종류 |
||
|
cancelBubble |
상위단계의 이벤트 핸들러 처리여부(처리=false) |
||
2.3.3. screen : 사용자 컴퓨터의 해상도와 색상에 관련된 정보
|
속성 |
availHeight |
윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 높이 |
|
availWidth |
윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 넓이 |
|
|
height |
화면의 높이 |
|
|
width |
화면의 넓이 |
|
|
colorDepth |
사용가능한 색상 수 |
2.3.4. window : 계층 구조상의 최상위 객체
|
속성 |
메소드 |
||
|
closed |
창의 닫힘여부(true/false) |
alert() |
경고창을 보여줍니다 |
|
defaultStatus |
상태표시줄의 초기문자열 |
blur() |
focus를 제거합니다 |
|
document |
document 객체 |
clearInterval() |
setInterval()메소드에의해 수행되고 있는 함수를 중지합니다 |
|
frames |
프레임 객체 |
clearTimeout() |
setTimeout()메소드에의해 수행되고 있는 함수를 중지합니다 |
|
history |
history 객체 |
close() |
창을 닫습니다 |
|
length |
프레임의 수 |
comfirm() |
확인버튼이 있는 창을 엽니다 |
|
location |
location 객체 |
focus() |
focus를 줍니다 |
|
name |
창의 이름 |
moveBy() |
상대적 좌표로 창을 이동합니다 |
|
opener |
현재창을 열어준 윈도우 |
moveTo() |
절대위치로 창을 이동합니다 |
|
parent |
부모 프레임 |
open() |
새로운 창을 열어줍니다 |
|
self |
현재창 자신 |
print() |
화면의 내용을 프린트로 출력합니다 |
|
status |
상태표시줄의 문자열 |
prompt() |
입력란이 있는 대화상자를 엽니다 |
|
top |
가장 앞쪽 창 |
resizeBy() |
상대적 크기를 이용해서 창의 크기를 변경합니다 |
|
window |
현재창(=self) |
resizeTo() |
절대크기로 창크기를 변경합니다 |
|
scroll() |
창을 스크롤 시킵니다 |
||
|
scrollBy() |
상대적 좌표로 창을 스크롤 시킵니다 |
||
|
scrollTo() |
절대적 좌표로 창을 스크롤 시킵니다 |
||
|
setInterval() |
일정시간 간격으로 지정함수를 반복 호출 합니다 |
||
|
setTimeout() |
일정시간 후 지정함수를 호출 합니다 |
||
2.3.5. history 객체 : 방문한 URL에 관한 정보를 보여줍니다
|
속성 |
length |
브라우저의 history 목록에 저장된 URL의 갯수 |
|
메소드 |
back() |
한단계 전 URL 로 이동 |
|
forward() |
한단계 뒤 URL 로 이동 |
|
|
go() |
지정된 단계의 URL 로 이동 |
2.3.6. location : 현재문서의 URL에 관한 정보를 제공합니다
|
속성 |
hash |
앵커부분(하이퍼링크의 # 이하부분) |
|
host |
URL의 호스트부분 |
|
|
hostname |
URL의 호스트와 Port 부분 |
|
|
href |
문서의 URL |
|
|
pathname |
URL의 경로부분 |
|
|
port |
URL의 Port 부분 |
|
|
protocol |
URL의 프로토콜 부분 |
|
|
search |
URL의 쿼리정보(? 이하의 부분) |
|
|
메소드 |
reload() |
문서를 새로고칩니다 |
|
replace() |
현재의 URL을 새로운 URL 로 고칩니다 |
|
속성 |
alinkColor |
링크클릭시 색상 |
|
anchors |
앵커 객체 |
|
|
applets |
애플릿 객체 |
|
|
bgColor |
배경색상 |
|
|
cookie |
쿠키 파일의 정보 |
|
|
domain |
문서가 있는 서버의 도메인 이름 |
|
|
embeds |
embed 객체 |
|
|
fgColor |
문서의 텍스트 색상 |
|
|
forms |
form 객체 |
|
|
lastModified |
문서의 최종수정일 정보 |
|
|
linkColor |
하이퍼링크 색상 |
|
|
links |
link 객체 |
|
|
referrer |
현재 문서를 불러온 이전문서 정보 |
|
|
title |
문서의 제목 |
|
|
URL |
문서의 URL |
|
|
vlinkColor |
방문한 적이 있는 링크 색상 |
|
|
메소드 |
close() |
문자열 출력 중지 |
|
open() |
문자열 출력 시작 |
|
|
write() |
문자열 출력 |
|
|
writeIn() |
지정된 윈도우의 문서에 HTML 형식으로 쓰면서 줄을 바꾸어 줍니다. |
2.3.8. Image 객체 : 문서내에 있는 이미지에 관한 정보를 담고 있습니다.
<img src="이미지명" name=img_name> 과 같은 태그에 의해 생성되는 객체입니다
|
속성 |
border |
이미지의 테두리 값 |
|
complete |
이미지 로드가 완료 되었는지 여부(true/false) |
|
|
height |
이미지의 높이 |
|
|
width |
이미지의 가로크기 |
|
|
hspace |
이미지의 수평여백 |
|
|
vspace |
이미지의 수직여백 |
|
|
length |
이미지의 개수 |
|
|
lowsrc |
lowsrc 로 설정한 이미지의 URL |
|
|
name |
이미지의 name |
|
|
src |
이미지의 URL |
<form name=myform> 태그에 의해 생성되는 객체입니다
|
속성 |
action |
폼 태그의 action 속성 |
|
button |
버튼 객체 |
|
|
checkbox |
체크박스 객체 |
|
|
elements |
폼의 하위 객체 |
|
|
encoding |
폼태그의 enctype 속성 |
|
|
fileupload |
fileupload 객체 |
|
|
hidden |
hidden 객체 |
|
|
length |
엘리먼트의 개수 |
|
|
method |
폼 태그의 method 속성 |
|
|
name |
form 의 이름 |
|
|
password |
password 객체 |
|
|
radio |
radio 객체 |
|
|
reset |
reset 객체 |
|
|
select |
select 객체 |
|
|
submit |
submit 객체 |
|
|
target |
폼태그의 target 속성 |
|
|
text |
text box 객체 |
|
|
textarea |
textarea 객체 |
|
|
메소드 |
submit() |
폼 양식을 전송합니다 |
|
reset() |
폼 양식을 초기화 합니다 |
2.3.10. button 객체 : 폼 객체의 하위객체인 버튼 객체입니다
<input type=button> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
버튼의 상위 폼 객체 |
|
name |
버튼의 이름 |
|
|
type |
버튼의 타입 |
|
|
value |
버튼의 값 |
|
|
메소드 |
blur() |
포커스 해제 |
|
click() |
버튼을 클릭 |
|
|
focus() |
버튼에 포커스를 줍니다 |
2.3.11. checkbox 객체 : 폼 객체의 하위객체인 체크박스 객체
<input type=checkbod> 태그에 의해 생성되는 객체 입니다
|
속성 |
checked |
체크되어 있는지 여부(true/false) |
|
defaultChecked |
기본값으로 체크되어 있는지 여부(true/false) |
|
|
form |
상위 폼 객체 |
|
|
name |
체크박스의 이름 속성 |
|
|
type |
체크박스의 타입 속성 |
|
|
value |
체크박스의 value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
click() |
체크박스를 클릭합니다 |
|
|
focus() |
포커스를 줍니다 |
2.3.12. fileupload 객체 : 폼 객체의 하위객체인 fileupload 객체
<input type=file> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
focus() |
포커스를 줍니다 |
2.3.13. hidden 객체 : 폼의 하위 객체인 hidden 객체
<input type=hidden> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
2.3.14. password 객체 : 폼의 하위객체인 password 객체입니다
<input type=password> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
focus() |
포커스를 줍니다 |
2.3.15. radio 객체 : 폼의 하위객체인 라디오버튼 객체입니다
<input type=radio> 태그에 의해 생성되는 객체 입니다
|
속성 |
checked |
체크되어 있는지 여부(true/false) |
|
defaultChecked |
기본값으로 체크되어 있는지 여부(true/false) |
|
|
form |
상위 폼 객체 |
|
|
length |
라디오버튼의 개수 |
|
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
click() |
버튼을 클릭합니다 |
|
|
focus() |
포커스를 줍니다 |
2.3.16. reset 객체 : 폼의 하위객체인 reset 버튼 객체입니다
<input type=reset> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
click() |
버튼을 클릭합니다 |
|
|
focus() |
포커스를 줍니다 |
2.3.17. submit 객체 : 폼의 하위 객체인 submit 객체입니다
<input type=submit> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
click() |
버튼을 클릭합니다 |
|
|
focus() |
포커스를 줍니다 |
2.3.18. text 객체 : 폼의 하위객체인 텍스트박스 객체입니다
<input type=text> 태그에 의해 생성되는 객체 입니다
|
속성 |
defaultValue |
text box 의 초기문자열 |
|
form |
상위 폼 객체 |
|
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
select() |
텍스트박스 입력란의 문자열을 선택합니다 |
|
|
focus() |
포커스를 줍니다 |
2.3.19. select 객체 : 폼 버튼의 하위객체인 목록상자 객체입니다. 하위객체로 option을 가지고 있습니다
<select><option></option></select> 태그에 의해 생성되는 객체 입니다
|
속성 |
form |
상위 폼 객체 |
|
length |
option 의 수 |
|
|
name |
name 속성 |
|
|
options |
option 객체 |
|
|
selectedIndex |
선택된 항목의 index |
|
|
type |
type 속성(select 유형) |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
focus() |
포커스를 줍니다 |
|
|
option객체의 속성 |
defaultSelected |
기본값으로 선택된 항목(true/false) |
|
index |
현재옵션의 인덱스 |
|
|
selected |
선택된 상태(true/false) |
|
|
text |
<option> 다음에 오는 문자열 |
|
|
value |
value 속성 |
2.3.20. textarea : 폼의 하위객체인 textarea 객체입니다
<textarea></textarea> 태그에 의해 생성되는 객체 입니다
|
속성 |
defaultValue |
초기문자열 |
|
form |
상위 폼 객체 |
|
|
name |
name 속성 |
|
|
type |
type 속성 |
|
|
value |
value 속성 |
|
|
메소드 |
blur() |
포커스를 해제합니다 |
|
select() |
textarea 입력란의 문자열을 선택합니다 |
|
|
focus() |
포커스를 줍니다 |
|
객체명 |
내용 |
|
Array |
동종의 데이터들을 저장하고 다루기 위해 사용하는 배열 객체 |
|
Date |
날짜와 시간과 관련된 내용을 처리하는 객체 |
|
Math |
수학 계산을 위한 객체 |
|
String |
문자열 처리를 위한 객체 |
여러개의 데이터를 참조할 때 각 변수를 선언하지 않고 하나의 배열 이름과 구성 번호로 접근하기 위해 접근합니다
|
배열객체 이름 = new Array() 배열객체 이름 = new Array(배열수) 배열객체 이름 = new Array(배열1, 배열2,...) |
|
속성 |
length |
배열의 길이 정보를 담고 있습니다 |
|
메소드 |
join(문자열) |
배열에 들어있는 문자열을 결합합니다 |
|
reverse() |
배열의 순서를 바꾸어 줍니다 |
|
|
sort(compareFunction) |
배열을 정열합니다 |
|
|
slice(처음,끝) |
배열의 일부를 새로운 배열로 만듭니다 |
|
|
concat(배열객체명) |
두 개의 배열을 합쳐서 하나의 배열로 만듭니다 |
날자와 시간을 표시하거나 설정하는데 사용되는 객체입니다
자바스크립트에서는 그리니치표준시(GMT) 1970년 1월 1일 00시 00분 00초 가 기준입니다
|
객체이름 = new Date() |
|
getYear()/setYear() |
연도표시/설정 |
|
getMonth()/setMonth() |
월(0-11)표시/설정 |
|
getDate()/setDate() |
일(1-31)표시/설정 |
|
getDay()/setDay() |
요일(0-6)표시/설정 |
|
getHours()/setHours() |
시(0-23)표시/설정 |
|
getMinutes()/setMinutes() |
분(0-59)표시/설정 |
|
getSeconds()/setSeconds() |
초(0-59)표시/설정 |
|
getTimes()/setTimes() |
기준시(1970년1월1일00:00:00)를 기준으로 경과된 시간을 milisecond 로 표시/설정 |
|
toString() |
날짜와 시간을 문자열로 변환 |
|
toLocaleString() |
날짜와 시간을 지역시간 문자열로 변환 |
|
toGMTString() |
날짜와 시간을 GMT 문자열로 변환 |
|
getTimezoneOffse() |
GMT 와 지역시간의 차이를 분단위로 표시 |
|
getFullYear()/setFullyear() |
연도수를 4자리수로 표시/설정 |
수학계산을 위해 사용되는 객체로 실제 사용빈도는 높지 않으나 랜덤하게 데이터를 추출 하는데 많이 사용됩니다.
|
속성 |
E |
자연로그 밑에 사용되는 오일러 상수 |
|
LN10 |
10의 자연로그 |
|
|
LN2 |
2의 자연로그 |
|
|
Log10E |
||
|
LOG2E |
||
|
PI |
원주율 |
|
|
SQRT1_2 |
1/2의 제곱근 |
|
|
SQRT2 |
2의 제곱근 |
|
|
메소드 |
abs(n) |
n의 절대값 |
|
acos(n) |
n의 역 코사인 값 |
|
|
asin(n) |
n의 역 사인값 |
|
|
atan(n) |
n의 역 탄젠트값 |
|
|
atan2(x,y) |
지정된 x,y 좌표에서의 역 탄젠트 값을 반환 |
|
|
cos(n) |
n의 코사인값 |
|
|
sin(n) |
n의 사인 값 |
|
|
sqrt(n) |
n의 제곱근 |
|
|
tan(n) |
n 의 탄젠트 값 |
|
|
ceil(n) |
n을 올림한 값 |
|
|
exp(n) |
오일러 상수 e를 n승 한 값 |
|
|
floor(n) |
n을 내림한 값 |
|
|
log(n) |
n의 자연로그 값 |
|
|
max(n,m) |
둘 중 큰 수 |
|
|
min(n,m) |
둘 중 작은 수 |
|
|
pow(n,m) |
n 의 m 승 |
|
|
random() |
0과 1사이의 난수 반환 |
|
|
round(n) |
n을 반올림한 값 |
String 객체는 글자의 모양을 지정하거나 문자열을 처리하기 위해 사용됩니다.
|
속성 |
length |
문자열의 길이 |
|
메소드 |
anchor("name") |
앵크를 설정 합니다 |
<A NAME="name"> |
|
big() |
약간 큰 글씨로 설정 합니다 |
<BIG> |
|
|
blink() |
글자를 깜빡이게 합니다(NC) |
<BLINK> |
|
|
bold() |
글자를 진하게 합니다 |
<B> |
|
|
fixed() |
글자를 타자체로 설정합니다 |
<TT> |
|
|
fontcolor("color") |
글자색을 지정합니다 |
<FONT COLOR="color"> |
|
|
fontsize("size") |
글자 크기를 지정합니다 |
<FONT SIZE="size"> |
|
|
italics() |
이탤릭체로 지정합니다 |
<I> |
|
|
link("url") |
하이퍼링크를 설정합니다 |
<A HREF="url"> |
|
|
small() |
약간 작은 글씨로 합니다 |
<SMALL> |
|
|
strike() |
취소선을 긋습니다 |
<SRIKE> |
|
|
sub() |
아래첨자로 설정합니다 |
<SUB> |
|
|
sup() |
윗첨자로 설정합니다 |
<SUP> |
|
|
toLowerCase() |
소문자로 변환합니다 |
||
|
toUpperCase() |
대문자로 변환합니다 |
|
charAt(n) |
n 번째의 문자열을 반환합니다 |
|
charCodeAt(n) |
n 번째의 문자의 유니코드 번호를 반환합니다 |
|
concat(문자열) |
두 개의 문자열을 합칩니다 |
|
fromCharCode(x,y,..) |
유니코드번호를 문자열로 변환합니다 |
|
indexOf(문자열) |
왼쪽부터 지정된 문자열의 위치를 반환합니다 |
|
lastIndexOf(문자열) |
오른쪽부터 지정된 문자열의 위치를 반환합니다 |
|
split(분리자) |
분리자를 기준으로 문자열을 분리합니다 |
|
substring(A,B) |
A부터 B 이전까지의 문자열을 반환합니다 |
|
substr(A,n) |
A부터 n 만큼의 문자열을 반환합니다 |
변수(Variable)란 데이터를 저장하는 장소로 어떤 내용을 담아두는 용기에 비유할 수 있습니다.
일반적으로 변수 선언은 아래와 같은 방법을 사용합니다
|
var myVar=변수값 myVar=변수값 var myVar1, myVar2, myVar3... |
변수의 이름은 a-Z 까지의 알파벳과 0-9까지의 숫자, 언더바(Under Bar ; "_")의 조합으로 사용할 수 있습니다. 하지만 변수이름의 첫글자는 반드시 알파벳이나 언더바로 시작되어야 합니다.
또한, 변수명으로 자바스크립트 예약어는 사용할 수 없습니다
자바스크립트 예약어
|
abstract |
case |
continue |
extends |
for |
|
import |
long |
private |
static |
throw |
|
var |
boolean |
catch |
default |
false |
|
function |
in |
native |
protected |
super |
|
throw |
void |
break |
char |
do |
|
final |
goto |
instanceof |
new |
public |
|
switch |
transient |
while |
byte |
class |
|
double |
finally |
if |
int |
null |
|
return |
synchronized |
true |
with |
case |
|
const |
else |
float |
implements |
interface |
|
package |
short |
this |
try |
자바스크립트에서 문자형은 "안녕하세요" 처럼, 따옴표(" ")나 홑따옴표 (' ') 사이에 들어가는 문자열입니다. "12345" 처럼 사용하면 보양은 숫자형이지만 따옴표 내에 들어감으로 문자형으로 취급됩니다. " " (공백문자열)도 문자열로 간주됩니다.
또 다음과 같이 제어문자들을 나타내기 위한 Escape Sequence 자료형도 있습니다
|
\n |
줄을 바꾸어 줍니다 |
|
\t |
탭키를 누른 것과 같은 효과를 줍니다 |
|
\b |
BackSpace 키를 누른것과 같은 효과를 줍니다 |
|
\r |
|
|
\\ |
문자열 안에 \ 부호를 넣습니다 |
|
\' |
문자열 안에 ' 부호를 넣습니다 |
|
\" |
문자열 안에 " 부호를 넣습니다 |
숫자형은 따옴표나 홑따옴표 안에 넣지 않습니다. 실수형과 정수형이 있습니다. 정수형은 소수점이 없는 수치 데이터이고, 실수형은 소수점이 있는 수치 데이터 입니다
논리형은 참, 거짓을 나타내며 숫자형과 마찬가지로 따옴표를 사용하지 않습니다. 항상 참 아니면 거짓입니다
정의되지 않은 변수값입니다. 공백문자열인 " " 과는 차이가 있습니다
|
A+B |
A 더하기 B |
|
A-B |
A 빼기 B |
|
A*B |
A 곱하기 B |
|
A/B |
A 나누기 B |
|
A%B |
A를 B로 나눈 나머지값 |
|
A++ |
A 값을 변수에 전달 한 후 A를 1 증가시킵니다 |
|
A-- |
A 값을 변수에 전달 한 후 A를 1 감소시킵니다 |
|
++A |
A를 1 증가시킨 후 변수에 전달합니다 |
|
--A |
A를 1 감소시킨 후 변수에 전달합니다 |
|
"문자열A"+"문자열B" |
두 개의 문자열을 하나의 문자열로 합칩니다 |
|
A += "문자열B" |
변수 A 에 문자열B를 추가합니다 |
|
A=B |
B의 값을 A에 할당합니다 |
|
A+=B |
A와 B를 더한값을 A에 할당합니다 |
|
A-=B |
A에서 B를 뺀값을 A에 할당합니다 |
|
A*=B |
A에서 B를 곱한값을 A에 할당합니다 |
|
A/=B |
A에서 B를 나눈값을 A에 할당합니다 |
|
A%=B |
A를 B로 나눈 나머지값을 A에 할당합니다 |
2.9.5. 비교 연산자 : 연산 결과를 참과 거짓으로 반환합니다
|
A==B |
A와 B가 같으면 true (할당연산자 A=B와는 다릅니다) |
|
A!=B |
A와 B가 같지 않으면 true |
|
A>B |
A가 B보다 크면 true |
|
A<B |
A가 B보다 작으면 true |
|
A>=B |
A가 B보다 크거나 같으면 true |
|
A<=B |
A가 B보다 작거나 같으면 true |
|
A&&B |
조건A와 B를 만족시키면 true |
|
A||B |
조건A 혹은 B를 만족시키면 true |
|
!A |
A의 부정 |
|
(조건)? A:B |
조건을 만족시키면 A, 아니면 B |
명령문은 프로그램의 흐름을 제어하고 원하는 기능이 실행 되도록 하는 명령어 로서, 조건에 맞는 기능을 수행하거나 특정위치로 이동, 혹은 반복 실행이 가능하게 하는 등의 작용을 합니다
|
if |
[조건문] 주어진 조건을 만족할 때에만 특정 구문을 실행합니다 |
|
if ... else |
[조건문] 조건에 따라 처리하고자 하는 문장이 달라질 경우에 사용합니다 |
|
while |
[반복문] 조건이 참인동안 명령문을 반복 실행합니다 |
|
do ... while |
[반복문] 명령문을 한번 실행한 후 조건이 참이면 반복 실행합니다 |
|
for |
[반복문] 초기값, 조건, 증가식을 설정하여 명령문을 반복 실행합니다 |
|
break |
[반복문] 반복문의 루프를 종료합니다 |
|
continue |
[반복문] 반복문의 루프의 예외상황을 만듭니다 |
|
switch ... case |
[조건문] 조건에 맞는 코드를 선택적으로 실행 합니다 |
if-else문은 주어진 조건을 만족시키는 경우에만 지정된 동작을 하도록 만들고 싶을 때 사용합니다.
|
① if (조건) { |
② if (조건1) { |
③ if (조건1) { |
while문은 주어진 조건이 만족되는 동안 반복해서 지정된 기능을 수행시키고 싶을 때 사용하는 반복제어문입니다.
|
whiile (조건1) { |
조건이 참일 동안에는 계속 문장을 실행하고 거짓이 되는 순간 while 문을 벗어납니다.
|
do { 문장 ; }while (조건); |
do -while문은 while문과 마찬가지로 반복제어문이지만 다른 점은 먼저 문장을 실행시킨뒤 조건을 체크하여 참이면 계속 실행하고 거짓이 되는 순간 do - while문을 벗어 나게 됩니다.
for문도 역시 반복제어문이지만 형식이 약간 다른데 for문은 초기 변수값을 주고 이 변수값이 조건을 만족시키는 동안에만 기능을 동작시킵니다.
|
for(초기값;조건;증감식 { (예) for( i=1; i<10 ;i++) { |
위의 (예)는 초기변수값 i가 1일 때 i가 10보다 작을 동안(9까지) 1씩 증가시키며 지정한 문장을 수행하라는 것입니다.
break는 반복제어문(while , do-while문) 안에 위치하여 제어문을 종료시키는 역할을 하고 continue는 제어문의 처음 부분으로 이동시키는 역할을 합니다.
switch ... case문은 여러개의 조건이 있고 각 조건에 따라 실행되어야 하는 자바스크립트 코드가 달라지는 경우에 사용됩니다.
|
switch(표현식) { |
표현식이 value 1의 값을 가지는 경우 문장 1이 실행되고, value 2의 값을 가지는 경우에는 문장 2가 실행됩니다. 그리고 표현식의 값이 case 뒤에 없는 경우에는 default 다음의 문장 n을 실행 시키게 됩니다. case뒤에는 반드시 break를 써야 합니다. 그렇지 않으면 그 뒤에 오는 case까지 실행됩니다.
함수는 프로그램 내에서 특정 작업을 수행하기 위해 독립적으로 만들어진 하나의 단위를 의미합니다. 프로그램에서 함수를 사용하는 목적은 특정작업을 하나의 단위로 만들어 사용함으로써 반복적으로 사용할 수 있도록 하기 위해서이고, 또 특정작업을 함수라는 단위로 분리해 냄으로써 프로그램 소스를 손쉽게 이해할 수 있도록 만들어 주기도 합니다.
함수를 정의하는 방법은 먼저 function 이라는 키워드를 쓰고, 그 뒤에 함수이름과 인수(매개변수)를 쓰면 됩니다.
|
function 함수이름(인수1,인2,....) { 자바스크립트 코드 } |
인수의 수는 원하는 만큼 사용할 수 있으며, 각 인수는 콤마(,)를 통해 구분됩니다.
함수가 정의되기 전에 사용되는 것을 방지하기 위하여 함수의 정의는 반드시 <head>와 </head> 사이에 이루어져야 합니다.
자바스크립트의 내장함수로는 다음과 같은 것들이 있습니다
|
alert(출력할 메세지) |
alert함수는 메시지와 OK버튼만을 가진 다이얼로그 박스를 보여주는 함수로 사용자의 요구를 받을 필요가 없는 메시지의 경우에 사용합니다 |
|
confirm(출력할 메세지) |
confirm함수는 메시지와 OK/Cancel버튼을 포함한 다이얼로그 박스를 보여주는 함수로, 사용자로부터 응답을 듣고 싶을 때 사용하고 사용자가 OK버튼을 누르면 true를, Cancel버튼을 누르면 false를 반환합니다 |
|
prompt(메세지, 초기값) |
메시지와 입력필드를 가진 다이얼로그 박스를 보여주는 함수로 사용자로부터 숫자나 문자열을 입력받아 할 때 사용하는 함수 입니다 |
|
eval(수식문자열) |
eval함수는 수치형태로 입력된 문자열을 계산하여 주는 함수로, 예를 들어 "2+3"과 같은 문자열을 eval 함수의 매개변수로 입력하면 문자열을 수식으로 변환한 후 계산을 하여 "5"라는 정수를 반환 해 줍니다. 이 함수는 입력양식을 통해 입력받은 수식을 처리할 때 유용하게 사용 할 수 있습니다 |
|
parseInt(문자열,[진수]) |
parseInt는 문자열을 정수로 바꿔주는 내장함수로 입력된 문자열을 2진수, 8진수, 16진수 정수로 바꿔줍니다 |
|
parseFloat(문자열) |
문자열을 부동소수점으로 바꾸는 내장함수입니다 |
|
isFinite(숫자) |
숫자가 유한의 수이면 true |
|
isNaN(값) |
값이 순수한 문자이면 true (NaN = Not a Number) |
|
number(값) |
값을 숫자로 변환하여 반환 |
|
string(값) |
값을 문자로 변환하여 반환 |
|
escape(문자열) |
ISO 문자열을 ASCII으로 바꾸어 반환하는 함수입니다. |
|
unescape(ASCII) |
ASCII 문자열을 ISO 문자열로 변환하여 줍니다. |
이벤트(Event)란 사용자가 웹브라우저를 조적할 때 발생하는 일련의 사건을 말합니다. 즉 마우스를 옮긴다거나 버튼을 클릭하거나 폼 문서를 작성하여 전송한다거나 하는 행위를 이벤트라고 하며 이러한 이벤트가 발생했을 때 설정한 방법으로 처리해 주는 것을 이벤트 핸들러 (Event Handler)라고 합니다. 이벤트 핸들러는 일반적으로 HTML 태그내에서 사용되며 이벤트 앞에 문자 "on"을 붙여 사용합니다.
|
<input type="button" value="클릭하세요" onClick="alert('안녕하세요?')"> |
|
이벤트 |
설명 |
|
onblur |
입력양식에서 포커스가 다른 곳으로 이동 했을 때 |
|
onclick |
입력양식이나 링크를 마우스로 클릭했을 때 |
|
onfocus |
입력양식 필드로 포커스가 들어왔을 때 |
|
onload |
브라우저에서 문서가 읽혀 졌을 때 |
|
onmouseover |
링크위로 마우스가 지나갔을 때 |
|
onselect |
입력양식의 한 필드를 선택했을 때 |
|
onsubmit |
입력양식을 서버로 보낼 때 |
|
onunload |
브라우저에서 문서가 없어졌을 때 |
|
onabort |
이미지를 읽다가 중단시켰을 때 |
|
onerror |
문서나 이미지를 읽다가 에러가 발생했을 때 |
|
onmouseout |
마우스가 링크나 특정영역안에 있다가 나갔을 때 |
|
onreset |
입력양식에서 리셋 시켰을 때 |
|
ondbclick |
마우스를 더블클릭 했을 때 |
|
ondragdrop |
마우스를 클릭한 상태에서 움직였을 때 |
|
onkeydown |
키를 입력했을 때 |
|
onkeypress |
키를 눌렀을 때 |
|
onkeyup |
키를 눌렀다 놓았을 때 |
|
onmousedown |
마우스 버튼을 눌렀을 때 |
|
onmousemove |
마우스를 움직였을 때 |
|
onmouseup |
마우스버튼을 눌렀다 놓았을 때 |
|
onmove |
윈도우나 프레임을 움직였을 때 |
|
onresize |
윈도우나 프레임의 크기를 변경하였을때 |