'JavaScript'에 해당되는 글 17건

  1. 서버-클라이언트(Java-JavaScript)간 날짜/시간 데이터 다루기
  2. JavaScript에서 Internet Explorer 11 브라우저 여부 확인하기
  3. 웹에서 Responsive Image(반응형 이미지) 구현하기
  4. [JavaScript] 북마크 : 리소스 및 코딩 가이드라인
  5. [Java] [JavaScript] JavaScript 공통 라이브러리 임포트 JSP 작성하기
  6. [Eclipse] [JavaScript] "식별자나 문자열 또는 숫자가 필요합니다." 오류 분석 (4)
  7. [JavaScript] 북마크; 유용한 JavaScript 라이브러리 소개 사이트
  8. [JavaScript] X-editable; 튜토리얼
  9. [JavaScript] KeyboardJS; 키보드 입력 이벤트 제어 라이브러리
  10. [JavaScript] Kendo UI DataSource; Timestamp 값 문자열로 변환 출력하기

서버-클라이언트(Java-JavaScript)간 날짜/시간 데이터 다루기

개요

서버-클라이언트의 개발 언어가 다를 경우(대부분의 개발 환경에 해당한다.) 날짜/시간 데이터를 어떻게 전달하고 처리해야 할까? 서버와 클라이언트는 개발 언어도 다르고 날짜와 시간을 다루는 타입과 방법도 다르다. 이러한 고민을 하는 과정에서 내가 했던 방법을 정리하여 소개하고자 한다. 서버의 개발 언어는 Java, 클라이언트는 JavaScript를 기준으로 설명한다.

서버의 날짜와 시간은 대부분 데이터베이스에서 가져온다.

서버 환경에서는 날짜/시간에 대한 기준이 필요하다. 그 기준은 서버 애플리케이션이 실행되는 운영체제의 시간이 될 수도 있고 RDBMS의 시간이 될 수도 있으며 별도의 타임 서버가 기준이 될 수도 있다. 일반적으로 애플리케이션의 성격에 맞게 결정되지만 대부분의 애플리케이션의 기능이 데이터베이스에 대한 CRUD가 차지하므로 내 경우 DB를 기준으로 시간을 정한다. Java에서는 JDBC가 제공하는 API를 사용하여 데이터베이스에 접근하는데 10억분의 1초까지 저장할 수 있는 java.sql.Timestamp 클래스를 사용하여 날짜/시간 데이터를 다룬다.

// Sql2o와 같은 JDBC 랩퍼 라이브러리를 사용하여 Oracle 데이터베이스에 접근할 경우 클래스 타입을 별도로 명시하지 않으면 날짜/시간 데이터가 java.sql.Timestamp가 아닌 oracle.sql.TIMESTAMP 클래스의 오브젝트에 저장된다. 이 경우 timestampValue() 메써드를 사용하여 java.sql.Timestamp 오브젝트로 변환한다. 내 경우 Timestamp 오브젝트를 그대로 JSON으로 변환하여 클라이언트에 전달한다.
Timestamp someTimestamp = oracleTimeStamp.timestampValue();

// TimeStamp 오브젝트를 그대로 사용해도 상관없지만 서버 차원에서 날짜/시간을 가공할 필요가 있을 경우 JodaTime 라이브러리를 사용한다. org.joda.time.DateTime 클래스의 생성자로 Timestamp 오브젝트를 전달하면 DateTime 오브젝트를 생성할 수 있다. DateTime 오브젝트는 JSON으로 변환시 Timestamp 값으로 변환된다.
DateTime dateTime = new DateTime(someTimestamp);

클라이언트에서 서버로부터 전달받은 날짜/시간 다루기

Java(서버)와 JavaScript(클라이언트)는 기본 데이터 타입이 완벽하게 일치하지 않기 때문에 내 경우 서버에서 클라이언트로 전달할 데이터를 생성할 경우 모든 데이터를 문자열로 처리하여 JSON 객체에 담아 전달한다. 시간/문자열 데이터는 앞서와 같이 Timestamp 또는 DateTime 오브젝트를 변환했을 경우 Timestamp 형식의 값이 문자열로 전달된다. 클라이언트에서 JSON 데이터를 파씽하여 someTimestampString이란 이름의 변수에 파씽한 날짜/시간 데이터를 저장했다고 가정하고 아래 예제를 진행해보자.

