자바스크립트(Javascript) 무료 차트 jQuery를 기반으로 한 무료 차트 Plugin 두가지를 소개한다. jqPlot차트를 활용하기 위한 자료가 많다. 구글링을 해서 쉽게 찾아서 사용할 수 있다. 사이트 : http://www.jqplot.com 예제 : http://www.jqplot.com/tests FlotjqPlot와 유사하여 사용하기 쉽다. 자료는 많지 않지만 사이트의 설명과 예제로 간단한 작업은 쉽게 할 수 있다. 사이트 : http://www.flotcharts.org 예제 : http://www.flotcharts.org/flot/example
자바스크립터에서 주소(URL) 상으로 넘어오는 인자(QueryString) 값을 쉽게 파싱해서 사용할 수있는 함수를 소개한다. 해당 함수를 사용하여 리턴된 값은 JSON 형태이기 때문에 사용하기 편하다. function getUrlParams() { var params = {}; window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) { params[key] = value; } ); return params; } 해당 주소(URL)의 Query String 값을 JSON 형태로 받아서 사용 할 수 있다. 실제 브라우저에서 테스트 한 결과 이다.
JSON 객체에 키(key)와 값(value)를 추가하고 삭제하는 방법 var json = {NAME: "John", AGE: 30, SEX: "male"}; //add item (key, value) json.BIRTHDAY = '2001-03-01'; //delete item (key) delete json.SEX; 결과 (Result) : add item : json {NAME: "John", AGE: 30, SEX: "male", BIRTHDAY: "2001-03-01"} delete item : json {NAME: "John", AGE: 30, BIRTHDAY: "2001-03-01"}
자바스트립트에서 replace 메서드를 사용하면 첫 번째 문자만 치환이 되고 작동이 멈춘다. String 클래스에 replaceAll 메서드를 추가하여 쉽게 문자를 치환 할 수 있다. □ 방법 1. String prototype 메서드 추가 //replaceAll prototype 선언 String.prototype.replaceAll = function(org, dest) { return this.split(org).join(dest); } //replaceAll 사용 var str = "Hello World"; str = str.replaceAll("o","*"); alert(str); 설명 : str = str.split("o"); 출력 : ["Hell", " W", "rld"] //해당 문자로 배..
자바스크립트의 foreach 구문을 이용하여 JSON 객체의 키(key)와 값(value)를 쉽게 가져올 수 있다. jQuery를 사용한다면 $.each 구문을 대신 사용할 수도 있다. ■ Javascript var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; for(key in json) { alert('key:' + key + ' / ' + 'value:' + json[key]); } ■ jQuery var json = { 'NAME':'홍길동', 'SEX':'남', 'AGE':'99세'}; $.each(json, function(key, value){ alert('key:' + key + ' / ' + 'value:' + value); });
jquery 폰의 가로,세로 변경시 이벤트 처리방법 $('body').bind('orientationchange',function(event){ if (event.orientation == "portrait") { //세로 } else if (event.orientation == "landscape") { //가로 } })
jquery mobile alpha버전에서는 아직 iScroll기능을 제공하지 않는다. 차후 버전에서는 제공을 할것으로 예상을 하지만 alpha버전에서 iScroll기능을 사용하고 싶다면 아래의 빨간색부분을 참고바람. 출처 : http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html iScroll Test 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 iScroll Test Hello!!!
자료를 조회하거나 화면을 전환할때 로딩 애니메이션이 필요할때가 있다... // show $.mobile.pageLoading();// hide $.mobile.pageLoading(true);
해당일자의 요일을 구할때 사용한다 크롬에서는 빨간색부분을 var d = new Date(sDate); 해도 상관없으나 사파리에서는 안된다. 예) var weekday = getWeekday("2011-04-01") function getWeekday(sDate) { var yy = parseInt(sDate.substr(0, 4), 10); var mm = parseInt(sDate.substr(5, 2), 10); var dd = parseInt(sDate.substr(8), 10); var d = new Date(yy,mm - 1, dd); var weekday=new Array(7); weekday[0]="일"; weekday[1]="월"; weekday[2]="화"; weekday[3]="수"; ..
자바스크립트에서 쿠키셋팅시 expires을 일수로 설정할수 있는 함수이다. 예) setCookie('CookieName', CookieValue', 365); //365일 후 만료 var str = getCookie('CookieName'); function setCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else { var expires = ""; } document.cookie = name + "=" + value + expires +..