기존 Array에 신규 Array값을 Merge하려면 for loop를 돌면서 키값을 비교하며 교체하는 방법은 있으나

그런 날코딩(?)은 너무 우아하지 않아서 찾아보니 Underscore.js로 가능하더라.


기존 Array로 Merge대상

var ori = [

{"KEY": "A", "VALUE" : 1 }, 

{"KEY": "B", "VALUE" : 2 }, 

{"KEY": "C", "VALUE" : 3 },

{"KEY": "D", "VALUE" : 4 }

];


신규 Array

var inp = [

{"KEY": "D", "VALUE" : 44 },

{"KEY": "E", "VALUE" : 5 }

];


신규 Array의 각 Object의 "KEY"값을 기준으로 기존 Array를 추가하거나 변경하는 작업으로 원하는 결과 값은 아래와 같다.


[

{"KEY":"A","VALUE":1},

{"KEY":"B","VALUE":2},

{"KEY":"C","VALUE":3},

{"KEY":"D","VALUE":44},

{"KEY":"E","VALUE":5}

]


Underscore.js의 uniq, union 메서드를 조합하면 원하는 결과 값을 얻을 수 있으며 아래 소스상에서 sortBy메서드는 Object의 "KEY" 값 정렬을 위해 사용되었다.


_.sortBy(

_.uniq(

_.union(inp, ori), false, function(item, ori){ return item.KEY; }

)

, "KEY");




저작자 표시
신고

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글 하나 달렸습니다.
  1. 안녕하세요? 경력 15년차 개발자 입니다.
    저는 아직도 Array Merge하는거에 익숙하지 않아서 for문으로 열라 돌렸는데요,
    황군님 블로그 봐서 많은 도움이 됏습니다. 이런분이 제 옆에서 같이 일하면 즐거울텐데 말이죠
    코와붕가
secret

jquery.font.js

 

솔루션 팀장님께서 자바스크립트로 폰트설치 여부 확인할 수 없냐고 물어보셨다.

 

나는 당연히 안된다고 얘기를 했다.

 

자바스크립트는 보안문제로 PC 리소스를 접근할 수 없다 라는 논리였다.

 

하지만 찾아보니 있더라... jquery.font.js ^^;


해당 라이브러리도 PC 리소스를 접근해서 폰트설치 여부를 확인하는 것은 아니다.

 

소스를 분석해보니

 

p태그에 font를 지정 후 해당 p태그의 사이즈를 구한다.

 

그러면 해당 font가 존재하게 되면 사이즈가 폰트별로 크기가 다르고

 

폰트가 존재하지 않을 경우 해당 크기는 동일한 사이즈가 나온다.

 

테스트 결과 모든 브라우저에 동작한다.(솔직히 IE6만 확인했다. ^^;)

 

jquery.font.js 소스 일부

//default font
var baseX = $('p#jQuery-Font-Test').width();
var baseY = $('p#jQuery-Font-Test').height();
//checking font
var userX = $('p#jQuery-Font-Test').width();
var userY = $('p#jQuery-Font-Test').height();
//사이즈가 같다면 false, 틀리다면 true
return(((userY != baseY) || (userX != baseX))? true: false);

 

나눔고딕 폰트설치 여부 확인

if ($.font.test("나눔고딕") == false) {
alert("설치가 되지 않았소!!");
}else {
alert("설치가 되었소!");
}

 

 

다운로드 경로 : https://github.com/beseku/jquery.font

 

 

저작자 표시
신고

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret


요즘 자바스크립 공부를 하고 있는데... 아 정말 어렵다.

아래 내용은 책 JavaScript The Definitive Guide 5/E에서 발췌한 내용이며

유용한 자바스크립트 함수들이다. 사용법을 익혀두자!

