안녕하세요
로로봉입니다 : )
오늘은 자바스크립트의 함수와 이벤트 처리에 대해 알아보겠습니다.
1) 함수
자바스크립트에서 함수란 특정 작업을 위한 코드 블록으로 다른 프로그램 언어와 동일합니다.
함수의 형식은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
<script>
// 함수 정의
function add(x, y){
return x + y;
}
</script>
</head>
<body>
<script>
// 함수 호출
var result = add(3,5);
document.write("result=" + result);
</script>
</body>
</html>함수는 보통 <head> 안에 선언하며, 변수는 선언 위치에 따라 전역 변수와 지역 변수로 나뉩니다.
전역 변수는 함수 밖에서 선언한 변수이며, 파일 내에 모든 곳에서 해당 변수를 사용할 수 있습니다.
지역 변수의 경우 함수 내부에 할당한 변수이며 함수안에서만 사용이 가능합니다.
※ 함수 내부에서 var 선언 없이 변수를 초기화 한다면 전역변수가 됩니다.
2) 이벤트 처리
자주 사용되는 HTML 요소의 이벤트 종류는 아래와 같습니다.
| 이벤트명 | 설명 |
| onclick | HTML 요소를 클릭했을 때 발생 |
| onchange | 입력 양식의 데이터가 변경되었을 때 발생 |
| onkeydown | 키보드를 누를 때 발생 |
| onload | 페이지 로드가 완료되었을 때 발생 |
| onmouseover | HTML 요소의 범위에 마우스가 올라갔을 때 발생 |
| onmousedown | HTML 요소의 범위에서 마우스가 나갔을 때 발생 |
이벤트 처리를 이용해 버튼을 눌렀을 때 메시지를 띄워볼 수 있습니다.
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
<script>
// 함수 정의
function ClickTest(v){
alert(v);
}
</script>
</head>
<body>
<form>
<input type="button" value="1번" style="width:100px;height:50px" onclick="ClickTest(this.value)">
<input type="button" value="2번" style="width:100px;height:50px" onclick="ClickTest(this.value)">
<input type="button" value="3번" style="width:100px;height:50px" onclick="ClickTest(this.value)">
</form>
</body>
</html>
2번 버튼 클릭 시 함수 ClickTest가 실행되어 value 값인 2번이 메시지로 표시되는 것을 볼 수 있습니다.
3) 폼 제어
폼 입력 양식은 사용자의 입력을 서버로 전송하는 역할을 합니다.
폼 양식을 제어하려면 각 객체들의 계층 구조를 정확히 알고 있어야 합니다.
최상위 : document
상위 : form
하위 : text, button, checkbox, radio ... 등하위 객체의 value 값에 접근하기 위해선 document.form.text.value 이런식으로 표현해야 합니다.
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
<script>
// 함수 정의
function a(){
if(document.f.id.value==""){
alert("아이디는 필수입니다.");
return false;
}
if(document.f.pwd.value==""){
alert("비밀번호는 필수입니다.");
return false;
}
b();
return true;
}
function b(){
alert("회원가입 성공");
}
</script>
</head>
<body>
<form name="f" action="" onsubmit="return a()">
아이디 : <input type="text" name="id"><br/>
비밀번호 : <input type="password" name="pwd"><br/>
<input type="submit" value="가입">
</form>
</body>위와 같이 id와 pwd의 name을 갖는 객체의 접근을 document.f.id.value, document.f.pwd.value 로 접근이 가능합니다.
아이디와 비밀번호를 입력하면 b함수에서 확인하여 성공 여부를 결정하면 됩니다.
그리고 onsubmit 이벤트에 표시된 return a()의 경우 a() 함수의 반환 값으로 다시 서버로 반환하는 것을 말합니다.
return true가 되면 서버로 전송 되고, false가 되면 서버로 전송되지 않습니다.
좋아요♥ + 구독 부탁드립니다 : )
'개발 정보 > 웹개발' 카테고리의 다른 글
| [웹 개발] Eclipse REST API 구현 - Sprint Boot 설치 (2) | 2022.05.18 |
|---|---|
| [웹개발] Eclipse 웹 개발 환경 구축하기 (4) | 2022.05.17 |
| [웹개발] 자바스크립트(JavaScript) 란? (0) | 2020.12.03 |
| [웹개발] CSS 배경 설정 및 테두리 설정하기 (0) | 2020.12.02 |
| [웹개발] CSS 크기설정 및 위치설정하기 (0) | 2020.12.02 |
댓글