모델 1, 2 정의 - for Programer :: findRowExpr

Transcript 모델 1, 2 정의 - for Programer :: findRowExpr

자바스크립트(java Script)
1. 자바스크립트의 개념
1.1. 자바스크립트란?
자바스크립트(JavaScript)는 객체 지향적 프로그래밍 언어의 일종입니다. 즉, 웹 브라우저와 웹문서의 모든 요소를 객체(Object)로 인식하여 실행하고,
펄이나 C, C++ 등과 같이 서버에 설치되어 서버에서 실행되는 언어와는 달리, 사용자의 PC에서 동작하는 스크립트 언어입니다. 물론 서버측
자바스크립트도 있지만,
선마이크로시스템즈라는 회사에서 LiveScript 라는 이름으로 처음 개발되었다가 네츠케이프사의 네비게이터 2.0 에 탑재되면서
자바스크립트라는 이름을 갖게 되었습니다.
1.2. 자바스크립트와 자바
자바스크립트(Java Script)와 자바(Java)는 그 이름이나 사용되는 스크립트 부분에서 상당히 유사한 면이 있기는 하지만 전혀 별개의 언어입니다.
자바스크립트는 텍스트 편집기 등으로 쉽게 내용을 읽어 볼 수 있는 반면, 자바는 코딩된 스크립트를 컴파일 하여 일반적인 텍스트 편집기 등으로
그 소스를 읽어 볼 수 없습니다.
이렇게 컴파일된 작은 프로그램을 애플릿(applet) 이라고 하며 보통은 class 라는 확장명을 갖게 됩니다.
자바스크립트는 보통의 HTML 문서안에서 스크립트의 형태로 삽입되어 사용되며, 자바 애플릿은 <OBJECT> 혹은 <APPLET>
태그등을 사용하여 웹 문서에 포함되어 사용됩니다.
1.3. 자바스크립트의 일반적 형태
자바스크립트는 일반적으로 아래와 같은 모양을 갖습니다.
01 : <SCRIPT LANGUAGE="JAVASCRIPT">
02 : <!-03: 자바스크립트 구문
04: //-->
05: </SCRIPT>
01 : <SCRIPT LANGUAGE="JAVASCRIPT">
자바스크립트를 시작하는 태그입니다. 여기에서 LANGUAGE="JAVASCRIPT" 부분은 스크립트로 사용할 언어를 자바스크립트로 하겠다는 의미로,
이것은 자바스크립트가 아닌 다른 언어에도 사용이 가능하다는 의미를 포함하고 있습니다. 또한, LANGUAGE="JAVASCRIPT1.2" 처럼 자바스크립트의
버전을 동시에 표시해 주고 웹 브라우저에서 해당 버전의 자바스크립트를 지원하지 않으면 실행 되지 않게 방지할 수도 있습니다.
02 : <!-04 : //-->
자바스크립트를 지원하지 않는 웹브라우저인 경우에는 이 부호 안에 있는 코드 실행을 하지 않습니다. 하지만 최근의 대부분의 웹브라우저에서는
모두 자바스크립트를 지원하므로 굳이 넣어주지 않아도 에러가 생길 확률은 적습니다
자바스크립트(java Script)
1.4. 자바스크립트에서의 주석문
자바스크립트에서는 다음과 같은 주석문 처리가 가능합니다
한줄 주석문
// 주석문 내용

