본문 바로가기

javascript

Underscore.js를 이용하여 javascript Array Merge하기 기존 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 }]; 신규 Arrayvar inp = [{"KEY": "D", "VALUE" : 44 },{"KEY": "E", "VALUE" : 5 }]; 신규 Array의 각 Object의 "KEY"값을 기준으로 기존 Array를 추가하거나 변경하는 작업으로 원하는 결과 값.. 더보기
자바스크립트로 폰트설치 여부 확인 jquery.font.js 솔루션 팀장님께서 자바스크립트로 폰트설치 여부 확인할 수 없냐고 물어보셨다. 나는 당연히 안된다고 얘기를 했다. 자바스크립트는 보안문제로 PC 리소스를 접근할 수 없다 라는 논리였다. 하지만 찾아보니 있더라... jquery.font.js ^^; 해당 라이브러리도 PC 리소스를 접근해서 폰트설치 여부를 확인하는 것은 아니다. 소스를 분석해보니 p태그에 font를 지정 후 해당 p태그의 사이즈를 구한다. 그러면 해당 font가 존재하게 되면 사이즈가 폰트별로 크기가 다르고 폰트가 존재하지 않을 경우 해당 크기는 동일한 사이즈가 나온다. 테스트 결과 모든 브라우저에 동작한다.(솔직히 IE6만 확인했다. ^^;) jquery.font.js 소스 일부//default font var .. 더보기
유용한 자바스크립트 함수들 요즘 자바스크립 공부를 하고 있는데... 아 정말 어렵다. 아래 내용은 책 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(.. 더보기
Sencha Touch 1.1 Release with BlackBerry Support 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 배열 메서드 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.rev.. 더보기
WebApps FUTURECON 2011 서울 후기 WebApps FUTURECON을 다녀왔다. 빠르게 발전하고 있는 웹기술을 경험하고자 하는 사람들로 행사장 안은 많은 개발자 및 그외 디자이너 분들로 만원을 이루었다. 5개의 세션으로 진행이 되었으며 세션순서와 발표자는 아래와 같다. 세션1 2011년 HTML5 기술 현황 및 전망 2011년은 모바일 및 웹개발에 엄청 중요한 한해가 될 것이며 각종 HTML5 스펙이 고도화 되는 시기일 것이다. 현 업계의 동향을 보면 RIA 플랫폼이라고 자청하는 플래시, 실버라이트 등의 기술은 공개표준이 아니어서 한계를 가질 수 밖에 없다. 하지만 HTML5는 W3C에서 재정한 공개표준안이다. 다양한 모바일 디바이스와 다양한 모바일 플랫폼의 출현으로 기존 기술로는 한계가 있으며 HTML5가 해결방안이다. 스티브잡스가 플래.. 더보기
자바스크립트 기본타입과 참조타입 자바스크립트에서 기본 규칙은 다음과 같다. 기본타입은 값에 의해서 조작되고 참조 타입은 참조에 의해서 조작된다. 숫자와 불리언 타입은 기본타입이며 객체는 참조 타입이다. 객체의 특수한 종류인 배열이나 함수도 마찬가지로 참조 타입이다. 문자열도 기본타입으로 취급된다. 값에 의한 데이터 조작과 참조에 의한 데이터 조작의 예를 살펴보자. 값에 의한 데이터 조작의 예 // 먼저, 값에 의한 복사를 보여준다. var n = 1; // 변수 n은 값 1을 담는다. var m = n; // 값에 의한 복사. 변수 m은 별개의 값 1을 담는다. //값에 의한 전달을 보여 주는 용도로 사용할 함수 function add_to_total(total, x) { total = total + x; // 이 줄은 total의 내.. 더보기
자바스크립트 null & undefined null 자바스크립트 키워드 null은 아무런 값도 나타내지 않는 특수한 값이다. null은 보통 객체타입의 특수한 값, 즉 어떠한 객체도 나타내지 않는 값으로 취급된다. null은 다른 모든 값들과 구분되는 고유한 값이다. 어떤 변수가 null 값을 가지면 그 변수가 유효한 객체나 배열, 숫자, 문자열, 또는 불리언 값을 담고 있지 않다는 것을 알 수 있다. null은 불리언 문맥에서 사용되면 false, 숫자 문맥에서는 0, 문자열 문맥에서는 "null"로 변환된다. undefined 자바스크립트에서 종종 사용되는 또 다른 특수한 값으로 undefined 값이 있다. undefined는 선언은 되었지만 값이 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 반환되는 값이다.. 더보기
dynamic selectbox with getJSON 흔히 쇼핑몰이나 기타 웹사이트를 보면 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":.. 더보기
자바스크립트 문자열 문자열(string)은 Unicode문자나 숫자, 문장부호들의 시퀸스로 텍스트를 표현하는 자바스크립트 데이터 타입이다. 아래는 자바스크립트 문자열 표현방식이다. "" //빈문자열 'abcde' "1.0" 'name="form"' "Can't you speak english?" "This string\n has tow lines" 위 문자열에서 역슬래시 문자(\)는 자바스크립트 문자열에서 특별한 목적을 위해서 사용된다. 역슬래시 문자는 뒤따라 나오는 문자와 결합될 경우 다른 방식으로는 표현할 수 없는 문자를 표현하며 \n은 줄바꿈 문자를 나타내는 이스케이프 시퀀스이다. 아래는 자바스크립트 이스케이프 시퀀스표이다. 시퀀스 표현하는 문자 \0 널 문자 \b 백스페이스 \t 수평 탭 \n 줄바꿈 문자 \v 수직.. 더보기