d3 - 시각화 자바스크립트 라이브러리

D3(Data-Driven Documents 를 표방해서 D3라 한다고 하는 듯)은
강력한 시각화 자바스크립트 라이브러리 이다.


이는 https://d3js.org/ 에서 확인 가능하고

d3를 wrapping 하여 좀더 정형화 한 것 중에 하나가 C3(http://c3js.org/) 라고 하는 것도 있다.

javascript/SmartClient] RichTextEditor 사용하기.

RichTextEditor를 사용하기 위해서는 아래와 같은 선언문을 포함한 뒤.

<SCRIPT SRC=isomorphic/system/modules/ISC_RichTextEditor.js></SCRIPT><SCRIPT>isc._lastModule='RichTextEditor';</SCRIPT>

------------

isc.VLayout.create({
   membersMargin:5,
   members:[
       isc.RichTextEditor.create({
           autoDraw:false,
           ID:"contentEditor",
           height:155,
         
           overflow:"hidden",
           canDragResize:true, showEdges:true,

            // Standard control group options include
            // "fontControls", "formatControls", "styleControls" and "colorControls"
            controlGroups:["fontControls", "formatControls", "styleControls", "colorControls"],
            value:''
       })
       ]
});

와 같이 선언을 하여 사용한다.

(참조 URL : http://www.smartclient.com/docs/9.0/a/system/reference/SmartClient_Explorer.html#RichTextEditor
)

위의 RichTextEditor 를 DynamicForm 에 붙여서 사용하기 위해서는
DynamicForm에서 사용하고자 하는 field의 타입을 'canvas'로 선언해서 사용하면 된다.

추가적으로 해당 RichTextEditor 에서 사용하고자 하는 font를 더 추가하고자 하는 경우,

isomorphic/system/modules/ISC_RichTextEditor.js 파일의 82 line부근의 fontControls이 정의된 곳에 추가하고자 하는 Font 를 추가하면 된다.
추가하는 형식은 "font":"font 라벨(콤보에 표시되는 값)" 으로 "," 로 구분하여 추가하면 된다.

javascript/eclipse] eclipse 에서 'Requesting JavaScript AST from selection' has encountered a problem' 오류 발생시 해결방법.

eclipse로 작업중에 'Requesting JavaScript AST from selection' has encountered a problem.' 발생하면 다음과 같이 하면 문제가 해결 될 것이다.
(Eclipse JSDT 의 버그가 원인)

- eclipse 메뉴 :: Window -> Preference -> Javascript -> Editor -> Mark Occurences -> Mark occurences of the selected element in the current file 항목의 체크 해지

Javascript] Javascript 에서의 replace

자바스크립트에서  replace는 query, java 의 replace 와 달리 처음 등장한 딱 한개만 바꿔준다.

아래와 같이 실행하면,

str = "aaabbbaaa";
result = str.replace("aaa", "ccc");

result는 내가 의도한 "cccbbbccc"가 아닌 "cccbbbaaa"가 나온다.


따라서, 원하는 문자열을 모두 바꾸어 주려면 정규식 표현을 사용해야 한다.

str = "aaabbbaaa";
result = str.replace(/a/g, "c");


위의 /a /g 의 의미는  아래와 같다.
    /a/ : str 변수의 값 중 'a'라는 문자를
    g (완전일치(발생할 모든 pattern에 대한 전역 검색)) str 의 전체 문자열에 대해, 'c'로 변환.

그 외에 다른  플래그는 아래와 같다.

i : 대/소문자 무시, gi : 대/소문자 무시하고 완전 일치

cross site scripting(XSS) 공격 우회방법.

1. xss (cross site scripting) 공격을 was 설정을 통해 방어하는 방법

   http://mimul.com/pebble/default/2009/10/04/1254641100000.html

   ==> java class 와 web.xml 의 설정을 통한 방어로 기존의 작업분의 변경이 많이 필요할 수 있다.

