[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 toMeridiem = new 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 & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] GMT, 그리니치 표준시 구하기  (2) 2019.01.25
[JavaScrpt] 파일업로드시 확장자 검사하기  (0) 2019.01.23
[JavaScript] 날짜 자동 포맷 함수  (0) 2019.01.11
[JavaScript] 더블 클릭 이벤트 방지  (0) 2018.12.29
[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
//

[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 = (hour = this.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 year = date.substring(0, 4);

      const month = date.substring(5, 7);

      const day = date.substring(8, 10);

      const hour = date.substring(11, 13);

      const minute = date.substring(14, 16);

      const second = date.substring(17, 19);

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

      return new Date( convert );

  }

</script>

</head>

<body>

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

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

</body>

</html>




# 출력 결과








반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScrpt] 파일업로드시 확장자 검사하기  (0) 2019.01.23
[JavaScript] 시간이 AM 혹은 PM인지 확인하기  (0) 2019.01.22
[JavaScript] 더블 클릭 이벤트 방지  (0) 2018.12.29
[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
//

[JavaScript] 더블 클릭 이벤트 방지[JavaScript] 더블 클릭 이벤트 방지

Posted at 2018. 12. 29. 17:32 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : http://cofs.tistory.com/270




해당 코드는 제목대로 사용자의 더블 클릭 이벤트가 발생하였을 경우 예외처리가 가능하다.


그렇지만 윈도우 바탕화면의 실행 아이콘을 더블 클릭하는것과 같이.


빠르게 더블 클릭하는것을 예외 처리하는 코드가 아니라는것을 우선 밝혀두는 바이다.


그저 그런 이벤트를 막기위한 한가지 꼼수라고 생각하고 포스팅을 보길 바란다.







■ 짝수 클릭의 경우 예외 처리하기




특정 이벤트 실행시 더블 클릭을 방지하기 위해서 제작되었다.


위 코드의 원본은 http://cofs.tistory.com/270 포스팅을


현재 필자가 진행한 프로젝트에 맞게 수정한 내용이다.




해당 코드를 사용시 주의할 점이 존재하기에 우선 그 부분을 먼저 설명하고자 한다.


# 주의사항


      ① 진짜 더블 클릭을 예외처리하는 코드가 아니다,

         실제로는 짝수번째의 클릭시 이벤트를 막는다.


      ② 해당 기능은 한 페이지에서 하나의 이벤트만이 수행 가능하다.

         복수의 이벤트에서 사용하려면 추가적인 로직을 구현하는 작업이 필요하다.





# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 더블 클릭 방지 ::</title>
<script type="text/javascript">

  // 시작과 동시에 선언될 익명 선언식 함수를 사용한다.
  // 익명 선언식 함수를 사용한 이유는
  // doubleFlag 변수를 전역으로 사용하는것을 피하기 위해서다.
  (function() {

    // doubleFlag는 처음에 false로 초기화 한다.
    var doubleFlag = false;

    // 더블 클릭 함수 생성
    this.doubleCheck = function doubleCheck() {
      if(doubleFlag == true) {
        return doubleFlag;
      } else {
        doubleFlag = true;
        return false;
      }
    }

    // 더블 클릭된 이벤트가 발생이후 다시 버튼을 초기화 하기 위해 사용된다.
    this.clickInitial = function clickInitial() {
      doubleFlag = false;
    }
  })();

  // 클릭 이벤트
  function clickSubmit() {

    // 더블 클릭한 경우
    if(doubleCheck() == true) {

      alert("2번클릭");


      // 다시 정상적으로 클릭이벤트가 발생 할 수 있도록 초기화 요청
      clickInitial();
      return;
    }

    // 한번만 클릭한 경우
    else {
      alert("1번클릭");
    }
  }


</script>
</head>
<body>

    <h3>더블 클릭 이벤트 예외 처리하기</h3>

    <input type="button" onClick="clickSubmit();" value="검사"/>
</body>
</html>



# 출력 결과






반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 시간이 AM 혹은 PM인지 확인하기  (0) 2019.01.22
[JavaScript] 날짜 자동 포맷 함수  (0) 2019.01.11
[JavaScript] JavaScript 테스트 방식  (0) 2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
[JavaScript] Password 형식 검사하기  (1) 2018.10.24
//

[JavaScript] JavaScript 테스트 방식[JavaScript] JavaScript 테스트 방식

Posted at 2018. 12. 25. 18:35 | Posted in JavaScript & jQuery/JavaScript
반응형




참고 : 자바스크립트 닌자 비급




■ 자바스크립트 테스트 방식




로버트 프로스트(Robert Frost)는 좋은 울타리가 좋은 이웃을 만든다고 했다.


웹 애플리케이션의 세계에서는 그리고 모든 프로그래밍 수련에서는, 좋은 테스트가 좋은 코드를 만든다.


"좋은"이라는 단어를 강조하고 있다는 것을 기억하라.


광범위한 테스트 스위트를 가지고 있다고 하더라도 테스트들이 제대로 만들어져 있지 않다면


코드의 품질을 향상시키는 데는 조금도 도움이 되지 않는 상황이 발생할 수 있다.




좋은 테스트는 다음 세가지 특성이 있다.






#01. 반복성



테스트 결과는 항상 재현 가능해야 한다.


테스트가 반복적으로 실행되면, 항상 정확히 같은 결과를 내야 한다.


테스트 결과가 그때그때 다르다면, 어떻게 그 결과를 맞다고 혹은 틀리다고 할 수 있을까?


뿐만 아니라 재현 가능성은 테스트가 네트워크나 CPU 부하 등의 외부 요인과 독립적이라는 것을 보장하낟.




#02. 간결성



테스트는 테스트를 하는 것에만 집중해야 한다.


테스트 코드의 의도를 훼손하지 않는 한,


가능한 많은 HTML 마크업, CSS, JavaScript를 제거하기 위해서 노력해야 한다.


더 많이 제거 할수록, 테스트 대상이 아닌 코드가 테스트 케이스에 영향을 줄 확률이 낮아진다.




#03. 독립성



각 테스트는 독립적으로 동작해야 한다.


테스트의 결과가 다른 테스트에 의존적이 되는 것을 피해야 한다.


테스트를 가능한 작은 단위로 분리하는 편이 에러가 났을 때 정확한 버그의 원인을 찾는데 도움이 될 것이다.







테스트를 만드는 방법은 여러 가지가 있는데,


크게 제거적(Deconstructive) 테스트와 추가적(Constructive) 테스트가 있다.







#01. 제거적 테스트 케이스



문제를 격리하기 위해 테스트와 상관 없는 모든것을 제거하여 기존의 코드가 줄어들면,


제거적 테스트 케이스가 만들어진다.


이는 앞서 예로 든 세 가지 특성을 얻는데 도움이 된다.


추가적인 마크업, CSS, JavaScript를 제거한 웹 사이트로 테스트를 시작할 수 있다.


문제를 재현할 수 있는 보다 작은 경우에 도달하게 될 것이다.





#02. 추가적 테스트 케이스



추가적 테스트 케이스를 이용할 때는 올바르다고 알고 있는,


작은 테스트 케이스를 가지고 확인하려는 버그가 재현될 때가지 테스트 케이스를 늘려 나간다.


이 스타일의 테스트를 사용하려면,


테스트를 구축할 수 있는 간단한 테스트 파일 몇 개와 코드의 깨끗한 사본을 가지고 테스트를 생성하는 방법이 필요하다.







추가적 테스트 예제를 살펴보자.



작은 테스트 케이스를 생성할 때, 소수의 HTML 파일과 그 HTML 파일에 이미 포함되어 있는 최소한의 기능만으로 시작할 수 있다.


예를 들면, 한 파일은 DOM 조작 기능만 있고, 다른 한 파일에는 Ajax 테스틈만 있으면,


다른 하나에는 애니메이션 테스트 기능만 있는 식으로 여러 기능을 서로 다른 파일에 둘 수 있다.




다음 코드는 jQuer를 테스트하는 데 쓰이는 간단한 DOM 테스트를 예로 들고 있다.



jQuery를 위해 축소한 DOM 테스트 케이스

<script src="dist/jquery.js"></script>
<script>
    jQuery(document).ready(function() {

        jQuery("#test").append("test");
    });
</script>
<style>
    #test {
        width : 100px;
        height : 100px;
        baackground : red;
    }
</style>
<div id="tes"></div>


깨끗한 상태에서 테스를 만들기 위해서, 다음과 같이 간단한 쉘 스크립트를 이용해 라이브러리를 체크아웃하고


거기다가 테스트 케이스를 복하나 다음 테스트 스위트를 빌드하도록 할 수 있다.



./get.sh mytest dom



이는 dom.html로부터 DOM 테스트 케이스를 가져와서, 로컬 Git 저장소에 해당 테스트 케이스를 추가한다.


다른 대안은 간단한 테스트 케이스를 생성하기 위해 미리 구축된 서비스를 이용하는 것이다.


이런 서비스 중 하나는 JS Bin(http://jsbin.com/)이다.


이 서비스는 간단히 테스트 케이슬르 만들고 유일한 URL을 통해서 접근할 수 있게 해준다.

(심지어 몇몇 유명한 자바스크립트 라이브러리를 복사해서 테스트에 포함시킬 수도 있다.)



테스트 케이스를 생성하는데 필요한 도구와 지식을 갖추면, 테스트 케이스를 모아놓은 테스트 스위트를 구축할 수 있고,


이로 인해 테스트를 반복해서 실행하는 것이 쉬워진다.







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 날짜 자동 포맷 함수  (0) 2019.01.11
[JavaScript] 더블 클릭 이벤트 방지  (0) 2018.12.29
[JavaScript] 자바스크립트에서의 Test Suite  (0) 2018.12.25
[JavaScript] Password 형식 검사하기  (1) 2018.10.24
[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약  (0) 2018.10.12
//

티스토리툴바