// 파씽된 데이터는 문자열 변수로 인식된 상태로 아래와 같이 숫자로 변경해야 한다.
var someTimestamp = Number(someTimestampString);

// JavaScript는 날짜/시간을 다루기 위한 Date 객체를 제공하며 Timestamp 값을 받아 새로운 객체를 생성할 수 있다.
var dateTime = new Date(someTimestamp);

// 내 경우 날짜/시간 관련 다양한 기능을 제공하는 Sugar.js 라이브러리를 사용한다. 아래와 같이 사용한다.
var dateTime = Date.create(someTimestamp);

앞의 과정을 통해 서버로 전달받은 날짜/시간 데이터를 JavaScriptDate 객체로 인식하는 것까지 완료했다. 다음은 사용자에게 이 값을 어떤 형식으로 출력할 것인가의 결정이 남았다. 국가, 언어, 문화에 따라 날짜/시간은 다양한 형식으로 출력될 수 있다. Sugar.js의 힘을 빌어 아래와 같이 간단하게 출력 형식을 결정할 수 있다.

// 국제표준 출력 형식인 ISO8601_DATE 형식으로 출력할 수 있다. 날짜만 출력할 경우 가장 많이 사용되는 형식이다.
var dateFormatted = dateTime.format('{yyyy}-{MM}-{dd}'); // 2014-01-01

// 국제표준 출력 형식인 ISO8601_DATETIME 형식으로 출력할 수 있다. 날짜와 시간 사이에 T 문자가 삽입된다. 시간이 UTC일 경우 Z 문자가 끝에 삽입되며 UTC가 아닐 경우 UTC 기준 추가 시간을 + 기호로 추가 출력한다. 따라서 한국의 경우 +09:00가 출력된다.
var dateTimeFormatted = dateTime.format(Date.ISO8601_DATETIME); // 2014-01-01T00:00:01+09:00

// 시간까지 출력할 경우 국제표준을 따르는 것이 깔끔한 방법이기는 하나 국내 사용자들 입장에서는 가독성 문제가 제기될 수 있다. 내 경우 아래와 같이 24시간제를 적용하여 시분초까지 출력한다.
var dateTimeFormatted = dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'); // 2014-01-01 00:00:01

참고 글


저작자 표시 비영리 동일 조건 변경 허락
신고

JavaScript에서 Internet Explorer 11 브라우저 여부 확인하기

골치 아픈 브라우저 호환성 문제


프론트엔드 웹 개발자들에게 브라우저 호환성을 유지하는 것은 굉장히 골치아픈 일이다. 특히 사용자의 브라우저 환경을 인식하여 ActiveX 실행 여부를 결정해야 한다면 브라우저 환경 및 버전을 정확하게 확인할 수 있어야 한다.

문제의 브라우저, Internet Explorer 11


JavaScript에서 브라우저 환경을 확인할 수 있는 방법은 굉장히 많다. 대표적으로 아래와 같은 방법이 있다. navigator.appName 값을 확인하면 Microsoft Internet Explorer으로 인식한다.


if (navigator.appName == 'Microsoft Internet Explorer') {
  // 처리 로직 작성
}

하지만 Internet Explorer 11 버전에서는 이 방법으로 확인시 Netscape로 인식해버려 오작동한다.


방법이 없을까?


방법은 있다. 바로 navigator.userAgent 값을 확인하는 것이다. 아래와 같은 값을 출력한다.


Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; MDDSJS; rv:11.0) like Gecko


중간에 Trident란 문자열이 보인다. Trident란 Mircosoft가 Internet Explorer에 사용하는 레이아웃 렌더링 엔진의 이름이다. 눈치챘겠지만 바로 이 문자열을 이용하여 IE11 환경 여부를 확인할 수 있다. 위 소스 코드를 아래와 같이 고쳐보자.


if (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) {
  // 처리 로직 작성
}

