Notice
Recent Posts
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
관리 메뉴

공부기록용

바닐라 JS로 크롬 앱 만들기(05) 본문

📚강의록📚/노마드)Javascript

바닐라 JS로 크롬 앱 만들기(05)

과부하가즈아 2023. 6. 29. 14:46

https://nomadcoders.co/javascript-for-beginners/lobby

 

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

Javascript For Beginners

nomadcoders.co

🔴setTimeout / setInterval

🔴Date

🔴padStart() 

 

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다.

 

호출 스케줄링을 구현하는 방법은 두 가지가 있습니다.

  • setTimeout() 을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
  • setInterval() 을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

setTimeout

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

 

  • func|code실행하고자 하는 코드로, 함수 또는 문자열 형태입니다. 대개는 이 자리에 함수가 들어갑니다. 하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만 추천하진 않습니다.
  • delay실행 전 대기 시간으로, 단위는 밀리초(millisecond, 1000밀리초 = 1초)이며 기본값은 0입니다.
  • arg1, arg2…함수에 전달할 인수들로, IE9 이하에선 지원하지 않습니다.

코드를 실행하면 1초 후에 sayHi()가 호출됩니다.

function sayHi() {
  alert('안녕하세요.');
}

setTimeout(sayHi, 1000);
function sayHi(who, phrase) {
  alert( who + ' 님, ' + phrase );
}

setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요.

clearTimeout

let timerId = setTimeout(...);
clearTimeout(timerId);

setInterval

setInterval 메서드는 setTimeout과 동일한 문법을 사용합니다.

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

인수 역시 동일합니다. 다만, setTimeout이 함수를 단 한 번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다.

함수 호출을 중단하려면 clearInterval(timerId)을 사용하면 됩니다.

 

메시지가 2초 간격으로 보이다가 5초 이후에는 더 이상 메시지가 보이지 않습니다.

// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);

// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);

즉, setTimeout는 지정 시간이 지나면 딱 함수가 실행되는것, setInterval은 매 지정한 시간마다 함수가 실행되는 것 

Date

const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}
getClock() // 즉시 호출하고
setInterval(getClock, 1000) // setInterval로 지정한대로 계속 찍히고

// new Date()
// 생성자로 호출할 경우 새로운 Date 객체를 반환합니다.
// >> Thu Jun 29 2023 14:13:00 GMT+0900 (한국 표준시)

<!--html-->
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-sccale=1.0" />
    <link rel="stylesheet" href="CSS/style.css">
    <title>momentum App</title>

</head>

    <body>
        <form class="hidden" id="login-form">
            <input required maxlength="15" type='text' placeholder="what is your name?" />
            <input type="submit" value="Log In" />
        </form>
        <h2 id="clock">00:00:00</h2>
        <h1 id="greeting" class="hidden"></h1>

        <script src="js/greeting.js"></script>
        <script src="js/clock.js"></script>
    </body>

</html>
// js
const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
}
getClock() // 즉시 호출하고
setInterval(getClock, 1000) // setInterval로 지정한대로 계속 찍히고

// new Date()
// 생성자로 호출할 경우 새로운 Date 객체를 반환합니다.
// >> Thu Jun 29 2023 14:13:00 GMT+0900 (한국 표준시)

padStart()

현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다.

str.padStart(targetLength [, padString])
  • targetLength : 목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환.
  • padString Optional : 현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ". (U+0020)

시작점부터 주어진 문자열로 채워 목표 길이를 만족하는 String으로 반환

const a = "35";

console.log(a.padStart(5, "0"));
// 00035

console.log(a.padEnd(5, "0"));
// 35000
const b = "hello";

console.log(b.padStart(15, "x"));
// xxxxxxxxxxhello
console.log(b.padEnd(15, "0"));
// hello0000000000

▼

const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();

    const hours = String(date.getHours());
    const minutes = String(date.getMinutes());
    const seconds = String(date.getSeconds());

    // padStart적용하기 위해서는 문자로 바꿔줘야한다. 그래서 String()로 감싸준 것
    clock.innerText = (`${hours.padStart(2, "0")}:${minutes.padStart(2, "0")}:${seconds.padStart(2, "0")}`)
}
getClock() // 즉시 호출하고
setInterval(getClock, 1000) // setInterval로 지정한대로 계속 찍히고

언제나 두자리로 출력이 된다

'📚강의록📚 > 노마드)Javascript' 카테고리의 다른 글

바닐라 JS로 크롬 앱 만들기(07)  (0) 2023.07.10
바닐라 JS로 크롬 앱 만들기(06)  (0) 2023.06.29
바닐라 JS로 크롬 앱 만들기(04_2)  (0) 2023.06.28
바닐라 JS로 크롬 앱 만들기(04_1)  (0) 2023.06.28
바닐라 JS로 크롬 앱 만들기(03)  (0) 2023.06.23
'📚강의록📚/노마드)Javascript' Related Articles more
Comments