Do it : JS -5. 함수와 이벤트

여러 동작을 묶은 덩어리 - 함수

 

함수를 사용하면 좋은점

-함수 : 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것.

-명령의 시작과 끝을 명확하게 구별

-함수에 별도의 이름 붙이면 > 같은 기능이 필요할 때마다 함수 실행

-내장함수 : 미리 만들어져 있어서 함수 가져다 사용 가능

 

함수 정의하고 실행

-함수 선언 : 어떤 명령을 처리해야 할지 미리 알려주는 것

ex. addNumber()함수 선언

-function 예약어, 중괄호 안에 함수에서 실행할 여러 명령 묶는다.

 

-함수 실행 : 선언한 함수를 가져와 사용

-함수 이름을 사용한다 = 함수 호출한다

-자바스크립트 소스 안 어디에서든 함수 실행 가능 > 보통 앞부분 이나 뒷부분에 함수 선언 모아 놓는다.

-함수 선언 부분을 먼저 해석 

 

버튼 눌렀을 때 함수 실행하는 프로그램

사용자가 [덧셈 계산하기]라는 버튼을 눌렀을 때 addNumber() 함수 실행

 

1. 버튼 소스에 onclick="addNumber()" 추가

-onclick은 버튼 눌렀을 때 실행할 대상인 함수 알려주는 예약어

 

2. js 파일 만들어서 addNumber()함수 소스 넣는다.

 

3. js 파일 연결

 

---

여러 번 사용할 수 있는 함수

-여러 입력값을 넣을 수 있게 만들어야 한다.

-재사용성 : 입력을 바꿔 여러 번 사용할 수 있는 성질

 

매개변수

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

-입력

-a,b 같이 함수명 addNumber()의 괄호 안에 들어간다.

ex. 값 2개가 필요하다고 미리 지정 

 

인수

-매개변수로 넘겨주는 값

 

값 입력 받아서 더하는 함수

 

함수 실행

-parseInt() : 프롬프트 창에 입력한 값을 정수로 바꾸는 함수 = Number()

1. 프롬프트 창에서 숫자 입력받아 num1, num2에 저장

2. num1, num2로 addNumber() 함수 호출

 

함수 선언

3. 넘겨 주는 값 2개, 넘겨 받는 값 2개

4. 알림창에 sum값 표시

 

[ES6] 매개변수 기본값 지정

 

함수의 return문

-함수를 반한하다 = 결과값을 함수 밖으로 넘기는 것(ex.다른 계산에 적용하거나, 콘솔창이 아닌 다른 곳에 표시)

-반환 위치 : 함수를 호출한 위치이다.

-return 예약어 + 넘겨줄 값 | 변수 | 식 (ex. return a+b;)

6. 반환된 값을 변수 result에 저장

7. result 변숫값을 화면에 표시

 

변수의 적용 범위

-스코프(scope) : 변수가 적용되는 범위 = 변수가 어디까지 유효한지

 

지역 변수

-함수 안에서 선언, 함수 안에서만 사용

-예약어 var + 변수 이름 (※var 없으면 전역 변수됨)

-함수 밖 변수 100, 함수 안 var 변수 50 > 실행하면 100

-지역 변수는 전역 변수에 영향X

-그래도 변수 이름은 다르게 하자

 

전역 변수

-변수를 한 번 선언하면, 그 값을 계속 유지한다

-함수 밖 변수 100, 함수 안 var 변수 50 > 실행하면 50

-함수 안이라도 var 안 붙이면 전역 변수다.

 

[ES6]블록 변수

-변수를 선언한 블록 중괄호 안에서만 유효하고 블록을 벗어나면 사용X

ex. let 예약어 변수 선언하면 블록변수됨

 

 

익명 함수

-이름이 없는 함수, 선언할 때 이름을 붙이지 않는다.

-함수 자체가 식이기 때문> 익명 함수를 변수에 할당 가능 | 다른 함수의 매개변수로 사용 가능

-변수 add를 함수 이름처럼 사용해서 익명함수 실행

 

즉시 실행 함수

-함수를 정의함과 동시에 실행하는 함수

-함수 선언 전체를 괄호로 묶는다.

-식이기 때문에 마지막에 세미콜론; 붙여준다.

-즉시 실행 함수는 변수에 할당할 수 있다.

 

-매개변수가 필요한 경우 > function 예약어 다음 괄호 안에 매개변수 넣는다

-마지막 괄호에 인수를 넣는다

 

[ES6]함수의 화살표 표기법

=>표기법 : 함수 선언을 간단하게

-이름이 없는 함수를 변수에 지정할 때 사용

-function 예약어는 사용X

-매개 변수 없으면 ()만

-매개 변수 1개면 괄호 없이 작성 가능

-매개 변수 2개면 기존과 같음

 

---

이벤트 다루기

 

이벤트

-웹 브라우저나 사용자가 행하는 어떤 동작

-웹 문서 영역 안에서 이루어지는 동작만/ 웹 문서 영역을 벗어나 누르면 이벤트X

 

마우스 이벤트

-마우스 버튼, 휠 버튼 조작

click	마우스 눌렀을 때
dbclick	마우스 두번 눌렀을 때
mousedown	마우스 누르는 동안
mousemove	포인터 움직일 때
mouseover	포인터 요소 위로 옮겨질 때
mouseout	포인터 요소 벗어날 때
mouseup	누르고 있던 마우스 버튼에서 손을 뗄 때

 

키보드 이벤트

-특정 키를 조작

keypress	키를 눌렀을 때
keydown	키를 누르는 동안
keyup	키에서 손을 뗄 때

 

문서 로딩 이벤트

-서버에서 웹 문서 가져오기 | 문서를 스크롤

abort	화면 불러오기를 멈췄을 때
error	화면 정확히 로딩되지 않았을 때
load	화면 로딩 끝나면
resize	화면 크기가 바뀌었을 때
scroll	화면 스크롤 되었을 때
unload	화면 벗어날 때

 

폼 이벤트

-Form : 사용자가 정보를 입력하는 모든 요소(ex. 로그인, 검색, 게시판, 설문 조사)

blur	폼 요소에 포커스 잃었을 때
change	목록이나 체크 상태 변경되었을 때
focus	폼 요소에 포커스 놓였을 때
reset	폼이 다시 시작
submit	submit 버튼 눌렀을 때

 

이벤트 처리기

-이벤트와 이벤트 처리 함수 연결해주는 것

-이벤트 이름 앞에 on 붙여 사용

 

이벤트 처리기로 <button>에 함수 연결

1. 버튼 눌렀을 때 알림창 표시

 

2. 마우스 커서를 올렸을 때 알림창 표시

 

<button>에 미리 만든 함수 연결

-[상세 설명 보기]버튼 누르면 내용 표시,  [상세 설명 닫기]버튼 누르면 내용 사라짐

 

1. 버튼 눌렀을 때 실행할 함수 > 외부 js파일

-상세 설명 내용을 화면에 표시하는 showDetail()함수,  감추는 hideDetail()

 

2. js파일 연결, onclick 이벤트 처리기 이용해서 버튼에 연결

 

여러 이벤트 처리기 연결

1. 이미지에 onclick, onmouseover, onmouseout 이벤트 처리기 사용

 

2. querySelector()함수를 사용해 id="cover"인 이미지를 가져와 coverImg 변수에 저장한다.

   click 이벤트 발생했을 때 실행할 함수 작성. 익명함수 사용

 

3. coverImg에서 mouseover 이벤트가 발생했을 때 coverImage 스타일 중 border 스타일 지정

   mouseover 이벤트

 

4. 마우스 커서가 벗어나면 mouseout 이벤트