객체용 함수들


		// 객체 o의 열거 가능한 프로퍼티들의 이름을 담은 배열을 반환한다.
		function getPropertyNames(/* object */ o)
		{
			var r = [];
			for(name in o) r.push(name);
			return r;
		}

		//객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사한다.
		//만약 to가 null이면 새로운 객체를 생성한다. 이 함수는 결과로 개체 to를 반환하거나
		//새롭게 생성한 객체를 반환한다.
		function copyProperties(/* object */ from, /* optional object */ to)
		{
			if(!to) to = {};
			for(p in from) to[p] = from[p];
			return to;
		}

		//객체 from의 열거 가능한 프로퍼티들을 객체 to로 복사하되,
		//to에 의해 정의되지 않은 프로퍼티만 복사한다.
		//이 함수는 to에 미리 정의되어 있지 않은 값들에 대해 from에 저장해 둔
		//기본 값들을 사용하려 할 때에 유용하다.
		function copyUndefinedProperties(/* object */ from, /* object */ to)
		{
			for(p in from){
				if(!p in to) to[p] = from[p];
			}
		}

배열용 함수들

		//배열 a의 각 원소를 지정된 술어(predicate) 함수로 전달한다.
		//술어 함수가 true를 반환한 원소들로 이루어진 배열을 결과로서 반환한다.
		function filterArray(/* array */ a, /* Boolean function */ predicate){
			var results = [];
			var length = a.length;	 //술어 함수가 배열의 길이를 반환할 경우에 대비하여
			for(var i = 0; i < length; i++) {
				var element = a[i];
				if(predicate(element)) results.push(element);
			}
			return results;
		}

		//배열 a의 각 원소를 지정된 함수 f로 전달하여 얻은 결과들을 원소로 하는
		//배열을 반환한다.
		function mapArray(/* Array */ a, /* function */ f) {
			var r = [];
			var length = a.length;	 //함수 f가 배열 길이를 변환할 경우에 대비하여
			for( var i = 0; i < length; i++) r[i] = f(a[i]);
			return r;
		}

함수용 함수들

		//함수 f를 객체 o의 메서드로 하여 호출하는 독립형(standalone) 함수를 반환한다.
		//이것은 메서드를 함수에 전달하려 할 때 유용한다. 만약 함수를 그 함수의 객체와
		//연결하지 않으면, 그 연관 관계는 소실되며 전달한 메서드는 일반 함수처럼 호출된다.
		function bindMethod(/* object */ o, /* function */ f) {
			return function() { return f.apply(o, arguments) }
		}

		//함수 f를 지정된 전달인자와 함께 호출해 주는 함수를 반환한다.
		//이렇게 반환된 함수는 또한 추가적인 전달인자들과 함께 호출될 수 있다.
		//(이것은 때때로 'currying'이라 한다.)
		function bindArguments(/* function */ f, /*initial arguments ......*/) {
			var boundArgs = arguments;
			return function() {
				//전달인자들로 구성된 배열을 만든다. 이 배열은 이전에 건내받은 전달인자를 
				//원소로 시작하여, 지금 추가로 건네받은 전달인자까지 포함한다.
				var args = [];
				for(var i = 1; i < boundArgs.length; i++) args.push(boundArgs[i]);
				for(var i = 0; i< arguments.length; i++) args.push(arguments[i]);
				//이제 이 전달인자들과 함께 함수를 호출한다.
				return f.apply(this, args);
			}
		}
저작자 표시
신고

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret


BlackBerry 6+ Support(블랙베리 지원)

New features: Pull to Refresh and Pagination(풀 다운 리플레시 지원)

New Demo: O’Reilly Conferences(O’Reilly Conferences 데모 추가)

Performance tweaks and style updates(성능과 스타일 향상)

http://www.sencha.com/blog/sencha-touch-1-1-release-with-blackberry-support/

저작자 표시
신고

'javascript' 카테고리의 다른 글

유용한 자바스크립트 함수들  (0) 2011.04.25
Sencha Touch 1.1 Release with BlackBerry Support  (0) 2011.03.25
Javascript 배열 메서드  (2) 2011.03.21
WebApps FUTURECON 2011 서울 후기  (0) 2011.02.24

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