2. jstl 태그를 사용해서 코딩을 한 경우 아래의 사이트를 참조하셔도 될것 같습니다. 

   ==>  http://ssiso.net/cafe/club/club1/board1/content.php?board_code=jsp%7Csetting&idx=31589&club=jsp

3. jsp 메소드를 사용하는 방법 (아래 메소드를 jsp에서 호출해서 사용하면 됩니다.)

/**

 * XSS 제거

 * @param value

 * @return

 */

public static String removeXSS(String value){

     

     value = value.replaceAll("&", "&");

     value = value.replaceAll("<", "<");

     value = value.replaceAll(">", ">");

     value = value.replaceAll("", null);

     value = value.replaceAll("\"", "";");

     value = value.replaceAll("\'", "';");

     value = value.replaceAll("%", "%;");    

     value = value.replaceAll("../", "");

     value = value.replaceAll("..\\\\", "");

     value = value.replaceAll("./", "");

     value = value.replaceAll("%2F", "");

     

     return value;

}

Javascript ] javascript 날짜(Date) 관련 함수.

// 현재 일자보다 7일전 날짜 구하기.

var dt = new Date();
var fd = timeShift(dt, "-7");
var val = fd.getFullYear()+"-"+(fd.getMonth()+1)+"-"+fd.getDate();

// fd 값을 가진 날의 요일

fnSetFromDateVal(fd);

// fd ~ dt 의 기간.
betweenDay(fd, dt);

/**
 * a : date()
 * s : 이동하고자 하는 일자 기간.(7 - 7일, 15 - 15일)
 */
function timeShift(a,str){

b = new Date();

b.setTime(a.getTime() + ((str) * 24 * 60 * 60 * 1000));

return b;

}



/**
  * 특정날짜의 요일을 구한다.
  * time : 날자형식의 데이터.
  */
function getDayOfWeek(time) {

     var now = new Date(time);
     var day = now.getDay(); //일요일=0,월요일=1,...,토요일=6
    // var week = new Array('일','월','화','수','목','금','토');
    // return week[day];  // 리턴값은 일 ~ 토 로 표시된다.
     return day;  // 리턴값은 0 ~ 6 로 표시된다.
 }



/**
  * 입력받을 날자 사이의 기간을 리턴
  * fd : 시작일자, td : 종료일자.
  */

function betweenDay(fd, td) {
    var betweenDay = (fd.getTime() - td.getTime())/1000/60/60/24;
    return betweenDay;
}

JQuery] 이클립스 jquery min js파일 validator 에러 대처법

 jquery*.min.js 파일에 에러가 표시되어 프로젝트에 x 표시가 되는 경우에 아래와 같은 방법으로 해결을 할 수 있다.

1) Project->Properties->JavaScript->Include Path->Source

2) Inclusion and Exclusion Patterns 창에서 Exclusion patterns Add 버튼 클릭

3) 상황에 적합한 패턴 입력 (예 : **/jquery*.js ) 

4) 적용시키면 에러 표시 제거됨

위의 방법으로 적용시에 간혹 Project->Properties 에서 javascript 항목이 안보이는 경우가 발생한다. 

이럴 경우, 

Project->Properties-> Builders -> "Javascript Validator" 를 체크 해제.

javascript] array를 이용한 중복제거

//TIPS
//[JS] Array 중복제거하기(2009/06/01)
//written by Kim Yeonview : 36
//
Array.prototype.removeSame = function() {

var oldArray = this;
var b = [];
var j = 0;
oldArray.sort();
while(oldArray.length > 0) {

var newKey = oldArray.shift();
if(j == 0) {
b.push(newKey);
j++;
} else if(b[j-1] != newKey) {
b.push(newKey);
j++;
}
}

return b;

};

jquery] jqgrid plugin 사용

원본출처 :  http://dev.henjjang.com/414

