var telValidate = function(event) {
    var key = window.event ? event.keyCode : event.which;
    //alert(key);
    var keychar = String.fromCharCode(key);
    //alert(keychar);
    var reg = /[0-9]/;
    //alert(reg.test(keychar));
    return reg.test(keychar);
};




HTML5 에서 input 의 type attribute value 로 'tel'가 있다(참고 : http://www.w3schools.com/html5/tag_input.asp). 모바일 브라우저 상에서 input에 포커싱이 되면 숫자패드가 떠오르고,'(, ), -' 만 입력이 가능해진다. 일반 부라우저에서야 뭐... ㅡ_-);;


자바스크립트(아니 프로그래밍 언어)에서 중요한 것 중 하나는

 '정규 표현식(Regular expression)'을 제대로 이해하고 활용하는 것.


아직 정규식은 어렵구나. 빠른 시일 내에 정규식에 대해서 정리를 한번 싸악 해봐야겠다.

2009년 5월 23일 토요일, 데브멘토에서 주관하고 있는 DTFE(개발자 페스티벌)의 세미나중 하나인 JavaFX(자바모델링, 윤익환님 강연) 세미나가 있어서 도곡역에 위치한 군인공제회 건물을 향했습니다. ㅡㅅ-);; 저 간판을 보고 잠시 방황했습니다. 표지판이 뭐 저래!!

이 건물에는 IBM이 입주해있습니다. ㅡㅅ-)>
IBM가 DTFE를 협찬하면서, 세미나 전후에 자사의 서비스 들을 소개하는 경우를 보게되는군요. 좋은 내용들이어서 크게 거부감을 느끼거나 하지는 않았습니다. ^^ 자~ 강연이 있는 21층(발송된 문자에는 71층!!! 이런 고층빌딩이!!)으로 향했습니다.
IBM 연구소에서 하는 강연이었기 때문에, 보시다 시피, IBM Badge가 있는 직원만 이용할 수 있다고 합니다. 그래서 세미나 참관객들이 엘리베이터에 타면, 진행요원들이 재빠르게 탑승해서 카드를 찍어주더군요. ㅎㅎ. ㅡㅅ-) 뭔가 있어보였어요.

이번에 IBM에서 밀고 있는 슬로건이더군요. 보다 스마트한(효율적이고 지능적인... 그런 느낌?) 시스템을 개발하여 지구를 바꿔보겠다는 그런 내용인 듯 했습니다. ㅎㅎ 여전히 영어가 짧은 관계로 대략 그런 느낌을 받을 뿐이었습니다. OTL... 세계 정복을 하기 위해서는 영어는 필수인 듯 합니다. 그런 다음에, 한국어를 세계 공통어로 만들어버리겠습니다. 훗~!!
관련내용 : http://www.ibm.com/ibm/ideasfromibm/us/smartplanet/topics/healthcare/20090223/index1.shtml


자~!! 세미나 현장으로 들어가볼까요~? ^^


먼저 IBM의 윤서익 차장님이 IBM의 SMARTER PLANET 에 대해서 설명하셨습니다. 좋은게 좋은거죠!!


조금 일찍 들어간 탓에 사람은 그렇게 많지는 않았습니다. 시작하기 직전에 우르르 올라오시더군요. ^^