Javascript Array클래스에 정의되어있는 배열 메서드에 대하여 알아보자.

join()
Array.join()메서드는 배열의 모든 원소를 문자열로 변환하고 이어 붙여서 반환한다.

var a = [1, 2, 3];     //3개의 원소를 가진 배열을 생성
var s = a.join();      //s == "1,2,3"
s = a.join(", ");       //s == "1, 2, 3"

Array.join() 메서드는 String.split() 메서드와 반대되는 기능을 한다.

reverse()
Array.reverse() 메서드는 이름에서도 알 수 있듯이 배열 안의 원소 순서를 반대로 정렬하여 반환한다.

var a = new Array(1,2,3);     // a[0] = 1, a[1] = 2, a[2] = 3
a.reverse();                       // now a[0] = 3, a[1] = 2. a[2] = 1
var s = a.join();                  // s == "3,2,1"

sort()
Array.sort() 메서드는 배열 안의 원소들을 정렬하여 반환한다.

var a = new Array("c", "a", "b");
a.sort();
var s = a.join(", ");     // s== "a, b, c"

알파벳순이 아니라 다른 순서로 배열을 정렬하려면 sort() 메서드의 전달인자를 통해 비교 함수를 직접 명시해주어야 한다. 비교 함수는 전달인자를 두개 받아서, 정렬된 배열 상에서 어떤 것이 먼저 나타나야 하는지 판단하는데 사용 된다. 만약 첫 번째 전달인자가 두 번째보다 먼저 나타나야 한다면 비교 함수는 0보다 작은 숫자를 반환해야 한다. 첫 번째 전달인자가 두 번째보다 뒤에 나타나야 한다면 0보다 큰 숫자를 반환하며 두 값이 동등하다면 0을 반환해야 한다.
var a = [33, 4, 1111, 222];
a.sort();                   // 알파벳순 : 1111, 222, 33, 4
a.sort(function(a,b) { // 번호순 : 4, 33, 222, 1111
     return a-b;
     });

concat()
Array.concat() 메서드는 본래 배열의 모든 원소에 concat() 메서드의 전달인자들을 전부 이어붙인 배열을 새롭게 생성하여 반환한다.
var a = [1, 2, 3];
a.concat(4, 5);            // [1,2,3,4,5]
a.concat([4,5]);          // [1,2,3,4,5]
a.concat([4.5], [6,7]); // [1,2,3,4,5,6,7]
a.concat([4, [5,[6,7]]]);  // [1,2,3,4,5,[6,7]]

slice()
Array.slice() 메서드는 배열의 일부분 혹은 부분 배열을 반환한다.
var a = [1,2,3,4,5];
a.slice(0, 3);           // [1,2,3]
a.slice(3);              // [4,5]
a.slice(1, -1);         // [2,3,4]
a.slice(-3,-2);        // [3] 

splice()
Array.splice() 메서드는 배열에 원소를 삽입하거나 원소를 제거하려 할 때 범용적으로 사용할 수 있는 메서드이다.
var a = [1,2,3,4,5,6,7,8];
var a.splice(4);          // [5,6,7,8] , a는 [1,2,3,4];
var a.splice(1,2);       // [2,3] , a는 [1,4];
var a.splice(1,1);       // [4] , a는 [1]

push() & pop()
위 메서드를 사용하면 배열을 마치 스택인 것처럼 조작할 수 있다.
push() 메서드는 하나 혹은 그 이상의 원소들을 배열의 끝 부분에 이어 붙이고 배열의 새로운 길이를 반환한다.
pop() 메서드는 push()와 반대로 작동한다. 즉 pop() 메서드는 배열의 마지막 원소를 제거하고 배열의 길이를 감소시킨 후 배열에서 제거한 원소를 반환한다.
var stack = [];           // stack:[]
stack.push(1,2);        // stack:[1,2]        2를 반환
stack.pop();              // stack:[1]          2를 반환
stack.push(3);           // stack:[1,3]       3를 반환
stack.pop();              // stack:[1]          3를 반환
stack.push(4,5);        // stack:[1, [4,5]] 2를 반환
stack.pop();              // stack:[1]          [4,5]를 반환
stack.pop();              // stack:[]           1를 반환

