함수와 이벤트

함수를 정의하고 실행하기

 

함수선언

- 어떤 명령을 처리해야 할지 알려주는 것

 

함수실행

- 선언한 함수를 가져와 사용하는 것

 

함수호출

- 선언한 함수를 실행하기 위해서 이름을 사용하는 것

- 자바스크립트 소스안의 어디에서든 함수를 불러서 실행할 수 있다.

 

함수와 매개변수와 인수 소개

 

매개변수

- 함수를 실행하기 위해 필요하다고 지정하는 값

 

function( a,b ){ <---- 매개변수
  var sum= a+b;

 console.log(sum);
}

 

 인수란?

- 매개변수로 넘겨주는 값을 인수 라고 한다.

 

※addNumber( )함수가 실행된 순서※

 

함수실행

var num1 = parseInt(prompt("첫 번째 숫자는")); ① 프롬프트 창에서 숫자를 입력 받는다.

var num2= parseInt(prompt("두 번째 숫자는"));

addNumber( num1,num2); ② num1,num2 addNumber( ) 함수를 호출 한다.

 

함수선언

function(a,b){ ③ 넘겨받은 값 num1은 a로 num2은 b로 전달 받는다.
   var sum = a+b; 

   alert(sum); ④ a와b를 연산해서 알림창에 표시한다.
}

 

함수 return문

 

- 함수를 실행한 후 그 결괏값을 함수 밖으로 넘기는 것 함숫값을 반환한다.

- 반환 위치는 함수를 호출한 위치

- 함수 결과값을 반환할 때 넘겨줄 값이나 변수 또는 식을 지정합니다.

 

var num1 = parseInt(prompt("첫 번째")); ① 프롬프트 창으로 부터 숫자를 입력 받아서 변수값에 저장한다.

var num2 = parseInt(prompt("두 번째")); 

⑥result 변수에 저장한다. var result = addNumber(num1,num2); ② 값을 가지고 함수를 호출한다.

alert( "두 수를 더한 값은" + result + "입니다."); ⑦결과값을 알림창에 표시해준다.

 

function addNumber(a,b){ ③ num1값은 a변수로 num2값은 b변수로 넘겨집니다. 

  var sum = a+b; ④ a+b를 연산해서 sum변수에 저장

  return sum; ⑤ sum결과값을 반환한다.
}

 

지역변수

- 함수 안에서 사용하고 그대로 종료(소멸)되는 함수

- 함수를 선언할 때 var와 함께 변수를 지정한다.

 

전역변수

- 자바스크립트 소스 전체에서 사용할 수 있는 변수

- 변수 앞에 var를 사용하지 않는다.

 

익명함수

- 이름이 없는 함수를 말한다.

- 익명함수를 변수에 할당할 수 있습니다.

 

ex) var add = function(a, b){ -->함수 선언후 변수 add에 할당한다.

     return = a + b;

}

변수 add를 사용해 익명함수를 실행한다 그 결과값을 변수에 저장한다.

var sum = add(10, 20);

sum

30

 

즉시 실행함수

- 함수를 선언하고 동시에 실행하는 함수 입니다.

- 변수에 할당할 수 있다.

 ex) 

(function( ){

    ............

});

 

함수에서 반환한 값을 변수 result변수에 할당한 후 콘솔창에 표시한다.

ex) var result =(function( ){

  return 10 + 20;

})

console.log(result);

30

 

이벤트 다루기

이벤트

- 웹 페이지를 읽어오거나 링크를 누르는 것처럼 이루어지는 동작을 말한다.

 

마우스 이벤트

 

click : 마우스로 눌렀을 때

dblclick : 마우스로 두 번 눌렀을 때

mousedown : 마우스 누르는 동안 이벤트가 발생한다.

mouseover : 마우스 움직이는 동안 이벤트가 발생한다.

mouseout : 마우스 벗어났을 때 이벤트가 발생한다.

mouseoup : 마우스 손을 뗄 때 이벤트가 발생한다.

 

키보드 이벤트

 

keypress : 키를 눌렀을 때 이벤트가 발생한다

keydown : 누르는 동안 이벤트가 발생한다.

keyup : 손을 뗄 때 이벤트가 발생한다.

 

문서 로딩 이벤트

 

abort : 불러오기를 멈췄을 때 이벤트가 발생한다.

error : 문서가 로딩되지 않았을 때 이벤트가 발생한다.

load :  문서 로딩이 끝나면 이벤트가 발생한다.

resize : 화면 크기가 바뀌었을 때 이벤트가 발생한다.

scroll : 문서 화면이 스크롤 되었을 때

unload : 문서를 벗어났을 때

 

폼 이벤트

- 사용자가 자료를 입력하는 폼요소

 

blur : 폼 요소에 포커스를 잃었을 때

change : 체크 상태 등이 변경 되었을 때 이벤트가 발생한다.

focus : 폼 요소에 포커스가 놓였을 때

reset : 폼이 다시 시작되었을 때

submit : 버튼을 눌렀을 때 

 

이벤트 처리기(이벤트 핸들러)

- 어떤 함수를 실행해야 할지 웹 브라우저에 알려주는 것

 

ex) 

  <button class="over" id="open" onmouseover ="alert('눌렀습니다.')"></button>

 (onmouseover) 이벤트 처리기에 실행할 함수를 연결한다.

  알림창에 괄호안에 내용 결과값을 확인할 수 있다.