제가 요즘 읽고 있는 더글라스 크락포드 님의 JavaScript The Good Parts 라는 책 입니다. 살짝 맛만 봤던 JavaScript의 정수를 모아놓은 자바 정석이라고 할 수 있겠군요. ㅡㅅ-);; JavaScript와 관련된 내용은 (http://java.ihoney.pe.kr/4)을 참조해주세요. ^^ 먼저 말씀드리자면, JavaFX를 제대로 활용하기 위해서는 스크립트 언어(제 생각에는 JavaScript를 기반으로 하는 듯)를 잘 익혀야 합니다.
저의 경우에는 OpenAPI를 이용해서 매쉬업 프로그램을 만들어보고 싶어서 뒤늦게 시작하고 있는데, 나쁘지 않은 선택인 것 같습니다. ^^ 여러분들도 JavaFX를 공부해보세요!!
자바스크립트 핵심 가이드
카테고리 컴퓨터/IT
지은이 더글라스 크락포드 (한빛미디어, 2008년)
상세보기



강연이 시작하기 전, 빔프로젝트가 뿌려주는 동영상에서는 반복적으로 'I'm IBMER'라고 외치더군요. ㅡㅅ-);; 머릿 속에 각인되어버렸습니다. 나도 아이비에머가 될 것 같아요. ㅎㅎ.


오늘 세미나 강연자인 고덕한 님입니다. 좋은 인상으로 말씀하시는게 상당히 리드미컬하시더군요. ^^ 22기 스터디 그룹을 모집하고 계시답니다(http://www.javamodeling.com/index.jsp). 관심있으신 분은 참석하여보시기 바랍니다. ^^; 세미나 자료를 얻고 싶어서 가입했는데 아직 관련한 자료는 안올리셨나봐요?


오늘의 주제인 JavaFX 입니다. JavaFX에 대해서는
http://www.sun.com/software/javafx/index.xml
http://www.javafx.com/
http://java.ihoney.pe.kr/9
http://java.ihoney.pe.kr/26
의 내용을 참조해 주세요. ^^


핸드폰으로 찍은 사진이라 화질이 좋지 못한 점은 양해 부탁드립니다. 강연을 마치고 나니까, 저도 스터디를 다시 시작해야겠구나라는 생각을 하게 되었습니다. ^^; 개인적으로 하고 있기는 하지만, 개인이 할 수 있는 것의 한계가 곧 나타날 것이고 그걸 극복할 수 있는 방법은 그룹 스터디를 통해서 다른 사람들과 지식을 공유하는 방법일 것입니다. 우선은 제가 있는 기술교육센터에서 다시한번 조성을 해봐야겠습니다. ^^

  전체적으로 유익한 강연이었습니다. JavaFX를 구현하는 방법을 조금이라도 감을 잡을 수 있었으니까요. 강연을 듣고 집에오자마자 netbeans를 설치하였습니다. NetBeans 설치방법은 (http://java.ihoney.pe.kr/35)을 참조하시면 손쉽게 하실 수 있을 겁니다. ㅡㅅ-) 어렵지 않아요. 다운 받아서 실행하고 다음다음~~만 눌러주시면 됩니다. ^^




이상으로 JavaFX 세미나에 관한 내용을 마칩니다. ^^
그럼 다음 글은 JavaFX를 이용해서 간단하게 구현한 것을 보여드리겠습니다. ㅡㅅ-)b

'Java > Language' 카테고리의 다른 글

09/05/22 쿠키  (0) 2009.05.25
허니몬, JavaFX 예제 만들기  (0) 2009.05.24
Java IDE, NetBeans를 설치하다.  (0) 2009.05.24
JavaFX SDK 1.1 설치하기  (0) 2009.05.24
j2ee API DOCs, 자바EE 한글화 API 문서(1.3.1 버전)  (0) 2009.05.21
   제가 만들고 싶은 것은 API를 이용한 매쉬업 형태로 개발을 해야할 것 같습니다. 그러기 위해서는 자바스크립트를 기반으로 하는 것이 좋을 듯 하구요. 과거에 단순히 복사하고 붙여넣기 방식으로 구현하면 된다고 생각했던 자바 스크립트였는데, 지금은 공부해야할 것이 자바 만큼이나 많은 분야가 되어버리는 군요. ㅡㅅ-); 그나저나... 스-);; 문제로군요. 우분투에서는 플래시로 작성되어 있는 영상들이 정상적으로 작동을 하지 않습니다. OTL... VirtualBox로 윈도우 XP를 사용하면서 시스템 자원이 모두 그쪽에서 점유하고 있어서 였을까요? 우분투 업데이트를 마치고 나니까 정상적으로 플래시에서 소리가 나는군요. 으흠!?

강연하시는 분(Douglas Crockford)의 블로그 : http://www.crockford.com/




