- 프론트엔드 공부 06일차 -
함수
우리가 직접 만드는 기능
function 함수이름(매개변수(선택사항)) {
함수를 호출했을 때 실행할 명령문
}
function hello() {
alert(“안녕하세요”)
}
함수작성방법
함수 선언식
function hello(name) {
alert(name + "님 안녕하세요")
}
함수 표현식
const hello = function(name) {
alert(name + "님 안녕하세요")
}
화살표 함수
const hello = (name) => {
alert(name + "님 안녕하세요")
}
실무에서는 화살표 함수를 많이 사용한다.
함수 선언식을 함수 표현식으로, 함수 표현식을 화살표 함수로 변환하는 방법을 알아야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./05-fuction.js"></script>
</head>
<body>
<div id="num">000000</div>
<button class="btn" onclick="createNum()">인증번호 전송</button>
</body>
</html>
let createNum = () => {
const token = String(Math.floor(Math.random() * 1000000)).padStart(6,0)
document.getElementById("num").innerText = token
document.getElementById("num").style.color = "#" +token
}
인증번호 생성
인증번호 6자리를 생성하고 생성한 번호의 숫자코드로 인증번호의 색을 바꿔주는 코드이다.
내장함수
자주 사용되는 함수를 자바스크립트에 내장하여 편리하게 이용할 수 있도록 한 것
시간 지연 함수
setTimeout(func, time)
시간 반복 함수
setInterval(func, time)
시간 입력 시 ms 단위로 입력
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./06-timer.js"></script>
</head>
<body>
<div id="num">000000</div>
<button class="btn" onclick="createNum()">인증번호 전송</button>
<div id="timer">3:00</div>
<button id="completebtn">인증완료</button>
</body>
</html>const createNum = () => {
const num = String(Math.floor(Math.random() * 1000000)).padStart(6,0)
document.getElementById("num").innerText = num
let time = 180
setInterval(function(){
if(time >= 0) {
let min = Math.floor(time / 60)
let sec = String(time % 60).padStart(2,0)
document.getElementById("timer").innerText = min + ":" + sec
time = time - 1
}else{
document.getElementById("completebtn").disabled = true
}
},1000)
}
3분 타이머
간단한 인증번호 생성기와 3분 타이머가 생성되는 코드
3분 만료 시 인증완료 버튼이 비활성화 된다.
'프론트엔드 공부 > html 기초' 카테고리의 다른 글
| 07일차 프론트엔드 공부 (0) | 2024.09.04 |
|---|---|
| 05일차 프론트엔드 공부 - 기초 JS 2 (0) | 2024.09.04 |
| 04일차 프론트엔드 공부 - 기초 JS (1) | 2024.09.04 |
| 02일차 프론트엔드 공부 -CSS의 기초 (1) | 2024.09.04 |
| 01일차 프론트엔드 공부 -HTML의 기초 (1) | 2024.09.04 |