테스트를 해보면 정상적으로 인식함을 확인할 수 있다. 아직 안심할 수 없다. MSIE의 차기 버전에서는 또 어떤 변화가 있을지 모르기 때문이다. 오랫동안 웹 표준성을 무시해온 Microsoft의 행보가 아쉬울 뿐이다.

참고 글



저작자 표시 비영리 동일 조건 변경 허락
신고

웹에서 Responsive Image(반응형 이미지) 구현하기

반응형 이미지는 어떻게 구현할까?


웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 어떻게 해야할까? 해답은 간단하다. 반응형으로 출력하고 싶은 이미지의 img 엘러먼트에 style 애트리뷰트를 아래와 같이 부여하면 된다.


HTML에서는 아래와 같이 부여한다.

<img src="someImage.jpg" style="max-width: 100%; height: auto;">

CSS에서는 아래와 같이 부여한다.

img
{
  max-width: 100%;
  height: auto;
}


JavaScript에서는 아래와 같이 부여한다.

var img = document.getElementsByTagName("img");
vat i=0;
while (i < img.length) {
  img[i].setAttribute("style", "max-width: 100%; height: auto;");
  i++;
}


키워드: Responsive Image, 반응형 이미지



저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] 북마크 : 리소스 및 코딩 가이드라인

JavaScript Resources (by Pineapple.io)

http://pineapple.io/resources/tagged/javascript

JavaScript를 태그로 검색하여 라이브러리, 튜토리얼 등의 유용한 리소스 목록을 보여준다.


JavaScript Resources (by JavaScriptOO)

http://www.javascriptoo.com/


Front End Dev Guidelines (by Tait Brown)

http://taitems.github.io/Front-End-Development-Guidelines/

JavaScript를 포괄하는 클라이언트 개발 가이드라인이다.


A Better JavaScript Object Approach (by Damien Klinnert)

https://gist.github.com/damienklinnert/a2fd1da997f457b76efe

JavaScript의 Object를 올바르게 다루는 방법을 소개한다.


Understanding JavaScript OOP (by Quildreen Motta)

http://killdream.github.io/blog/2011/10/understanding-javascript-oop/

JavaScript의 OOP 철학을 올바르게 적용하는 방법을 소개한다.


Airbnb JavaScript Style Guide (by Airbnb)

https://github.com/airbnb/javascript

JavaScript의 올바른 스타일 가이드라인을 소개한다.


Chardin.js: 도움말 생성 라이브러리 (by Pablo Fernandez)

http://heelhook.github.io/chardin.js/

jQuery 기반의 도움말 생성 라이브러리로 도움말을 삽입할 엘러먼트에 data-intro 속성으로 도움말을 입력하고 data-position 속성에 도움말이 보여질 위치를 입력하기만 하면 멋진 도움말 화면을 만들어준다.


저작자 표시 비영리 동일 조건 변경 허락
신고

[Java] [JavaScript] JavaScript 공통 라이브러리 임포트 JSP 작성하기

* 튜토리얼이라기 보다는 내가 주로 사용하는 JavaScript 라이브러리를 JSP에서 임포트하는 방법을 설명했다.


* JavaScript로 작성하는 부분은 .js로 분리해야 IDE 환경의 도움을 얻기 편하지만 소스 코드 중간중간 JSTL 태그 라이브러리를 사용할 필요가 있어 분리하지 않고 .jsp 파일 안에 작성했다. 아래와 같이 /WEB-INF/fragment/common-js.jsp 파일을 작성하고 템플릿 파일에서 <jsp:include page="/WEB-INF/fragment/common-js.jsp" /> 태그로 호출한다.


* JSTL 태그 라이브러리를 사용하려면 jstl-1.2.jarstandard-1.1.2.jar 라이브러리를 임포트해야 한다. maven jstl, maven standard 키워드로 구글링하여 쉽게 받을 수 있다.


* /WEB-INF/fragment/common-js.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>


<!-- jQuery v1.8.3 -->

<!-- http://jquery.com/ -->

<!-- v1.9.1은 Kendo UI Web GPL v2012.3.1114에서 미지원 -->

<script src="<c:url value="/resources/lib/jQuery/jquery-1.8.3.min.js" />"></script>


