[JavaScript] GMT, 그리니치 표준시 구하기[JavaScript] GMT, 그리니치 표준시 구하기

Posted at 2019. 1. 25. 01:06 | Posted in JavaScript & jQuery/JavaScript
반응형






■ 사전 지식




#01. UTC, 협정 세계시


-. UTC(영어 : Coordinated Universal Time, 프랑스어 : Temps Universel Coordonné)

-. 1972년 1월 1일부터 시행된 국제 표준시이다. UTC는 국제원자시와 윤초 보정을 기반으로 표준화되었다.

-. TC는 그리니치 평균시(GMT)에 기반하므로 GMT로도 불리기도 하는데, UTC와 GMT는 초의 소숫점 단위에서만 차이가 나기 때문에 일상에서는 혼용되어 사용된다.

※ 기술적인 표기에서는 UTC가 사용된다.




#02. GMT, 그리니치 표준시


-. GMT(Greenwich Mean Time), 그리니치 표준시는 런던을 기점으로 하고, 웰링턴에 종점으로 설정되는 협정 세계시의 기준시간대이다.
-. 기준시간대여서 그리니치 표준시중 가장 빠른 시간대이다.
-. 협정 세계표준시(UTC)가 있지만, 아직도 영국 BBC 방송을 중심으로 GMT란 표현은 널리 쓰이고 있다.
-. 영국 런던에 소재한 그리니치 천문대를 기준으로하는 경도를 사용하기에 그리니치 천문대의 경도는 0.00이 됐다




#03. KST, 한국 표준시


-. KST(Korea Standard Time)는 대한민국과 조선민주주의인민공화국의 표준시로,

   일본 표준시와 같은 동경 135도를 기준으로 하여 UTC보다 9시간 빠른 표준시(UTC+09:00)이다.
-. 양국 모두 일광 절약 시간제는 사용하지 않고 있다.
-. 한반도의 경우 중앙을 지나는 동경 127도 30분을 기준으로 하여 처음으로 표준시(UTC+08:30)가 정해졌고,

   1908년 4월 1일부터 1911년 말까지 시행되었다.
   1912년 1월 1일에 일제 강점기의 조선총독부가 동경 135도 기준인 일본 표준시(UTC+09:00)와 동일하게 표준시를 변경하였고

   현재까지 한반도에서는 UTC+09:00를 표준시로 사용하고 있다.








■ 그리니치 표준시(GMT) 구하기




# 소스코드

<html>

<head>

<title>:: JavaScript 협정 세계시 ::</title>

<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // 기본 시간 구하기

        var toTime = new Date();

        document.getElementById("toNow").innerHTML = toTime.toString();

        // KST와 UTC의 차이 - 분

        var min = toTime.getTimezoneOffset();

        document.getElementById("toMin").innerHTML = min;


        // KST와 UTC의 차이 - 시간

        var hour = toTime.getTimezoneOffset() / 60;

        document.getElementById("toHour").innerHTML = hour;

        

        // GMT(그리니치 표준시) 런던(GMT + 0) 시간 구하기

        var calGmt = toTime.setHours(toTime.getHours() + hour);

        var calGmt = new Date(calGmt);

        document.getElementById("toGmt").innerHTML = calGmt.toUTCString();

    });

</script>

</head>

<body>

    현재 한국 시간 구하기 : <span id="toNow"></span>

    <br/>

    KST와 UTC의 분 차이 : <span id="toMin"></span>

    <br/>

    KST와 UTC의 시간 차이 : <span id="toHour"></span>

    <br/>

    현재 그리니치 표준시(GMT+0)은? : <span id="toGmt"></span>

</html>




# 출력결과







반응형
//

[JavaScrpt] 파일업로드시 확장자 검사하기[JavaScrpt] 파일업로드시 확장자 검사하기

Posted at 2019. 1. 23. 11:48 | Posted in JavaScript & jQuery/JavaScript
반응형





참고 : https://code.i-harness.com/ko-kr/q/409d5d






■ 이미지 파일 업로드시 확장자 검사하기




# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 특정 문자열 검색 ::</title>

<script type="text/javascript">

function confirmFileExtension(file) {

console.log(file);

// 정규식을 사용히여 jpg, jpeg, png, gif, bmp등 이미지파일의 확장자를 가진것을 추려낸다.

var reg = /(.*?)\.(jpg|jpeg|png|gif|bmp)$/;

  if(file.match(reg)) {

alert("해당 파일은 이미지 파일입니다.");

} else {

alert("해당 파일은 이미지 파일이 아닙니다.");

}

}

</script>

</head>

<body>

    <h3>이미지 파일 검색</h3>

    <input type="file" id="imgFile"/>

    <br/>

    <input type="button" onClick="confirmFileExtension(imgFile.value);" value="업로드"/>

</body>

</html>





# 출력 결과








반응형
//