이 글은, 제가 이해해서 올린다기 보다는 이해하기 위해, 올해 안에 공부해야할 것들 중 하나인 JavaScript 부분에 대한 내용을 기록해두는 것이라고 해도 될 것 같습니다. ㅠㅅ-) 공부해야할 것들은 점점 많아져 가고 머리에 주입할 수 있는 주입량은 한계가 있고... 이것 참 난감하네요. 매쉬업이 발달하면 하게 될수록 매쉬업 언어로서의 자바스크립트도 그 영역을 더욱 넓혀가게 될 것 같군요.
허니몬이 궁리하고 있는 오픈API를 이용한 웹애플리케이션 
'일명 미쓰리돌(http://www.ihoney.pe.kr/291)'
을 만들어 볼 준비를 하기 위해서 오픈API 관련한 자료 수집을 하는 과정에서 몇몇 Javascript를 활용하는 API들에서 JSON( JSON - WIKI )이라는 단어가 많이 노출되는 것에 신경이 쓰여서 나중에 JSON이라는 단어에 대해서 한번 알아보자하고 마음의 다짐만 하고 있었습니다.

  그런데 우연찮게 OKJSP(http://okjsp.pe.kr/, 허광남님 운영) RSS를 구독하는 중에 JSON이 보여서 한번 찾아봐야지 하면서 자료를 모으기 찾아보기 시작했습니다(P.S. 허광남님이 5월 10일 DTFE와 관련한 세미나 발표가 있으십니다. ^^ 사전등록 했는데 될런지 모르겠네요!!).

  현재까지의 대략적인 파악으로는 자바스크립트(Javascript)를 뛰어넘는 더 넓은 의미라는 것 밖에는 알 수가 없습니다(잠시 읽고 이정도만 깨우쳤어도 나름 성공아닐까요? ^^). 

  오늘 얼핏 감을 잡은 것으로는, 대부분의 OPENAPI 들이 HTML 에서 자바스크립트(Javascript)를 이용하여 OPENAPI 키와 데이터들을 받아서 가공하고 작동시킬 수 있다, 정도입니다. 2주간의 짧은 과정으로 HTML, CSS, Javascript를 배웠는데, 생각보다 Javascript는 심오함을 간직하고 있는 스크립트 언어입니다. 예전에는 원하는 기능을 구현하려고 소스를 단순히 붙여넣기만 했었는데 이제는 단순히 붙여넣기만 하는 것이 아니라, 소스를 읽고서 대략적으로나마 어떤 기능을 하는지 짐작을 할 수 있는 수준에 겨우 도달한 것 같기도 합니다.

제가 IT 관련한 길을 걷기로 한 이상, 끊임없는 배움의 의무(혹은 즐거움)를 짊어져야 하는 것에 대한 맛뵈기라고 할 수 있겠네요. ^^ 자~!! 저와 함께 JSON(요약하자면 자바스크립트 코딩스타일!?)의 세계로 풍덩 하고 빠져들어봅시다.

● Introducing JSON : http://www.json.org/
● '구글의 페이지 번역하기'로 번역된 페이지
● Introducing JSON 한국어 페이지 : http://www.json.org/json-ko.html아래 자료의 출처입니다.
● codeordie : JSON은 무엇인가? : http://http://www.codeordie.org/wiki/?WhatIsJson2

JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다. JSON은 완벽하게 언어로 부터 독립적이지만 C-family 언어 - C, C++, C#, Java, JavaScript, Perl, Python 그외 다수 - 의 프로그래머들에게 친숙한 관습을 사용하는 텍스트 형식이다. 이러한 속성들이 JSON을 이상적인 DATA-교환 언어로 만들고 있다.

JSON은 두개의 구조를 기본으로 두고 있다:

  • name/value 형태의 쌍으로 collection 타입. 다양한 언어들에서, 이는 object, record, struct(구조체), dictionary, hash table, 키가 있는 list, 또는 연상배열로서 실현 되었다.
  • 값들의 순서화된 리스트. 대부분의 언어들에서, 이는 array, vector, list, 또는 sequence로서 실현 되었다.

이러한 것들은 보편적인 DATA 구조이다. 사실상 모든 현대의 프로그래밍 언어들은 어떠한 형태로든 이것들을 지원한다. 프로그래밍 언어들을 이용하여 호환성 있는 DATA 형식이 이러한 구조들을 근간에 두고 있는 것은 당연하다.

JSON 에서, 이러한 형식들을 가져간다:

object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

array은 값들의 순서화된 collection 이다. array는 [ (left bracket)로 시작해서 ] (right bracket)로 끝내어 표현한다. , (comma)로 array의 값들을 구분한다.

value는 큰따옴표안에 string, number ,true ,false , null, object ,array이 올수 있다. 이러한 구조들을 포함한다.

string은 큰따옴표안에 둘러 싸인 zero 이상 Unicode 문자들의 조합이며, 쌍다옴표안에 감싸지며,backslash escape가 적용된다. 하나의 문자(character)도 하나의 문자열(character string)로서 표현된다. string은 C 또는 Java 문자열 처럼 매우 많이 비슷하다.

number는 8진수와 16진수 형식을 사용하지 않는것을 제외하면 C와 Java number 처럼 매우 많이 비슷하다.

토근들의 어떤 쌍 사이에 공백을 삽입할수 있다. 드물게 encode된 세부 항목을 제외하면, 이렇게 설명된 JSON의 형식은 완벽하게 그 언어를 설명한다.



자료출처 : http://www.codeordie.org/wiki/?WhatIsJson2

JSON

Table of Contents

JSON은 무엇인가?

  1. JSON은 무엇인가?
    • 경량의 데이타 교환 포맷이다.
      > XML과 비교한다.
    • 간단한 포맷
      > 사람들을 위해 읽고 쓰기가 쉽다.
      > 기계들을 위해 분석과 생성이 쉽다.
    • JSON은 텍스트 포맷이다.
      > 언어에 독립적으로 프로그래밍된다.
      > 프로그래머들에게 잘 알려진 C,C++,C#,Java,JavaScript,Perl,Pyton을 포함하는 C와 유사한 언어로 모여서 사용된다.
  2. XML을 넘어 왜 JSON인가?
    • on-the-wire(선을 통한) 데이타 포맷인 XML보다 가볍고 빠르다.
    • JSON 오브젝트는 XML 데이타가 타입이 없는데 비해 타입을 가진다.
      > JSON types : string, number, array, boolean
      > XML 데이타는 모두 String 이다.
    • JavaScript 코드를 위해 Native 코드포맷이다.
      > Data는 사용자의 JavaScript코드 안에서 JSON 객체에 접근이 쉽다.
      XML 데이타가 해석과 장황한 DOM API를 통해 변수에 접근하는 것을 필요로 하는데 비해 
      > 회수한 값들은 사용자의 자바스크립트 안의 객체속성에서 읽기가 쉽다.
  3. JSON은 어디에서 사용되는가?
    • 구성정보를 나타낸다.
    • 통신 프로토콜을 실행한다.

JSON Object

  1. JSON 구조
    • name/value 쌍으로 구성된다.
      > 여러가지의 언어들에서 object, record, struct, dictionary, hashtable, 키를 가지는 리스트, 배열집합 처럼 얻어진다.
    • 값들이 리스트는 순서가 있다.
      > 대부분의 언어들에서 array, vector, list, sequence 처럼 얻어진다.
    • JSON은 대부분의 지금의 언어를 통해 일반적인 데이타구조들이 지원된다.
  2. JSON Object 표기법
    • JSON Object는 name/value 쌍의 set은 순서가 없다.
    • JSON Object는 { 로 시작하고 } 로 끝난다.
    • 각각의 이름은 : 와 ,로 구분된 name/value 쌍의 형식을 따른다.
  3. JSON과 JavaScript
    • JSON은 JavaScript의 객체 문자 표기의 부분집합이다.
      > JSON은 JavaScript안에서 혼란스럽거나 야단스럽지 않게 사용될 수 있다.
  4. JSON Object 예제
      var myJSONObject = {"bindings": [     {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},     {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},     {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}   ] }; 
    • 위의 예에서, JSON JavaScript 객체는 세개의 객체를 포함한 배열을 갖고있는, 각각은 "ircEvent","method","regex" 멤버들을 포함한 하나의 멤버 "bindings"를 포함하여 생성된다.
    • 멤버들은 점(.) 이나 그아래 지시자들로 회수 할수 있다.
        myJSONObject.bindings[0].method // "newURI" 
  5. JavaScript 코드안에서 Text를 Object로 변환하기
      var myObject = eval('(' + myJSONtext + ')'); 
    • eval() 함수를 사용하여, JSON text를 JSON 객체로 변환한다.
      > eval()은 JavaScript 컴파일러에서 실행한다.
      > JSON은 JavaScript의 서브셋으로 적합하다. 컴파일러는 text를 정확하게 변환하고, 객체 구조를 만든다.
  6. 보안 & JSON Parser
      // Include http://www.json.org/json.js var myObject = myJSONtext.parseJSON(); 
    • eval()은 컴파일 할 수 있고, 어떤 JavaScript 프로그램에서도 실행된다. 그래서 보안 이슈들(cross-site scripting)을 가질 수 있다.
      > 소스를 신뢰할 수 있을때, eval()을 사용해라.
    • 보안이 염려될 때 - 소스를 신뢰할 수 없을때 - JSON parser를 사용하는게 낫다.
      > JSON parser는 JSON text를 승인할 수 있다. 그래서 좀더 안전하다.
  7. Object를 Text로 변환하기
      var myJSONText = myObject.toJSONString(); 
    • 사용자는 JSON 객체를 JSON text로 변환할 수 있다.
    • JSON은 주기적 데이타 구조를 지원하지 않는다.

      > Do not give cyclical structures to the JSON stringifier
      > 주기적 구조들을 JSON stringfier로 줄수 없다

Java 안에서의 JSON

  1. 자바 개발자를 위한 JSON Tools
    • Parser
      > JSON text 파일들을 해석하고, 그들을 자바 모델로 변환한다.
    • Renderer
      > 자바를 text로 표현하게 한다.
    • Serializer
      > 알기쉬운 POJO clusters를 JSON 표현으로 나열한다.
    • Validator
      > JSON 스키마를 사용하여 JSON 파일의 내용을 유효한지 체크한다.
  2. JSONObject 자바 클래스
    • JSONObject의 name/value 쌍의 집합은 순서가 없다.
    • put 메소드는 객체로 name/value쌍을 add 한다.
    • text들은 JSON syntax rules을 정확히 따른 toString 메소드에 의해 만들어진다.
        myString = new JSONObject().put("JSON", "Hello, World!").toString(); // myString is {"JSON": "Hello, World"} 

클라이언트와 서버사이드 양쪽에서 JSON 데이타를 주고 받는 방법

  1. 서버사이드에서 JSON 데이타를 생성하고 보내는 방법
    • JSONObject 자바 객체를 생성한다.
    • put 메소드를 사용하여 name/value 쌍을 add한다.
    • toString 메소드를 사용하여 String 타입으로 변환한다.
      그리고 "text/xml" 또는 "text/plain" 처럼 content-type과 함께 클라이언트로 보낸다.
        myString = new JSONObject().put("JSON",toString(); // myString is {"JSON": "Hello, World"} 
  2. 클라이언트 사이드에서 JSON 데이타를 받는 방법
    • JSON 데이타는 String 처럼 반환된다.
    • JavaScript 코드안에서 JSON 객체를 만들수 있게 eval()을 호출한다.
      > var JSONdata = eval(req.response.Text);
    • 사용자는 한번 JSON 객체를 가질수 있고, 객체의 속성들에 접근하기 위해 . 을 사용할 수 있다.
        var name = JSONdata.name; var address = JSONdata.addresses[3]; var streetname = JSONdata.addresses[3].street; 
    • 클라이언트 사이드에서 JSON 데이타를 생성하고 보내는 방법
    • JSON 자바스크립트 객체를 생성한다.
    • XMLHttpRequest객체의 open 메소드 안에 "POST" HTTO 메소드를 사용한다.
    • XMLHttpRequest객체의 send 메소드안에서 JSON 자바스크립트 객체를 패스한다.
        var carAsJSON = JSON.stringify(car); var url = "JSONExample?timeStamp=" + new Date().getTime(); createXMLHttpRequest(); xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(carAsJSON); 
  3. 서버사이드에서 JSON 데이타를 받는 방법
    • String 타입처럼 JSON데이타를 읽는다.
    • string으로부터 JSONObject 자바객체를 생성한다.
        String json = readJSONStringFromRequestBody(request); //Use the JSON-Java binding library to create a JSON object in Java JSONObject jsonObject = null; try { jsonObject = new JSONObject(json); } catch(ParseException pe) { } 

리소스들

  1. JSON 리소스들
    • Introducing JSON
    > http://www.json.org/
    • JSON in JavaScript
    > http://www.json.org/js.html
    • JSON in Java
    > http://www.json.org/java/index.html

참고문헌

문서에 대하여

최초작성자 : 난다
최초작성일 : 2007년 4월 17일
버전 : 0.1



+ Recent posts