오늘 배운 것
1. Javascript
- 함수 (함수선언식, 함수표현식, 화살표함수)
- 내장함수
- 3:00 타이머 만들기 실습
1. 함수
함수는 Javascript에서 사용자가 직접 만들고 사용할 수 있는 기능이다.
함수 작성 방법
1) 함수 선언식
함수 이름을 선언해서 작성
function 함수이름(매개변수) {
함수를 호출했을 때 실행할 명령문 // return
}데이터 반환을 위해서는 return이 필요하다.
매개변수와 return은 optional
2) 함수 표현식
익명함수를 변수나 상수에 담는다.
함수 선언식의 호이스팅 문제 때문에 함수 표현식이 등장하였다.
const hello = function(name) {
alert(name + "님 안녕하세요")
}호이스팅 문제점 참고
https://jae04099.tistory.com/45
3) 화살표 함수
함수 표현식의 변형방법
const hello = (name) => { // 화살표 순서 유의
alert(name + "님 안녕하세요")
}실무에서는 화살표 함수를 가장 많이 사용한다.
함수 실행 방법
hello(name)작성 방법은 모두 달라도, 실행 방법은 동일하다.
2. 내장함수
내장함수란 자주 사용되는 함수를 자바스크립트에 내장하여 편리하게 이용할 수 있도록 한 함수이다.
시간지연함수
- setTimeout(func, time)
지정된 시간 뒤에 함수가 작동한다
시간 반복함수
- setInterval(func, time)
지정된 시간 마다 함수가 작동한다
시간 입력 시 초 단위가 아니라 ms 단위로 입력한다. (1초에 1000ms)
📌 전체 시간(초) / 60
=> 몫이 분단위, 나머지가 초단위가 된다.
예제) 3:00 타이머 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<script src="./06-timer.js"></script>
</head>
<body>
<div id="target">000000</div> //id를 사용해주는 이유 : document.getElementById로 내용을 가져오거나 바꾸기 위함
<button onclick="auth()">인증번호 전송</button>
<div id="timer">3:00</div>
<button id="finish">인증완료</button>
</body>
</html>const auth = () => {
const token = String(Math.floor(Math.random() * 100000)).padStart(6, "0")
document.getElementById("target").innerText = token
document.getElementById("target").style.color = "#" + token
let time = 180 //시작 시간을 3:00으로 설정
setInterval(function(){
if(time >= 0) { // 시간은 음수가 나올 수 없다.
let min = Math.floor(time / 60) // 전체시간/60 에서 몫을 가져온다.
let sec = String(time % 60).padStart(2, "0") // 시간에서 60을 나눈 나머지값을 가져오고, 초는 00 단위이므로 padStart로 0을 채워준다.
document.getElementById("timer").innerText = min + ":" + sec //id가 timer인 div의 내용을 바꾸어준다.
time = time - 1 // 1초씩 빼준다.
} else {
document.getElementById("finish").disabled = true // 0:00 인증완료 버튼 비활성화
}
},1000)
}오늘의 회고
함수 작성 방법에서 실무에서는 화살표 함수를 자주 사용한다고 하니 익숙해지도록 노력해야 겠다.
자바스크립트의 기능적인 부분을 배우기 시작하니 점점 어려워지는것 같다. 기본적으로 div에 id를 만들어 document.getElementById로 내용을 바꾸거나 꾸미는것 같은데.. 아직은 익숙하지가 않다.
싸이월드 실습을 통해 이제 flex는 잘 하는것 같다. (아마도..?)
wrapper로 감싸주고 거기에 flex와 flex-direction, justify-content, align-items를 착착 적용해주는데 구조를 잘 생각해면서 하니까 잘되는것 같다. 구조를 만들때 html에서 div를 작성하고 css에 미리 클래스를 적어두는게 편하고 알아보기 쉬운것 같다. 오늘은 테이블을 만들어야 했는데 테이블 태그의 css속성 적용하는 방법을 잘 모르겠어서 대신 div를 이용해서 만들었다. 좀 더 알아봐야 겠다.
아 그리고 자바스크립트 문제 풀때 엄청난 검색을 하게 되는데 내장함수를 잘 몰라서 그런것 같다. 이것도 따로 찾아봐서 정리해놔야 겠다.