jqGrid를 기억하고자 이번 포스팅을 작성한다. jqGrid 사이트 와 데모사이트를 통해서 관련된 여러정보를 얻을 수 있지만 사용했던것을 정리하지 않으면 기억했던것을 또 찾아야 하는 일이 되풀이 되곤한다.

버전

- 최근(2010.07.12)에 릴리즈 된 버전이 3.7.2 버전이다. 3.7.2 버전에서 변화된 내용은 다음에서 확인할 수 있다. 3.7 버전은 다음의 내용을 담고 있다.

 

+ Load array data at once

+ Load at once from server

+ Single search

+ Multiple search

+ Virtual scrolling

+ Toolbar search

+ Add/edit/delete on local data

 

- 2010.8월 Grouping 이 가능한 jqGrid 3.8 Beta 버전을 공개했다.

jqGrid 시작하려면

 

- jqGrid 를 시작하려면 jQuery를 알아야 한다. javascript 프레임워크, 또는 라이브러리라고 부를 수 있는 jQuery 에 대해서는 추후 정리해야겠다. 

 

<!-- BEGIN: load jQuery UI theme -->

<link type="text/css" href="./css/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /><!-- END: load jQuery UI theme -->

<!-- BEGIN: load jQuery -->

<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>

<!-- END: load jquery -->

<!-- BEGIN: load jQuery UI-->

<script type="text/javascript" src="./js/jquery-ui-1.8.2.custom.min.js"></script>

<!-- END: load jQuery UI-->

 

[code 1 : jquery theme, jquery ui, jquery 선언부]

- [code 1] 은 ui-lightness 테마를 적용하고, jquery ui, jquery 관련되어 선언하는 부분이다. 

jqGrid 시작하기

 

- jqGrid 시작하기

jqGrid 다루기

 

- jqGrid 다루기

* id가 13 인 값을 선택한다.

jQuery("#list9").jqGrid('setSelection',"13");<font class="Apple-style-span" color="#333333" face="굴림"><span class="Apple-style-span" style="line-height: 18px; white-space: normal;"><font class="Apple-style-span" color="#222222" face="monospace"><span class="Apple-style-span" style="line-height: 15px; white-space: pre;"><br /> </span></font></span></font>

참고사이트

 

- jQuery Grid Plugin site

- jQuery Demos

jquery] jqGrid 설치 시 꼭 신경써야 할 것

원본 출처 :: http://comnori.blogspot.com/2011/07/jqgrid.html

jqGrid 설치 시 꼭 신경써야 할 것

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
</head>
<body>
...
</body>
</html>

원문 사이트 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install

1. 위에 나온 css, js 파일을 반드시 사용한다.

2. 스크립트 소스 순서는
grid.local-en.js (언어에 따라 en 부분은 바뀔 수 있음)가
jquery.jqGrid.min.js 보다 무조건 위에 선언되어야 한다.

이게 안되면 pager 부분이 작동하지 않는다.

javascript] 숫자만 입력받는 함수

회원으로 가입하거나 할때 유용하게 쓰일수 있는 팁이라서 올린다.[초기값 한글/영문으로 지정하기]<input type="text" name="m_name" style="ime-mode:active;"> //초기값이 한글자판
<input type="text" name="m_id" style="ime-mode:inactive;"> //초기값이 영문자판



[숫자 및 특수문자 허용]
// 숫자만 입력받는다. 특수문자('-','.',...)도 허용한다.
function onlyNumber() {
if((event.keyCode > 31) && (event.keyCode < 45) || (event.keyCode > 57)) {
event.returnValue = false;
}
}

// 숫자만 입력받는다. "-"도 받지않는다.
function onlyNumber2(loc) {
if(/[^0123456789]/g.test(loc.value)) {
alert("숫자가 아닙니다.\n\n0-9의 정수만 허용합니다.");
loc.value = "";
loc.focus();
}
}

사용예제) - 주민번호나 전화번호 경우<input name="jumin2" value="" type="text" size="7" maxlength="7" onKeyPress=onlyNumber() onBlur=onlyNumber2(this);>