본문 바로가기

국비필기노트/HTML & CSS & JS

JS_여러가지함수들(기본함수, date, setInterval, 현재시각출력)

▶자주사용하는 기본함수

 

Max 최대값
MIN 최소값
Math.PI 원주율
Math.round() 소수점 반올림
Math.abs() 절대값
Math.random() 난수값(랜덤)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//MAX
let max = Math.max(100,123);
document.write(max); //123
 
 
//MIN
let min = Math.min(100,123);
document.write(min); //100
 
 
//원주율
document.write(Math.PI); // 3.14159...
 
 
//소수점반올림
let num1 = 3.4543;
document.write(Math.round(num1)); //4
 
//절대값 
let num2 = -123;
document.write(Math.abs(num2)); //123
 
//난수발생(랜덤)
document.write(Math.random()); // 0.00343093030
cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//두 사이의 난수를 리턴하는 함수
function random(n1, n2){
    return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
}
 
let num = random(0,9);
document.write(num);//8
 
 
//응용(ex.인증번호)
let auth = "";
 
for(let i = 0; i<5; i++){
    auth += random(0,9);
}
 
document.write(auth);// 12343
cs

 

▶date 내장객체

▷Date의 내장객체는 어디에서 오는걸까?

내장객체 즉, Date(시간)은 어느곳을 기점으로 데이터를 가지고 올까라는 의문이다. 이는 웹 브라우저가 설치된 PC(혹은 스마트장치)의 현재 시간을 얻어오거나 날짜/ 시간을 계산하는데 필요한 기능을 제공한다. 

▷Date 객체 생성 방법

 

let mydate = new Date( );

▷예제

 

1
2
3
4
5
6
7
8
9
10
11
//date 객체 생성
let mydate = new Date();
 
//년,월,일 리턴
let yy = mydate.getFullYear();
let mm = mydate.getMonth() + 1;
let dd = mydate.getDate();
 
//출력
let result = yy + '-' + mm + '-' + dd;
document.write(result);
cs

 

▶setInterval 

함수를 활용한 타이머로서 1/1000 초 단위의 시간값을 파라미터로 설정하여 정해진 시간에 한번씩 파라미터로 전달된 함수를 반복적으로 호출한다.

 

//printTime 함수를 1초에 1번씩 반복하여 자동호출
setInterval( printTime, 1000);

 

별도의 함수를 정의하는 형태가 아니라 다음과 같이 function(){} 익명함수를 직접 설정하는 것도 가능하다. 이처럼 파라미터 형태로 전달되는 함수를 콜백함수라고 한다.

 

setInterval(function() {
} ,1000);

 

▶현재 시간 출력하기 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    function printTime(){
        let days = ["일","월","화","수","목","금","토"];
        let mydate = new Date();
 
        let yy = mydate.getFullYear();
        let mm = mydate.getMonth() +1 ;
        let dd = mydate.getDate();
        let i = mydate.getDay();
        let day = days[i];
        let hh = mydate.getHours();
        let mi = mydate.getMinutes();
        let ss = mydate.getSeconds();
 
        let result = 
            yy + "-" + mm + "-" + dd + "-" + 
            day + "요일" + hh + ":" + mi + ":" + ss;
 
            return result;
        
    }
 
    document.write(printTime());

//setInterval 함수 응용
//printTime 함수를 1초에 한번씩 호출

    function printTime(){
setInterval(printTime, 1000);
}
cs

 

 

 

 

*프로젝트에 사용하기 좋은 사이트

https://www.highcharts.com/

 

Interactive javascript charts library

Don't miss a byte Never miss important news, tips, and tricks that will help you get the most out of your Highcharts products. We won’t spam you, sell your contact info or do anything else that would betray your trust. By signing up you confirm to have r

www.highcharts.com

https://www.highcharts.com/demo/live-data

 

Live data from dynamic CSV | Highcharts.com

Default Brand Light Brand Dark Dark Unica Sand Signika Grid Light

www.highcharts.com

 

 

'국비필기노트 > HTML & CSS & JS' 카테고리의 다른 글

JS_객체(Object)  (0) 2022.05.15
JS_스크립트 로딩제어(defer, async, onload)  (0) 2022.05.15
JS_주요 내장 함수  (0) 2022.05.10
JS_배열  (0) 2022.05.10
JS_함수(function) 호출방법  (0) 2022.05.10