[4일차] Do it! 자바스크립트 기본편 - 함수, 이벤트

---

* 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

      → 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>