|
사용자 정의 함수 .........................................................
가장 일반적인 자바스크립트 사용 방법으로 일련의 실행과정을 자바스크립트 코드로 묶어서 이름을 주고 필요할 경우 얘의 이름을 불러서 실행되도록 하는 방법이다.
이름을 불러주지 않으면 실행을 하지 않는다!!!
■ function (소문자로!)
|
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() : 배열 .........................................................
자바스크립트에서 사용할 수 있는 객체는 자바스크립트 언어 자체에서 지원하는 객체와 자기 것은 아니지만 브라우저에 포함된 객체를 사용할 수 있다.
* 메서드, 함수, 프로퍼티, 객체에 대한 얘기는 나중에 기회가 있을 때 하기로 하고 처음인 분은 당장 중요한 아닐 것 같다. 이 개념을 모르고도 사용하다 보면 나중에는 저절로 알게 되는 날이 온다. 결국 모르면 안된다는 얘기 같기도...
자주 사용하는 중요한 객체 위주로 메서드와 프로퍼티 를 살펴보자!!!
■ Array 객체(배열을 사용할 수 있다) * 아주 중요함
|
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() : 문자열 .........................................................
문자열은 무조건 잘 다뤄야 한다. 특히 길이, 특정문자 찾기, 특정문자 포함여부등을 체크할 때 많이 사용하는 객체이다. 예제를 꼭 해볼 것 !!
■ 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 객체(사용자 컴퓨터의 화면 관련)
|
| 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>
|
|
■ Date 객체(사용자 컴퓨터의 시스템 시간을 참조)
|
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()를 따로 살펴 보시도록 |
|
자바스크립트 이벤트 .....................................................
아주 중요한 이벤트!!!
이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다.
예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비!
이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가...
(Click, MouseOver, MouseOut, Submit...)
이벤트 핸들러란 ?
이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다
(onClick,onMouseOver,onMouseOut, onSubmit...)
* 그래서 우리가 할일은 이벤트가 일어났을 때 할 일을 준비하고
이벤트 핸들러에게 그 일을 하도록 연결해 두면 되는 것이다~~~
* 익스플로러와 네비게이트 사이에 약간의 차이가 있어 익스플로러 기준으로 !!!
|
|
■ 이벤트의 종류와 의미 (이벤트핸들러는 이벤트에 on을 붙여 준다)
|
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()">
<script language="javascript">
function TEST(){
alert("Click 했군요!")
}
</script>
<font onClick="TEST()"> Click! </ font>
<script language="javascript">
function TEST(){
alert("마우스를 올리지 마세욤!")
}
</script>
<font onMouseOver="TEST()"> MouseOver</ font>
<script language="javascript">
function TEST(){
alert("현재 좌표는 " + event.x + "/" + event.y)
}
</script>
<font onClick="TEST()"> Click 좌표 </ font>
|
| * 브라우저 객체(window,document,form,image,layer,...)와 함께 사용되기 때문에 여기서는 간단하게 종류와 의미만 살펴보고!!! |
출처 : http://blog.naver.com/sungback/90004526170 |
|
|
|
|
아침마당
