[JavaScript] 자바스크립트 함수 총정리!!

window-------------frame    ---form-----------texarea      navigator-----plugin
           --------document     -----------layer       ---test                  -----mimetype
           --------location        ---link        ---fileupload
           --------history         ---image       ---password
                                   ---area        ---hidden
                                   ---anchor      ---submit
                                   ---applet      ---reset
                                   ---plugin      ---radio
                                                  ---checkbox
                                                  ---button
                                                  ---select--------------option

#########################
개체(Object) : 개체라는 말은 상당히 추상적이다. 이 개념을 알려면 "객체지향"을 공부해야 한다. 이 과에서 의미한 개체는 HTML 문서, 브라우저 윈도우, 날짜/시간과 같은 것을 의미하며 일반적으로 개체는 그 개체가 할 수 있는 일을 정의한 메소드와 그 개체의 특징을 나타내는 속성으로 구성된다.
###  date : Date는 시스템의 날짜와 시간을 얻기 위한 개체이다. 이 개체를 생성하는 방법은 다음과 같다 :

Nameofobject = new Date();
###  document : 이것은 해당 자바스크립트를 포함하고 있는 HTML 문서를 참조할 수 있는 개체를 의미한다.
###  location : Location은 특정 URL을 지징하는 개체이다. 다음과 같은 형식으로 사용된다:

parent.location='index.html'
(location이란 속성도 있는데 사용법이 서로 틀리다는 것을 기억하기 바란다.)
###  window : window는 브라우저 화면을 참조할 수 있는 개체이다.

#########################
메소드(Method) : 메소드는 어떤 개체로 하여금 어떻게 행동할지를 알려주는 하나의 명령을 의미한다.
alert() : alert는 window 개체 또는 하이퍼텍스트 링크내에서 대화 상자를 만들기 위해 사용되는 메소드이다. alert문의 괄호 안에 있는 텍스트를 대화 상자에 보여주고 OK 버튼이 함께 제공되며 사용자가 계속 진행하기 위해서는 이 버튼을 눌러야만 한다.
getMonth() : Date 개체의 메소드로 현재 월을 0~11 사이의 숫자로 반환한다.
getDate() : Date 개체의 메소드로 현재 날짜를 1~31 사이의 숫자로 반환한다.
getYear() : Date 개체의 메소드로 현재 연도를 0~99 사이의 숫자로 반환한다. (인터넷 익스플로러 5 이상에서는 4자리 숫자를 반환한다)
getFullYear() : Date 개체의 메소드로 현재 연도를 네자리 숫자로 반환한다. (넷스케이프 4.0 이상, 인터넷 익스플로러 3.x 이상에서 사용할 수 있다)
getDay() : Date 개체의 메소드로 현재 요일을 1~7 사이의 숫자로 반환한다.
getHours() : Date 개체의 메소드로 현재 시간을 0~23 사이의 숫자로 반환한다.
getMinutes() : Date 개체의 메소드로 현재 분을 0~59 사이의 숫자로 반환한다.
getSeconds() : Date 개체의 메소드로 현재 시간을 0~59 사이의 숫자로 반환한다.

Write() : Write 메소드는 Document 개체가 웹 페이지 상에 텍스트를 표시할 수 있도록 해주는 메소드이다.

 

#########################
속성(Properties) : 속성은 개체의 한 특징 또는 그 개체의 일부를 의미한다. 예를 들어 브라우저 윈도우의 상태 표시줄은 window 개체의 속성이며 windows.status로 참조된다. (표시형식 : 개체이름.속성이름)

bgColor : bgColor는 document 개체의 속성으로 HTML 문서의 배경색을 의미한다.
parent : parent는 특별히 프레임과 함께 자주 사용되는 속성으로 특정 프레임을 가리킬 때 사용된다. 만일 프레임 밖에서 사용된다면 브라우저 전체 윈도우를 가리키게 된다.
status : status는 window 개체의 속성으로 브라우저 화면의 왼쪽 하단에 위치한 상태 표시줄을 의미한다.