</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-자바스크립트 구문 2
//-->
</SCRIPT>
</BODY>
</HTML>
자바스크립트(java Script)
1.6. 자바스크립트를 간단하게 사용하려면?
같은 내용의 길고 복잡한 자바스크립트를 여러 문서에서 같이 사용하려면 모든 문서에 동일한 스크립트를 일일이 넣어 주어야 할까요?
아래의 방식처럼 자바스크립트를 외부파일로 저장하여 간단히 불러오는 방법도 많이 사용됩니다.
myScript.js 의 내용은 다음과 같습니다.
<HTML>
<HEAD>
<SCRIPT
SRC="myScript.js"></SCRIPT>
</HEAD>
<!-document.write("안녕하세요?
반갑습니다")
//-->
즉, <SCRIPT></SCRIPT> 라는 태그 부분과 태그내에 들어가는 스크립트 구문을 분리해 저장해 두는 거죠.
물론 위의 myScript.js 파일은 하나의 예제일 뿐 스크립트에 따라 달라집니다. 이렇게 하면 HTML 문서의 내용도 훨씬 줄어들고 문서가 깔끔해 집니다.
js 파일은 윈도우의 메모장 등에서 텍스트 파일로 저장하여 확장명만 js 파일로 지정해 주면 됩니다.
2. 자바스크립트의 기초 문법
2.1. 객체, 속성, 메소드
자바스크립트는 객체 지향적 언어라고 하였습니다. 생활주변에서 볼 수 있는 사람, 동물, 자전거, 꽃 등 모든 사물이 객체입니다.
자바스크립트에서 객체(object)란 웹브라우저를 포함한 웹 문서의 모든 구성요소를 말합니다. 즉, 웹브라우저의 상태표시줄, 스크롤바, 웹문서 자체, 레이어,
하이퍼링크, 이미지, 폼버튼 등등 대부분의 구성요소를 객체라고 합니다. 객체들은 또다른 하위 객체들을 가지고 있을 수 있습니다. 이런 이유로
자바스크립트의 객체구조를 계층적구조라고 말할 수 있습니다.
모든 객체는 속성(Property)을 가집니다. window 객체는 frames(프레임), name(윈도우 이름), location(위치) 등의 속성을 가지며 이미지 객체는 가로크기,
세로크기등의 속성을 가집니다.
예를들어 어떤 웹문서의 배경색상이 검정색이라면 이 웹문서의 배경색은 검정이라는 속성을 가지며 자바스크립트에서는 다음과 같이 표현할 수 있습니다.
document.bgColor="black" (객체.속성="속성값")
객체와 속성, 객체와 메소드를 연결 할 때에는 (.) 으로 연결합니다
메소드(method)는 객체의 동작과 관련된 것입니다. 「토끼」라는 객체를 예를 들면, 「빛깔이 희다」, 「앞다리가 짧다」 등은 속성에 관한 사항이고,
「뛰어간다」, 「풀을 뜯어 먹는다」 등의 행동은 메소드에 해당합니다.
자바스크립트에서 open() 메소드는 팝업 윈도우를 열어주고, write() 메소드는 문자열을 출력 합니다.
자바스크립트(java Script)
2.2. 자바스크립트의 객체들
자바스크립트에는 크게 브라우저 객체와 내장객체로 나누어 볼 수 있습니다. 브라우저객체는 웹브라우저(익스플로러, 네츠케이프 등)와 관련된 객체들이고,
내장객체는 자바스크립트 자체에 내장되어 있는 객체들입니다
브라우저 관련 객체로는 navigator, window, document, frame, history, location, form, image, link, radio, text, checkbox, select, textarea 등이 있으며,
내장객체로는 Date, Array, String, Math 등이 있습니다
자바스크립트에서는 브라우저관련 객체에 계층적으로 접근합니다.
☆ 네츠케이프와 익스플로러의 브라우저 객체 모형
2.3. 브라우저 객체별 속성과 메소드
2.3.1. navigator : 브라우저의 이름, 버전 등 브라우저 관련 정보를 알려줍니다
속성
메소드
appCodeName
브라우저 코드 이름을 알려줍니다
appName
브라우저의 이름을 알려줍니다
appVersion
브라우저의 버전정보를 알려줍니다
userAgent
브라우저의 User Agent를 알려줍니다
platform
사용중인 시스템 정보를 알려줍니다
JavaEnabled()
자바 사용이 가능한지 여부를 true, false 형태로 알려줍니다
2.3.2. screen : 사용자 컴퓨터의 해상도와 색상에 관련된 정보
속성
availHeight
윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 높이
availWidth
윈도우의 작업표시줄 등과 같은 부분을 제외한 화면의 넓이
height
화면의 높이
width
화면의 넓이
colorDepth
사용가능한 색상 수
자바스크립트(java Script)
2.3.3. 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)
자바스크립트(java Script)
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()
일정시간 후 지정함수를 호출 합니다
자바스크립트(java Script)
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 로 고칩니다
자바스크립트(java Script)
2.3.7. document : HTML 문서
속성
메소드
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 형식으로
자바스크립트(java Script)
2.3.8. Form 객체 : 입력양식에 관한 객체
<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()
폼 양식을 초기화 합니다
자바스크립트(java Script)
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
2.3.10. button 객체 : 폼 객체의 하위객체인 버튼 객체입니다
<input type=button> 태그에 의해 생성되는 객체 입니다
속성
메소드
form
버튼의 상위 폼 객체
name
버튼의 이름
type
버튼의 타입
value
버튼의 값
blur()
포커스 해제
click()
버튼을 클릭
focus()
버튼에 포커스를 줍니다
자바스크립트(java Script)
2.3.11. checkbox 객체 : 폼 객체의 하위객체인 체크박스 객체
<input type=checkbod> 태그에 의해 생성되는 객체 입니다
속성
메소드
checked
체크되어 있는지 여부(true/false)
defaultChecked
기본값으로 체크되어 있는지 여부(true/false)
form
상위 폼 객체
name
체크박스의 이름 속성
type
체크박스의 타입 속성
value
체크박스의 value 속성
blur()
포커스를 해제합니다
click()
체크박스를 클릭합니다
focus()
포커스를 줍니다
자바스크립트(java Script)
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 속성
자바스크립트(java Script)
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()
포커스를 줍니다
자바스크립트(java Script)
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()
포커스를 줍니다
자바스크립트(java Script)
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> 태그에 의해 생성되는 객체 입니다
속성
메소드
option객체의 속성
form
상위 폼 객체
length
option 의 수
name
name 속성
options
option 객체
selectedIndex
선택된 항목의 index
type
type 속성(select 유형)
blur()
포커스를 해제합니다
focus()
포커스를 줍니다
defaultSelected
기본값으로 선택된 항목(true/false)
index
현재옵션의 인덱스
selected
선택된 상태(true/false)
text
<option> 다음에 오는 문자열
value
value 속성
자바스크립트(java Script)
2.3.20. textarea : 폼의 하위객체인 textarea 객체입니다
<textarea></textarea> 태그에 의해 생성되는 객체 입니다
속성
메소드
defaultValue
초기문자열
form
상위 폼 객체
name
name 속성
type
type 속성
value
value 속성
blur()
포커스를 해제합니다
select()
textarea 입력란의 문자열을 선택합니다
focus()
포커스를 줍니다
2.4. 자바스크립트의 내장 객체
객체명
내용
Array
동종의 데이터들을 저장하고 다루기 위해 사용하는 배
열 객체
Date
날짜와 시간과 관련된 내용을 처리하는 객체
Math
수학 계산을 위한 객체
String
문자열 처리를 위한 객체
자바스크립트(java Script)
2.4.1. 배열(Array) 객체
여러개의 데이터를 참조할 때 각 변수를 선언하지 않고 하나의 배열 이름과 구성 번호로 접근하기 위해 접근합니다
배열객체 이름 = new Array()
배열객체 이름 = new Array(배열수)
배열객체 이름 = new Array(배열1, 배열2,...)
속성
메소드
length
배열의 길이 정보를 담고 있습니다
join(문자열)
배열에 들어있는 문자열을 결합합니다
reverse()
배열의 순서를 바꾸어 줍니다
sort(compareFunction)
배열을 정열합니다
slice(처음,끝)
배열의 일부를 새로운 배열로 만듭니다
concat(배열객체명)
두 개의 배열을 합쳐서 하나의 배열로
만듭니다
2.4.2. Date 객체
날자와 시간을 표시하거나 설정하는데 사용되는 객체입니다
자바스크립트에서는 그리니치표준시(GMT) 1970년 1월 1일 00시 00분 00초 가 기준입니다
객체이름 = new Date()
자바스크립트(java Script)
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자리수로 표시/설정
2.4.3. Math 객체
수학계산을 위해 사용되는 객체로 실제 사용빈도는 높지 않으나 랜덤하게 데이터를 추출 하는데 많이 사용됩니다.
자바스크립트(java Script)
속성
메소드
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을 반올림한 값
자바스크립트(java Script)
자바스크립트(java Script)

모델 1, 2 정의 - for Programer :: findRowExpr

Transcript 모델 1, 2 정의 - for Programer :: findRowExpr

Directory