unshift() & shift()
push(), pop()과 유사하며 이 메서들은 배열의 끝이 아니라 배열의 맨 앞에 원소를 삽입하고 제거한다.
var a = [];              // a:[]
a.unshift(1);           // a:[1]
a.unshift(22);          // a:[22, 1]
a.shift();                 // a:[1]
a.unshift(3,[4,5]);    // a:[3,[4,5],1]
a.shift();                 // a:[[4,5],1]
a.shift();                 // a:[1]
a.shift();                 // a:[]










신고

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글  2개가 달렸습니다.
  1. 좋은 자료 감사합니다.
  2. 꾸벅
secret

WebApps FUTURECON을 다녀왔다.

빠르게 발전하고 있는 웹기술을 경험하고자 하는 사람들로 행사장 안은 많은 개발자 및 그외 디자이너 분들로 만원을 이루었다.


5개의 세션으로 진행이 되었으며 세션순서와 발표자는 아래와 같다.


세션1 2011년 HTML5 기술 현황 및 전망

2011년은 모바일 및 웹개발에 엄청 중요한 한해가 될 것이며 각종 HTML5 스펙이 고도화 되는 시기일 것이다.
현 업계의 동향을 보면 RIA 플랫폼이라고 자청하는 플래시, 실버라이트 등의 기술은 공개표준이 아니어서 한계를
가질 수 밖에 없다. 하지만 HTML5는 W3C에서 재정한 공개표준안이다.

다양한 모바일 디바이스와 다양한 모바일 플랫폼의 출현으로 기존 기술로는 한계가 있으며 HTML5가 해결방안이다.

스티브잡스가 플래시에 독설을 퍼부으면서 HTML5에 대한 관심이 더욱더 확대되었고 애플도 지속적으로 HTML5개발자를 채용중이며 HTML5기술로 혁신적인 개발을 진행중이며 그 결과물 중 하나인 iAd Producer라는 광고 프로그램도 HTML5기반으로 만들었다.

사파리, 크롬 브라우저는 HTML5를 가장 빨리 적용한 브라우저 이며 아이폰 사파리에서는 센서를 이용한 어플리케이션 개발하여 브라우저에서 볼 수 있다.
웹 기술의 단점 중 하나이던 통신기술의 부재 또한 웹소켓 기술이 개발되어 실시간으로 통신이 가능하게 되었으며
테스트 결과 XHR보다 50배나 빠른것으로 나타났다.

구글의 경우는 크롬의 출현으로 많은 변화가 있었다.
크롬브라우저가 나오면서 구글기어스를 포기하고 모든 기술은 크롬 브라우저 위주로 W3C쪽에 엄청난 리소스를 제공하고 있으며 Speech Input과 같은 음성인식 기술은 구글이 최고의 기술을 가지고 있으며 웹 브라우저에서도 사용할 수 있도록 지원하고 있다.

또한 기존 웹기술로는 힘들었던 사진어플리케이션, 동영상 어플리케이션등을 만들 수 있는 표준들이 현재 개발되고 있다.

HTML5 동영상 이슈 중 가장 큰 문제였던 코덱이슈가 있다. 관련하여 구글이 코덱을 만드는 회사를 인수하여 오픈소스로 공개를 하고 있으며 관련 코덱업계는 민감한 반응을 보이고 있다.

웹어플리케이션 스토어의 경우는 크롬 웹스토어가 이미 나왔고 파이어폭스 모질라의 경우도 준비중이다.

