[자바스크립트 함수와 이벤트]
1. 선언적 함수
- 함수 재정의 가능함
- 동일한 이름의 함수 아래쪽에 있다면, 아래 함수가 실행됨.
2. var를 사용
- 지역변수 : 함수 안에서 사용
- 전역변수 : 전역에서 사용
3. var 변수와 호이스팅
- 호이스팅: 변수를 뒤에서 선언하지만, 마치 앞에서 미리 선언한 것처럼 인식함
- 뒤에 선언을 두더라도 앞으로 끌어올려 인식
4. let을 사용한 변수 특징
- 블록변수 - 블록 안에서만 사용
- 재할당 가능, 재선언 X
- 호이스팅 X
5. const 사용한 변수 특징
- 상수 - 변하지 않는 값 선언할때 사용
- 재선언X, 재할당 X
6. var, let, const로 선언한 변수 비교
| 구분 | var | let | const |
| 스코프 | 함수 레벨 | 블록 레벨 | 블록 레벨 |
| 재할당 | 가능 | 가능 | 불가능 |
| 재선언 | 가능 | 불가능 | 불가능 |
7. 매개변수
- 자바스크립트에서는 함수를 호출할 때 지정된 매개변수보다 많거나 적게 사용하는 것을 허용.
- print함수는 매개변수를 한개 입력 받을 수 있도록 선언되어 있지만,
더 많거나 적은 매개변수를 선언하여도 정상적으로 실행 됨.
- 이때 1번 호출 처럼 선언된 매개변수 보다 많은 매개변수를 선언하는 경우 추가된 매개변수는 무시함.
- 그리고 2번 호출 처럼 적은 매개변수를 선언하는 경우 그 매개변수는 undefined로 입력됨.
8. 익명함수
- 이름이 없는 함수. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 호출.
function(매개변수) {명령}
9. 선언적 함수
- 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수.
즉, 따로 변수에 넣어주지 않고 선언할 때 붙여준 이름으로 호출.
-> 선언적 함수와 익명 함수의 차이 :
웹브라우저가 script 태그 내부의 내용을 위에서 부터 한줄 씩 읽기 전에 선언적 함수부터 먼저 읽는다.
-> 선언적 함수는 웹브라우저가 가장 먼저 읽고, 익명함수는 그 뒤에 코드를 차례로 읽을 때 읽음.
10. 가변인자함수
- argument변수
- 자바스크립트의 모든 함수는 내부에 argument 라는 변수를 가지고 있음.
-> 이 변수는 매개변수의 배열.
즉, 함수를 호출할때 전달된 매개변수가 함수 내부에서 arguments라는 배열에 저장.
- arguments는 배열이기 때문에 length키워드를 이용해 길이를 얻을 수가 있음.
이 길이를 이용하면 매개변수의 개수에 따라서 원하는 동작을 하게 만들 수 있고,.
매개변수의 개수인 arguments의 길이에 따라 동작하기를 원하는 코드를 적어줌.
11. 내부함수
- 내부함수는 프로그램 개발 시 협업하여 발생할 수 있는 함수명 중복과 같은 충돌을 막기위한 방법.
- 함수를 정의 할 때 내부에 필요한 함수가 있으면 그 함수 내부에 정의를 하여 사용.
그래서 필요한 함수를 외부에 정의 했을 때 발생할 수 있는 충돌을 막을 수 있음.
12. 자기호출함수 (즉시실행함수)
- 다른 개발자에게 영향을 주지 않게 다음과 같이 생성하자마자 호출하여 사용할 수도 있음.
(function(매개변수) {명령}(인수)) ;
13. 화살표 함수
(매개변수) => { 함수 내용 }
14. 콜백함수
- 매개변수로 전달하는 함수를 콜백함수라고함.
15. 클로저
- 함수가 리턴될때, 함수가 종료된 후에도 함수에서 선언한 지역변수가 남아있는 현상.
- 함수 안에서 생성된 공간 자체를 클로저라고 함.
- 리턴된 함수 자체를 클로저라고도 함.
- 살아남은 지역변수를 클로저라고 부르기도 함.
16. setTimeout()
- setTimeout() 함수의 내부에 위치한 코드는 콜백함수로 지연시간 뒤에 실행될 코드를 설정.
- 지연시간은 밀리세컨드 단위로 설정해야 하며 지연시간 1000은 1초를 의미.
- setTimeout() 사용 예제
* 접속 후 일정 시간이 지나 로그아웃 처리를 하는 경우
* 일부 섹션이 몇 초 뒤에 사라질 경우
* 방문자가 사이트에 접속한 지 20-30초가 지난 뒤 광고 팝업을 띄울 경우
- 반복 함수 실행 방법
* 정해진 시간 뒤 한 번만 실행되는 setTimeout()을 반복 실행한 뒤, 종료 조건을 별도로 주는 방법
* 종료 조건 전까지 계속 반복되는 setInterval()을 사용하여 반복을 하는 방법
- 반복 함수 중지 방법
: 반복되는 타이머 함수를 중지하기 위해서는 clear를 사용.
-> setTimeout을 중지하기 위해서는 clearTimeout()
-> setInterval을 중지하기 위해서는 clearInterval()
17. 이벤트
- 이벤트 : 키보드에서 키를 누르거나, 브라우저가 웹 페이지를 불러오는 것처럼,
웹 브라우저나 사용자가 행하는 동작.
-> 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킴.
- 이벤트 처리기 : 웹 문서에서 이벤트가 발생할 때 그 이벤트에 반응해서 실행하는 함수.
<태그 on이벤트명 = "함수명">
- 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면
해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임.
- 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고,
브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다.
18. DOM을 이용한 이벤트 처리기
- DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결함.
- 웹요소.이벤트명 = 함수명
예제) 버튼 클릭하면 배경색 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트 이벤트 실습</title>
<link rel="stylesheet" href="css/function.css">
<style>
a:link,
a:visited {
color: black;
text-decoration: none;
}
/* a:hover {
color: red;
font-weight: bold;
} */
ul{
list-style: none;
width: 500px;
margin: 10px auto;
padding: 0;
}
a{
border: 1px black;
display: inline-block;
width: 120px;
border: 1px solid #ccc;
padding: 10px 15px;
font-size: 16px;
text-align: center;
}
#g{
color: green;
font-weight: bold;
}
#b{
color: blue;
font-weight: bold;
}
#o{
color: orange;
font-weight: bold;
}
#result {
width: 500px;
height: 300px;
margin: 30px auto;
border: 2px solid #ccc;
border-radius: 15px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a id="g" href="#" onclick="getBg('green')">Green</a>
<a id="b" href="#" onclick="getBg('blue')">Blue</a>
<a id="o" href="#" onclick="getBg('orange')">Orange</a>
</li>
</ul>
</nav>
<div id="result"></div>
<script>
function getBg(color) {
var result = document.querySelector('#result');
result.style.background = color;
}
</script>
</body>
</html>'[Front-End] html+css+javascript' 카테고리의 다른 글
| [HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 (문서객체모델 DOM, getElementById, querySelector, addEventListener) (0) | 2022.06.03 |
|---|---|
| [HTML+CSS+자바스크립트 웹 표준의 정석] 자바스크립트 기본문법 (0) | 2022.06.01 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] CSS - 연결선택자,속성선택자, 가상클래스 (0) | 2022.05.31 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] CSS 다루기 - 기본선택자, 스타일 우선순위, 박스모델, 레이아웃만들기 (0) | 2022.05.31 |
| [HTML+CSS+자바스크립트 웹 표준의 정석] HTML 시작하기 (0) | 2022.05.29 |