함수 선언 및 호출
- 어떤 기능을 구현해놓은 명령어들의 집합
- 함수의 사용방법은 "정의"와 "호출"의 두 부분으로 나뉜다
- 호출한 함수는 반드시 호출한 곳으로 되돌아온다
함수 선언(정의)
function 함수명() { // Java : public void 메서드명() {}
명령;
}
function 함수명(param1, param2, ...) {
명령;
return 결과값;
}
함수 호출
함수명();
함수명(변수);
⚒️ 예제
| JavaScript\webapp\js | |
| exam09.html | 함수 선언, 함수 호출 |
| exam10.html | 함수 선언, 함수 호출 |
| exam11.html | 함수 선언, 함수 호출 |
함수 종류
기본 함수 (Function Declaration)
- 함수 이름과 함께 정의된 전통적인 함수
함수 표현식 (Function Expression)
- 변수에 할당된 함수
- 익명 함수나 이름이 있는 함수로 할당
- 함수 이름을 지정하지 않고 사용하거나 함수를 호출하지 않고 바로 실행
익명 함수
이름이 없는 함수
let sum = function(a, b){
return a + b;
}
document.write(`함수 실행 결과: ${sum(10, 20)}`;
즉시 실행 함수
- 함수를 정의하면서 동시에 실행
- 한 번만 실행하는 함수일 경우 사용
- 변수의 스코프를 제한해서 코드 사이에 충돌이 생기는 것을 방지
(function() {
let userName = promt("이름을 입력하세요.");
document.write(`<p>안녕하세요? <span class="accent">${userName}</span>님!</p>`);
}());
화살표 함수
ES6 버전부터 사용
함수 이름이 없을 경우에만 사용 가능
매개변수 & 함수 내용으로 구성
1. 매개변수 없을 경우
function(){} → () => { ... }
2. 매개변수가 한 개인 경우 - 소괄호 생략 가능
function(x){} → (x) => { ... }
3. 매개변수가 여러 개인 경우 - 소괄호 생략 불가
function(x, y){} → (x, y) => { ... }
4. 예제
| // JavaScript\webapp\ES6 | |
| 03_arrowFunction.html | 화살표 함수 |
내장 함수
- 자바스크립트가 미리 선언한 함수
- 호출만으로 사용할 수 있는 함수
자주쓰는 내장 함수
| eval(문자열) | 문자열 >> 수식 |
| Number(문자열) | 문자열 >> 숫자(정수, 실수) |
| parseInt(문자열) | 문자열 >> 정수 |
| isNaN(문자열) | 문자열이 숫자형식이 아니면 true, 숫자형식이면 false -> Not-A-Number(숫자가 아님) |
| alert(문자열) | 문자열을 대화상자로 출력 |
| confirm(문자열) | 문자열을 확인/취소 대화상자로 출력 |
| prompt(문자열) | 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화상자 호출 |
⚒️ 예제
| JavaScript\webapp\js | |
| exam12.html | 함수 선언, 함수 호출, 내장 함수 사용 |
| exam13.html | 함수 선언, 함수 호출, 내장 함수 사용 |
| exam14.html | 함수 선언, 함수 호출, 내장 함수 사용 |
타이머
1. 개념
- 특정 시간 이후에 코드를 실행하거나, 일정한 시간 간격으로 반복해서 코드를 실행할 수 있도록 하는 기능
2. 타이머 제공 내장 함수
| setTimeout() | 지정된 시간 후에 한 번만 실행 |
| setInterval() | 지정된 시간 간격마다 반복적으로 실행 |
| clearTimeout() | setTimeout()으로 설정된 타이머 취소 |
| clearInterval() | setInterval()으로 설정된 반복 타이머 취소 |
3. 예제
| JavaScript\webapp\js | |
| exam22.html | timer; getFullYear(), getMonth(), getDate(), getDay(), getHours(), getMinutes(), getSeconds() |
| exam22-1.html | timer |
이벤트 처리 (Event Handler)
1. 개념
- 특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것
- 애플리케이션이 이벤트 타입과 이벤트 대상을 지정해 웹브라우저에 이벤트 핸들러 함수 등록
- 지정된 대상(HTML 요소)에서 지정된 타입의 event 가 발생하면 브라우저가 핸들러 함수 호출
- Javascript를 사용하는 이유 : <body> 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위해서
2. 이벤트 종류
| onclick | 링크, 이미지맵 영역, 폼 요소가 클릭되었을 때 |
| onblur | 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때 |
| onchange | 해당 태그가 변경됐을 때 |
| onfocus | 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때 |
| onload | 이미지, 문서, 프레임이 로드될 때 |
| onmouseover | 태그의 요소 위로 마우스 커서가 들어갈 때 |
| onmouseout | 태그의 요소 위에서 마우스 커서가 빠져나갈 때 |
3. 제어대상 지정
- 태그의 id로 제어할 특정 태그를 지정
- document.getElementById("아이디") 로 자바스크립트로 태그를 가져옴
4. 예제
| // JavaScript\webapp\js | |
| exam15.html | 이벤트 처리, dom |
| exam16.html | onmouseover, onmouseout |
| exam16-1.html | 1 ~ 10 사이의 덧셈 문제 난수 발생 |
'WEB > JavaScript' 카테고리의 다른 글
| 객체 (0) | 2024.08.21 |
|---|---|
| Map (0) | 2024.08.18 |
| JavaScript 개요 (0) | 2024.08.18 |