또한 스카이프, Netflix, MS(IE9) 또한 웹 어플리케이션 개발 및 웹표준에 적극적 동참을 하고 있다.

HTML5는 기존 HTML은 단순히 문서를 만들기 위함이라면 HTML5는 웹어플리케이션을 만들기 위함이고 상당한 양의 API를 가지고 있으며 지금도 지속적으로 만들고 있다.

W3C에서 발표한 HTML5표준화 일정은 2014년에 표준화 완성이 된다고 하며 라스트콜 단계는 올해 5월로 예상된다.

HTML5의 2011년 이슈는
1. 브라우저 호환성
2. 브라우저 처리속도
3. 보안
4. 개발도구
5. W3C의 표준화 개발 일정

HTML5의 전망
1. 테블릿PC 활성화 및 4G환경의 웹앱 활성화 기대
2. 모바일 중심으로 하이브리드 앱 영향력 확대
3. 다양한 앱스토어 출현 예상
4. 모바일을 중심으로 HTML5웹앱 활성화
5. 다양한 웹어플리케이션 개발시도


세션2 Web as Platform: Device API의 현재와 미래

Native Platform의 진화와 플랫폼 파편화에 따른 개발 비용, 개발 기간 증가, Cross Platform에 대한 관심이 증대되고 있으며 Smart Platform은 모바일을 시작으로 홈, 자동차, 학교, 도시로 그 적용 대상과 영역을 확장하고 있다.

웹은 Native Application로만 가능했던 기술적/사업적 제약 사항들을 지속적으로 극복하고 있으며 관련 표준 활동도 적극적으로 수행하고 있다.
Device API와 관련하여 표준은 W3C의 DAP를 중심으로 한 웹 표준과 사업자를 중심으로 한 WAC에서 각각 표준을 제정 중에 있다.


세션3 HTML5 N-screen UI 대응전략

N-screen이라는 키워드는 2~3년 이내 나온 키워드이다.
멀티 디바이스 시대에서 해결책은 오픈 웹 플랫폼 기술을 사용하여 어플리케이션을 만들어야 한다.

브라우저가 포함된 디바이스에서는 웹앱은 호환성이 보장되며 배포가능하다.

데스크탑을 제외한 현재 쏟아지는 디바이스(아이패드, 아이폰)의 경우는 고정된 해상도이며
N-screen대응 방법론은 크게 두가지로 나눌 수 있다.
1. 각 디바이스별 N개의 UI대응
Flexible Layout : colly.com
Flexible Image : tenbytwenty.com
Flexible Layout in 3 Steps : thinkvitamin.com
Flexible Image & Crop : alistapart.com
2. 동일한 UI로 각 디바이스 대응
2D Drawing : 사용자 이벤트 시마다 2D Drawing -> 20thingsilearned.com/home
Vector Graphics(SVG/VML) : 관련하여 Raphael 라이브러리 있다.


세션4 2011 자바스크립트 개발자 전성시대

  참고 : http://rhio.tistory.com/376

세션5 모바일과 웹개발자가 2011년 주목해야 하는 기술들

  참고 : http://xguru.net/635




신고

'javascript' 카테고리의 다른 글

Javascript 배열 메서드  (2) 2011.03.21
WebApps FUTURECON 2011 서울 후기  (0) 2011.02.24
자바스크립트 기본타입과 참조타입  (0) 2011.02.21
자바스크립트 null & undefined  (0) 2011.02.21

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

자바스크립트에서 기본 규칙은 다음과 같다.
기본타입은 값에 의해서 조작되고 참조 타입은 참조에 의해서 조작된다.

숫자와 불리언 타입은 기본타입이며 객체는 참조 타입이다.
객체의 특수한 종류인 배열이나 함수도 마찬가지로 참조 타입이다.

문자열도 기본타입으로 취급된다.

값에 의한 데이터 조작과 참조에 의한 데이터 조작의 예를 살펴보자.

값에 의한 데이터 조작의 예

