자바스크립트 공부(4) - 함수와 이벤트

함수 정의하기

---

function name() {

}

기본 형식은 이러하고, 필요하다면 매개변수를 지정할 수도 있다.

 

지역 변수와 전역 변수

---

• 스코프(Scope) : 변수를 선언하고 사용할 때 변수가 적용되는 범위
• 지역 변수(Local Variable) : 한 함수 내에서만 사용 가능한 변수. 함수 내에서 변수 이름 앞에 var을 붙여서 선언한다.
• 전역 변수(Global Variable) : 스크립트 소스 전체에서 사용 가능한 변수
• 블록 변수(Block Variable) : ES6 버전부터 추가된 변수로, 한 블록({}) 내에서만 유효한 변수이다. let을 사용하여 선언한다.

 

익명 함수

---

익명 함수는 이름이 없는 함수이다. 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있다.
활용 예시 :

var add = funtion(a, b) {
return a + b;
}

이렇게 선언한 익명 함수는 변수를 함수 이름처럼 사용해서 실행할 수 있다.

즉시 실행 함수

---

즉시 실행 함수는 함수 정의와 동시에 실행하는 함수이다.

(function() {
...
})();

또는

(function() {
...
}());

와 같은 형식으로 선언한다. 즉시 실행 함수는 식이기 때문에 끝에 세미콜론을 붙여야 한다. 익명함수와 마찬가지로 변수에 할당하여 사용한다.
인수를 추가한 예시 :

var result = (function(a, b) {
return a + b;
} (10, 20));
console.log(result);
30

• ES6 버전부터는 화살표 표기법을 사용하여 간단하게 함수를 선언할 수 있다.

 

이벤트

---

이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 의미한다. 단, 브라우저의 제목 표시줄을 누르는 행위처럼 웹 문서 영역을 벗어나서 이루어지는 동작은 이벤트가 아니다.
이벤트 목록 보기 : https://developer.mozilla.org/ko/docs/Web/Events

이벤트 핸들러 : 이벤트와 이벤트 처리 함수를 연결해주는 것. 이벤트 처리기라고도 불린다. 이벤트 이름 앞에 on을 붙여서 사용한다.

 

함수 연결하기

---

<button class="over" id="open" onclick="alert('눌렀습니다.')">상세 설명 보기</button>

HTML 태그 안에 이벤트 핸들러를 삽입한다. 이때 바깥 따옴표와 안의 따옴표가 중복되지 않도록 주의한다.

 

미리 만들어 둔 함수 연결하기

<button class="over" id="open" onclick="func()">상세 설명 보기</button>

위 소스처럼 함수 이름을 입력해서 미리 만든 함수와 연결할 수 있다.

여러 이벤트 핸들러 연결하기

익명 함수를 사용하여 여러 이벤트 핸들러를 연결할 수 있다.

var coverImage = document.querySelector("#cover");
coverImage.onclick = function() {
alert('눌렀습니다');
};
coverImage.onmouseover = function() {
coverImage.style.border = "5px.black solid";
};