외부파일 이용하기
경고창 출력하기
alert("아이디가 없거나 비밀번호가 틀립니다");
변수선언
var 변수명
var 변수명 = 초기값
변수이름 = 값
배열선언
[객체생성]
배열명 = new Array(첨자)
배열명 = new Array()
[초기화]
배열명 = new Array(초기값...)
배열이름 = [초기값...]
내장함수
내장함수 | 설명 |
| alert(문자열) | 메시지 대화 상자를 나타내는 함수 |
| confirm(문자열) | 확인버튼과 취소버튼이 있는 대화 상자를 나타내는 함수 확인 버튼을 클릭하면 true값 취소 버튼을 클릭하면 false값이 전달 |
| prompt(문자열) | 대화 상자를 통해 입력된 값을 받는 함수 예)prompt("숫자를 입력하세요",0) |
| eval(수식문자열) | 수식 형태로 입력된 문자열을 계산해 주는 함수 예) eval("10 + 32") -> 42 |
| parseInt(문자열,[진수]) | 문자열을 정수로 바꿔주는 함수 parseInt(13.45) -> 13 parseInt("1010",2) ->10 parseInt("17",16) -> 23 parseInt("abc") -> NaN |
| parseFloat(문자열) | 문자열을 부동소숫점으로 바꿔주는 함수 parseFloat("12.34") -> 12.34 |
| isNaN(값) | 주어진 값이 순수한 문자인지 아닌지 판단해 주는 함수 isNaN("abc") -> true isNaN("123abc") -> true isNaN("123") -> false |
| escape(ISO-Latin-1문자셋) | ISO-Latin-1 문자셋을 ASCII 코드16진수 값 출력 특수문자 변환해 사용 escape("?") -> %3F |
| unescape(ascii) | unescape("%3f") |
사용자 정의 함수와 객체생성
[함수의 정의]
function 함수명([매개변수1],[매개변수2],...)
{
실행할 명령
.......
[return 값]
}
[함수의 호출]
함수명()
함수명(값1,값2...)
제귀함수
function fact(n)
{
result=1
if(n==1)
return result
else
return n*fact(n-1) //재귀적 함수호출
}
객체생성
[정의]
function 객체명([매개변수]...)
{
this.속성 = [초기값]
this.method = 함수이름
☞함수는 별도로 정의
[객체변수선언 및 객체 생성]
객체변수 = new 객체이름([인수]...)
☞인수 생략 가능
[객체속성과 메소드 사용]
객체변수.속성 = "속성값"
객체변수.메소드([인수],...)
☞인수 생략 가능
날짜와 시간을 알려주는 Data객체
[객체 생성]
객체변수 = new Date()
객체변수 = new Date(년,월,일)
객체변수 = new Data(년,월,일,시,분,초)
[속성]
prototype : Date 객체에 새로운 속성을 추가
[메소드]
getYear() : Date 객체에서 년도를 구한다
getMonth() : Date 객체에서 월을 구한다(1월->0,2월->1)
getDate() : Date객체에서 일을 구한다
getDay() : Date객체에서 요일을 구한다(일요일->0,월->1)
getTime() : 1970년 이후 경과된 시간을 1/1000초 단위로 구한다
getHours() : Date 객체에서 시를 구한다
getMinutes : Date 객체에서 분을 구한다
getSeconds() : Date 객체에서 초를 구한다
setYear() : Date 객체에서 년도를 설정한다
setMonth() : Date 객체에서 월을 설정한다(1월->0,2월->1)
setDate() : Date객체에서 일을 설정한다
setDay() : Date객체에서 요일을 설정한다(일요일->0,월->1)
setTime() : 1970년 이후 경과된 시간을 1/1000초 단위로 설정한다
setHours() : Date 객체에서 시를 설정한다
setMinutes() : Date 객체에서 분을 설정한다
setSeconds() : Date 객체에서 초를 설정한다
toGMTString() : Date 객체의 날짜와 시간을 GMT 기준 날짜형식으로 변경
toLocaleString() : 객체의 날짜와 시간을'년 월 일 요일 오전/오후 시 : 분 : 초'의 형태로 변경
toString() : Date 객체의 날짜와 시간을 '요일 월 일 시 : 분 : 초 연도'의 형태로 변경
Array 객체
[객체생성]
배열명 = new Array(첨자)
배열명 = new Array()
[초기화]
배열명 = new Array(초기값,...)
배열이름 = [초기값,...]
[속성]
length : 배열의 크기(확보한 기억공간 개수)
prototype : Array 객체에 새로운 속성을 추가
[메소드]
join(결합문자) : 배열의 요소들을 결합문자로 연결
결합문자를 생략하면 ,로 연결
sort() : 배열의 요소들을 크기순으로 정렬
reverse() : 배열의 요소을 거꾸로 바꾼다
concat(배열명) : 두 개의 배열을 하나로 합친다
String 객체
[객체생성]
객체변수 = new String(문자열)
객체변수 = 문자열
☞str1 = new String("seoul")
str2 = "korea"
[속성]
length : 문자열의 길이
[메소드]
big() : 글자를 한 단계 크게 지정
small() : 글자를 한 단계 작게 지정
bold : 글자를 굵게 지정
fixed : 글자를 타자기체로 지정
italics : 글자를 이태릭체로 지정
strike() : 글자의 가운데에 취소선을 그어준다
sub() : 글자를 아래 첨자로 지정
sup() : 글자를 위 첨자로 지정
fontcolor("색상") : 글자색을 지정
fontsize(크기) : 글자의 크기를 지정
toLowerCase() : 소문자로 변경
toUpperCase() : 대문자로 변경
anchor("#위치표시문자") : 와 동일한 효과로 해당 문자가 위치하는 곳에 이름을 지정
link("링크할 위치") : 와 동일한 효과로 하이퍼링크로 연결할 위치를 지정
[메소드]
charAt(인덱스) : 지정한 인덱스 값에 해당하는 문자 가져옴(인덱스는 0부터)
indexOf("문자열") : 앞에서부터 검색하여 주어진 문자열의 임덱스 값을 출력
laseIndexOf("문자열") : 뒤로부터 검색하여 주어진 문자열의 인덱스 값을 출력
substring(인덱스1,인덱스2) : 인덱스 1에서부터 인덱스2전까지의 문자열을 출력
(인덱스2가 없으면 인덱스1부터 문자열의 끝까지 출력)
slice(인덱스1,인덱스2) : 인덱스1부터 인덱스2 바로 전까지의 문자열을 분리
(종료인덱스가 음수이면 뒤에서부터 계산 -> slice함수만 음수값 지정 가능)
substr(인덱스,길이) : 인덱스부터 지정한 길이만큼 문자열을 추출
charCodeAt(인덱스) : 지정한 인덱스에 해당하는 ASCII값을 출력
concat("문자열") : 두 개의 문자열을 연결해 준다
split("분리 기준 문자",개수) : 분리 기준 문자를 기준으로 지정한 개수 만큼 분리
slice(시작위치,종료위치) : 배열의 요소들 중 시작 위치에서부터 종료 위치전까지 분리해서 새로운 배열에 저장
Math 객체
[객체생성]
-별도로 객체를 생성하지 않고 객체이름을 이용하여 직접 접근
☞Math.메소드()
[속성]
E : 오일러 상수 값
PI : 원주율
LN10 : 밑수가 10인 상용로그값
LN2 : 밑수가 2인 자연로그값
SQRT1_2 : 0.5의 제곱근 값
SQRT2 : 2의 제곱근 값
[메소드]
sin(x) : x의 sine값을 구한다
con(x) x의 cosine값을 구한다
tan(x) : x의 tangent 값을 구한다
abs(x) : x의 절대값을 구한다
exp(x) : 지수 함수를 구한다
log(x) : 로그함수를 구한다
pow(x,y) : x의 y승을 구한다
sqrt(x) : 제곱근을 구한다
random() : 0에서 1사이의 난수를 발생
round(x) : x의 반올림 값을 구한다
floor(x) : x보다 작거나 같은 수 중에서 가장 큰 정수 값을 구한다
ceil(x) : x보다 크거나 같은 수 중에서 가장 작은 정수 값을 구한다
max(x,y) : x와 y중에서 큰 값을 구한다
min(x,y) : x와 y중에서 작은 값을 구한다
화면정보를 제공하는 screen객체
height : 전체 화면의 높이(픽셀단위)
width : 전체 화면의 넓이(픽셀단위)
availHeight : 하단 작업표시줄을 제외하고 웹 문서가 열리는 실제 화면의 높이(픽셀단위)
availWidth : 웹문서가 열리는 실제 화면의 넓이
pixeDepth : 픽셀 당 비트 수(넷스케이프에서 지원)
colorDepth : 사용가능한 색상 수
이벤트
이벤트 : 사용자가 키보드를 눌렀다든지, 마우스를 클릭했다든지 또는 문서를 읽어왔다든지 할 때 마다 일어나는 동작
이벤트 핸들러 : 이벤트가 발생했을 때 이를 처리하도록 지원해 주는 것
[이벤트 종류]
이벤트 | 설명 | 이벤트 | 설명 |
click | 마우스를 클릭했을 때 | dblclick | 마우스를 더블 클릭했을 때 |
mousedown | 마우스 버튼을 눌렀을 때 | mouseup | 마우스버튼을 눌렀다가 놓았을 때 |
mouseover | 마우스가 영역 위에 진입할 때 | mouseout | 마우스가 영역을 벗어날때 |
mousemove | 마우스를 움직일 때 | dragdrop | 드래근 앤드 드롭할 때 |
focus | 입력 양식에 포커스가 생길때 | blur | 입력양식에 있던 포커스가 다른 곳으로 이동할 때 |
select | 입력양식에 특정한 항목을 선택할 때 | change | 입력양식의 내용이 변경 될때 |
submit | 입력된 양식을 서버로 보낼때 | reset | 입력된 내용을 리셋시킬 때 |
load | 웹 브라우저에서 문서를 읽을 때 | unload | 웹 브라우저에서 문서가 사라질때 |
abort | 이미지 읽기를 강제로 중단할 때 | error | 에러가 발생할 때 |
keydown | 키보드를 눌렀을 때 (keydown이벤트가 발생하고 keypress 이벤트가 발생) | keypress | 키보드의 키를 눌렀을 때 |
keyup | 키보드의 키를 눌렀다 놓았을 때 | move | 윈도우나 프레임을 움직였을 때 |
resize | 윈도우나 프레임의 크기를 조절했을때 |
|
웹 브라우저 객체
[open 메소드 사용]
open("새창에 보여줄 문서","새창의 이름","새창의 속성")
☞window.open("abc.html","kkk","width=400,height=200,menubar=no")
[새창의 속성]
창의 속성 | 값 | 설명 |
| toolbar | yes/no | 툴바 출력 여부 |
| location | yes/no | 주소 표시줄 출력 여부 |
| directories | yes/no | 연결표시줄 출력 여부 |
| status | yes/no | 상태표시줄 출력여부 |
| menubar | yes/no | 메뉴표시줄 출력여부 |
| scrollbars | yes/no | 스크롤바 출력여부 |
| resizable | yes/no | 창의 크기 조절 여부 |
| copyhistory | yes/no | 히스토리저장여부 |
| width | 픽셀 | 창의 넓이 |
| height | 픽셀 | 창의 높이 |
| left | 픽셀 | 창 출력시 왼쪽으로 떨어진 위치 |
| top | 픽셀 | 창 출력시 위에서 떨어진 위치 |
[close 메소드 사용]
close()
☞window.close() 또는 self.close()
Document 객체의 속성 사용하기
속성 | 설명 |
| title | 문서의 제목 |
| location | 문서의 위치 |
| lastModified | 문서의 마지막으로 수정된 날짜 |
| domain | 문서의 있는 서버의 도메인 이름 |
| bgColor | 문서의 배경색상 |
| fgColor | 문서의 글자 색상 |
| linkColor | 링크가 설정된 부분의 색 |
| alinkColor | 링크가 설정된 부분을 클릭했을 때 색 |
| vlinkColor | 이미 방문했던 링크부분의 색 |
| URL | 문서의 주소 |
속성 | 설명 |
| anchors | 문서에 사용된 책갈피들의 배열 |
| forms | 문서에 사용된 책갈피들의 배열 |
| links | 문서에 사용된 링크들의 배열 |
| images | 문서에 사용된 그림들의 배열 |
| applets | 문서에 사용된 애플릿들의 배열 |
| embeds | 문서에 사용된 플러그인들의 배열 |
| layers | 문서에 사용된 레이어들의 배열 |
| cookies | 클라이언트의 정보 저장배열 |
history 객체
속성
속성 | 설명 |
| length | 히스토리 목록에 저장된 url의 갯수 |
메소드
메소드 | 설명 |
| back() | 이전 페이지로 이동 |
| forward() | 다음 페이지로 이동 |
| go(숫자) | 지정된 위치만큼 이동 ☞ go(-1) |
웹문서의 주소에 대한 정보를 제공
속성
속성 | 설명 |
| href | url |
| protocol | 프로토콜 -> http |
| hostname | 호스트 -> www.kbs.co.kr |
| port | 포트번호 -> 80, 8080 |
| host | 호스트:포트번호 -> www.kbs.co.kr:80 |
| pathname | 경로 |
| hash | 문서의 책갈피 |
메소드
메소드 | 설명 |
| reload() | 문서를 다시 불러 온다 |
| replace() | 문서를 지정한 웹사이트로 대체 (예:location.replace("http:www.imbc.com") |
웹브라우저에 대한 정보 제공
속성
속성 | 설명 |
| appCodeName | 웹 브라우저 코드명 |
| appName | 웹 브라우저 이름 |
| appVersion | 웹 브라우저 버전 |
| platform | 현재 사용하고 있는 시스템 정보 |
| userAgent | 웹 브라우저가 서버에 접속시 브라우저 정보,버전,코드명등의 정보 |
| plugins | 플러그인 정보 |
메소드
메소드 | 설명 |
| javEnabled() | 자바 사용이 가능한지 여부 |
폼과 각종 입력양식을 접근하기 위해 사용
태그에서 name속성에 부여한 이름을 이용하여 접근
document.forms[0].속성
document.forms[0].메소드()
document.폼의 이름.속성
document.폼의 이름.메소드
속성
속성 | 설명 |
| action | 전송될 데이터를 처리할 url |
| elements | 폼안에 있는 실질적인 입력양식 |
| encoding | 데이터 인코딩 타입 |
| method | 전송방식 |
| name | 폼의 이름 -> [object]출력 |
| target | 입력된 데이터를 서버로 보내고 그 처리결과를 받아볼 창 |
메소드
메소드 | 설명 |
| submit() | 입력된 데이터를 서버로 전송 |
| reset() | 입력 양식을 초기화 |
이벤트처리
메소드 | 설명 |
| onSubmit() | 데이터가 전송되기 전에 발생되는 이벤트 |
| onReset() | 초기화되기 전에 발생하는 이벤트 |
입력 상자의 정보를 제공하는 객체
document.폼의 이름.텍스트상자의 이름.속성
document.폼의 이름.텍스트상자의 이름.메소드()
속성
속성 | 설명 |
| type | 해당 입력 양식의 타입 |
| name | 텍스트 상자의 이름 |
| value | 텍스트 상자에 입력된 값 |
| defaultvalue | 텍스트 상자의 초기값 |
메소드
메소드 | 설명 |
| focus | 텍스트 상자에 커서를 위치 |
| blur | 텍스트 상자에 위치한 커서를 사라지게 한다 |
| select | 텍스트 상자에 입력된 값을 모두 선택하게 한다 |
이벤트
메소드 | 설명 |
| onBlur() | 텍스트 상자에서 커서가 다른 곳에 위치할 때 발생하는 이벤트 |
| onChange() | 텍스트 상자의 내용이 변경될 때 발생하는 이벤트 |
| onFocus() | 텍스트 상자에 커서가 위치할 때 발생하는 이벤트 |
| onSelect() | 텍스트 상자에 입력된 값을 선택할 때 발생하는 이벤트 |
Button 객체
document.폼의이름.버튼의이름.속성
document.폼의이름.버튼의이름.메소드()
속성
속성 | 설명 |
| type | 해당 입력 양식의 타입 |
| name | 텍스트 상자의 이름 |
| value | 텍스트 상자에 입력된 값 |
메소드
메소드 | 설명 |
| click() | 버튼을 클릭한다 |
이벤트
메소드 | 설명 |
| onClick() | 버튼을 클릭했을 때 발생하는 이벤트 |
| onMouseDown() | 버튼을 마우스로 누를 때 발생하는 이벤트 |
| onMouseUP() | 버튼을 마우스로 눌렀다가 손을 떼는 순간 발생하는 이벤트 |
Select 객체
콤보박스나 목록상자에서 사용
document.폼의이름.콤보박스상자나 목록상자의 이름.속성
document.폼의이름.콤보박스상자나 목록상자의 이름.메소드()
속성
속성 | 설명 |
| length | 콤보 박스나 목록상자에 포함된 항목의 개수 |
| name | 콤보 박스나 목록상자의 이름 |
| options | 콤보 박스나 목록상자에 포함된 항목들로 배열형태로 제공 |
| selectedIndex | 선택된 항목의 인덱스 번호 |
| type | 목록상자의 다중 선택(multiple)정보 |
항목의 속성
속성 | 설명 |
| defaultSelected | 해당 항목에서 selected로 되어있는지 아닌지에 정보(true.false) |
| selected | 해당 항목이 선택되었는지 아닌지에 대한 정보(true,false) |
| text | 해당항목이 화면에 보여주는 내용 |
| value | 해당 항목의 실질적인 값 |
메소드
메소드 | 설명 |
| blur() | 콤보박스나 목록 상자에서 커서를 사라지게 한다 |
| focus() | 콤보박스나 목록상자에 커서를 위치시킨다 |
이벤트
처리 | 설명 |
| onBlur() | 콤보박스나 목록상자에서 커서가 사라지면 발생하는 이벤트 |
| onChange() | 항목의 선택을 변경할 때 발생하는 이벤트 |
| onFocus() | 콤보박스나 목록상자에서 커서가 위치하면 발생하는 이 |
☞option_name = new Option([optionText,optionValue,defaultSelected,selected])
Checkbox객체
체크상자에 대한 정보 제공
document.체크상자이름.속성
document.체크상자이름.method()
속성
속성 | 설명 |
| checked | 체크상자가 체크되었는지 해제되었는지 true,false |
| defaultChecked | 체크상자가 기본으로 선택되었는지 해제되었는지에 대한 true,false |
| name | 체크상자의 이름 |
| text | 해당 입력 양식의 타입 |
| value | 체크 상자의 값 |
메소드
메소드 | 설명 |
| blur() | 체크상자에 커서를 사라지게 한다 |
| focus() | 체크상자에 커서를 위치시킨다 |
| click() | 체크 상자를 클릭한다 |
이벤트처리
메소드 | 설명 |
| onBlur() | 체크상자에 커서를 사라지면 발생하는 이벤트 |
| onFocus() | 체크상자에 커서를 위치하면 발생하는 이벤트 |
| onClick() | 체크상자를 클릭했을 때 발생하는 이벤트 |
라디오 버튼에 대한 정보 베공
document.라디오버튼의 이름.속성
document.라디오버튼의 이름.메소드()
속성
속성 | 설명 |
| checked | 라디오 버튼이 선택되었는지 해제되었는지 true.false |
| defaultChecked | 라디오 버튼이 기본으로 선택되었는지 해제되었는지에 대한 true.false |
| length | 같은 이름으로 지정된 라디오 버튼의 개수 |
| name | 라디오 버튼의 이름 |
| type | 해당 입력 양식의 타입 |
| value | 라디오 버튼의 값 |
메소드
메소드 | 설명 |
| blur() | 라디오 버튼에 커서를 사라지게 한다 |
| focus() | 라디오 버튼에 커서를 위치시킨다 |
| click() | 라디오 버튼을 클릭한다 |
이벤트
메소드 | 설명 |
| onBlur() | 라디오버튼에 위치했떤 커서를 사라지면 발생하는 이벤트 |
| onFocus() | 라디오버튼에 커서를 위치하면 발생하는 이벤트 |
| onClick() | 라디오버튼을 클릭했을 때 발생하는 이벤트 |
- 이전, 다음 이미지 보기 -
-------------------------------------------- JavaScript --------------------------------------------
var page=new Array()
page[1] = "images/MFNow_Read_1.jpg";
page[2] = "images/MFNow_Read_2.jpg";
page[3] = "images/MFNow_Read_3.jpg";
page[4] = "images/MFNow_Read_4.jpg";
page[5] = "images/MFNow_Read_5.jpg";
var totalpage=5;
var nowpage=1;
function next(){
nowpage = nowpage+1;
if(nowpage > totalpage){
alert("끝 페이지입니다.");
nowpage = totalpage;
return;
}else{
document.images['MFImgView1'].src=page[nowpage];
}
}
function prev(){
nowpage = nowpage-1;
if(nowpage <=1 ){
alert("처음 페이지입니다.");
nowpage = 1;
return;
}else{
document.images['MFImgView1'].src=page[nowpage];
}
}
Textarea 값이 넣을수도 있고 넣을수도 없을때
댓글 없음:
댓글 쓰기