#########################
에러(Error) : 에러 또는 오류 메시지 창은 스크립트 안에 뭔가 문제가 있을 경우 발생한다. 크게 두 가지 종류가 있는데 구문(Syntax) 오류와 런타임(RunTIme) 오류이다.
구문 오류(Syntax Error) : 스크립트 안에 잘못된 철자가 있거나 컴퓨터가 인식하기 어려운 텍스트가 있을 경우, 자바스크립트 문법에 어긋난 경우 발생한다.
런타임 오류(Run-Time Error) : 런타임 오류는 잘못된 자바스크립트 명령어를 사용했을 때 발생한다.

 

#########################
이벤트 핸들러(Event Handlers) : 이벤트 핸들러는 HTML 코드에 내장되는 자바스크립트 명령어다. 사용자와 웹 페이지 사이의 상호 작용을 위해 HTML 코드와 함께 사용된다.
onBlur : onBlur는 사용자가 select, text, textarea 폼 요소에 있다가 그 요소에서 벗어나게 될 때 발생하는 이벤트 핸들러이다. 즉, 사용자가 그 아이템에 대한 포커스를 잃을 때 발생한다.
onChange : onChange는 사용자가 select, text, textarea 폼 요소에 있는 텍스트를 변경한 후 그 요소를 떠날 때 발생하게 된다.
onClick : onClick은 사용자가 링크와 같은 오브젝트를 클릭할 때 발생한다.
onFocus : onFocus는 사용자가 select, text, textarea 폼 요소를 선택할 때 발생한다. 즉 사용자가 그 폼 요소에 포커스를 맞출 때 발생한다.
onLoad : onLoad는 웹 페이지가 열릴 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.
onMouseOver : onMouseOver는 사용자가 링크 위에 마우스를 올려 놓았을 때 발생하는 이벤트 핸들러이다.
onSelect : onSelect는 사용자가 text, textarea 폼 요소에 있는 텍스트의 일부 또는 전체를 선택할 때 발생한다.
onSubmit : onSubmit은 submit 버튼 폼 요소를 사용자가 틀릭할 때 발생한다.
onUnLoad : onUnload는 사용자가 웹 페이지를 떠날 때 발생하는 이벤트로 HTML의 BODY 태그 안에서 사용된다.

