함수
함수란 무엇인가
- 함수라는 것은 임의의 어떤 입력 x에 대해 그에 따른 출력 y가 존재하는 것을 말한다.
- 기능 단위의 모듈이다.
- 함수를 사용하면 코드의 가독성이 좋아진다.
- 코드의 유지보수 및 확장이 용이해진다.
함수의 사용
- 함수의 형태
function 함수이름(전달인자1, 전달인자2...)
{
함수의 내용
}function
함수 선언 시 키워드 function으로 시작한다.
함수이름
정의할 함수의 이름이다. 함수 호출 시 함수의 이름을 사용하는데, 이름은 함수의 기능을 잘 설명할 수 있는 이름으로 짓는 것이 좋다.
전달인자
함수의 기능을 수행하기 위해 필요한 값을 외부에서 전달인자로 넘겨줄 수 있다. 전달인자는 필요 없는 경우에는 빈 괄호로 놓을 수도 있고, 전달인자가 필요한 경우에는 1개 이상 설정할 수 있다.
함수의 내용
함수의 { } 중괄호 안의 내용들이 수행할 기능에 대한 내용들이다.
메소드
객체의 멤버라는 의미(= 멤버함수)
// ──────── 사용자 정의 함수 ────────
function account(userId)
{
alert('반갑습니다.' + userId);
}
account('냠님');
지역변수와 전역변수
var userId = '냠냠'; // 전역변수
function account()
{
var userId = '냠냠'; // 지역변수
alert('반갑습니다.' + userId + '님');
}
account();var 타입의 특징
var userId = '얌얌';
function account()
{
userId = '랄라';
alert('반갑습니다.' + userId + '님');
}
account();
alert('또 만났네요' + userId);
한 번 선언된 var 타입은 유지가 된다.
따라서 userId가 account() 안에서 값이 바뀌었어도 함수 밖에서 바뀐 값으로 출력이 된다.
var userId = '얌얌';
function account()
{
var userId = '랄라';
alert('반갑습니다.' + userId + '님');
}
account();
alert('또 만났네요' + userId);
각각 var 타입으로 설정하면 지역변수로 사용할 수 있게 된다.
이벤트와 이벤트 핸들러
이벤트란
- 사전적 의미로는 '사건'을 의미한다.
- 프로그래밍상에서는 특정 동작의 발생을 이벤트라고 한다.
- 예를 들면 마우스 왼쪽 버튼 클릭이나 키보드를 누르는 것 등이 이벤트라고 할 수 있다.
자바스크립트의 주요 이벤트
이벤트 핸들러
이벤트 핸들러란
- 사건이 발생하면 그 사건에 대한 처리 과정을 거친다.
- 웹브라우저 상에서도 이벤트가 발생하면 해당 이벤트에 대한 처리를 해야 한다.
- 이벤트 발생 시 처리하는 기능을 이벤트 핸들러 또는 이벤트 처리기라고 한다.
실체 : 함수
내가 직접 호출하는 것이 아니라 이벤트가 발생되었을 때 호출이 되도록 등록이 되어있다.
이벤트와 이벤트 핸들러의 연결방법
- HTML 태그와 속성으로 연결시켜주는 방법
사용방법<태그 속성 = "속성값" 이벤트핸들러 = "함수">
예를 들어 버튼 객체 클릭 시 다음과 같이 이벤트 핸들러를 처리하도록 할 수 있다.
<input type="button" value="버튼" onClick = "func()">
이벤트 핸들러는 이름 앞에 on만 붙여주면 이벤트 핸들러의 이름이 된다.
onClick, onKeyDown, onFous 등...
- 이벤트 핸들러의 종류
<body>
<form>
<input type="text" onchange="isChange()">
<input type="button" value="버튼" id="myid">
</form>
<script>
var element = document.getElementById("myid");
element.onclick = function()
{
alert('로그인 되었습니다.');
}
function isChange()
{
alert('아이디가 변경되었습니다.');
}
</script>
</body>
- 이벤트 리스너(addEventListener)를 사용하여 연결시켜주는 방법
앞의 자바스크립트 영역의 이벤트 연결의 문제점 : 하나의 이벤트에 여러 이벤트 핸들러 함수를 정의할 수 없다는 점.
문제의 해결 방법은 이벤트 리스너이다.
element.addEventListener("이벤트", function(), boolean)
첫번째 인자 : click 또는 load 같은 이벤트 이름 등록
두번째 인자 : 이벤트 핸들러 함수 등록
세번째 인자 : 이벤트 처리 방식으로 boolean 타입을 갖는다.
<body>
<form>
<input type="text" onchange="isChange()">
<input type="button" value="버튼" id="myid">
</form>
<script>
// ──────── addEventListener ────────
var element = document.getElementById("myid");
element.addEventListener("click", function()
{
alert('첫번째 메시지입니다.');
})
var element = document.getElementById("myid");
element.addEventListener("click", function()
{
alert('두번째 메시지입니다.');
})
function isChange()
{
alert('아이디가 변경되었습니다.');
}
</script>
</body>Callback
이벤트 발생은 내가 시켰지만 처리는 OS에서 해주는 것.
<body>
<script>
function isLogin()
{
alert('로그인 되었습니다.');
}
function isChange()
{
alert('아이디가 변경되었습니다.');
}
</script>
<form>
<input type="text" onchange="isChange()">
<input type="button" value="버튼" onclick="isLogin()">
</form>
</body>
알고 쓰자!