[JS] 자바스크립트 함수1
자바스크립트 함수
confirm함수
확인과 취소 두 번튼을 가지며 메시지를 설정할 수 있는 대화 상자를 띄운다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>확인과 취소 대화창</title>
</head>
<body>
<script type="text/javascript">
conf = confirm("문제가 발생하였습니다. 계속하겠습니")
if (conf == true) {
document.write("계속 진행합니다.");
} else {
document.write("취소 되었습니다.");
}
</script>
</body>
</html>
이벤트
사용자가 어떤 동작을 했을 때 실행한다.
버튼에 함수를 선언해서 동작하게 하면 버튼은 이벤트 핸들러가된다.
프로그램 실행에 영향을 미칠 수 있는 어떠한 일이 발생하는 것을 이벤트라고 한다.
이벤트가 발생했을 때 이에 대해 처리하는 함수를 이벤트 핸들러 라고 한다.
예) onsubmit 이벤트핸들러 : 입력양식 필드에서 등록한 내용을 전송할 때 발생한다.
onfocus/ onblur 예제
- onfocus : 이벤트 핸들러는 텍스트 입력창 등에서 커서가 생성되는 순간 생성한다.
- onblur : 이벤트 핸들러는 텍스트 입력창 영역 밖의 것을 선택한 경우에 생성한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>확인과 취소 대화창</title>
</head>
<body>
<form action="#" method="get"
enctype="application/x-www-form-urlencoded">
이름 :<input type="text" onfocus="this.value ='이름'"
onblur="this.value ='이름을 적으세요'">
</form>
</body>
</html>
클로저
자바스크립트의 모든 함수는 열려 있던 것을 닫는다는 개념의 클로저(Closure)로 정의한다.
-
정보 은닉 : 함수 내부의 변수와 함수ᅟᅳᆯ 외부에서 잡근 할 수 없도록 숨기는 역할을 할 수 있다.
-
비동기 처리 : 콜백 함수를 클로저로 만들면 콜백 함수 내부에서 사용되는 변수들이 유지된다. 콜백함수가 실행된 이후에도 해당 변수들을 참조할 수 있다.
-
커링 : 커링은 여러개의 인자를 받는 함수를 하나의 인자만 받는 함수들의 연속으로 나타내는 기법이다. (자바의 가변인자가 괕다고 생각하면 이해가 될거같다..)
클로저 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클로저 접근</title>
</head>
<body>
<script type="text/javascript">
function outerFunc() {
var call = "클로저 접근";
function innerFunc() {
// innerfunc 함수는 자신의 외부 함수인 outerFunc 함수의 변수 call을 참조하고 있다.
alert(call)
}
//객체를 반환하며 outerfunc 함수의 변수에 접근할 수 있는 클로저다.
return innerFunc;
}
var inner = outerFunc();
// 할당된 객체는 함수의 기능을 가지므로 함수처럼 호출할 수 있다.
inner();
</script>
</body>
</html>
자바스크립트 함수
자바스크립트에서 함수는 함수 자체가 타입이고 객체가 된다.
함수명 접근
객체에 함수명을 할당하여 접근한다.
할당된 객체는 함수의 속성을 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수명 접근</title>
<script type="text/javascript">
function nameFunction( ){
document.write(“함수명으로 호출한다.”)
}
// 함수명을 할당하여 접근하고 할당받은 객체는 함수의 속성을 가진다.
instance =nameFunction;
</script>
</head>
<body>
<script type="text/javascript">
//할당된 객체는 함수의 기능을 가지므로 함수처럼 호출할 수 있다.
alert(“함수와 동시에 실행합니다.”, instance());
</script>
</body>
</html>
빈 함수 접근
객체에 파라미터가 빈 함수를 할당하여 접근한다.
할당된 객체는 함수의 속성을 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>빈 함수 접근</title>
<script type="text/javascript">
function nameFunction( ){
document.write(“객체로 호출한다.”)
}
// 파라미터가 빈 함수를 할당하여 접근하고 할당받은 객체는 함수의 속성을 가진다.
instance =nameFunction();
</script>
</head>
<body>
<script type="text/javascript">
//할당된 객체는 함수의 기능을 가지므로 함수의 기능을 호출 할 수 있다.
alert(“함수와 동시에 실행합니다.”, instance);
</script>
</body>
</html>
함수 코드 접근
객체에 함수 코드를 할당하여 접근한다.
할당된 객체는 함수의 속성을 가진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>빈 함수 접근</title>
<script type="text/javascript">
instance = function nameFunction( ){
document.write(“객체로 호출한다.”)
}
// 할당된 객체는 함수의 기능을 가지므로 함수처럼 호출할 수 있다.
instance();
</script>
</head>
<body>
</body>
</html>
댓글남기기