* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! *
공부범위
- 4장
공부내용
함수와 이벤트
1. 함수
// 함수의 선언
function 함수이름() {
함수내용
}
(1) 함수의 형태
1) 함수 선언
: 함수를 선언하는 부분
2) 함수 실행
: 함수를 실행하는 부분
// 함수 실행
var num1 = parseInt(prompt("첫 번째 숫자는? "));
var num2 = parseInt(prompt("두 번째 숫자는? "));
addNumber(num1, num2); // 함수 호출
// 함수 선언
function addNumber(a, b) {
var sum = a + b;
alert("두 수를 더한 값은 " + sum + "입니다.");
}
- 함수는 순서와 상관없이 '함수선언' 부분을 먼저 읽음
∴ '함수실행' 부분이 먼저 와도 상관X
(2) 매개변수와 인수
1) 매개변수 = 인자
: 함수를 실행하기 위해 지정하는 변수 값
function addNumber(a, b) {
var sum = a + b;
console.log(sum);
}
// a, b가 매개변수
2) 인수 = 전달 인자
: 매개변수에 넣는 값
// 매개변수
addNumber(a, b);
// 인수
addNumber(10, 20);
(3) parseInt( ) 함수
= Number( )함수
: 프롬프트 창에 입력한 값을 정수로 바꾸는 함수
var num1 = parseInt(prompt("첫 번째 숫자는? "));
var num2 = parseInt(prompt("두 번째 숫자는? "));
addNumber(num1, num2);
(4) return
: 함숫값을 반환
- 함수를 실행한 후, 결괏값을 함수 밖으로 넘기는 것
var num1 = parseInt(prompt("첫 번째 숫자는? ")); // 1번 (실행순서)
var num2 = parseInt(prompt("두 번째 숫자는? ")); // 1-2번
addNumber(num1, num2); // 2번
alert("두 수를 더한 값은 " + result + "입니다."); // 7번
function addNumber(a, b) { // 3번
var sum = a + b; // 4번
return sum; // 5번
}
- 함수 선언 식 안에 return이 결괏값 sum을 반환
- 함수 실행부분으로 sum을 반환 (5번 → 2번으로 이동)
- 결괏값을 가지고 명령 실행 (7번)
(5) 변수의 적용 범위 (scope)
1) 지역 변수 (Local Variable)
: 선언한 함수 안에서만 사용되는 변수
- 변수이름 앞에 항상 var을 써줘야함
2) 전역 변수 (Global Variable)
: 스크립트 소스 전체에서 사용할 수 있는 변수
- 변수이름 앞에 var 가 없으면 함수 안에 선언했어도 전역 변수로 취급
var imVar = 100; // 전역 변수 선언
test();
document.write("imVar is " + imVar);
function test() {
var imVar = 50; // 지역 변수 선언
}
var imVar = 100; // 전역 변수 선언
test();
document.write("imVar is " + imVar);
function test() {
imVar = 50; // 전역 변수 선언
}
- 예시를 위해 변수 이름을 imVar로 통일했지만 통상적으로는 헷갈리지 않게 지역, 전역 변수의 이름을 달리한다고 함
(6) 익명 함수와 즉시 실행 함수
1) 익명 함수
: 이름을 붙이지 않는 함수
// 일반 함수 선언
var add = function(a, b) {
var sum = a + b;
return sum;
}
// 일반 함수 실행
????????????????
// 익명 함수선언
var add = function(a, b) {
return a + b;
}
// 익명 함수 실행
var sum = add(10, 20);
sum
- 일반 함수 실행 예시 생각해보기
2) 즉시 실행 함수
: 함수를 정의함과 동시에 실행
- 많이 사용되는 함수
// 즉시 실행 함수 형태 1
(
function() {
함수 식
}
)();
// 즉시 실행 함수 형태 2
(
function() {
함수 식
}
());
// 즉시 실행 함수 형태 3
(function() {
함수 식
})();
// 즉시 실행 함수 형태 4
(function() {
함수 식
}());
// 예시
var result = (function(a, b) {
return a + b;
} (10, 20));
console.log(result);
2. 이벤트
: 웹 브라우저나 사용자가 행하는 어떤 동작
- 웹 문서 영역 안에서만 이루어져야함
(1) 이벤트 종류
1) 마우스 이벤트
속성 | 설명 |
click | 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트 발생 |
dblclick | 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트 발생 |
mousedown | 사용자가 HTML 요소 위에서 마우스 버튼을 누르는 동안 이벤트 발생 |
mousemove | 사용자가 HTML 요소 위에서 마우스 포인터를 움직일 때 이벤트 발생 |
mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트 발생 |
mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트 발생 |
mouseup | 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트 발생 |
[Event] Pc에서의 click, Mobile에서의 touch event
* WARNING ! 책 및 인터넷을 통해 공부한 내용으로 정확한 정보가 아닐 수 있으니 주의해주세요! * PC click event 1. onmousedown : 마우스를 누르고 있는 동안 명령 실행 ↔ onmouseup 2. onmouseup : 마우..
kimgoingto.tistory.com
→ click, touch 이벤트 참고 자료
2) 키보드 이벤트
속성 | 설명 |
keypress | 사용자가 키를 눌렀을 때 이벤트가 발생 |
keydown | 사용자가 키를 누르는 동안 이벤트가 발생 |
keyup | 사용자가 키에서 손을 뗄 때 이벤트가 발생 |
3) 문서 로딩 이벤트
속성 | 설명 |
abort | 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생 |
error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생 |
load | 문서 로딩이 끝나면 이벤트가 발생 |
resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생 |
scroll | 문서 화면이 스크롤 되었을 때 이벤트가 발생 |
unload | 문서를 벗어날 때 이벤트가 발생 |
4) 폼 이벤트
- 폼(Form) : 로그인, 검색, 설문조사 등 사용자가 자료(정보)를 입력하는 모든 요소
속성 | 설명 |
blur | 폼 요소에 포커스를 잃었을 때 이벤트 발생 |
change |
목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생 <input>, <select>, <textarea>태그에서 사용 |
focus |
폼 요소에 포커스가 놓였을 때 이벤트 발생 <textarea>, <button>태그에서 사용 |
reset | 폼이 다시 시작되었을 때 이벤트 발생 |
submit | submit 버튼을 눌렀을 때 이벤트 발생 |
(2) 이벤트 처리기 = 이벤트 핸들러
: 이벤트와 이벤트 처리 함수를 연결해주는 것
- 이벤트 이름 앞에 on을 붙여 사용
<button class="over" id="open" onclick="alert('눌렀습니다')">상세설명보기</button>
'Programming > javascript' 카테고리의 다른 글
[6일차] Do it! 자바스크립트 기본편 - Array 객체 (0) | 2020.04.30 |
---|---|
[5일차] Do it! 자바스크립트 기본편 - 객체 (0) | 2020.04.28 |
[3일차] Do it! 자바스크립트 기본편 - 조건문, 반복문 (0) | 2020.04.22 |
[Event] Pc에서의 click, Mobile에서의 touch event (1) | 2020.04.22 |
[2일차] Do it! 자바스크립트 기본편 - 변수, 자료형, 연산자 (0) | 2020.04.21 |