단술의 잡다한 지식들

Json Array 형식으로 된 데이터(data)를 파싱해보자.

별 것도 없다.

var jsonData = JSON.parse(data);
console.log(jsonData);

이렇게 간단하다.

이상 끗~!

로컬 파일(txt)을 읽어서 안의 내용을 긁어오는 작업을 해야 했다.

파일 내용만 읽어오면 되기 때문에 스크립트 단에서 처리할 수가 있었다.

1.  txt 확장자가 아닌 파일은 불러오지 않게 처리

$('input:file').change(functon(e) {
  var ext = $(this).val(); // 파일 정보를 가져온다.
  ext = ext.substring(ext.lastIndexOf('.') + 1); // 파일 확장자 부분을 가져온다.
  if(ext !== 'txt') {
    alert('txt 파일만 가능합니다.'); 
    return;
  }

2. 파일 내용을 가져와서 처리

  var file = e.target.files[0];
  if(!file) 
    return; 
  var reader = new FileReader();
  reader.onload = function(e) {
    var result = e.target.result;
    // result를 가지고 내용 처리.
  }
  reader.readAsText(file, 'UTF-8');
});

3. 텍스트를 일부 수정한 같은 파일을 불러올 경우 [input:file]의 value값이 동일하므로

  이벤트가 발생하지 않는다. 따라서 다음과 같이 처리해줘야 같은 파일을 다시 부르더라도 적용된다.

  ...
  reader.readAsText(file, 'UTF-8');
  $(this).val('');

each()문을 실행할 경우 결과에 관계없이 넘어가기 때문에 

each()문에서 별도의 프로세스를 거치려면 다음과 같은 방법을 사용한다.

function a() {
  var result = true;
  $(selector).each(function() {
    if(condition) {
      result = false;
      return result;
    }
  }
  if(!result)
    return;

  // 다음에 수행할 프로세스
}

이렇게 처리해야 다음에 수행할 프로세스에 도달하지 못하고 a() 함수가 끝난다.

※ each() 문에서 return false;는 break; 기능과 동일. 

   따라서 each() 문에서의 return으로는 수행되는 기능의 진행을 막을 수 없다.

모바일에서는 ajax나 getJSON으로 웹 페이지를 불러올 때 이미지가 있는 경우 뚝뚝 끊길 때가 많다.

네트워크 상태가 안 좋거나 이미지 크기가 크거나 그럴 때.

그래서 이미지가 완전히 로드된 후에 나머지 페이지 처리를 하고 싶었다.

구글링을 하다가 좋은 예제가 있어 담아왔다. 출처는 아래에 ..

먼저 이미지로드를 처리할 확장형 객체를 구현한다.

$.fn.imagesLoaded = function() {
  var $imgs = this.find('img[src!=""]');
  if(!$imgs.length) 
    return $.Deferred().resolve().promise();

  var dfds = [];
  $imgs.each(function() {
    var dfd = $.Deferred();
    dfds.push(dfd);
    var img = new Image();
    img.onload = function() {
      dfd.resolve();
    }
    img.onerror = function() {
      drd.resolve();
    }
    img.src = this.src;
  });
  
  return $.whdn.apply($, dfds);
}

이제 이미지를 로드하는 곳에 붙여넣기만 하면 끝.

$(selector).css('display', 'none');
$(selector).empty();
$.getJSON('/url.do', function(result) {
  ...
  $(selector).append(result.date.imageSrc).imagesLoaded().then(function() {
    $(selector).css('display', 'block');
    // window.android.hideProgressBar();
    // 그 외 나머지 처리할 작업
  });
}

출처 : https://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded

참고로 같은 이름의 플러그인도 있으니 다운받아서 사용하면 더 간단하지 싶다. 

https://github.com/desandro/imagesloaded

jquery datepicker를 사용하다가 날짜를 선택할 때 선택 범위를 제한해야 할 때가 있다.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: 0
});

일반적으로는 minDate에 0을 주면 오늘날짜부터 선택할 수가 있다.

그런데 내가 하고 싶은 것은 오늘날짜가 아닌 특정날짜 이후, 그리고 이전으로 범위를 제한하고 싶었다.

다음과 같이 하면 된다.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: new Date('2017-12-01'),
  maxDate: new Date('2017-12-31')
});

이렇게 하면 2017년 12월 1일부터 31일까지로 날짜 선택할 수 있는 범위가 제한된다.

그런데 보통 이렇게 하드코딩하지 않고 동적으로 범위가 변할 경우가 많기 때문에 

'2017-12-01' 대신에 변수를 넣는 것이 맞겠지.

아래는 팁.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: new Date('2017-12-01'),
  maxDate: new Date('2017-12-31'),
  onClose: function() {
    $(selector2).datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: new Date(selector의 시작날),
      maxDate: new Date('2017-12-31')
    });
  });
});

이렇게 하면 datepicker를 두 개 쓸 때 

두 번째 datepicker에서 첫 번째 selector에서 선택한 날짜 이후부터 날짜를 선택할 수 있다.