시베리안 허숙희의 자바스크립트 비기닝 16 (Built-In 객체)

자바스크립트

by e7e 2023. 6. 13. 17:40

웬지 쪼메 쉬어갈 포인트인 것 같당!

Built-In으로 제공되는 Math와 Date 클래스, 그리고 비동기적 성격을 가지고 있는 글로벌함수

setTimout/clearTimeout에 대해 부담없이(물론 본인선택) 챙겨보장

Math

Math는 전역(Global) 객체로 MDN Math에서 속성과 메소드 전체 리스트를 확인할 수 있당

일반적으로 프로그램 작성시에 산수적인 부분은 꽤 자주 발생하는 부분이어서

Math는 생성없이 바로 사용할 수 있는 static 메소드를 가지고 있당

그중에 필수라 생각되는 아래 코드의 4가지 정도만 확인하고 넘어가장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    alert(Math.floor(272.2));  // 바닥(버림)
    alert(Math.ceil(271.1));   // 천정(올림)
    alert(Math.round(271.6));  // 반올림
    
    for(let i=1; i<=3; i++){   // 3번만 보장
        //   0<= 발생숫자 < 1  
        alert("랜덤 발생 숫자: " + Math.random());
    }
</script>

결과를 눈으로 확인했다면 알겠지만 Math.random()은 0과 1사이의 값을 발생시킨당

0도 발생할 수 있다고 문서에 되어있지만, 아직 0이 발생하는 걸 본 사람은 없는 것 같당

랜덤함수는 생각외로 중요한뎅, 그럴듯한 무더기 Dummy Data를 만드는 데 사용하면 좋당

특정 범위의 랜덤한 숫자를 발생시키는 함수를 미리 맹글어 놓고 사용하면 편한데

아래와 같은 코드로 심플하게 만들 수 있당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 특정 범위의 정수를 발생시키는 함수
// 50~100 사이의 정수를 발생시켜야 한다고 가정
//    50<=  50 + (0~50 사이 발생)   <= 100
//    50<=  50 +  Math.round(Math.random()*50)   <= 100

const ranNumber = (pStart,pEnd) =>{
    let range = pEnd - pStart;
    return  pStart  +  Math.round(Math.random()*range);
}

// 테스트 결과 눈으로 화긴!
for(let i=1; i<=20; i++){
    if(i < 10)
        console.log(" %d번째 %d",i, ranNumber(50,100)); // 50~100사이의 정수 발생 확인
    else
        console.log("%d번째 %d",i, ranNumber(50,100)); // 50~100사이의 정수 발생 확인
}
</script>

주석과 함께 실행결과를 console 탭에서 확인해 보면 느낌이 올 것이당!

Math관련해서 요정도는 꼬옥 알아두도록 하장!

setTimeout / clearTimeout

setTimeout은 마치 스탑왓치를 설정한 것고 비슷하게, 순 억지 예제를 들어 3초 설정하면

ms 단위로 감소를 시작해 0이 되면 설정된 함수를 call하는 기능을 갖는다.

아래 코드를 실행(사용법확인)하고 결과를 화긴하장

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
const oneSecs = 1000;   // ms단위라 1000이 1초
const after3secs = pArg =>{
    alert("3초가 지났어용 " + pArg );
}

setTimeout(after3secs,3*oneSecs,"벌썽");

alert("제가 먼저 떴어요 무슨 의미죵?")
</script>

코드 실행순서를 보면, setTimeout을 먼저 불렀기 때문에 alert("3초가 지났어용 " + pArg)가

먼저 실행되고, 그 다음에 맨 아래 alert가 실행되어야 하는데, 맨 아래 alert가 먼저 실행된당!

곧 타이머가 실행 중 상태에 있는 데도, 다음 라인으로 넘어간당!

요따위 것을 비동기라 부르는 뎅 매우 아주 어김없이 중요하당!

억지로 현실에 마구 비유하면, 나무늘보가 스타벅스에서 커피 주문을 하고 주방에서

커피 만들기가 시작되었는데, 커피 나오기를 기다리지 않고, 자기 자리로 천천히 가서

유투브를 천천히 즐기는 것과 비슷하당. (진실은 자리에 가기 전에 커피가 나왔당!)

타이머를 중간에 멈추려면 clearTimeout을 불러야 하는뎅

아래 코드처럼 setTimeout의 리턴값(타이머 id)을 clearTimeout에 넘겨줘야 한당

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
const oneSecs = 1000;   // ms단위라 1000이 1초
const after3secs = pArg =>{
    alert("3초가 지났어용 " + pArg );
}

let timerID = setTimeout(after3secs,3*oneSecs,"벌썽");

// 해당 timerID의 시계를 멈춤
clearTimeout(timerID); 

alert("제가 먼저 떴어요 무슨 의미죵?")
</script>

alert("3초가 지났어용 " + pArg ); 가 실행되지 않는 것을 결과로 확인할 수 있당!

Date

Date도 꽤 자주쓰이는 뎅, 머리속에 요거 하나는 꼬옥 넣고 사용해야 한당!

브라우져에서 실행되는 자바스크립트로 읽은 Date는 접속자 컴퓨터의 시간이므로

서버 시간과 차이가 있을 수 있으므로,

사용해야 한다면 서버 시간으로 세팅하고 사용해야 한당

서버의 시간을 읽어왔다 치고, 그 시간을 기준으로 시계를 움직여보장!

시계를 console에 표현하는 건 쪼메 마니 그렇고 그렇당

이제부턴 쩌메씩 html과 css도 섞어 보장.(눈이 즐거우면 코딩도 즐겁당 아님말공!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>시계</title>
<style>
    #idClock {
        position: relative;
        left:100px;top:100px;
        width:250px;height:100px;
        border:10px groove gold;
        background-color: black; color:yellow;
        text-align: center;
        font-size:4em;
    }
</style>
</head>
<body>
    <div id="idClock"></div>
<script>
const clock = document.querySelector("#idClock");

// 시계함수,setTimeout을이용 1초마다 재귀호출
const fclock = () =>{
	//요건 주의 깊게 보고 이런저런 확인도 해보장!
    now.setSeconds(now.getSeconds() + 1);

    let hour = now.getHours();
    if(hour < 10) hour = "0" + hour;

    let minute = now.getMinutes();
    if(minute < 10) minute = "0" + minute;

    let second = now.getSeconds();
    if(second < 10) second = "0" + second;

    clock.innerHTML = hour + ":" + minute + ":" + second;
    setTimeout(fclock, 1000);
}

//서버로 부터 2023-08-08T18:00:00 가져왔다 치장
let now = new Date("2023-08-08T18:00:00");

setTimeout(fclock, 1000); // 1초뒤에 호출

</script>
</body>
</html>

진실은 "모든 건 변한다". 시간은 지난 건 희미하게 다가오는 건 선명하게 바꾼당

시간이 곧 진실이당? 진실의 실체는 시간이당?

시간은 말한다. 인간의 본 모습은 천사를 그리 사랑하지 않음을...

https://www.youtube.com/watch?v=GFAFTXQcmew

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 18 (구조 분해 등등..) (2)	2023.06.14
시베리안 허숙희의 자바스크립트 비기닝 17 (function을 class로...) (4)	2023.06.14
시베리안 허숙희의 자바스크립트 비기닝 15 (즉각실행함수) (2)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 14 (재귀호출 & 화살표함수) (6)	2023.06.13
시베리안 허숙희의 자바스크립트 비기닝 13 ( var let const) (2)	2023.06.12