// 먼저, 값에 의한 복사를 보여준다.
var n = 1;     // 변수 n은 값 1을 담는다.
var m = n;    // 값에 의한 복사. 변수 m은 별개의 값 1을 담는다.

//값에 의한 전달을 보여 주는 용도로 사용할 함수
function add_to_total(total, x)
{
     total = total + x;     // 이 줄은 total의 내부 복사본만 변경된다.
}

// 이제 위의 함수를 호출하면서 값에 의해 변수 n과 m에 담겨 있는 숫자들을 전달한다.
// n의 값은 복사되고 복사된 값은 함수 내에서 total이라는 이름을 갖게 된다.
// 함수 내에서 m의 복사본을 n의 복사본에 더한다. 그러나 복사본에 무언가를 더하는 것은
// 함수 외부에 있는 n의 원본 값에 영향을 주지 않는다.
// 따라서, 이 함수 호출은 아무 일도 수행하지 않는다.
add_to_total(n, m);

// 이제 값에 의한 비교를 해보면 다음 줄에서 1은 프로그램 내에 나타난 확실히 구분되는 숫자 값이다.
// 이 1을 변수 n에 담겨있는 값과 비교한다.
// 값에 의한 비교에서는 두 숫자 값이 동일한지 알아보기 위해서 두 숫자를 구성하는 바이트들을 비교한다.
if (n == 1) m = 2;     // n의 값은 1의 값과 동일하다. 이제 m은 2가 되었다.


참조에 의한 데이터 조작의 예

// 2011년 크리스마스를 표현하는 객체를 생성한다.
// 변수 xmas는 생성된 객체 자체를 담지 않고, 그 객체에 대한 참조를 담는다.
var xmax = new Date(2011, 12, 25);

// 참조에 의한 복사를 수행하면 원본 객체에 대한 새로운 참조를 얻는다.
var solstice = xmas;     // 이제 두 변수 모두 동일한 객체 값을 참조한다.

// 여기서 객체에 대한 참조를 통해 객체를 변경한다.
solstice.setDate(21);

// 변경사항은 원본 참조에서도 보인다.
xmas.getDate();     // 원본 값인 25가 아닌 21을 반환한다.

// 객체나 배열이 함수에 전달되는 경우에도 동일하게 적용된다.
// 다음 함수는 배열의 각 원소에 어떤 값을 더한다.
// 함수에 배열의 복사본이 아닌 배열에 대한 참조가 전달되었다.
// 따라서 함수는 참조를 통해 배열의 내용을 변경할 수 있고
// 변경사항은 함수가 종료된 후에도 보인다.
function add_to_totals(totals, x)
{
     totals[0] = totals[0] + x;
     totals[1] = totals[1] + x;
     totals[2] = totals[2] + x;
}

// 마지막으로 참조에 의한 비교를 살펴보자.
// 비록 우리는 두 변수가 서로 다른 날짜를 참조하게 만들려고 했지만
// 둘다 동일한 객체를 참조하고 있으므로 두 변수를 비교하면 동일하다는 결과가 나온다.
(xmas == solstice)     // true로 출력

// 다음에 정의되는 두 변수는 동일한 날짜를 표현하지만 서로 별개인 두 객체를 참조한다.
var xmas = new Date(2011, 12, 25);
var xmas2 = new Date(2011, 12, 25);

// 별개의 객체는 동일하지 않다.
(xmas != xmas2)     // true로 출력

신고

'javascript' 카테고리의 다른 글

WebApps FUTURECON 2011 서울 후기  (0) 2011.02.24
자바스크립트 기본타입과 참조타입  (0) 2011.02.21
자바스크립트 null & undefined  (0) 2011.02.21
dynamic selectbox with getJSON  (0) 2011.02.18

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

