함수
내장된 기능이 아닌 직접 만들어내는 기능
ex. function game() { ==> function 함수이름 (매개변수) {
return 결과값 return 결과값
} }
*매개변수와 결과값은 필수 X
- 함수작성 방법
1. 함수 선언식
2. 함수 표현식
3. 화살표 함수 (function 생략)
*방법에 상관없이 함수를 실행할 땐 공통적으로 hello(name)
예제 1 [클릭형 랜덤번호, 랜덤색상 생성기]
- 6자리 숫자가 랜덤으로 배정되는 코드를 변수명
auth에 할당 - HTML화면에 표출되는 000000 6자리 숫자(id="number") Text에
auth할당 - 000000 6자리 숫자(id="number")의 색상값에
"#" + auth라는 값 할당 - 2.와 3.의 DOM을
hello함수 내에 삽입 <button>태그에 onclick 타입을 주고hello()함수를 넣어 클릭마다 지정 함수가 실행되도록 함
예제1 (+a)
↑ 정상적으로 구동 (클릭마다 번호 자동생성)
↑ 한 번만 구동 (번호 생성 후 변화 X)
+a) const auth = String(Math.floor(Math.random()*1000000)).padStart(6,0)
가 함수 밖에 있기에 버튼을 여러 번 클릭해도 반복실행에 영향을 안 받음
=> (따라서 랜덤 수 한 번만 나옴)
내장함수
자주 사용되는 함수를 자바스크립트에 내장하여 편하게 이용할 수 있도록 한 것
-
시간지연함수
[ 일정시간 지난 이후 실행]
setTimeout(function,time)
console.log("로딩을 시작합니다.") setTimeout(function(){ console.log("로딩 완료.") }, 3000) -
시간반복함수
[일정시간마다 반복실행]setInterval(function,time)
setInterval(function(){ const now = new Date() const minutes = now.getMinutes() const seconds = now.getSeconds() console.log(minutes + "분" + seconds + "초") }, 1000)
+a) 시간 입력 단위는 밀리세컨드 (ms, 1000ms = 1sec)
setInterval 특징
- 함수를 실행할 때마다 setInterval함수의 작동 로그를 포함한 고유의 ID가 생성
ex. setInterval 함수를 3번 실행했다면, 작동하고 있는 각각의 3개의 setInterval ID가 존재함- setInterval(fun(),1000) 에 함수 자체를 넣지 않고, 함수를 호출( ) 하면 한 번 만 실행되고 그대로 종료됨
예제2 (setInterval을 활용한 타이머 만들기)
1. time을 180초로 설정
2. setInterval내 function에 if문 입력
3. if문 => time이 0보다 크거나 같을 때 min은 time을 60으로 나누고 나머지를 버린 몫,
sec은 60으로 나눈 나머지 값, time은 한 번 실행마다 -1씩 차감
"count"ID 가진 HTML태그의 Text에 min과 sec 값 삽입
(else) 그렇지 않다면 "ok" ID 가진 태그의 기능 비활성화
예제3 (반복실행 제한, 설정시간 끝나면 종료되는 타이머)
let isStarted = fasle로 할당,if문을 이용해 false값을 true로 바꾸어 함수의 반복실행이 안되도록 함- 지정 time이 모두 지나면
setInterval함수는 else문을 반복실행
이를 방지하기 위해let timeEnd = setInterval(,)이후 else문에clearInterval()추가
이벤트 핸들러
이벤트 핸들러는 웹브라우저 내에 이벤트가 발생하는것을 감지하는 역할을 함
- 이벤트핸들러 종류
onclick = "function()" => 해당태그 클릭 시 함수 실행
oninput = "function()" => 해당태그의 변경사항 감지 시 함수 실행
onblur = "function()" => 해당 태그 벗어났을 때 함수 실행
onkeydown( ) => 지정한 영역 내에서 키보드가 눌렸을 때 실행
