[JavaScript] 함수와 이벤트

YEN·2022년 2월 25일
JavaScript자바스크립트

JavaScript

목록 보기
2/7
post-thumbnail

1. 함수

1) 함수 : 자바스크립트는 단순히 동작 하나만 실행되는 것이 아니라 여러 가지 동작이 연결되는데 동작해야 할 목적대로 묶은 명령이다.

  • 각 명령의 시작과 끝을 명확하게 구별할 수 있다.

  • 묶은 기능에 이름을 붙여 어디서든 같은 이름으로 명령을 실행할 수 있다.

  • 자바스크립트에 들어 있는 함수를 가져다 사용하거나 자신이 필요한 명령을 직접 함수로 만들어서 사용한다.

2) 함수를 선언한다.

  • 함수가 어떤 명령을 처리할지 미리 알려 주는 것을 말하며 함수를 선언한다 또는 함수를 정의한다고 한다.
function 함수명( ) {
	명령
}

3) 함수를 호출한다.

  • 함수를 실행하려면 선언한 함수를 사용하여야 하는데 함수를 호출한다 또는 함수를 실행한다고 한다.
함수명( ) 또는 함수명(변수)

2. 변수

1) 지역 변수 : 함수 안에서만 쓸 수 있는 변수

  • 함수 안에서 선언하고 함수 안에서만 사용한다.

  • 예약어 var을 사용하여 변수 이름을 지정한다.

2) 전역 변수 : 스크립트 안에서 자유롭게 쓸 수 있는 변수

  • 적용 범위를 제한하지 않고 쓸 수 있다.

    -> 스크립트 코드 전체에서 사용할 수 있다.

  • 함수 밖에서 선언하거나 함수 안에서는 예약어 var을 빼고 선언하여야 한다.

3) 호이스팅 : 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것이다.

  • 자바스크립트 해석기는 함수 소스를 훑어보면서 var을 사용한 변수는 따로 기억해 둔다.

  • 변수를 싱행하기 전이지만 '이런 변수가 있구나'라고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있는 것이다.

    -> 따라서 변수를 선언하고 할당했지만 변숫값이 할당된 위치가 다르게 나타난다.

  • 그러나 실제 코드가 바뀌는 것이 아니라 자바스크립트 해석기가 이해하는 방식이 이렇다는 것이며 실제 코드에는 변화 없다.

3. let과 const

1) let

  • 값을 재할당할 수는 있지만 변수를 재선언할 수 없다.

  • 호이스팅이 없는 변수이다.

2) const

  • 변하지 않는 값을 변수로 선언할 때 사용한다.

    -> 재선언하거나 재할당할 수 없다.

값이 자주 바뀌는 변수는 let 예약어를 사용하고, 재할당이 없는 변수라면 const 예약어를 사용한다.

3) 자바스크립트 변수 사용

① 전역 변수는 최소한으로 사용한다.

② var 변수는 함수의 시작 부분에서 선언한다.

③ for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다.

구분varletconst
스코프함수 레벨블록 레벨블록 레벨
재할당가능가능불가능
재선언가능불가능불가능

4. 재사용할 수 있는 함수

1) 함수 선언할 때 매개변수 지정하기

  • 함수의 결과 값을 반환할 때 예약어 return을 사용하여 다음에 넘겨줄 값을 지정해준다.

<body>
    <script>
        function addNumber(num1, num2) {
            var sum = num1 + num2;
            return sum;
        }
        var result = addNumber(2, 5);
        document.write("두 수를 더한 값" + result);
    </script>
</body>

① 자바스크립트 해석기가 function 예약어를 만나면 함수를 선언하는 부분이라는 것을 인식하고 ({ })을 해석하며 실행하지는 않는다.
② addNumber(2, 3)을 만나면 해석해 두었던 addNumber( ) 함수를 실행한다.
③ addNumber( ) 함수에서 2는 num1, 5는 num2로 넘기고 더한 값을 sum에 저장한다.
④ 함수 실행이 모두 끝나면 결과 값을 sum 을 함수 호출 위치인 var result로 넘긴다.
⑤ 넘겨받은 결과 값을 result라는 변수에 저장한다.
⑥ document.write( )를 사용하여 result 변수에 있는 값을 화면에 표시한다.

5. 함수 표현식

1) 익명 함수 : 이름이 없는 함수

  • 익명 함수를 선언할 때 이름을 붙이지 않는다.

  • 함수 자체가 시이므로 함수를 변수에 할당할 수 있으며 다른 함수의 매개변수로 사용할 수 있다.

2) 즉시 실행 함수 : 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석한다.

(function( ) {
	명령
}());
(function(매개변수) {
	명령
}(인수));

3) 화살표 함수 : => 표시법을 사용하여 함수 선언을 간단하게 작성한다.

  • 익명 함수에서만 사용 가능하다.
(매개변수) => { 함수 내용 }

6. 이벤트와 이벤트 처리기

1) 마우스 이벤트

종류설명
click사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
dbclick사용자가 HTML 요소를 더블 클릭할 때 이벤트가 발생한다.
mouseclick사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
mousemove사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
mouseover마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
mouseout마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
mouseup사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.

2) 키보드 이벤트

종류설명
keydown사용자가 키를 누르는 동안 이벤트가 발생한다.
keypress사용자가 키를 눌렀을 때 이벤트가 발생한다.
keyup사용자가 키에서 손을 뗄 때 이벤트가 발생한다.

3) 문서 로딩 이벤트

종류설명
abort문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다.
error문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다.
load문서 로딩이 끝나면 이벤트가 발생한다.
resize문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
scroll문서 화면이 스크롤되었을 때 이벤트가 발생한다.
unload문서에서 벗어날 때 이벤트가 발생한다.

4) 폼 이벤트

종류설명
blur폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
change목록이나 체크 상태 등이 변경되면 이벤트가 발생한다.
input 태그, select 태그, textarea 태그에서 사용한다.
focus폼 요소에 포커스가 놓였을 때 이벤트가 발생한다.
label 태그, select 태그, textarea 태그, button 태그에서 사용한다.
reset폼이 리셋되었을 때 이벤트가 발생한다.
submitsubmit 버튼을 클릭했을 때 이벤트가 발생한다.

5) 이벤트 처리기 : 웹 문서에서 이벤트가 발생하면 처리하는 함수이다.

<태그 on이벤트명 = "함수명">
profile
YEN
이전 포스트

[JavaScript] 자바스크립트 기초

다음 포스트

[JavaScript] 자바스크립트와 객체

0개의 댓글