null
자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다.
null은 보통 객체타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다.
null은 다른 모든 값들과 구분되는 고유한 값이다. 어떤 변수가 null 값을 가지면 그 변수가 유효한 객체나
배열, 숫자, 문자열, 또는 불리언 값을 담고 있지 않다는 것을 알 수 있다.
null은 불리언 문맥에서 사용되면 false, 숫자 문맥에서는 0, 문자열 문맥에서는 "null"로 변환된다.

undefined
자바스크립트에서 종종 사용되는 또 다른 특수한 값으로 undefined 값이 있다.
undefined는 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에
접근할 경우 반환되는 값이다.
nullundefined 값은 서로 구별되는 값이지만 동등 연산자(==)는 값은 것으로 간주한다.
만약 원하는 바가 null값과 undefined 값을 구별하는 것이라면 일치 연산자(===)나 typeof 연산자를 이용해야 한다.
undefined은 불리언 문맥에서 상용되면 false, 숫자 문맥에서는 NaN, 문자열 문액에서는 "undefined"로 변환된다.
신고

'javascript' 카테고리의 다른 글

자바스크립트 기본타입과 참조타입  (0) 2011.02.21
자바스크립트 null & undefined  (0) 2011.02.21
dynamic selectbox with getJSON  (0) 2011.02.18
자바스크립트 문자열  (0) 2011.02.16

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret


흔히 쇼핑몰이나 기타 웹사이트를 보면 selectbox 대분류 소분류로 나뉘어 대분류를 선택하게 되면
소분류는 대분류와 연관된 카테고리가 나오게 된다.

이런 기능을 데이터 형식은 json으로 처리를 하며 jquery getJSON 메소드를 이용하여 dynamic하게
소분류 카테고리를 만들어 본다.


그림1 첫 대분류 selectbox 화면



그림2 대분류 선택 이후 소분류 selectbox 추가된 화면


json 데이터 형식

[
     {"F_TMPL_CODE":"045001001093", "F_TMPL_NAME":"Dream"},
     {"F_TMPL_CODE":"045001001588", "F_TMPL_NAME":"Green Day"},
     {"F_TMPL_CODE":"045001001487", "F_TMPL_NAME":"Happy Day"},
      .......
     {"F_TMPL_CODE":"045001001487", "F_TMPL_NAME":"Happy Day"}
]


대분류 selectbox의 onchage이벤트 시 아래의 자바스크립트 함수를 호출하게 한다.

function fnLoad(obj)
{
     var select = document.createElement("select");    //selectbox 생성
     select.name = "soname";                                   //name지정  
     //현재 소분류 selectbox가 있는지 여부를 확인한다. 있다면 기존 selectbox remove
     if(document.getElementById("test").innerHTML != "")
          document.getElementById("test").removeChild(document.getElementById("soname"));
     
     //대분류에 대한 소분류 json데이터를 얻기 위하여 getJSON으로 호출
     $.getJSON("testURL.jsp?prodcode="+obj.value, function(data){
          $.each(data, function(index, entry){
               var objOpt = document.createElement("option");     //option Element생성
               objOpt.value = entry["F_TMPL_CODE"];                //entry는 호출된 data를 가지고 있다. 
               objOpt.innerText = entry["F_TMPL_NAME"];
               select.appendChild(objOpt);                                //생성된 select Element에 Option을 추가
          });
     });
     document.getElementById("test").appendChild(select);     //생성된 select Element를 test Div태그에 추가
}

getJSON에 대하여 더 자세히 알고 싶다면 아래 링크를 참조한다.
http://api.jquery.com/jQuery.getJSON/

아래는 HTML이다.

<!-- 대분류 -->
<select name="daename" onChange="ajaxLoadTmpl(this);">
<option value="" selected>상품분류</option>
<option value="0000001" >대분류1</option>
   ......
<option value="0000009" >대분류2</option>
</select>
<!-- 소분류 -->
<div id="test"></div>



 

신고

'javascript' 카테고리의 다른 글

자바스크립트 null & undefined  (0) 2011.02.21
dynamic selectbox with getJSON  (0) 2011.02.18
자바스크립트 문자열  (0) 2011.02.16
자바스크립트 숫자  (0) 2011.02.16

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret

