자바스크립트로 YYYYMMDD 형식의 이번년도 달 일 구하는 방법

진짜 쉽지만 만들대마다 귀찮은 코드.

날짜형식은 20160227 이나 2016-02-17 같은 텍스트로 만드는 코드

큰따옴표 안에 '-' 라든지 '/' 같은걸 넣어도 된다.

getMonth안에 +1을 하는 것은 데이트로 월정보를 가져오면

월이 0부터 시작하기 때문이다.

개발할때마다 가장 귀찮았던 것 중 하나는 천단위마다 콤마를 찍어주는 것이었다.

처음엔 문자열로 변환하고 글자 개수를 세고 3개를 기준으로 앞뒤를 잘라서 분리하고

그사이에 콤마를 집어넣는 아주아주 귀찮은 방법을 사용했다가

정규식을 사용하여 아주아주 간편하게 천단위마다 콤마를 찍어줄수 있다는걸 알게 되었다.

로직은 굉장히 간단하다.

이게 끝이다.

그동안의 천단위 콤마찍는 귀찮음에서 한번에 해방되는 느낌이다.

예전에 인터넷 돌아다니다 발견했던건데

이거 만든 사람 상줘야 한다.

정규식이라는 개념을 만들어낸 사람도 참 대단하다. 스크립트에서도 그렇고 SQL에서도 그렇고

요즘 정규식이라는걸 참 유용히 잘 사용하고 있다.

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.

append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌

특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을

알아 보도록 하자.

예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄

사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.

혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.

먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때

1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자

여기서 주목할 것은

empty()와 append 이다

기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고

append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.

이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.

오브젝트를 생성하고 특정 데이터의 개수에 따라

속성을 추가적으로 생성해야 하는 경우가 있으나 

속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.

일반적인 오브젝트의 속성 추가는

위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면

아래와 같이 작성을 해주면 된다.

자바스크립트로 화면을 구현하다 보면 같은 행동을 반복하게 하는 애니매이션이나 로직을 구현해야 하는 경우가 종종 생긴다.

간단한 예로 디지털 시계 같은걸 구현한다던가 

매시간마다 데이터를 계속해서 요청을 한다던가

이럴때 setInterval 함수를 사용한다.

방법은 간단하다.

setInterval(실행할 function이름,반복할시간단위);

ex) setInterval(getChartData,1000);

getChartData라는 펑션을 1초마다 반복한다는 것이다.

getChartData 대신에 펑션을 직접 입력해도 된다

setInterval(function(){

alert('1초가 지났어요');

},1000);

위처럼 해도 무방하다

추가로 반복을 멈추고 싶을땐

var interval = setInterval(getChartData

,1000);

위와같이 선언후 실행하다

멈추고 싶을떄

clearInterval(interval);

해주면 된다.

/*-----------------------------------------<create PopUp> ---------------------------------------------*/

 $(".layerPopup").click(function (event){ // 버튼 클릭시 실행 이벤트

  var height=0;

  var width=0;

// var cssUri = $(this).attr("data-css");

 var mappingUri = $(this).attr("name"); //클릭한 객체의 name값에 요청할 URL을 미리 넣어놓고 사용

//  alert(mappingUri);

     var s_w =$(document.body).width();

     var w=500;

     var left = s_w/2 - w/2;

     if(s_w/2 < w/2)

     left=0;

     // create wrapper

     var wrapper=$("<div />");

     wrapper.css({

    width:"0px",

    height:"0px",

    border:"2px solid #000",

    background:"#fff",

    position:"absolute",

    left: left,

    top:"100px",

     });

     var screenH = $(document).height();

     // create screen & run animation

        var screen = $("<div />");

        screen.css({

           width:"100%",

           height:screenH,

           background:"#000",

           position:"absolute",

           left:"0px",

           top:"0px",

           opacity:"0",

            zIndex:22

        }).animate({opacity:"0.5"},500,function(){

        $(document.body).append(wrapper);

        // setting CSS

           var link = document.createElement("link");

            link.setAttribute("rel","stylesheet");

            link.setAttribute("type","text/css");

          //  link.setAttribute("href", cssUri);

            document.getElementsByTagName("head")[0].appendChild(link); 

          //  alert(mappingUri);

            // Load popUp Page

            wrapper.load(mappingUri,function(){

            // load popUp Page's size

                var first=wrapper.children("div").eq(0);

                console.log(first);

                 width= first.outerWidth();

                 height = first.outerHeight();

                 console.log(width);

             left = s_w/2 - width/2;

             if(s_w/2 < w/2)

             left=0;

                 screen.attr("id","screen");

                 wrapper.attr("id","newWapper");

                 wrapper.animate({

                 width:width,

                 "z-index":"23",

                 left:left

                 },500)

                 .animate({

                     height:height

                     },500);

                 // remove popUp Page&screen

              $("#screen").click(function(){

             wrapper.animate({

                     width:"0px"

                     },500)

                     .animate({

                         height:"0px"

                         },500,function(){

                         screen.animate({

                             opacity:"0"

                             },500);

                         wrapper.detach();

                         screen.detach();

                         });

            });

             });

        });

        $(document.body).append(screen);

        // resizing

        $(window).resize(function() {

        s_w =$(document.body).width();

         var left = s_w/2 - w/2;

         if(s_w/2 < w/2)

         left=0;

           wrapper.css({left: left });

      });

     });

/*-----------------------------------------</create PopUp> ---------------------------------------------*/

문자열을 자르기가 있다는걸 알고 있지만

함수 이름은 너무나도 잘 잊어먹게 된다. 

그리고 아주 자주 사용하는 함수이고 매우 유용한 함수이다 

var string = 'hello yamea programer'

var strArr = string.split('-');

문자열에서 - 라는 문자를 기준으로 잘라서 배열로 담는다.

string.substring(시작인덱스,끝인덱스);

첫글자는 0이다

string.substr(시작인덱스,길이)

위와 동일하지만

시작인덱스 부터 길이 만큼 자른다는 것

자바스크립트를 사용하면서 문자열에 데이터를 넣다보면 특수문자 때문에 구글링은 하는 경우가 많다.

이 포스팅을 보는 당신도 바로 그와 같은 경우겠지 

어디서 퍼와서 어딘가에 저장했던 글인데 어디서 퍼온건지 기억이 안나지만 저위에 아이디가 있는걸 보아 저분이 

작성하신 글인거 같다.. 블로그 하기 전에 복사해서 보관하던 건데

혹시나 저분이 이 포스팅을 언짢아 하신다면 바로 내리고 사과하겠습니다.

포스팅이 도움이 되셨다면 마우스를 조금만 움직여서 

공감하기를 눌러주세요 블로거에게 큰 힘이 됩니다~!