<!-- Kendo UI Web GPL v2012.3.1114 -->

<script src="<c:url value="/resources/lib/KendoUIWebGPL/js/kendo.web.min.js" />"></script>

<script src="<c:url value="/resources/lib/KendoUIWebGPL/js/cultures/kendo.culture.ko-KR.min.js" />"></script>


<!-- json2.js v2012-10-08-->

<!-- https://github.com/douglascrockford/JSON-js -->

<script src="<c:url value="/resources/lib/json2/json2.js" />"></script>


<!-- Knockout v2.2.1 -->

<!-- http://knockoutjs.com/ -->

<script src="<c:url value="/resources/lib/Knockout/knockout-2.2.1.js" />"></script>


<!-- Underscore.js v1.4.4 -->

<!-- http://underscorejs.org/ -->

<script src="<c:url value="/resources/lib/Underscore.js/underscore-min.js" />"></script>


<!-- Sugar v1.3.9 -->

<!-- http://sugarjs.com/ -->

<script src="<c:url value="/resources/lib/Sugar/sugar-1.3.9.min.js" />"></script>


<!-- Bootstrap v2.3.1 -->

<!-- http://twitter.github.com/bootstrap/ -->

<script src="<c:url value="/resources/lib/Bootstrap/js/bootstrap.min.js" />"></script>


<!-- Bootbox.js v3.2.0 -->

<!-- http://bootboxjs.com/ -->

<script src="<c:url value="/resources/lib/Bootbox.js/bootbox.min.js" />"></script>


<!-- Select2 v3.3.1 -->

<!-- http://ivaynberg.github.com/select2/ -->

<script src="<c:url value="/resources/lib/Select2/select2.min.js" />"></script>


<!-- X-editable v1.4.3 Bootstrap Build -->

<!-- http://vitalets.github.com/x-editable/ -->

<script src="<c:url value="/resources/lib/X-editable/js/bootstrap-editable.min.js" />"></script>


* CSS 부분 또한 아래와 같이 /WEB-INF/fragment/common-css.jsp 파일을 작성하고 템플릿 파일에서 <jsp:include page="/WEB-INF/fragment/common-css.jsp" /> 태그로 호출한다.


* /WEB-INF/fragment/common-css.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>

<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>


<!-- Bootstrap v2.3.1 -->

<!-- http://twitter.github.com/bootstrap/ -->

<link rel="stylesheet" href="<c:url value="/resources/lib/Bootstrap/css/bootstrap.min.css" />">

<link rel="stylesheet" href="<c:url value="/resources/lib/Bootstrap/css/bootstrap-responsive.min.css" />">


<!-- Kendo UI Web GPL v2012.3.1114 -->

<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.common.min.css" />">

<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.default.min.css" />">

<link rel="stylesheet" href="<c:url value="/resources/lib/KendoUIWebGPL/css/kendo.bootstrap.min.css" />">


<!-- Select2 v3.3.1 -->

<!-- http://ivaynberg.github.com/select2/ -->

<link rel="stylesheet" href="<c:url value="/resources/lib/Select2/select2.css" />">


<!-- X-editable v1.4.3 Bootstrap Build -->

<!-- http://vitalets.github.com/x-editable/ -->

<link rel="stylesheet" href="<c:url value="/resources/lib/X-editable/css/bootstrap-editable.css" />">


저작자 표시 비영리 동일 조건 변경 허락
신고

[Eclipse] [JavaScript] "식별자나 문자열 또는 숫자가 필요합니다." 오류 분석

* 개발 프로젝트의 시연을 앞두고 브라우저 호환성 테스트 중 일부 PC의 IE에서 `식별자나 문자열 또는 숫자가 필요합니다.`와 같은 JavaScript 오류가 발생했다. 개발 PC의 IE, Chrome, Firefox에서 어떤 문제도 없었기 때문에 당황하던 차에 원인을 발견했는데 JavaScript 오브젝트 선언시 마지막 프라퍼티 뒤에 콤마(,)를 붙인 것이 원인이었다.

$('#message').tooltip({

  title : '메시지',

});


