자바스크립트............................................................. |
|
|
변수, 배열,연산,조건문,반복문,객체와 메서드, 프로퍼티,이벤트에 대한 기초를 닦아야 |
• HTML문서 외부에 따로 둘 때
• 자바스크립트를 이해하지 못하는 브라우저를 위해 <!-- -->
• 주석 처리
|
• BODY 태그 위에
• 필요시 문서내 적당한 곳에 (나중에 실행되는 차이가...)
|
데이타형과 변수 ............................................................. |
| 정수형 | 10진수, 16진수, 8진수의 3가지 형태(양수나 음수) | ||||||||||||
| 실수형 부동소수점형 | 20.5, -30.5 와 같이 소수 부분이 있는 10진수 와 지수로 표현된 숫자 | ||||||||||||
| Boolean | true와 false의 두 가지 값만을 가지며 주로 함수의 리턴 값이나 관계 연산자의 결과값으로 사용 | ||||||||||||
| Null | 아무것도 없다는 것을 의미, 예외처리에 자주 사용한다 | ||||||||||||
| 문자열 | 따옴표(“”, ‘ ‘)에 들어가는 모든 데이타는 문자열 데이타가 된다 | ||||||||||||
| 특수문자 |
|
|
| 변수 | 프로그램에서 자료형의 값을 가지고 있는 저장 장소 | |||||||||
| 변수의 규칙 | 변수는 영어알파벳 문자로 시작하면 된다 예약어는 변수로서 사용하지 않으면 된다 | |||||||||
| 변수의 선언 |
| |||||||||
| ||||||||||
|
| 1 | <script language="javascript"> document.write("웹스쿨 드래곤아이입니다~~") </script> | ||
| 2 | <script language="javascript"> str1 = "웹스쿨 드래곤아이입니다~~" document.write(str1) </script> | ||
| 3 | <script language="javascript"> var str1 = "웹스쿨 드래곤아이입니다~~" document.write(str1) </script> | ||
| 4 | <script language="javascript"> var str1 = "웹스쿨 \"드래곤아이\"입니다~~" document.write(str1) </script> | ||
| 5 | <script language="javascript"> var str1 = "웹스쿨 드래곤아이입니다~~" ; document.write(str1) </script> | ||
| |||
|
| abstract boolean break byte case catch char class const continue default do double else extend false final finally float for function goto if implements import in instanceof intinterface long native new null package private protected public return short static super switch synchronized this throw thorws transient true try var void while with |
연산자 와 연산 ............................................................. |
| - | 부호 변환 |
| +,-,*,/ | 사칙연산 |
| % | 나머지 |
| <script language="javascript"> inta=10 document.write(-inta) </script> <script language="javascript"> inta=10 document.write(inta+10) // 사칙연산중 덧셈만 해본다 </script> <script language="javascript"> inta=10 document.write(inta%4) </script> |
|
| > | 보다 크다 |
| >= | 보다 크거나 같다 |
| < | 보다 작다 |
| <= | 보다 작거나 같다 |
| == | 서로 같다 |
| != | 같지 않다 |
| <script language="javascript"> inta=10 intb=20 document.write(inta>intb) // false </script> <script language="javascript"> inta=10 intb=20 document.write(inta<intb) // true </script> <script language="javascript"> inta=10 intb=20 document.write(inta==intb) // false </script> <script language="javascript"> inta=10 intb=20 document.write(inta!=intb) // true </script> |
|
| ! | 논리 부정(여집합) * 참이면 거짓, 거짓이면 참 |
| && | 논리 곱(교집합) * 둘다 참일때만 참 |
| || | 논리 합(합집합) *둘중 하나라도 참이면 참 |
| ^ | XOR(배타적 논리합) * 예제 생략 |
| ? | 조건 표현식에 사용 * 예제 생략 |
| <script language="javascript"> inta=10 intb=20 document.write(inta==10) // true </script> <script language="javascript"> inta=10 intb=20 document.write(!(inta==10)) // flase </script> <script language="javascript"> inta=10 intb=20 document.write((inta<30)&&(intb<30)) // true </script> <script language="javascript"> inta=10 intb=20 document.write((inta>10)||(intb>10)) // true </script> |
|
| = | 가장 많이 사용하는 연산자 inta=10, strName="홍길동" |
| += | inta=inta+10 과 같음 |
| -= | inta=inta-10 과 같음 |
| *= | inta=inta*10 과 같음 |
| /= | inta=inta/10 과 같음 |
| %= | inta=inta%10 과 같음 |
|
| ++ | 1씩 증가 (사전 증가,사후 증가) |
| -- | 1씩 감소 (사전 감소,사후 감소) |
| <script language="javascript"> inta=10 document.write(inta++) // 10 사후 증가 </script> <script language="javascript"> inta=10 document.write(++inta) // 11 사전 증가 </script> <script language="javascript"> inta=10 document.write(inta--) // 10 사후 감소 </script> <script language="javascript"> inta=10 document.write(--inta) // 9 사전 감소 </script> |
|
조건문 IF, SWITCH............................................................. |
* else if 는 필요한 경우 계속 추가를... |
| if(조건) { 명령문 } | if(조건) { 명령문1 } else { 명령문2 } | if(조건1) { 명령문1 } else if(조건2) { 명령문2 } | if(조건1) { 명령문1 } else if(조건2) { 명령문2 } else { 명령문3 } |
| <script language="javascript"> inta=10 if(inta==10) { document.write("10 이네요") } </script> <script language="javascript"> inta=100 if(inta==10) { document.write("10 이네요") } else { document.write("10 이 아니군") } </script> <script language="javascript"> inta=100 if(inta==10) { document.write("10 이네요") } else if(inta==100){ document.write("100 이네요") } </script> <script language="javascript"> inta=200 if(inta==10) { document.write("10 이네요") } else if(inta==100){ document.write("100 이네요") } else{ document.write("10도 아니고 100도 아니네") } </script> |
|
| switch (표현식) { case 값1 : 문장 1 ; break; case 값2 : 문장 2 ; break; case 값3 : 문장 3 ; break; …… default : 문장 n; } | 표현식의 경우의 수가 일치할 때 준비된 명령문장을 수행한다. 해당하는 경우가 없을 때 디폴트를 사용할 수 있다. * 탈출을 위해 꼭 break 를 !!! |
| <script language="javascript"> inta=10 switch(inta){ case 5: document.write("5 이네요"); break; case 10: document.write("10 이네요"); break; default : document.write("잘 모르겠군요") } </script> |
반복문 FOR, WHILE, DO ......................................................... |
| for(초기값; 종료 조건; 증감식) { 명령문 } | 상수(변수)를 정의하고 이 상수의 시작과 끝을 정해 두고 정해진 간격으로 준비된 명령을 반복 수행시킴 |
| <script language="javascript"> for(k=1; k<=10; k++ ) { document.write(k + "<br>") // 1-10 까지 } </script> <script language="javascript"> for(k=2; k<=10; k=k+2 ) { document.write(k + " <br>") // 1-10 까지 짝수 } </script> <script language="javascript"> for(k=1; k<=10; k++ ) { if (k%2==0) { document.write(k + " <br>") // 1-10 까지 짝수 } } </script> <script language="javascript"> for(i=1; i<10; i++ ) { for(k=1; k<10; k++ ) { document.write(i + "*" + k + "=" + i*k + " ") // 1-10 까지 } document.write("<br>") // 구구단 1단마다 줄바꾸기 } </script> |
|
| while (조건) { 명령문 } | 조건이 참인 경우 명령문을 반복 수행 |
| do { 명령문 } while(조건) | 일단 명령문을 한번 수행후 조건을 검토하여 참이면 반복 수행 |
| <script language="javascript"> k=1 // 초기값 while ( k<=10 ) { document.write(k + "<br>") // 1-10 까지 k++ // 조건 변경 이 필요함 } </script> <script language="javascript"> k=1 // 초기값 do { document.write(k + "<br>") // 1-10 까지 k++ // 조건 변경 이 필요함 }while ( k<=10 ) </script> |
|
| continue | 아래 수행을 중지하고 조건 검토로 이동 |
| break | 반복문 자체를 완전 탈출함 |
<script language="javascript"> k=0 // 초기값 while ( k<=10 ) { k++ // continue 이전에 조건 변경 이 필요함 if (k==5) { document.write(k + "<br>") // 5는 제외됨 <script language="javascript"> k=0 // 초기값 while ( k<=10 ) { k++ // 조건 변경 이 필요함 if (k==5) { document.write(k + "<br>") // 4까지 출력됨 |
대화상자 (alert, confirm) …………………………………….. |
| alert("얼랏입니다") 또는 str = "드래곤" alert(str) | 경고 메시지창을 띄우기 |
| <script language="javascript"> // 권한이 없는 경우를 알리고자 할 때 alert("얼랏입니다") </script> <script language="javascript"> // 축하메시지를 띄울 경우 alert("회원가입을 축하합니다!") </script> <script language="javascript"> // 코딩중 어떤 값을 확인해 보고자 할 때 intsum=50+50 alert(intsum) </script> |
|
if (confirm("진짜 삭제?")!=0) { | 확인상자로 "확인" 과 "취소" 둘중 선택을 할 수 있다. 확인을 누르면 confirm("진짜 삭제?") 는 true(1) 을 취소 을 누르면 confirm("진짜 삭제?") 는 fasle(0) 을 갖는다 |
| <script language="javascript"> // 중요한 처리를 앞두고 한번더 확인을 하도록 유도 할 때 (주로 삭제 의 경우) if(confirm("삭제됩니다")==0) document.write("취소를 선택") else document.write("확인를 선택") </script> <script language="javascript"> if(confirm("삭제됩니다")!=0) document.write("확인를 선택") else document.write("취소를 선택") </script> <script language="javascript"> // 어떤 값을 리턴하는 확인해보기 document.write(confirm("삭제됩니다")) // true </script> |
|
* 많이 사용하지 않을 것 같아서 생략하는게.. |
내장 함수 ………………………………………………… |
| eval("50")+50 또는 inta="50" eval(inta)+50 | 숫자 형태를 가진 문자열이나 표현식을 숫자로 바꿔준다. * 사용자 입력값을 계산을 위해 사용한다면 꼭 필요한 조치이다. |
| <script language="javascript"> document.write("50"+50) // 계산이 안되고 문자열 결합이 됨, 5050 document.write(eval("50")+50) // 100으로 계산됨 </script> |
|
| paresInt("10.5")+50 또는 inta="10.5" parseInt (inta)+50 | 숫자 형태를 가진 문자열이나 표현식을 정수나 실수로 바꿔준다. * 사용자 입력값을 계산을 위해 사용한다면 꼭 필요한 조치이다. |
| <script language="javascript"> document.write("10.5"+50) // 계산이 안되고 문자열 결합이 됨 document.write(parseInt("10.5")+50) // 60으로 계산됨 document.write(parseFloat("10.5")+50) // 60.5으로 계산됨 </script> |
|
| isNaN("10.5") 또는 inta="10.5" isNaN(inta) // NaN : Not a Number | 표현식이나 값이 숫자가 아닌지를 true/false 로 리턴함. * 숫자가 아니면 true를 !!! (주의) * 사용자 입력값이 숫자가 아닌지/인지를 판단하고자 할 때!!! |
| <script language="javascript"> document.write(isNaN("0050")) // false document.write(isNaN("홍길동")) // true document.write(isNaN(50)) // false (숫자일 경우 fasle!!!) </script> |
|
| escape("가") 또는 stra="가" escape(stra) | unescape("%uAC00") 또는 inta="%uAC00" unescape(inta) |
알파벳과 숫자 및 *, @, -, _ , + , ., / 를 제외한 문자를 모두 16진수 문자로 바꾸어 준다 | 왼쪽과 반대로 |
| <script language="javascript"> document.write(escape("가")) document.write(unescape("%uAC00")) // "가" </script> |
사용자 정의 함수 ......................................................... |
| 1. 매개변수 없는 경우 function 함수이름() { 자바스크립트 코드 } | 함수이름 뒤에는 꼭 () 를 ... 이 함수가 수행할 범위는 {} 로 ... |
| <script language="javascript"> function TEST() { document.write("안녕!") } </script> <script language="javascript"> TEST() // 호출하기(이름을 불러줘야 실행!) </script> |
| 2. 매개변수 있는 경우 function 함수이름(변수1,변수2, ...) { 자바스크립트 코드 } | 함수이름 뒤에는 () 속에 매개변수를 지정 * 호출하는 쪽에서 매개해 줘야!! |
| <script language="javascript"> function TEST(sname,sage) { document.write("이름은 " + sname +" 이고, 나이는 " + sage) } </script> <script language="javascript"> TEST("홍길동",25) // 호출하기(이름을 불러줘야 실행!) </script> |
| 3. return 값이 있는 경우 function 함수이름(변수1,변수2, ...) { 자바스크립트 코드 } | 함수 실행 결과 리턴값을 호출 한 쪽 \에 넘겨줄 수 있다. |
| <script language="javascript"> function TEST(inta,intb) { return inta+intb // 호출한 쪽에 값을 넘겨줌! } </script> <script language="javascript"> returnV = TEST(50,25) // 실행결과 리턴값을 returnV 라는 변수에 대입! document.write(returnV) </script> |
|
| 1. 다른 자바스크립트 구문에서 (위의 경우) * 다른 자바스크립트 구문이 실행될 때 |
| 2. 링크에 의해 <a href="javascript:TEST()"> 실행 </a> |
| 3. body 태그에서 <body onLoad="TEST()"> * 페이지 로딩시 실행 |
| 4. 기타 나중에 나올 다양한 이벤트에 의해 (onClick, onMouseOver 등등등등...) |
| 위의 경우는 ... 첫째 자바스크립트 구문은 함수이기 때문에 호출을 받아야 실행됩니다. 둘쨰 자바스트립트 구문은 함수가 아니므로 자동으로 실행됩니다. |
내장객체 Arrary() : 배열 ......................................................... |
| myary = new Array() 또는 myary = new Array(5) | 배열이름만 선언 배열이름과 배열크기를 선언 (총 5개 요소) |
| 속성 | |
| length | 배열의 크기(배열요소의 개수) |
| 메서드 | |
| join() | 배열요소들을 하나의 문자열로 만들어 줌 |
| reverse() | 배열요소의 값의 순서를 역순으로 바꿈 |
| sort() | 배열요소의 값을 정렬 |
| concat(제2의 배열) | 두 개의 배열을 하나로 만들기 |
| slice(s, e) | s 첨자의 배열요소값 부터 e미만의 배열요소값 가져와서 새로운 배열 만들기 |
| <script language="javascript"> myary = new Array(5) // 배열 선언 myary[0] = 1 //배열요소에 값을 할당 myary[1] = 2 myary[2] = 3 myary[3] = 4 myary[4] = 5 document.write(myary.length) // 배열의 크기(배열요소의 개수) 5 </script> |
| <script language="javascript"> myary = new Array(5) myary[0] = 1 myary[1] = 2 myary[2] = 3 myary[3] = 4 myary[4] = 5 // 배열 크기를 반복문에 사용하면 각 배열요소 값에 접근을 쉽게!!! for (k=0 ; k<myary.length ; k++) { document.write(myary[k] + "<br>") } </script> |
내장객체 String() : 문자열 ......................................................... |
| 문자열.프로퍼티 또는 문자열.메서드 | 사용자 입력값을 체크하는 중요한 객체!!! |
| 속성 | |
| length | 문자열의 길이 (한글 한문자도 1로) |
| 메서드 | |
| charAt(숫자) | 숫자 위치에 해당하는 문자 |
| indexOf(문자 또는 문자열) | 문자 또는 문자열이 나오는 위치를 숫자로 * 왼쪽 부터 |
| substring(숫자1,숫자2) * 소문자로 | 위치로 숫자1 에서 숫자2-1 사이 문자열 |
| split(대상,"기준문자") | 대상문자열을 기준문자로 분리=>배열로 |
| * 기타 많지만 자주 사용하는 것만! | |
| <script language="javascript"> str = "안녕하세요! DRAGONEYE입니다~~" document.write(str.length + "<br>") document.write(str.charAt(5) + "<br>") document.write(str.indexOf("!") + "<br>") document.write(str.substring(7, 16)+ "<br>") </script> |
| <script language="javascript"> str = "안녕하세요! DRAGONEYE입니다~~" // 반복적으로 모든 문자를 하나씩 검사하여 "!" 포함 여부를 알아내기 for (k=0 ; k < str.length ; k++) { if (str.charAt(k)=="!") { document.write("! 가 있군요") } } </script> |
| <script language="javascript"> str = "안녕하세요! DRAGONEYE입니다~~" if (eval(str.indexOf("!"))>0) { document.write("! 가 있군요") } // str.indexOf() 는 포함시 0보다 큰 숫자, 못 찾으면 -1을 </script> <script language="javascript"> // 드라군님 제공 소스 var s = "1,2,3,4"; var buff = s.split(","); for(i=0; i<buff.length; i++) { document.write(buff[i] + "<BR>"); } </script> |
내장객체 Screen(), Date() ..................................................... |
|
| screen.프로퍼티 | 브라우저의 크기와 관련된 정보를 얻을 수 있다. (* new 연산자 없이) |
| availWidth | 브라우저에서 내용을 보여는 부분의 너비 |
| availHeight | 브라우저에서 내용을 보여는 부분의 높이 |
| height | 전체 화면의 height값 |
| width | 전체 화면의 width값 |
| <script language="javascript"> document.write(screen.availWidth + "<br>") document.write(screen.availHeight + "<br>") document.write(screen.width + "<br>") document.write(screen.height + "<br>") </script> |
|
| strdate = new Date() 메서드,프로퍼티 사용 | Date 객체의 인스턴스 생성 Date 객체와 같은 기능을 가진 객체를 하나 만들면 (strdate) 얘를 통해서 Date 객체가 가진 메서드와 프로퍼티를 사용할 수 있다. * 이 때 만들어진 strdate같은 걸 객체의 인스턴스라고 부른다. 똑 같은 샘플 !!! |
| 값 가져오는값 메서드 | |
| getYear() | 1970년 이후의 연도 1970~1999년도 사이는 0~99 그 이후는 네 자리 숫자의 년도 |
| getMonth() | 월0(1월)-11(12월) |
| getDay() | 요일, 0(일)-6(토) |
| getHours() | 시간, 0-23 |
| getMinutes() | 분, 0-59 |
| getSeconds() | 초, 0-59 |
| 값 설정하는 메서드 | |
| setYear() | 1970년 이상을 설정 |
| setMonth() | 월을 설정 |
| setDay() | 요일을 설정 |
| setHours() | 시간을 설정 |
| setMinutes() | 분을 설정 |
| setSeconds() | 초를 설정 |
| <script language="javascript"> sdate = new Date() syear = sdate.getYear() document.write(syear) // 2003 </script> |
| * 기타 Number, Event 등등이 있지만 이 정도면 충분할 것으로 본다. * 수학 관련 각종 계산 을 하려면 Math()를 따로 살펴 보시도록 |
자바스크립트 이벤트 ..................................................... |
|
| blur | 포커스를 다른곳으로 옮길 경우 |
| click | 링크나 폼의 구성원을 클릭할 때 |
| change | 선택값을 바꿀 경우 |
| focus | 포커스가 위치할 경우 |
| mouseover | 마우스가 올라올 경우 |
| mouseout | 마우스가 떠날 경우 |
| mousedown | 마우스를 누를 경우 |
| mousemove | 마우스를 움직일 경우 |
| mouseup | 마우스를 눌렀다 놓을 경우 |
| select | 입력양식의 하나가 선택될 때 |
| submit | 폼을 전송하는 경우 |
| load | 페이지,윈도우가 브라우져로 읽혀질 때 |
| unload | 현재의 브라우저,윈도우를 떠날 때 |
| error | 문서나 이미지에서 에러를 만났을 때 |
| reset | 리셋 버튼이 눌렸을 때 |
| dbclick | 더블클릭시 |
| dragdrop | 마우스 누르고 움직일 경우 |
| keydown | 키 입력시 |
| keypress | 키 누를 때 |
| keyup | 키를 누르고 놓았을 때 |
| move | 윈도우나 프레임을 움직일 때 |
| resize | 윈도우나 프레임 사이즈를 움직일 때 |
|
| blur() | 입력 포커스를 다른 곳으로 이동시킴 |
| click() | 마우스 버튼이 눌러진 것처럼 해줌 |
| focus() | 입력 포커스를 준 것처럼 해줌 |
| submit() | 폼의 submit 버튼을 누른 것처럼 해줌 |
| select() | 메소드 폼의 특정 입력 필드를 선택함 |
|
| event.keyCode | 누른 키의 ASCII 정수 값 |
| event.x | 문서 기준 누른 좌표의 left |
| event.y | 문서 기준 누른 좌표의 top |
| event.clientX | 문서 기준 누른 좌표의 left |
| event.clientY | 문서 기준 누른 좌표의 top |
| event.screenX | 콘테이너 기준 누른 좌표의 left |
| event.screenY | 콘테이너 기준 누른 좌표의 top |
|
| 선택 목록(SELECT) | onBlur, onChange, onFocus |
| 문자 필드(TEXT) | onBlur, onChange, onFocus, onSelect |
| 문자 영역(TEXTAREA) | onBlur, onChange, onFocus, onSelect |
| 버튼(BUTTON) | onClick |
| 체크박스(CHECKBOX) | onClick |
| 라디오 버튼(RADID) | onClick |
| 링크 | onClick, onMouseover |
| RESET 버튼(RESET) | onClick |
| SUBMIT 버튼(BUTTON) | onClick |
| DOCUMENT | onLoad, onUnload |
| WINDOW | onLoad, onUnload |
| 폼(FORM) | onSubmit |
| <script language="javascript"> function TEST(){ alert("페이지 로딩시 자동 호출!") } </script> <body onLoad="TEST()"> 공부 게시판공부에 도움되는 글을 올려주세요.
|