#########################
주석(Comment) : 주석은 더블 슬래쉬(//)로 표시한다. 주석 처리하고 싶은 텍스트의 왼쪽 옆에 "//" 표시를 해주면 된다. "//"는 // 표시의 오른 쪽에 있는 라인 전체를 주석 처리하는 것이다. 만일 주석 처리하고 싶은 줄이 여러 줄이라면 // 대신 시작을 "/*"로 끝을 "*/"로 막아 주면 된다. 즉, /*와 */ 사이에 있는 모든 내용이 주석 처리 된다는 것이다.

#########################
컴마(comma : ",") : 자바스크립트 이벤트 핸들러를 동시에 여러 개 사용하고자 할 때 컴마(,)를 사용한다.

 

###################################################################################
window.alert('내용');//경고창
prompt('내용',초기값);//입력값 받기
confirm('내용');//확인,취소
print();//현 윈도우를 인쇄하고자 할 때

 

parseInt(변수); 소수점자리 그냥 버림
parseFloat(변수);
Math.ceil(변수); 소수점자리없앤정수(소수점자리 값 올림)
Math.floor(변수); 소수점자리없앤정수(소수점자리 값 내림)
Math.round(변수); 소수점자리없앤정수(소수점자리 값 반올림)

 

var test;
var myArray = new Array();
var myArray = new Array(5);
var myArray = new Array('1','2','5','4','3');
myArray[0] = '1';
myArray[0][0] = '1';

 

if(비교값1){처리내용1}elseif(비교값2){처리내용2}else{비교값3};
논리연산자 && (AND), || (OR), ! (NOT)
연산기호 ==,<,>,<=,>=,!=
switch (비교내용) {
 case '1':
  처리내용1; break;
 case '2':
  처리내용2; break;
 default:
  처리내용3; break;
}

 

function 함수명(초기값){ 처리내용; 리턴값; }
return 반환값;

 

for(i=0;i<5;i++){처리내용}
while(i<5){처리내용};

isNaN(변수); -> 숫자 false 문자 true

length -> 문자열의 길이
myArray.length; -> 변수길이
myArray.sort();
var myString = new String("나는 String 개체입니다");
var lengthOfString = myString.length;
charAt(위치값) -> 문자열에서 한문자 선택
charCodeAt(위치값) -> 문자열에 한문자 코드값
myString = String.fromCharCode(65,66,67); -> 문자 코드를 문자열로 변환 (ABC)
indexOf('앞부분 부터 찾을문자');
lastIndexOf('뒷부분 부터 찾을 문자') -> 문자열의 위치를 반환, 없을 경우 -1반환
substr(시작위치,복사할문자수); -> 문자열의 일부분 복사하기
substring(시작위치,끝위치);
myDate.toString(); -> 숫자를 문자열로 반환
myString.toLowerCase(); -> 문자열의 소문자 변환
myString.toUpperCase(); -> 문자열의 대문자 변환

Math.PI 파이값
Math.floor((Math.random() *  6) + 1); -> 1~6사이에 난수를 발생한다.
Math.pow(제곱근, 변수) -> 제곱 Math.pow(4,2) = 16
Math.abs(변수); -> 절대값

concat() -> var TestArray = TestA.concat(TestB); TesTA와 TestB에 배열을 결합
slice() -> var slicedArray = TestA.slice(1,3); TestA에 인덱스1에서 부터 인덱스 3까지를 가져온다.
join() -> var TestString = TestA.join("
"); TestA를 문자열로 변환 1
2
5
4
3...
sort() -> TestA.sort(); 배열을 순서대로 정렬
reverse() -> TestA.reverse(); 배열을 역순으로 정렬

 

var myDate = new Date();
var myDate = new Date(949278000000);
var myDate = new Date("1 jan 2003");
var myDate = new Date(2000,0,31,15,35,20,20); 2000년 1월 31일 35분 20초 20밀리
getDate() -> myDate.getDate(); 날짜를 반환
getDay() -> myDate.getDay(); 요일을 정수로 반환
getMonth() -> myDate.getMonth(); 월을 정수로 반환
getFullYear() -> myDate.getFullYear; 년을 네 자리 수로 반환
setDate() -> myDate.setDate(27); 날짜를 설정
setMonth() -> myDate.Month(1); 월을 설정
setFullYear() -> myDate.setFullYear(2003); 년을 설정
myDate.getHours(); 시간
myDate.getMinutes(); 분
myDate.getSeconds(); 초
myDate.getMilliseconds; 밀리

 

window.location;
window.location.replace(URL);
window.location.href(URL);
window.location.reload();

window.history; window.history.go(-1); window.history.go(1); window.history.go(3);

window.navigator

window.screen;
window.screen.height;//화면 높이
window.screen.width; //화면 너비
window.screen.colorDepth;//사용가능한 색상수
window.screen.pixelDepth;//한 픽셀당 비트수

window.document;
window.document.bgColor = "skyblue";
window.document.write('내용');
window.document.forms[인덱스]
window.document.form1.length;
window.document.images[이름명]
window.document.images[이름명].src = "값.gif"
window.document.images[이름명].value = "처리이름"
window.document.links[인덱스]
window.document.links[인덱스].onclick = "이름명";

window.defaultStatus = '하이' -> 상태 표시줄 메시지-항상 보여주기 위한 상태표시줄 메시지

window.status = '하이' -> 상태 표시줄 메시지

onLoad="처리내용";//웹페이지 열때//body,frameset(여러개의 프레임의 경우)
onunload="처리내용";//웹페이지 닫을때//body,frameset
onresize="처리내용";//윈도우나 프레임의 크기를 바꾸었을 때

onclick="처리내용";//클릭했을 때
onmouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때
onmousedown="처리내용";//마우스 버튼을 눌렀을 때
onmouseover="처리내용";//링크 위로 마우스가 지나갔을 때
onmouseout="처리내용";//마우스가 링크나 특정 영역 안에 있다가 나갔을 때
onmousemove="처리내용";//마우스를 움직였을 때
onmouseup="처리내용";//마우스 버튼을 눌렀다 놓았을 때

onfocus="처리내용";//포커스를 맞출 때 발생한다.
onblur="처리내용";//포커스를 잃을 때
onreset="처리내용";//입력 양식에서 취소reset시켰을 때
onsubmit="처리내용";//submit버튼을 누를 때
onselect="처리내용";//텍스트를 블럭 지정할때
onchange="처리내용";//내용이 바뀔때

onkeydown="처리내용";//키를 입력했을 때
onkeypress="처리내용";//키를 눌렀을 때
onkeyup="처리내용";//키를 눌렀다 놓았을 때

 

window 객체의 메소드
blur();//특정 객체의 포커스 없애기
click();//입력 양식이나 링크를 마우스로 클릭했을 때
focus(); -> txtAge.focus();//특정 개체에 포커스가 가도록 만들기
select(); -> txtAge.select();//입력 양식의 한 필드 블록 지정했을 때

onabort -> 이미지의 로딩을 취소할 때 발생한다.
onerror -> 페이지를 로딩하면서 오류가 생길 때 발생한다.
//이미지나 문서가 전송되는 도중에 네트웍이 끊어지거나 시스템이 다운되는 등의 여러가지 이유로 에러가 생겼을 때

**********************************************************************************************
**********************************************************************************************
Button 개체
이벤트 - onblur, onclick, onfocus, onmousedown, onmouseup
프로퍼티 - form, name, type, value
메서드 - blur(), click(), focus()

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CheckBox 개체
이벤트 - onblur, onclick, onfocus
프로퍼티 - checked, defaultChecked, form, name, type, value

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
document 개체//body,head,title태그 안
이벤트 - onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmouseup
프로퍼티
- alinkColor(링크를 클릭했을 때 나타나는 색), vlinkColor(이전에 방문했던 링크를 표시하는 색),linkColor(문서에서 링크를 표시하는 색), links(문서에 있는 링크들의 배열)
-anchors(문서에 있는 표식들의 배열), applets(문서에 있는 자바애플릿의 배열),embeds(문서에 있는 플러그인들의 배열),  form_name, forms(문서에 있는 입력양식들의 배열), images(문서에 있는 이미지들의 배열) ->.length로 배열 [0]...
-bgColor, fgColor(문서의 전경색),cookie(클라이언트의 pc에 저장된 정보), domain(현재 문서의 도메인 이름), lastModified(문서가 마지막으로 수정된 날짜), referrer(링크로 현재 문서에 왔을 때 이전 문서의 url위치), title(문서의 제목), URL(문서의 URL주소)
메서드 - close()(문서에 데이타를 출력하는 것을 마무리), open()(문서에 데이타를 출력하기 위해 준비시키는 것), write()(문서에 데이타 출력), writeln()(문서에 데이터 출력(줄바꾸기 포함))

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
history 개체
프로퍼티 - length
메서드 - back(), forward(), go()

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
img 개체
이벤트 - onabort, onerror, onload
프로퍼티 - border, complete, height , hspace, lowsrc, name, src, vspace, width
**********************************************************************************************
**********************************************************************************************
window.document.form1.textarea1.value;
window.document.form1.radio1[인덱스].checked = true;
window.document.form1.radio1[인덱스].checked = false;
window.document.form1[인덱스].type == "checkbox"; -> form1에 checkbox형인 체크박스

var myNewOption = new Option("TheText","TheValue","TheTest");
document.form1.selectObject.option[0] = myNewOption; -> 항목설정
document.form1.selectObject.option[0] = null; -> 항목제거
document.form1.selectObject.options[2].text == 수요일;
document.form1.selectObject.options[2] == null;
form1.secondDay.options[form1.secondDay.selectedIndex].value
form1.firstDay.options[nowDate.getDate() - 1].selected = true;

secondDate.valueOf(); -> 1970년 1월 1일부터 date개체에 저장한 시각까지의 시간을 밀리초 단위로 반환

window.name -> 프레임의 윈도우 객체 이름
window.parent; -> 프레임의 부모의 윈도우가 가지고 있는 window개체에 접근//프레임에서 현재프레임의 상위 프레임
window.parent.location.href -> 현재윈도우의 부모의 주소
var formobject = window.parent.parent.fraMenu.document.form1;
formobject.choosePage.selectedIndex = linkIndex;

window.top; -> 최상위 프레임에 접근(현재 프레임의)
window.parent.parent.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.fraMenu.document.form1.choosePage.selectedIndex = linkIndex;
window.top.location.relace("myPagename.htm"); -> 최상위 페이지 수정
return window.top.addPage(window.location.href);

window.self; -> 현재 window 개체의 참조를 반환

window.open("파일명","target","width=크기,height=크기,left=위치,top=위치,directories=yn,copyHistory=yn,location=yn,resizable=yn,scrollbars=yn,status=yn,toolbar=yn"); -> 새창열기
width=크기 -> 새윈도우의 폭
height=크기 -> 새윈도우의 높이
left=위치 -> 윈도우의 위치를 왼쪽 끝을 기준
top=위치 -> 윈도우의 위치를 위쪽 끝을 기준
directories=yn -> 디렉토리 버튼을 보여준다. (연결)익스플로러 연결도구모음, 익스플로러 전용yew||no
copyHistory=yn -> 윈도우의 히스토리를 복사
location=yn -> 주소 입력창
resizable=yn -> 사용자가 윈도우의 크기를 조정 유무
scrollbars=yn -> 스크롤바 사용 유무
status=yn -> 상태 표시줄
toolbar=yn -> 툴바

window.close; -> 창닫기

window.opener; -> 기존 윈도우의 window 개체의 참조를 반환한다.//open()메소드로 윈도우를 열였을 때 호출한 윈도우
window.opener.document.bgcolor = "RED";
window.opener.document.form1.text1.value;

newWindow.resizeTo(350,200);
newWindow.moveTo(100,400);

newWindow.resizeBy(100,200);
newWindow.moveBy(20,50);

var myString = "A,B,C";
var myTextArray = myString.split(','); -> myTextArray[0]="A",myTextArray[1]="B",myTextArray[2]="C"

var myString = "본 행사는 5월 21일에 개최합니다";
var myCleanedUpString = myString.replace("5월","6월"); -> 본 행사는 6월 21일에 개최합니다

var myString = "1234567890";
alert (myString.search("7")); -> 6을 출력;

var myString = "1997, 1998, 1999, 2000, 2001, 2002";
myMatchArray = myString.match("2000");
alert(mymatchArray.length); -> myMatchArray = ('2000','2000','2001','2002')

RegExp() -> 정규식 생성자
var myRegExp =new RegExp("\\b'|'\\b");
/검색내용/gi -> g 전체를 검색, i 대소문자 구분하지 않음
\d -> 0부터 9사이의 숫자
\D -> 숫자가 아닌 모든 문자
\w -> A-Z,a-z,0-9,언더스코어 문자_와 같은 모든 단어문자
\W -> 단어 문자가 아닌 모든 문자
\s -> 탭,개행문자,캐리지 리턴, 폼 피드,수직 탭등 모든 공백 문자
\S -> 공백 문자가 아닌 모든 문자
.  -> 모든 단일 문자
[...] -> 중괄호 안에 있는 모든 문자중의 하나
[^...] -> 중괄호 안의 문자를 제외한 모든 문자
1-880-888-5474와 일치하는 정규식 -> /\d-\d\d\d-\d\d\d-\d\d\d\d/

{n} -> n개의 앞 요소와 일치한다.
{n,} -> n개 이상의 앞 요소와 일치한다.
{n,m} -> n개 이상 m개 이하의 앞 요소와 일치한다.
? -> 0개나 1개의 앞 요소와 일치한다.
+ -> 1개 이상의 앞 요소와 일치한다.
* -> 0개 이상의 앞 요소와 일치한다.
1-880-888-5474와 일치하는 정규식 -> /\d-\d{3}-\d{3}-\d{4}/

처음 /와 마지막 /는 이 사이에 있는 문자가 정규식임을 자바스크립트에게 알려준다.

/Paula?/ -> a가 있을수도 있고 없을 수도 있다.

^ -> 맨처음
$ -> 마지막
\b -> 단어 경계에 일치
\B -> 단어 경계가 아닌 위치에 일치

var myRegExp = /(\d{4}/g;
myString = myString.replace(myRegExp,"the year $1") -> the year 1999, the year 2000,...

한번실행후 끝
window.setTimeout("처리내용",시간); -> myTimerID = window.setTimeout("alert('시간 끝')",3000); 3초후 실행,고유한 식별아이디 반환
clearTimeout(myTimerID);

일정 시간 간격을 두고 연속적으로 실행
myTimerID = setInterval("myFunction()",5000);
clearInterval(myTimerID);

document.body.scrollWidth / 10; -> 윈도우의 내부 폭을 픽셀 단위로 알아내기

document.cookie = "UserName=홍길동;expires=Tue, 28 Dec 2010 00:00:00;";
var expireDate =new Date();
expdate.setTime(expireDate.getTime() + 1000 * 3600 * 24 * 30); // 30일
expireDate.setMonth(expireDate.getMonth()+6); -> 만기일 설정
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";";
document.cookie = "UserName=홍홍홍;expires=" + expireDate.toGMTString() + ";path=/mystore;"; <- /mystore 디렉토리에서도 접근 가능

escape(변수);
unescape(변수);

setCookie("Name","Bob","","");
setCookie("Age","101","","");
alert(document.cookie);

var expireDate =new Date();
expireDate.setMonth(expireDate.getMonth()+12); -> 만기일 설정
setCookie("Name","Bob","/mystore",expireDate.toGMTString());

--동적 HTML--

내용

단락

document.all["mypara"];
mypara.innerText="hi~~~~~~~~~~";
mypara.style.color='red';

mypara.style.left = 값+"px";
mypara.innerHTML; -> 인라인수준
div1.outerHTML; -> 블록수준

beforeBegin -> 시작 태그 바로 앞
afterBegin  -> 태그 바로 다음
beforeEnd   -> 종료 태그 바로 앞
afterEnd    -> 종료 태그 바로 다음
div1.insertAdjacentHTML("beforeBegin","
");

이벤트
event.screenX
event.screenY
event.button -> 0 안누름 1 왼쪽누름 2 오른쪽누름 3 왼쪽오른쪽누름 4 가운데 누름 5왼쪽가운데누름 6오른쪽가운데누름 7 버튼3개다누름

fromElement, srcElement, toElement

var xPos = parseInt( srcElement.offsetLeft );
var yPos = parseInt( srcElement.offsetTop );
srcElement.width;
srcElement.tagName;
srcElement.RollOver; ->

출처 : http://cafe.naver.com/loveyjg92/14263