[JS] 15_함수와 이벤트
# "Do it! HTML+CSS+자바스크립트 웹 표준의 정석" 책을 바탕으로 작성하였습니다.
1. 함수 알아보기
1) 함수 선언
function 함수명() {
명령
}2) 함수 호출
함수명() 또는 함수명(변수)
ex) 함수를 이용하여 두 수 더하기
function addNumber() {
var num1 = 2;
var num2 = 3;
var sum = num1+ num2;
alert("결과값: " + sum);
}
addNumber();
2. var를 사용한 변수의 특징
1) 변수의 범위
ⓐ 지역 변수 : 한 함수 안에서만 사용할 수 있는 변수
function addNumber() {
var sum = 10+ 20; //함수 안에서 사용한 지역변수
}
addNumber();
console.log(sum); //오류 뜸ⓑ 전역 변수 : 스크립트 소스 전체에서 사용할 수 있는 변수
- var 예약어를 빼고 선언하면 전역 변수가 된다.
function addNumber() {
var sum = 10+ 20; //함수 안에서 사용한 지역변수
multi = 10 * 20; //예약어를 빼고 선언한 전역변수
}
addNumber();
console.log(multi); //전역변수 사용
2) var변수와 호이스팅
- 호이스팅 : 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올림
var x = 10;
function func(){
console.log("x is " + x);
console.log("y is " + y);
var y = 20;
}
func();
위와 같이 코드를 작성하고, 콘솔창에서 확인해 보면 아래와 같다.
자바스크립트 해석기는 함수 소스를 훑어 보면서 var를 사용한 변수는 따로 기억해 두기 때문에,
미리 선언한 것과 같은 효과가 난다. => 호이스팅
3) 변수의 재선언과 재할당
- var을 사용한 변수는 재선언과 재할당이 가능하다.
function addNumber(num1, num2) {
return num1 + num2; //2개의 수 더하기
}
var sum = addNumber(10, 20);
console.log(sum);
sum = 50; //sum 변수 재할당
console.log(sum);
var sum = 100; //sum 변수 재선언
console.log(sum);
3. let와 const
1) let 변수
- 블록 영역의 스코프를 가짐
function calcSum(n) {
let sum = 0;
for(let i=0; i<n+1 ; i++) {
sum += i;
}
console.log(sum);
}
calcSum(10);위와 같은 코드에서, let으로 선언한 i변수는 for문안에서만 적용되고 sum은 calcSum 함수 안에서만 적용된다.
ⓐ 특징
- let 예약어를 쓰지 않고 변수 이름과 초깃값을 할당하면 전역변수가 된다.
- 재할당은 가능하지만, 재선언은 불가능하다.
- 호이스팅이 없는 변수이다.
2) const 변수
- const로 선언한 변수는 상수 변수이다.
- 변하지 않는 값을 변수로 선언할 때 예약어 const를 사용한다.
- 한번 선언하면 재선언과 재할당이 불가능하다.
4. 재사용할 수 있는 함수 만들기
1) 매개변수와 return
- 매개변수와 return문을 이용하면 함수를 효율적으로 사용할 수 있다.
function addNumber(num1, num2){
return num1 + num2;
}
var result = addNumber(2, 3);
document.write("두 수를 더 한 값 : " + result);* 매개 변수의 기본값을 지정 가능하다.
function multiple(a, b = 5, c = 10) { // b = 5, c = 10으로 기본값 지정
return a * b + c;
5. 함수 표현식
1) 익명 함수
- 함수의 이름이 없는 함수를 익명 함수라고 한다.
var sum = function(a, b){
return a + b;
}
document.write("함수 실행 결과 : " + sum(10, 20) );2) 즉시 실행 함수
- 함수를 정의하면서 동시에 실행이 가능한 함수
(function(매개변수) {
명령
}(인수));
3) 화살표 함수
- ES6 버전 부터 =>표기법을 사용하여 함수 선언을 좀 더 간단하게 작성 가능하다.
- 익명 함수에서만 사용이 가능하다.
(매개변수) => { 함수 내용 };
ex) 매개변수가 없는 함수
const hi = function() {
return "안녕하세요?";
}위 함수를 화살표 작성하면 아래와 같다.
const hi = () => { return "안녕하세요" }; //한 줄이면 중괄호 생략 가능하다.6. 이벤트와 이벤트 처리기
1) 이벤트 : 웹 브라우저나 사용자가 행하는 동작 ex) 키보드 키 누르기
2) 이벤트 처리기 : 웹 문서에서 이벤트가 발생할 때 그 이벤트에 반응해서 실행하는 함수
3) 종류
ⓐ 마우스 이벤트
| 종류 | 설명 |
| click | 클릭 시 |
| dblclick | 더블 클릭시 |
| mousedown | 마우스 버튼 누를 때 |
| mousemove | 마우스 버튼 움직일 때 |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 |
| mouseout | 마우스 포인터가 요소가 벗어날 때 |
| mouseup | 마우스 버튼에서 손을 뗄 때 |
ⓑ 키보드 이벤트
| 종류 | 설명 |
| keydown | 키를 누르는 동안 |
| keypress | 키를 눌렀을 때 |
| keyup | 키를 뗄 때 |
ⓒ 문서 로딩 벤트
| 종류 | 설명 |
| abort | 완전히 로딩되기전에 불러오기를 멈췄을 때 |
| error | 정확히 로딩되지 않았을 때 |
| load | 로딩이 끝났을 때 |
| resize | 화면 크기가 바뀌었을 때 |
| scorll | 화면이 스크롤되었을 때 |
| unload | 문서를 벗어날 때 |
ⓓ 폼 이벤트
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 |
| change | 목록, 체크 상태등이 변경될 때 |
| focus | 폼 요소에 포커스가 놓였을 때 |
| reset | 폼이 리셋되었을 때 |
| submit | submit을 클릭했을 때 |
4) 사용 방법
<태그 이벤트명 = "함수명">
ex) 버튼 클릭시 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트</title>
<style>
a:link, a:visited {
color:black;
text-decoration: none;
}
ul {
list-style: none;
width:500px;
margin:10px auto;
padding:0;
}
li {
display:inline-block;
width:120px;
border:1px solid #ccc;
padding:10px 15px;
font-size:16px;
text-align:center;
}
#result {
width:500px;
height:300px;
margin:30px auto;
border:2px solid #ccc;
border-radius:15px;
}
p {
width:80%;
padding:10px;
line-height: 2em;
}
</style>
</head>
<body>
<ul>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('orange')">Orange</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color) {
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
</html>
7. DOM을 이용한 이벤트 처리기
- DOM을 사용하면 자바스크립트가 HTML의 요소를 가져와서 이벤트 처리기를 연결한다.
웹 요소.onclick = 함수;
1) querySelector() : 웹 요소를 가져오는 함수
- 함수의 괄호 안에는 클래스 이름, id 등 다양한 선택자를 넣을 수 있다.
// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector("#change").onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 3 : 직접 함수를 선언
document.querySelector("#change").onclick = function() {
document.querySelector("p").style.color = "#f00";
};