JavaScript_JavaScript 함수, 이벤트

JavaScript의 함수(Function)

특정 작업을 수행하는 수행문(코드)의 블록을 함수라고 한다
자바의 메소드와 유사

함수의 정의

function 함수명(매개변수, 매개변수, 매개변수,) {
	수행문;
    	수행문;
    	수행문;
        ...
        return 반환값;
}

function 키워드는 함수를 정의할 때 사용하는 자바스크립트의 예약어
자바스크립트 함수는 반환타입이 없다
자바스크립트 함수의 매개변수는 매개변수 타입이 없다
- 매개변수의 인자값은 "숫자, 문자열, 불린, 객체, 배열, 다른 함수" 가 가능하다
자바스크립트 함수는 return문을 사용해서 값을 반환할 수 있다
- 반환값은 "숫자, 문자열, 불린, 객체, 배열, 다른 함수"가 가능하다
- return문이 없는 함수는 항상 undefined를 반환

함수의 형식

이름을 가진 함수

이름있는 함수 정의하기
function 함수명(매개변수, 매개변수, 매개변수,) {
	수행문;
    	수행문;
    	수행문;
        ...
        return 반환값;
}

이름있는 함수의 실행
함수명();

이름이 없는 함수

이름없는 익명함수를 정의하고, 그 함수를 변수에 대입하기
let 변수명 = function 함수명(매개변수명, 매개변수명, 매개변수명, ...) {
	수행문;
    	수행문;
        수행문;
        ...
        return 반환값
}

변수에 대입된 함수의 실행
변수명();

함수의 실행방법

이벤트 발생시 함수가 실행

<html>
<head>
	<meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap.min.css" />
    <title></title>
</head>

<body>
	<div class="container">
    	<div class="row">
        	<div class="col-9">
            	<form>
                	<!-- 체크박스의 상태가 변경될 때마다 fn2() 함수가 실행되도록 한다 -->
                    <input type="checkbox" name="skil" value="java" onchange="fn2()"> 자바
                    <input type="checkbox" name="skil" value="c" onchange="fn2()"> C
                    <input type="checkbox" name="skil" value="phython" onchange="fn2()"> 파이썬
                    
                    <!-- 저장버튼을 클릭할 때마다 fn1()함수가 실행되도록 한다 -->
                    <button type="button" onclick="fn1()">저장</button>
                </form>
            </div>
            <div class="col-3">
            	html태그
            </div>
        </div>
    </div>
    <script>
    	// 웹페이지가 로딩될 때 바로 실행할 작업
        수행문;
        수행문;
        수행문;
        
        // 사용자와 상호작용하는 작업
        // 저장버튼을 클릭했을 때 실행할 작업이 구현된 함수
        function fn1() {
        	수행문;
            	수행문
        }
        
        // 체크박스를 체크 혹은 해제했을 때 실행할 작업이 구현된 함수
        function fn2() {
        	수행문;
            	수행문;
        }
    </script>
</body>
</html>

함수는 보통 이벤트에 사용하려고 정의한다
함수를 정의해서 사용자와 상호작용할 코드안에 함수와 사용할 이벤트를 넣어서 사용

자바스크립트 수행문안에서도 함수 실행이 가능하다

  // 함수 정의하기
  function myfn() {
    console.log("함수 실행하기");
  }
  // 함수 실행하기
  myfn();

셀프실행

  (function(){
    console.log("즉시실행함수입니다.");
  })();

자바 함수와의 차이점

접근제한자가 없다
반환타입을 지정할 필요가 없다
매개변수의 타입을 지정할 필요가 없다
함수 중복정의가 소용이 없다

Java와 JavaScript의 사용목적

Java	JavaScript
클라이언트의 요청 처리	사용자와 상호작용
요청 파라미터 값 조회 및 객체에 담기	폼 입력값 유효성 체크
업무로직의 실행	이벤트 처리
DB 엑세스 작업 실행	HTML 조작
응답 컨텐츠 제공	(엘리먼트 선택, 컨텐츠/값 조회, 컨텐츠/값 변경, 스타일 변경)

이벤트(Event)

웹 페이지와 사용자와의 상호작용으로 웹 브라우저에서 일어나는 사건(action)을 말한다

웹 페이지와 사용자와 상호작용으로 특정 엘리먼트에 가하는 어떤 행동을 말한다

이벤트란 프로그램하고 있는 시스템에서 일어나는 일련의 사건

시스템은 이벤트가 발생될 때 몇몇 종류의 신호를 발생, 이벤트가 발생될 때 자동으로 정해진 코드를 실행하는 매커니즘을 제공

웹에서는 시스템에 해당하는 것이 웹 브라우저

웹에서는 이벤트가 브라우저 내에서 발생되고, 이벤트가 특정한 요소(태그, 엘리먼트)에 부착되는 경향이 있다

각 요소(태그, 엘리먼트)에서 발생될 수 있는 다양한 이벤트 타입이 있다

이벤트 모델