문자열(string)은 Unicode문자나 숫자, 문장부호들의 시퀸스로 텍스트를 표현하는 자바스크립트 데이터 타입이다.

아래는 자바스크립트 문자열 표현방식이다.

""  //빈문자열
'abcde'
"1.0"
'name="form"'
"Can't you speak english?"
"This string\n has tow lines"

위 문자열에서 역슬래시 문자(\)는 자바스크립트 문자열에서 특별한 목적을 위해서 사용된다.
역슬래시 문자는 뒤따라 나오는 문자와 결합될 경우 다른 방식으로는 표현할 수 없는 문자를 표현하며
\n은 줄바꿈 문자를 나타내는 이스케이프 시퀀스이다.

아래는 자바스크립트 이스케이프 시퀀스표이다.
 시퀀스  표현하는 문자 
 \0  널 문자
 \b  백스페이스
 \t  수평 탭
 \n  줄바꿈 문자
 \v  수직 탭
 \f  폼 피드
 \r  캐리지 리턴
 \"  큰따움표
 \'  작은따옴표
 \\  역슬래시

문자열 조작
자바스크립트는 여러 문자열을 이어붙이는 것이 가능하다.
msg = "Hello" + "world"; //Hello world
msg의 문자열의 길이를 알고 싶다면 length프로퍼티를 사용한다.
msg.length;
msg의 마지막 문자를 가져오려면 charAt메서드를 사용한다.
msg.charAt(msg.length - 1);
msg의 두번째, 세번째 문자를 추출하려면 substring메서드를 사용한다.
msg.substring(1, 3);
msg내에서 첫번째 문자 'H'의 위치를 찾아내려면 indexOf메서드를 사한다.
msg.indexOf('H');

숫자를 문자열로 변환하기
간단한 방법은 숫자에 빈 문자열을 더하면 문자열로 변환된다.
var n = 100;
var s = n + "text";
명시적으로 숫자를 문자열로 변환하려면 String() 메서드를 사용한다.
var s = String(n);
다른 기법으로는 toString()메서드를 사용할 수 있다.
var s = n.toString();

Number클래스의 세가지 문자열 변환 메서드
toFixed()
숫자를 문자열로 변환하면서 소수점 이하 숫자로 지정된 개수만큼만 출력한다.
var n= 123456.789;
n.toFixed(0);      // "123457"
n.toFixed(2);      // "123456.79"
toExponential() 소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성된 지수 표기법을 사용하여 숫자를 문자열로 변환한다.
n.toExponential(1);     // "1.2e+5"
n.toExponential(3);     // "1.235e+5"
toPrecision() 지정된 수의 유효 숫자 개수만큼 숫자를 출력한다.
n.toPrecision(4);        // "1.235e+5"
n.toPrecision(7);        // "123456.8"

문자열을 숫자로 변환하기
문자열이 숫자 문맥에 사용되면 자동으로 숫자가 변환된다.
var p = "21" * "2";    //42
명시적으로 변환하려면 Number() 생성자 함수를 호출하면 된다.
var n = Number(string_value);
이외 parseInt()parseFloat()가 존재하며 그 방법은 아래와 같다.
parseInt("3 bind");           //3
parseFloat("3.14 bind");   //3.14
parseInt("3.14");             //3
parseInt("0xFF");            //255





신고

'javascript' 카테고리의 다른 글

dynamic selectbox with getJSON  (0) 2011.02.18
자바스크립트 문자열  (0) 2011.02.16
자바스크립트 숫자  (0) 2011.02.16
jQuery 1.5 Released  (0) 2011.02.06

WRITTEN BY
빵군
Web Programmer HOONS닷넷(http://www.hoons.kr) 2011 ASP.NET 시삽 http://about.me/y2kpooh

받은 트랙백이 없고 , 댓글이 없습니다.
secret