* Eclipse에서 오류를 잡아주지 않아 무심코 넘어갔었고 개발 PC의 브라우저 테스트에서 문제가 없었기에 그대로 시연했다가 망신을 당할뻔 했다. JSLint를 이용하여 코드를 검사하자 역시나 `Extra comma.` 오류를 잡아냈다. Eclipse에도 JSLint와 동일한 기능을 제공하는 JSHint 플러그인이 존재하지만 JSP 템플릿 파일 내의 JavaScript 코드에 대해서는 정상적으로 작동하지 않아 아쉽다.


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] 북마크; 유용한 JavaScript 라이브러리 소개 사이트

* jQuery가 등장한 후로 JavaScript의 개발 생산성이 향상되면서 직접 DOM을 건드리는 일보다는 공개된 무료 라이브러리를 적극 활용하는 방향으로 프로젝트를 진행하고 있다. 개발자 입장에서는 유용한 라이브러리를 확보하는 일이 중요한데 이러한 라이브러리를 소개하는 사이트들을 모아봤다.

jQuery Rain
http://www.jqueryrain.com/
유용한 기능을 제공하는 유무료 라이브러리들을 소개하고 있다.

* jQuery Rain에서 소개한 라이브러리 중에 프로젝트에 써먹을만한 라이브러리들을 선별해봤다.

postmessage (by daepark)

http://postmessage.freebaseapps.com/
https://github.com/daepark/postmessage
크로스 브라우징을 지원하는 window.postMessage 메써드 랩퍼 라이브러리로 jQuery 스타일의 postMessage 기능을 지원한다. 크로스 윈도우, 크로스 도메인 환경에서의 메시지 전달에 유용하게 사용할 수 있다. 개발자가 한국인 박대선 씨다.

xCharts (by tenXer)

http://tenxer.github.com/xcharts/
http://tutorialzine.com/2013/01/charts-jquery-ajax/
D3.js 기반의 차트 라이브러리로 간단한 차트 제작에 사용할 수 있다.


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] X-editable; 튜토리얼

* X-editable을 사용하면 전통적인 FORM 엘러먼트와 INPUT 엘러먼트의 제약을 벗어나서 A 엘러먼트와 JavaScript만으로 다양한 사용자 입력을 수용할 수 있다.

* 먼저 HTML 상에서 X-editable를 적용할 A 엘러먼트를 작성한다. data-type의 값으로 text, textarea, select, date, checklist 등 다양한 타입을 지원한다. select2 타입은 v1.4.1 버전에서 임의로 setValue() 메써드를 사용시 오류가 발생하는 버그가 있어 select 타입 사용을 권장한다.
<a id="someField" class="someForm" data-type="text">


* v1.4.1 버전부터 모드가 통합되면서 사전에 inline 모드를 적용하는 설정이 필요하다.
$.fn.editable.defaults.mode = 'inline';


* 앞서 작성한 엘러먼트에 X-editable을 적용한다. validate 옵션으로 유효성 검사를 수행할 수 있다. 메써드에서 1개 이상의 문자열을 반환하면 유효성 검사에 실패한 것으로 간주한다. 유효성 검사를 위한 API는 따로 제공되지 않는다.
$('#someField').editable({
  emptytext : '미입력',
  validate : function(value) {
    if (!isValid(value)) {
      return "유효하지 않은 입력입니다.";
    }
  }
});


* X-editable은 아직 값에 대한 change 이벤트를 제공하지 않아 값이 변했을 때 원하는 동작을 수행할 수 없다. 하지만 validate 옵션에 원하는 동작을 작성하면 change 이벤트와 동일한 효과를 가질 수 있다.


* 적용된 필드에 특정 값을 담을 수 있다.
$('#someField').editable('setValue', someValue);

* 동일한 클래스명을 가진 적용된 필드에 한꺼번에 특정 값을 담을 수 있다. 아래와 같이 초기화할 수 있다.
$('.someForm').editable('setValue', '');

* 동일한 클래스명을 가진 적용된 필드들의 값을 하나의 오브젝트에 담을 수 있다.
var someObject = $('.someForm').editable('getValue');


