11.10정리(setInterval, newDate()함수)

Shakin 2021. 11. 10. 17:31

2021. 11. 10. 17:31

<body>
    <label id=lblNow style="background-color: whitesmoke;color: blueviolet;"></label>
</body>
<script>
    setInterval(doWrite,500); //0.5초주기로 doWrite함수 반복 하지만 라벨이기 때문에 무한히 보여짐

    let week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
                 'Thursday', 'Friday', 'Saturday'];
    let month = ['January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 
                'September', 'October', 'November', 'December'];
    function doWrite(){
        let today=new Date();
        let monmon=(today.getMonth()+1);
        let monthLabel=month[monmon];
        let dayday=today.getDay();
        let todayLabel=week[dayday];
        str=today.getFullYear()+'-'+monmon+'-'+today.getDate();
        str+=' '+today.getHours()+':'+today.getMinutes()+':'+today.getSeconds();
        document.getElementById('lblNow').innerHTML=str+','+monthLabel+','+todayLabel;
        }

week와 month배열은 html에서 요일을 가져오는 함수를 사용하면 숫자로 나오기 때문에 배열을 사용하여 요일을 가져와주는 방법을 사용하였다.

new Date()함수에는

1000분의 1초 단위의 숫자가 들어온다.1000분의 1초단위의 숫자가 들어오는 것을 getMonth(), getDate()등과 같은

함수를 사용하여 내부에서 계산후 숫자가 나오는 것이다.

날짜계산

    today=new Date();//1000분의 1초 단위의 숫자가 들어옴
    //1000분의 1초단위의 숫자가 들어오는 것을 getMonth, getDate같은 
    //함수를 사용하여 내부에서 계산후 숫자가 나오는 것
    yesterday=new Date(1996,4,21);
    gap=(today-yesterday)/1000/60/60/24;

내가 태어난 날부터 몇일이 지났는지 구하는 식이다.

1000분의 1초 단위로 숫자가 들어오기 때문에

1000을 나눠주고

분단위인 60(초)

시간단위인 60(분)

일단위 24(시간)

를 나눠주어야 일수가 나오게 된다 여기서

월단위인 30(일)을 추가로 나눠주면

몇개월인지 나오게 된다.

년단위인 12(개월)을 추가로나눠주면 몇살인지 정확하게 나오게 된다.

Tip*

today=new Date(1996,4,21,10,30,0)

와같이 한번에 넣어주는 방법이 있지만 가독성이 떨어지게된다 그래서

today=new Date();
today.setYear(1996);
today.setMonth(4);
today.setDate(21);
today.setHours(10);
today.setMinutes(30);
today.setSeconds(0);

위와같은 기본적인 함수안에 들어있는 함수를

내장함수(Built-in function)라고 한다.

하지만 우리가 선언하고 계산식을 다 직접 만들어서 사용하는 함수를

사용자 정의 함수(User-defined Function)라고 한다

위와같이 코드를 작성한다면 가독성이 좋아지게 코드작성을 할 수 있다.

과제

setInterval()을 사용하여 div box 3개에 빨간배경이 번갈아가며 반복되는 코드를 완성하라

<body>
    <div id=dvFirst></div><br>
    <div id=dvSecond></div><br>
    <div id=dvThird></div>
</body>
<script>
let n=0;
    document.getElementById('dvFirst').addEventListener('click',function(){
        setInterval(ColorRotation,1000)});
    
    function ColorRotation(){
        if(n%3==0){
            document.getElementById('dvFirst').style.backgroundColor='red';
            document.getElementById('dvThird').style.backgroundColor='white';
        }
        else if(n%3==1){
            document.getElementById('dvFirst').style.backgroundColor='white';
            document.getElementById('dvSecond').style.backgroundColor='red';
        }
        else if(n%3==2){
            document.getElementById('dvSecond').style.backgroundColor='white';
            document.getElementById('dvThird').style.backgroundColor='red';         
        }
        n++;
    }
</script>

위와같이 코드를 작성하였는데

body에는 div box를 3개 만들어주고

스크립트에서

첫번째 div box를 클릭시 반복이 시작되게 하였고

전역변수로 n을 설정한 뒤

박스가 3개이므로 주기가 한번 돌았을 때 n에 1을 더해주었고

n을 3으로 나누었을때 나머지를 조건으로 조건문을 돌리는 방법으로 하였다.

tag자체의 속성은 변수로 저장가능하지만 그외의 것은 저장이 불가능하다

예시로

위 과제에서 사용했던

document.getElementById('dvFirst').style.backgroundColor='red';

이코드를

let first=document.getElementById('dvFirst');

first.style.backgroundColor='red';

위코드와 같이 태그를 변수로 선언해줘서 줄여서 사용하는 것은 가능하지만

let first=document.getElementById('dvFirst').style.backgroundColor='red';

처럼 한번에 넣으려고 하는것은 불가능하다.

값

null - 비어있는

undefined - 정의되지 않은

NaN - 숫자가 아니다(Not a Number)

ex)

let n='Hello World';

if(isNaN(n)) // isNot a Number("Hello World") == True(참) << 숫자가 아니어서 참

n=10;

if(isNaN(n)) // isNot a Number(10) == false (거짓) <<숫자가 맞아서 거짓

Infinity - 무한대

pasreInt() 문자열을 정수로

ex)

x=parseInt('3.14'); // 3 <<정수부분만 출력

parseFloat() 문자열을 실수로

x=parseFloat('3.14'); // 3.14 <<소수점 아래부분도 모두 출력

------------------------------------------------------------------------

수학 관련된 함수를 사용하기 위해서는 Math를 불러와햐한다.

Math.pow(); // N제곱

ex)

n=Math.pow(2,3); //2^3=8

n=Math.pow(5,3); //5^3=125

------------------------------------------------------------------------

Math.sqrt(); //square root 제곱근구하는 함수

ex)

n=Math.sqrt(16); // 4

n=Math.sqrt(121); //11

------------------------------------------------------------------------

Math.abs(); // 절대값

ex)

n=Math.abs(-15);// 15

------------------------------------------------------------------------

Math.ceil(); // 올림(값보다 큰 정수 중에서 최소수)

ex)

n=Math.ceil(3.95); //4

------------------------------------------------------------------------

Math.floor(); // 내림(값보다 작은 정수중에서 최대수

ex)

n=Math.floor(3.95); //3

------------------------------------------------------------------------

Math.round(); //반올림

ex)

n=Math.round(3.14); //3

n=Math.round(3.54); //4

------------------------------------------------------------------------

Math.random(); // 0~1사이의 랜덤한 숫자값

0~100사이의 랜덤한 숫자값구하는 방법

Math.floor(Math.random()*100) //기본 random함수가 0~1사이기 때문에 100을 곱해준 뒤

floor로 내림 해주면 랜덤한 숫자가 나온다

1~100사이의 랜덤한 숫자 구하는 방법

Math.floor(Math.random()*100)+1

위에서는 0~100이었지만 여기선 1부터 시작해야 하기 때문에 +1로 1부터 시작해줄 수 있다.

'국비지원학원 > Javascript' 카테고리의 다른 글

11.16정리 (0)	2021.11.16
11.15정리 (jquery 기초) (0)	2021.11.16
11.12 정리 (0)	2021.11.16
11.11 정리 (0)	2021.11.12
숫자를 받고 그숫자에 해당하는 구구단을 출력하기 (0)	2021.11.08

정리의생활화

11.10정리(setInterval, newDate()함수)

'국비지원학원 > Javascript' 카테고리의 다른 글

+ Recent posts

티스토리툴바