이벤트 (Event)	웹 브라우저 윈도우 내에서 발생되는 것
이벤트 소스 (Event Source)	이벤트가 발생한 곳(태그, HTML 문서, 웹 브라우저 윈도우)
이벤트 핸들러(Event Handler)	이벤트 발생을 감지하고, 이벤트에 응답해서 실행되기 위해 정의된 코드블록 이벤트 리스너 (Event Listener) 라고도 한다

이벤트 소스
<button onclick="fn1()">버튼</button>


<script>
	 이벤트 핸들러
	function fn1(){
    	수행문;
        수행문;
        수행문;
    }
</script>

이벤트가 발생하는 예

사용자가 마우스로 버튼을 클릭한다 ( onclick 이벤트 )
사용자가 마우스를 움직인다 ( onmousemove 이벤트 )
사용자가 브라우저 창의 크기를 조절하거나 닦는다 ( onresize 이벤트 )
웹 페이지가 로딩이 완료되었다 ( onload 이벤트 )
폼 입력값이 서버로 제출된다 ( onsubmit 이벤트 )
사용자가 입력필드에 키보드로 입력을 한다 ( onkeypress, onkeyup, onkeydown 이벤트 )
웹 페이지에서 오류가 발생한다 ( onerror 이벤트 )

Event의 종류

마우스 이벤트

이벤트명	설명
onclick	엘리먼트를 클릭했을 때
ondbclick	엘리먼트를 더블 클릭했을 때
onmouseover	엘리먼트 위로 마우스가 움직일 때
onmouseout	엘리먼트 밖으로 마우스가 움직일 때
onmousenter	엘리먼트 위로 마우스가 움직일 때
onmouseleave	엘리먼트 밖으로 마우스가 움직일 때
onmousemove	엘리먼트 위에서 마우스가 움직일 때
onmousedown	엘리먼트에서 마우스의 버튼을 눌렀을 때
onmouseup	엘리먼트에서 마우스의 버튼을 뗐을 때

키보드 이벤트

이벤트명	설명
onkeyup	엘리먼트에서 키보드 키가 위로 올라올 때
onkeypress	엘리먼트에서 키보드 키가 완전히 눌려졌을 때
onkeydown	엘리먼트에서 키보드 키를 누르고 있을 때

폼 이벤트

이벤트명	설명
onfocus	폼 입력요소가 포커스를 획득했을 때
onblur	폼 입력요소가 포커스를 잃었을 때
onchange	폼 입력요소의 값이 변경될 때
onselect	폼 입력요소의 텍스트를 선택했을 때
onreset	폼의 리셋버튼이 클릭됐을 때
onsubmit	폼이 서버로 제출될 때

윈도우 이벤트

이벤트명	설명
onload	브라우져가 페이지의 로딩을 끝마쳤을 때
onresize	브라우져의 윈도우 크기가 변경될 때
onerror	자바스크립트 실행 중 에러가 발생했을 때

Event 객체

구분	이름	설명
프로퍼티	target	이벤트가 발생된 엘리먼트를 반환
프로퍼티	type	발생한 이벤트의 이름을 반환
프로퍼티	which	마우스 이벤트나 키보드 이벤트가 발생했을 때 클릭한 마우스 번트의 번호, 입력한 글자의 유니코드값을 반환
메소드	preventDefault( )	이벤트가 발생했을 때 그 이벤트와 관련된 기본동작의 실행을 취소
메소드	stopPropagation( )	이벤트 버블링을 차단
메소드	stopImmediatePropagation( )	이벤트 버블링을 차단하고, 해당 엘리먼트에 동일한 이벤트를 발생시 실행할 다른 함수를 실행도 즉시 중시

Event 객체 :웹페이지나 엘리먼트에서 이벤트가 발생할 때 마다 생겨나는 객체 ( Event 객체의 주요 API )
이벤트 버블링 : 이벤트가 발생하면 해당 엘리먼트의 부모 엘리먼트로 이벤트가 전파되는 것을 말함

'JavaScript' 카테고리의 다른 글

JavaScript_이벤트 버블링 (1)	2024.01.17
JavaScript_DOM, BOM (1)	2024.01.16
JavaScript_JavaScript, 타입, 연산자 (0)	2024.01.12
JavaScript 9일차 정리 [ 변수 var와 이벤트 ] (0)	2023.09.12
JavaScript 8일차 정리 [ 함수 ] (0)	2023.09.12

유서담 백엔드 성장일기

JavaScript_JavaScript 함수, 이벤트

JavaScript의 함수(Function)

이벤트(Event)

이벤트 모델

이벤트가 발생하는 예

Event의 종류

'JavaScript' 카테고리의 다른 글

티스토리툴바

JavaScript_JavaScript 함수, 이벤트

JavaScript의 함수(Function)

이벤트(Event)

이벤트 모델

이벤트가 발생하는 예

Event의 종류

'JavaScript' 카테고리의 다른 글

관련글

티스토리툴바