함수란?
- 동작해야 할 목적대로 명령을 묶어 놓은 것.
- 각 명령의 시작과 끝을 명확하게 구별할 수 있음
- 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있음
- 자바스크립트에는 이미 여러 함수가 만들어져 있어서 가져다 사용할 수 있음 ex)alert
함수의 선언 및 호출
function 함수명(){
//명령
}함수를 사용해 두 수를 더하는 코드를 구현해 보자.
<script>
function addNumber(){
var num1 = 2;
var num2 = 3;
var sum = num1+num2;
alert("결괏값 : "+sum);
}
addNumber();
addNumber();
</script>
스코프 : 변수가 적용되는 범위
- 스코프에 따라 지역 변수와 전역 변수로 나뉨.
지역 변수
- 함수 안에서 선언하고 함수 안에서만 사용함
- var과 함께 변수 이름 지정
지역 변수의 예제
<script>
function addNumber(){
var sum = 10 + 20;//sum은 지역 변수로 선언.
}
addNumber();
console.log(sum); //<---- 지역 변수를 사용하려고 해서 오류가 발생한다.
</script>전역 변수
- 스크립트 소스 전체에서 사용함
- 함수 밖에서 선언하거나 함수 안에서 var없이 선언
전역 변수의 예제
<script>
function addNumber(){
var sum = 10 + 20;//sum은 지역 변수로 선언.
multi = 10 * 20;//multi는 전역 변수로 선언. (var없이 선언하면 전역변수.)
}
addNumber();
console.log(sum); //<---- 지역 변수를 사용하려고 해서 오류가 발생한다.
console.log(multi); //<---- 전역 변수를 사용했다.
</script>
var 변수와 호이스팅
호이스팅 예제
<script>
var x = 10;
function displayNumber(){
console.log("x is "+x);
console.log("y is "+y);
var y = 20;//호이스팅
}
displayNumber();
</script>호이스팅
- 변수를 뒤에서 선언하지만, 마치 앞에서 미리 선언한 것처럼 인식한다.
- 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함.
재선언과 재할당이 가능하다.
- 재선언 : 이미 선언한 변수를 다시 선언할 수 있음
- 재할당 : 같은 변수에 다른 값을 할당할 수 있음
-> 재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐
let과 const의 등장
let을 사용한 변수의 특징
- 블록 변수 : 블록 안에서만 사용할 수 있다.(지역 변수)
-> 전역 변수는 변수 이름과 초깃값만 할당하면 됨.
- 재할당은 가능하지만 재선언은 할 수 없다.
- 호이스팅이 없다.
const를 사용한 변수의 특징
- 상수 : 변하지 않는 값을 선언할 때 사용
- 재선언, 재할당 불가능. java에서의 final과 비슷
자바스크립트의 변수를 사용할 때 유의사항
1. 전역 변수는 최소한으로 사용
2. var 변수는 함수의 시작 부분에서 선언
3. for 문에서 카운터 변수는 var보다 let 변수로 선언
4. ES6를 상용한다면 var보다 let을 사용하는 것이 좋다.
재사용할 수 있는 함수 만들기
매개변수와 인수, return 문
- 매개 변수 : 하나의 함수를 여러 번 실행할 수 있도록 실행할 때마다 바뀌는 값을 변수로 처리한 것
- 인수 : 함수를 실행할 때 매개 변수 자리에 넘겨주는 값
함수 표현식
익명 함수
- 함수 이름이 없는 함수
- 함수 자체가 식이므로 함수를 변수에 할당할 수도 있고 다름 함수의 매개변수로 사용할 수도 있음.
익명 함수 예제
var sum = function(a,b){//익명 함수
return a+b;
}
console.log("함수 실행 결과 : "+sum(10,20);
즉시 실행 함수
- 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 해석함.
- 식 형태로 선언하기 때문에 함수 선언 끝에 세미콜론(;) 붙임
즉시 실행 함수 예제
<script>
(function(a,b){
sum = a + b;
}(100,200));//<--즉시 실행 함수
console.log("함수 실행 결과 : "+sum);
</script>
화살표 함수
- ES6 이후 사용하는 => 표기법
- 익명 함수에서만 사용 가능하다.
화살표 함수의 예제로 같은 코드끼리 묶어놓았다.
1. alert를 쓴 예제
const hi = function(){
return alert("안녕하세요?");
}
const hi = () => { return alert("안녕하세요")};
const hi = () => alert("안녕하세요");
2. 연산식 예제
let sum = function(a+b){
return a+b;
}
let sum = (a, b) => a+b;
이벤트와 이벤트 처리기
이벤트
- 웹 브라우저나 사용자가 행하는 동작
- 웹 문서 영역안에서 이루어지는 동작만 가리킴
- 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생
마우스 이벤트
| 종류 | 설명 |
| click | 사용자가 html 요소를 클릭할 때 이벤트가 발생합니다. |
| dbclick | 사용자가 html 요소를 더블클릭할 때 이벤트가 발생합니다. |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다. |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생합니다. |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다. |
| mouseout | 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다. |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생합니다. |
키보드 이벤트
| 종류 | 설명 |
| keydown | 사용자가 키를 누르는 동안 이벤트가 발생합니다. |
| keypress | 사용자가 키를 눌렀을 때 이벤트가 발생합니다. |
| keyup | 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다. |
문서 로딩 이벤트
| 종류 | 설명 |
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생합니다. |
| error | 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다. |
| load | 문서 로딩이 끝나면 이벤트가 발생합니다. |
| resize | 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다. |
| scroll | 문서 화면이 스크롤되었을 때 이벤트가 발생합니다. |
| unload | 문서에서 벗어날 때 이벤트가 발생합니다. |
폼 이벤트
| 종류 | 설명 |
| blur | 폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다. |
| change | 목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다. |
| focus | 폼 요소에 포커스가 놓였을 때 이벤트가 발생합니다. |
| reset | 폼이 리셋되었을 때 이벤트가 발생합니다. |
| submit | submit 버튼을 클릭했을 때 이벤트가 발생합니다. |
이벤트 처리기
- 이벤트가 발생했을 때 처리하는 함수
- 이벤트 핸들러 라고도 함
- 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결
버튼을 클릭하면 알림 창을 표시하는 코드 예제
<body>
<ul>
<li><a href = "#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
<li><a href = "#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
<li><a href = "#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</ul>
//,,,생략
DOM을 이용한 이벤트 처리기
DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리기를 연결한다. 이는 나중에 추가로 다루어 볼 예정이다.
'교육 | 외부활동 > JAVASCRIPT' 카테고리의 다른 글
| KH_JAVASCRIPT_5_문서 객체 모델(DOM) (1) | 2023.01.11 |
|---|---|
| KH_JAVASCRIPT_4_자바스크립트와 객체 (0) | 2023.01.10 |
| KH_JAVASCRIPT_2_자바스크립트 기본 문법 (1) | 2023.01.09 |
| KH_JAVASCRIPT_1_자바스크립트 시작 (0) | 2023.01.09 |