* type 옵션으로 select2를 설정하면 getValue 메써드 호출시 약간 다른 접근이 필요하다. 아래와 같이 엘러먼트 id를 추가적으로 명시해줘야 한다.

$('#someField').editable('getValue'); (X)
$('#someField').editable('getValue').orderCurrencyCd; (O)


* 오브젝트로 변환된 필드 값들은 오브젝트를 $.ajax() 메써드의 data 옵션에 전달하는 방법으로 서버에 사용자 입력 데이터를 전달할 수 있다.
data : JSON.stringify(someObject),
dataType : 'json'


* 유효성 검사를 위한 메써드는 아래와 같이 작성할 수 있다. 주로 정규식이 사용된다. 정규식은 jquery.validate.js 및 additional-methods.js의 소스코드를 참고해서 작성했다.
function isRequired(value) {
    return $.trim(value).length > 0;
}

function isEmail(value) {
    return /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
}

function isNumber(value) {
    return /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
}

function isDigits(value) {
    return /^\d+$/.test(value);
}


* 각 필드의 validate 옵션을 활성화했다면 클래스 단위의 일괄 유효성 검사가 가능하다. 반환된 객체에는 유효성 검사 결과 메시지들이 오브젝트로 저장된다.
var messages = $('.someForm').editable('validate');

* 유효성 검사가 성공적으로 끝났다면 반환된 객체의 크기는 0이 되며 아래와 같이 유효성 검사 결과를 출력하는 로직을 작성할 수 있다.(_.size(), _.map() 메써드는 Underscore.js, .first() 메써드는 Sugar.js, bootbox.alert() 메써드는 Bootbox.js가 제공하는 메써드이다.)
if (_.size(messages) != 0) {
    var message = _.map(messages, function(message) {
        return message;
    }).first();
    bootbox.alert(message, '확인');
    return;
}



* X-editable 사용시 화면에 보이지 않는 hidden 속성을 가진 필드는 어떻게 처리할까 고민하다 Bootstrap의 modal 클래스 속성을 활용하여 hidden 속성과 동일한 효과를 주도록 코드를 작성했다.
<div class="modal hide">
    <a id="hiddenField" class="hiddenForm" data-type="text"></a>
</div>


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] KeyboardJS; 키보드 입력 이벤트 제어 라이브러리

* KeyboardJS는 키보드 입력 이벤트를 매우 간편하게 제어할 수 있도록 도와주는 라이브러리로 코드가 상당히 간결해진다. 아래 소개글을 통해 간단한 사용 예 및 위력을 알 수 있다.

KeyboardJS 0.4.1 released by Callum Macrae
http://www.infoq.com/news/2013/01/keyboardjs-0.4.1


사용자가 F1 키를 눌렀을 때 도움말과 같은 특정 기능을 수행하고자 한다면 다음과 같이 작성하면 된다.

KeyboardJS.on('f1', function () {
  alert('F1 키 입력이 감지되었습니다.');
});


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] Kendo UI DataSource; Timestamp 값 문자열로 변환 출력하기

* Kendo UI DataSource 상에 Number 타입의 Timestamp 값을 가진 컬럼이 있을 때 Kendo UI Web Grid 상에서 template : '#=Date.create(timeStamp).format("{yyyy}-{MM}-{dd}")#' 기능을 통하여 사람이 식별가능한 날짜로 변환하여 출력할 수 있지만 Timestamp 값이 null 값을 가질 경우 현재날짜를 출력하는 문제가 있다. 아래와 같이 메써드를 작성하여 해결했다.

function timeStampToString(timeStamp) {
  if (timeStamp === null || timeStamp === '') {
    return '';
  }
  return Date.create(timeStamp).format("{yyyy}-{MM}-{dd}");
}


Kendo UI Web Grid의 columns.template 옵션은 아래와 같이 설정한다.

template : '#=timeStampToString(timeStamp)#'


* Date.create() 메써드는 Sugar.js 라이브러리가 제공하는 메써드임을 참고

* JavaScript 상에서의 Timestamp에 대한 자세한 내용은 아래 글을 참고

http://jsonobject.tistory.com/34


저작자 표시 비영리 동일 조건 변경 허락
신고