본문 바로가기

JavaScript13

parseInt() 함수가 이상해~ 바코드 관련 작업 중에 넘어온 바코드 정보인 문자열을 정수로 바꿔야 해서 아래와 같이 했다. var t = document.getElementById("txtBarcode"); //바코드 값이 들어오는 텍스트 박스임 if(t == undefined || t == "") return; alert(t); var no = parseInt(t); alert(no); 바코드 값은 문자열로 '00000000162" 였다. 당연히 t='00000000162' 고 no=162 이어야 하는데 아래같이 엉뚱한 값이 나왔다. 순간 당황~~ 응? 이건 뭐야? 하다가 찾아봤더니 문자열 앞에 000 으로 값이 채워져 있어서 이 놈이 162가 8진수 값인지 알았던 것. parseInt에 2번째 인자에 값을 줄 수 있었다는. 아래처.. 2011. 7. 12.
jQuery 를 이용한 슬라이드 이미지 이번 포스팅은 이전에 제가 제작한 jQuery 를 사용하지 않은 자바스크립트 이미지 슬라이더에 버그가 있어서 jQuery 를 사용한 슬라이드를 긴급 제작하여 쓰는 글입니다. 역시 안정적인 라이브러리를 사용하는게 아주 중요합니다. ^^;; 음 그런데 한가지 제약이 있습니다. 이 스크립트를 사용하기 위해서는 HTML 과 StyleSheet 를 어느정도 수준으로 구사하실 수가 있어야 합니다. 그 부분까지 모두 다 설명드릴 수는 없는 점 양해 부탁드립니다. 일단 데모부터 확인해 주세요. 미리보기 jQuery.banner.js 파일이 필요합니다. 이 파일도 다운받아 적절한 위치에 가져다 놓으셔야 합니다. 소스는 하단에 첨부하겠습니다. 일단 사용법을 말씀드리면.$(function() { $("#image_list_.. 2011. 1. 22.
[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.
[자바스크립트] 숫자에 콤마 붙이기 //콤마 붙이기 function numberComma(o) { var nocomma = o.value.replace(/,/gi,''); // 불러온 값중에서 컴마를 제거 var b = ''; // 값을 넣기위해서 미리 선언 var i = 0; // 뒤에서 부터 몇번째인지를 체크하기 위한 변수 선언 // 숫자를 뒤에서 부터 루프를 이용하여 불러오기 for (var k=(nocomma.length-1); k>=0; k--) { var a = nocomma.charAt(k); if (k == 0 && a == 0) { // 첫자리의 숫자가 0인경우 입력값을 취소 시킴 o.value = ''; return; }else { // 뒤에서 3으로 나누었을때 나머지가 0인경우에 컴마 찍기 //i가 0인 경우는 제일 뒤.. 2011. 1. 19.
jQuery 쉽게하기 - 기본부터 시작하자, 함수(Function) 편 함수(Function)란 객체의 행동을 나타내는 일련의 과정을 프로그램으로 표현한 것입니다. 즉 영어문법으로 보자면 동사가 됩니다. "~을 실행하다"의 의미로 받아 들이시면 됩니다. 모니터를 예로 들어볼까요. 모니터는 화면, 전원 단자, 비디오 단자, 파워버튼 등으로 이루어져 있습니다. 이것들이 모니터의 속성(Properties)이죠. 그럼 모니터로 할 수 있는 일을 정리해 보면 "화면을 표시한다" 라는 중요한 기능외에 "각도를 조절한다.", "밝기를 조절한다." 등의 부가기능들이 있습니다. "화면을 표시한다"라는 기능을 구현하기 위해 그 안에 뭔가 처리를 해야 합니다. 이런 일련의 내용들을 함수를 구현한다 정도로 정리가 되는 것 같습니다. 괜히 사족을 달아서 더 어려운 개념처럼 만든건 아닌가 모르겠네요.. 2011. 1. 18.
jQuery 쉽게하기 - 기본부터 시작하자, 배열(Array) 편 배열(ARRAY)은 프로그램을 배우기 시작하는 분들을 좌절시키는 첫판왕정도 되는 것 같습니다. "프로그램 별거 아니네"라고 방심하고 있다간 크리티컬 데미지 맞고 피 채울 시간도 없을지 모릅니다 ^^. 반 농담이구요. 배열을 만나면서 for Loop 도 의미있게 사용하게 되고 메모리에 대한 내용도 같이 엮여서 복잡해 지기 시작하죠. 그냥 그렇다구요 ^^;. 자 이번에는 JavaScript 의 Array 에 대해서 보도록 하겠습니다. ARRAY : 배열 자바스크립트의 배열은 몇 가지 내장 함수를 가진 변경 가능한 리스트(mutable lists) 입니다. 요 부분은 string 편에서 말씀드린 immutable 과 비교하시면서 보시면 될 거 같습니다. 자바스크립트의 배열 선언은 아래와 같이 합니다. var .. 2011. 1. 18.
[자바스크립트] Apple.com의 슬라이드 갤러리 애플 사이트의 구성중 하나인 슬라이드가 되는 이미지 갤러리를 구현해 봤습니다. 예제를 먼저 보실 수 있습니다. 배경색, 이미지 깨짐이 발생할 수 있습니다. 미리보기 CSS와 마크업을 조금 다듬으면 좀더 보기 좋을것 같습니다. 코딩은 간단하니 소스를 직접 참고하시면 되겠습니다. 소스는 첨부합니다. 그럼 즐프하세요~~ 2011. 1. 14.
JQuery 쉽게하기 - 시작하기에 앞서 JQuery는 자바스크립트 라이브러리입니다. 라이브러리란 소프트웨어를 제작할 때 빈번히 쓰이는 기능들을 모아서 사용할 수 있도록 먼저 작업을 해 놓은 겁니다. 쉽게 말하면 자주 쓰는 함수들을 모아놓은 거죠. 조금 더 들여다보면 라이브러리를 사용함으로써 얻을 수 있는 이점들이 상당히 많습니다. 그런 내용들은 이미 많이 언급되어 있기 때문에 지면을 할애 하면서 기재하지 않겠습니다. 저는 JQuery를 잘 사용하지 않습니다. 이 라이브러리는 이전의 자바스크립트 라이브러리인 yui, prototype, dojo 들 보다 인기가 있는것 같습니다. 이 라이브러리들을 모두 사용해 보지 않았기 때문에 그들에 대한 장단점을 말할 수는 없습니다. 개발자 개인의 평가 또는 이전에 개발된 소스에 포함된 프레임워크를 접하면서 .. 2011. 1. 6.
[자바스크립트] JSON 데이터를 이용한 컨텐츠 노출 스킨 변경 - 번외편(?) 이번 포스팅은 이전 4번의 포스팅으로 마무리 지었던 소스에 몇가지 기능을 더 추가한 버젼입니다. 멋지게 표현하면 스핀오프 시리즈라고 할까요? ^^ 상세보기에서 이전글/다음글을 볼 수 있는 기능과 썸네일 보기에서 핸들을 잡고 움직이면 콘텐츠가 움직이는 기능입니다. 모두 제가 이전에 포스팅 했던 소스들을 그대로 사용을 했으며 따로 보시길 원하시면 WEB > Javascript 카테고리에 보시면 있습니다. 혹시 모르니 제일 아래쪽에 링크도 쏴 드리죠. 결코 조회수를 늘리기 위함이 아닌... 하하하;;; 자 이제 미리보기를 통해 사용할만 하신지 확인해 보세요. 데모 실행해보기(실제 작동되는 예제입니다. 리스트/상세/썸네일 보기를 클릭해 보세요. 이미지는 깨질 수 있습니다.) 원래는 width가 935 픽셀이였는.. 2010. 12. 29.
[자바스크립트] 이미지 슬라이드 이 자료는 현재 버그가 있습니다. 버그가 수정되기 전까지는 추천드리지 않습니다. 필요하시면 아래 링크의 다른 글을 참고하시기 바랍니다. jQuery 를 이용한 이미지 로테이트 이미지가 슬라이딩 되는 자바스크립트입니다. 아래 예제를 보시면 됩니다. 이미 Jquery 를 이용해서 많이들 사용하시고 계신데요. 저는 Jquery를 사용하지 않고 짜봤습니다. 공부하실 목적이나 JQuery 프레임워크가 부담스러우신 분들 사용하시면 되겠습니다. 미리보기 이 소스는 다음 블로그에 상세히 설명을 했던 소스입니다. 파일은 첨부합니다. 첨부된 파일의 이미지 경로 부분은 환경에 맞게 수정해서 사용하셔야 합니다. 아~ 그리고 파일 타입은 ANSI타입입니다. 위 예제는 UTF-8입니다. 한글이 깨지길래 인코딩을 바꿔서 하나 더 .. 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.

티스토리툴바