[JavaScript] 시간이 AM 혹은 PM인지 확인하기[JavaScript] 시간이 AM 혹은 PM인지 확인하기

Posted at 2019. 1. 22. 16:00 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : https://electronic-moongchi.tistory.com/83

참고 : https://code.i-harness.com/ko-kr/q/87a0ab




■ 현재 시간이 오전인지 오후인지를 나타내는 함수




# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 출력 ::</title>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {


    // 브라우저의 현재 날짜를 받아온다.

    var toMeridiemnew Date();

    document.getElementById("toMeridiem").value = toMeridiem.ampm();

  });


  // 현재 날짜값을 오전 or 오후 문자로 변환해주는 함수

  Date.prototype.ampm = function() {

      var hours = this.getHours() < 12 ? "오전" : "오후";

      // var hours = this.getHours() < 12 ? "AM" : "PM";

      return hours;

  }

</script>

</head>

<body>

    <h3>지금은 오전 or 오후 인가?</h3>

    <input type="text" id="toMeridiem" style="text-align:center;"/>

</body>

</html>





# 출력 결과






관련포스팅 : [JavaScript] 날짜 자동 포맷 함수





반응형
//

[JavaScript] 날짜 자동 포맷 함수[JavaScript] 날짜 자동 포맷 함수

Posted at 2019. 1. 11. 18:22 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : https://poiemaweb.com/js-date#13-new-datedatestring







웹 프론트 개발중에서는 항상 날짜를 특정한 형태의 포맷으로


화면에 나타내야 하는 경우가 잦다.


그때마다 Date() 함수등을 사용하여 정리하기는 너무 번거로운일이다.


아래 포스팅은 사용자 표현식 함수로 미리 날짜 포맷을 자동으로 맞춰주는 기능이다.





■ YYYY-MM-DD 형식으로 날짜 포맷하기





해당 코드는 기본 날짜값을 년 - 월 - 일 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 날짜 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 날짜를 받아온다.

    var toDay = new Date();
    document.getElementById("toYmd").value = toDay.yyyymmdd();
  });

  // 현재 날짜값을 yyyy-mm-dd 형식으로 변환해주는 함수
  Date.prototype.yyyymmdd = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth() + 1).toString();
      var dd = this.getDate().toString();
      return  yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]);
  }
</script>
</head>
<body>
    <h3>금일 날짜는(YYYY-MM-DD)?</h3>
    <input type="text" id="toYmd" style="text-align:center;"/>
</body>
</html>




# 출력 결과












■ HH:MM:SS 형식으로 시간 포맷하기





#01. 00시 ~ 24시 단위로 나타내기




해당 코드는 기본 날짜값을 시 : 분 : 초 형식으로 바꿔준다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = this.getHours().toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





#02. AM, PM 12시간 단위로 나타내기




위에서 24시간 개념으로 시간을 출력하는것을 만들어 보았다면


이제 오전, 오후로 구분할 수 있는 12시간 개념으로 숫자를 표현해 보고자 한다.




# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
  });

  // 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = (hourthis.getHours().toString() % 12) ? hour : 12;

      hh = hh.toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
  }
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>




# 출력 결과





오전 or 오후, AM or PM을 표기하기 위한 함수는 따로 포스팅을 해두었다.


필요하다면 아래 링크를 참고하면 된다.





관련포스팅 : [JavaScript] 시간이 AM 혹은 PM인지 확인하는 함수













문자형 YYYY-MM-DD HH:MM:SS 형식, DATE 형변환






위에서 YYYY-MM-DD, HH:MM:SS 형식으로 날짜값을 변환하여 출력할 수 있게 만들어 보았다.


그렇지만 개발이란게 꼭 이대로 끝나지 않고.


위와 같이 만든 형태를 다시 날짜형으로 변환 시켜주어야 하는 경우가 꼭 발생한다.


아래 코드를 이용하여 YYYY-MM-DD HH:MM:SS 혁식으로 된 날짜 값을 다시


자바스크립트의 날짜형으로 변환 시켜 보자.



# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 변환 ::</title>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function() {


    // 강제로 YYYY-MM-DD HH:MM:SS 형식으로 날자값을 변수에 담는다.

    var txtDate = "2019-02-14 11:24:32";

    document.getElementById("convertTime").value = dateConvert(txtDate);

  });


  // 문자 YYYY-MM-DD HH:MM:SS값 날짜형으로 형변환

  var dateConvert = function(date) {

      const yeardate.substring(0, 4);

      const monthdate.substring(5, 7);

      const daydate.substring(8, 10);

      const hourdate.substring(11, 13);

      const minutedate.substring(14, 16);

      const seconddate.substring(17, 19);

      const convert = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;

      return new Dateconvert );

  }

</script>

</head>

<body>

    <h3>현재 시간은?</h3>

    <input type="text" id="convertTime" style="text-align:center;width:350px;"/>

</body>

</html>




# 출력 결과








반응형
//