Web 8일차 1(함수와 이벤트)

함수란

동작해야 할 목적대로 명령을 묶어 놓은 것

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

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

자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있음
예) alert( )

 

 

함수의 선언 및 호출

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

함수 호출 : 선언한 함수를 사용하는 것 

 

스코프 : 변수가 적용되는 범위

스코프에 따라 지역 변수(로컬 변수)와 전역 변수(글로벌 변수)로 나뉨

 

 

지역 변수

함수 안에서 선언하고 함수 안에서만 사용함

var과 함께 변수 이름 지정

 

 

전역 변수

스크립트 소스 전체에서 사용함

함수 밖에서 선언하거나 함수 안에서 var 없이 선언

 

var 변수와 호이스팅

 

 

호이스팅

- 변수를 뒤에서 선언하지만, 마치 앞에서 미리 앞에서 선언한
것처럼 인식함

- 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로
끌어올려 인식함

 

재선언과 재할당이 가능하다

재선언 : 이미 선언한 변수를 다시 선언할 수 있음

재할당 : 같은 변수에 다른 값을 할당할 수 있음

🡪 재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐

 

let을 사용한 변수의 특징

블록 변수 – 블록({ }) 안에서만 사용할 수 있다
🡪 전역 변수는 변수 이름과 초깃값만 할당하면 됨  (웬만하면 쓰지말자.)

 

재할당은 가능하지만 재선언은 할 수 없다

호이스팅이 없다

 

 

const를 사용한 변수의 특징

상수 – 변하지 않는 값을 선언할 때 사용

재선언, 재할당할 수 없음

 

 

매개 변수와 인수, return 문

매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것

인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값

 

---

익명 함수

즉시 실행 함수

(요새 안쓴다. 선생님 넘어가심)

---

function도 안쓴다.

 

두번째거로 하자. 세번째거로 하면 싫어한다.

---

 

---

 

이벤트

웹 브라우저나 사용자가 행하는 동작  (브라우저 따라감. 브라우저마다 동작되는 방식이 다르다.)

웹 문서 영역안에서 이루어지는 동작만 가리킴

주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때,
폼에 내용을 입력할 때 발생

 

마우스 이벤트

키보드 이벤트

 

문서 로딩 이벤트

폼 이벤트

이벤트 처리기

이벤트가 발생했을 때 처리하는 함수

이벤트 핸들러(event handler)라고도 함

 

 

이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결

 

 

DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결