본문 바로가기

JSON9

jQuery.parseJSON(), JSON 문자열을 JavaScript object로 변환 jQuery.parseJSON() 원문 링크 http://api.jquery.com/jQuery.parseJSON/ jQuery.parseJSON( json )Returns : Object 개요 : well-formed JSON 문자열을 JavaScript object 로 반환합니다. jQuery.parseJSON( json ) json JSON 문자열 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception을 발생시킵니다. 아래에 잘못된 JSON 형식을 설명합니다. {test: 1} 쌍따옴표를 사용하지 않았음 {'test': 1} 쌍따옴표로 사용해야 함 인자가 없거나 빈 문자열, null, undefined를 사용하여 호출하면, 'null' 이 반환됩니다. jQuery 브라우저의 기본 방식인 .. 2012. 7. 2.
jQuery.getJSON, JSON 데이터를 로드 jQuery.getJSON() 원문 링크 http://api.jquery.com/jQuery.getJSON/ jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )Returns : jqXHR 개요 : HTTP GET 방식 요청을 통해 서버로부터 받은 JSON 데이터를 로드합니다. jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) url 정보를 요청할 URL data 서버로 보낼 data success(data, textStatus, jqXHR) 요청이 성공하면 실행될 콜백 함수 이 함수의 가장 간단한 사용법은 아래와 같습니다. $.ajax({ url: url, data.. 2012. 7. 2.
[javascript] AJAX + JSON 의 eval() 함수 사용의 문제 상품등록 화면을 ajax로 처리하다 보니 데이터의 자료구조를 잘 만들어야 할 필요가 있다. 그래서 json 의 사용.. 배열과 크게 다를건 없지만 걍 객체지향 냄새가 좀더 난다는거.. 그리고 배열 요소(인덱스) 처리하느라 골머리 썩지 않는 점은 참 좋다. 직관적이기도 하고.. 그런데 json 데이터를 객체화 하기 위해 자바스크립트의 eval! 메소드를 사용해야 하는데.. 이게 악성코드를 실행시킬 위험이 있단다. 그래서 json.org/json2.js 배포파일이 필요하게 됬다. 더 상세한건 http://blog.outsider.ne.kr/257 요분의 포스팅이 참 도움이 된다. 땡큐베리 감사... 어찌됬든 eval!(o.responseText) 가 아닌 JSON.parse(o.responseText)로.. 2011. 1. 19.
[자바스크립트] 탭 메뉴 만들기 이 글은 다음 블로그에 있던 포스팅을 재 정리 한겁니다. 그쪽이 워낙 개판으로 정리가 안되어 있어서요. 이번에는 간단하게 탭 메뉴를 만들어 보겠습니다. 실제로는 메뉴가 아니고 탭을 선택하면 공통영역에 콘텐츠를 바꾸는 아주 소스가 널려있는 그 기능. 실제로는 별게 아닙니다. 자 데모를 작동해 보시죠. 데모 보기(탭 메뉴를 클릭하시거나 마우스를 올리시면 작동합니다. 이미지는 깨질 수 있습니다.) 동적으로 사용할 수 있도록 구성해 보았으니 한번씩 써보시고 문제가 있거나 개선점이 있으면 피드백하셔도 됩니다.(사실 제이쿼리는 롤링이나 탭 기능을 합쳐 놓았습니다. 그게 훠얼씬 사용하기 쉽죠. ^^;; ) 위 이미지와 같이 각 사이트명 또는 숫자에 마우스를 올리거나 클릭하면 하단의 영역이 바뀝니다. 따로 설명하지 않.. 2010. 12. 29.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - 번외편(?) 이번 포스팅은 이전 4번의 포스팅으로 마무리 지었던 소스에 몇가지 기능을 더 추가한 버젼입니다. 멋지게 표현하면 스핀오프 시리즈라고 할까요? ^^ 상세보기에서 이전글/다음글을 볼 수 있는 기능과 썸네일 보기에서 핸들을 잡고 움직이면 콘텐츠가 움직이는 기능입니다. 모두 제가 이전에 포스팅 했던 소스들을 그대로 사용을 했으며 따로 보시길 원하시면 WEB > Javascript 카테고리에 보시면 있습니다. 혹시 모르니 제일 아래쪽에 링크도 쏴 드리죠. 결코 조회수를 늘리기 위함이 아닌... 하하하;;; 자 이제 미리보기를 통해 사용할만 하신지 확인해 보세요. 데모 실행해보기(실제 작동되는 예제입니다. 리스트/상세/썸네일 보기를 클릭해 보세요. 이미지는 깨질 수 있습니다.) 원래는 width가 935 픽셀이였는.. 2010. 12. 29.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #4 4번째 포스팅이네요. 이번에는 죽이되든 밥이되든 마무리 하려 합니다. 사실 많이 부족한 내용으로 될 거 같은데요. JSON데이터를 이용해서 다양한 모양의 스킨에 뿌리는 것이 주 목적이었기 때문에 일단은 그에 대한 내용만 구성하기로 했습니다. 안쪽에 위치한 콘텐츠에 대한 스크립트 까지 다 작성해서 포스트를 구성하려면 책 한권은 나오겠더군요. 물론 과장 쪼끔 했습니다. 하하. 그래서 이번 포스팅에서는 상세보기의 좌우 화살표, 썸네일보기의 하단 스크롤바에 대한 내용은 포함되지 않았습니다. 나중에 제가 작업을 한 후에 따로 링크를 걸어드리겠습니다.(사실 저도 이걸 써야 되거든요 ^^) 자 그럼 본론으로 돌아가서 저번 포스팅까지 왠만큼은 그럴싸하게 구성했었습니다. 못보신 분들을 위해 링크 올려드립니다. 2010/.. 2010. 12. 27.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #3 이번 포스팅에서는 실제로 데이터를 만들고 실제로 구동할 수 있는 함수들을 만들어 보도록 하겠습니다. 실제로 데이터들을 접근하고 원하는 위치에 데이터를 노출시키는 작업이 되겠습니다. 들어가기에 앞서 이번 스크립트는 아주 협소한 코드로 짜여 질것이며, 단순히 현재 화면을 구현하고 테스트하기 위한 소스가 될것입니다. 마크업과 JSON 데이터를 변형시키겠습니다. 마크업에 대해서는 아래 코드와 함께 설명을 드리겠습니다만 그림도 같이 들어갈 수 있겠네요. JSON 데이터는 실제로 나올 데이터를 예제로 만들어서 사용하겠습니다. 보시면 이해가 빠르실것 같습니다. 먼저 JSON 데이터를 보도록 하겠습니다.(너무 길어서 토글로 처리합니다.) [열기] var datas = { config : { jsonName : "dat.. 2010. 12. 22.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #2 이번에는 프로토타입 수준의 코딩을 하겠습니다. 이번 포스팅을 제외하고 앞으로 2번정도(#4가 되면) 더 글을 남길까 합니다. 저도 구현하는 대로 포스트를 남기는 상태라 조금 미흡하더라도 너그러이 채찍질을... 앗 따거.. 그럼 일단 마크업과 CSS 를 보겠습니다. 따로 설명을 드리진 않습니다. 별게 없어서요. 그냥 스타일 시트와 HTML 뿐입니다. 마크업입니다.(소스코드는 하단 첨부파일로 대체 하겠습니다. 페이지 로딩이 너무 오래 걸리네요. syntaxhighlight가 힘들어 합니다.) ◀ ◀▶ 1/4 크게 마루 밑 아리에티분 류애니제 작지브리 스튜디오(일본)개 봉2010. 09줄거리10cm 소녀 아리에티, 마루 위 인간 세상으로 뛰어들다! 교외에 위치한 오래된 저택의 마루 밑에는 인간들의 물건을 몰래.. 2010. 12. 20.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - #1 이번 포스팅은 자바스크립트를 이용하여 사용자 보기(뷰)를 변환해서 보여주는 내용입니다. 마땅한 제목이 생각나지 않아서 포스팅 제목이 난해합니다. 추후에 바람직하고 간단한 제목으로 바꼈으면 합니다. 어떤분이든 제시 좀 해주세요. ^^;; 제목보다는 위 이미지를 보면 이해하기 쉽습니다. 각 리스트, 상세, 썸네일 보기 별로 모양이 달라지게 하는 내용입니다. "어~ 이거뭐야. 이거는 지금도 다 되고 있잖아~" 라고 하셔도 할말이 없습니다. DB에서 꺼내진 데이터를 각 스킨에 맞게 처리한 후 각 보기별로 display 속성을 제어해서 보여주면 되겠지요. 물론 대부분 작업이 그렇게 되어져 있습니다. 그런데 여기서는 DB에서 꺼낸 데이터를 JSON에 담아놓고 자바스크립트를 이용해서 선택된 보기에 맞게 모양을 바꾸려.. 2010. 12. 20.

티스토리툴바