자바스크립트에는 상당히 특이하고 유용한 문법들이 많이 있다. 보기 좋은 사용 예 3항 연산과 조건부 할당 var value; // 방법 1 if (n) value = n; else value = 1; // 방법 2 var value = n ? n : 1; // 방법 3 var value = n || 1; 조건부 함수 호출…
iframe 내에서 밖으로, 또는 안에서 밖으로 자바스크립트 통신하기. While이 에 작성.
iframe 태그는 옛날 IE에서만 지원되던 문서 내에 가상의 프레임을 붙이는 태그로써 상당히 유용한 태그이다. 이 태그가 워낙에 유명하고 유용한 태그라서 추후에 웹표준으로 편입된 약간은 특별한 태그이다. 이 태그를 이용하면서 자동으로 세로 사이즈 조절이라던가 여러가지 밖과 안의 통신이 필요할때가 꽤 있다. 안에서 밖으로 함수 실행시키기 밖 문서 (body.html) <html> <head> <script type="text/javascript"> function callbackTest() { alert("body.html의…
모바일 브라우저 감지 스크립트 | Detect Mobile Browsers While이 에 작성.
홈페이지에서 아이폰 모바일, 안드로이드 브라우저, 돌핀 브라우저 등에서 접근하는 모바일 사용자들을 위해 모바일 전용 홈페이지를 만들었다고 가정하자. 이들을 어떻게 그 페이지로 안내할 것인가? 직접 모바일 페이지 주소를 대문에 떡하니 걸어놀 것인가, 혹은 자동으로 이동시켜 줄 것인가? 대부분은 후자를 선택할 것이고 그게 더 사용자 입장에서 좋을 것이다. 예전에는 간단하게 iPhone 과 Android 만 유저 에이전트에서 감지하여…
마우스 포인트 커뮤니케이터 – mmunicater While이 에 작성.
신기한 웹에 대한 자료를 많이 올려주시는 firejune님의 마우스 포인트 커뮤니케이터 – Smails를 보고 나도 jQuery와 Socket.io로 제작을 해보았다. 최대한 브라우저 자원을 효율적이게 사용하기 위해서 가로세로 10픽셀 이하의 작은 사각형으로 유저를 표현한다. 색상은 socket id 로 구분 짓는다. 한사람에 대해서 고유한 색상이 정해지지는 않는 방식이기에 이부분은 조금 아쉬운 부분이 있다. 예전에 socket.io 로 채팅방이라는 첫작품을 만든…
HTML5의 Notifications While이 에 작성.
데스크탑 컴퓨터에서는 알림 기능이 쓸모가 많다. 특히 메신저에서 제일 사용할 일이 많고 이메일 도착 알림등 상당히 유용하다. 이 기능이 HTML5 에서 포함되려고 하고 있다. 정식적으로 포함 된 것은 아니다. 구글에서 제시한 스펙으로, 현재는 구글크롬에서만 사용이 가능하다. 아래 버튼을 눌러 테스트를 해볼 수 있다. 소스 function clickTheButton() { if(!window.webkitNotifications) { alert("Notifications 를 지원하지 않는 브라우저입니다.") return…
자바스크립트로 150분만에 만든 “1 to 50″ 게임 While이 에 작성.
여러 사람들이 여러 플랫폼으로 1 to 50 게임을 공부용으로 만드는 것을 보고 나도 자바스크립트로 만들어 봤다. 사용 라이브러리는 jQuery 이다. jQuery 는 약간씩 다른 자바스크립트 엔진을 가지고 있는 웹브라우저들간에, jQuery 전용 함수를 통해 최대한 호환성을 제공 해준다. 예를 들자면 본문의 스크롤 길이를 측정하는 것이나, 특정 오브젝트의 좌표 픽셀 값이 각각 브라우저들간에 자바스크립트에서 쓰는 변수나 방법이…
X시간전, X분전, X초전 실시간 시간표현 자바스크립트 구현하기. While이 에 작성.
최근 SNS의 영향으로 많은 사이트에서 댓글이나 간단한 게시글의 작성 시간을 표현할때 몇시간전, 몇분전, 몇초전 등의 훨씬 인식하기 쉬운 시간표현을 하고 있다. 저번에 썼던, ‘최근에 내가 만드는 CMS’에서도 시간 표현에 그런 표현을 아주 많이 썼다. 많이 쓰다보니 쉽게 적용할 방법이 필요했고 그러다보니 쉽게 함수로 만들었다. 이 함수는 한 6개월전에 만들었다. 첨에 이런 함수를 쓰는 법에 대한…
아이폰용 웹페이지 개발 라이브러리, jQTouch While이 에 작성.
jQTouch Preview from David Kaneda on Vimeo. http://code.google.com/p/jqtouch/
SVG / VML 기술을 이용한 웹브라우저에서의 쉬운 벡터 처리 자바스크립트 라이브러리, raphael While이 에 작성.
http://raphaeljs.com/ 우선 우리나라에 자료는 별로 없습니다. 저 역시 SVG / VML 도 들어보긴 했지만 직접 사용해본적은 없습니다. 위 사이트에 들어가면 여러가지 놀라운 데모들을 볼 수 있습니다. http://www.blueb.co.kr/bbs.php?table=JS_16&category=VML VML 과 관련된 예제는 위의 링크에 많이 있습니다. 이게 디자인과 합쳐지면 HTML5에서 곧 지원하지 않게 될 플래시의 대안이 되겠네요 SVG는 이쪽. https://developer.mozilla.org/ko/SVG 덧붙여 http://www.blueb.co.kr/ 이 사이트도 볼게 많은…
여러 브라우저에서 Firebug 를, Firebug lite While이 에 작성.
http://getfirebug.com/firebuglite 미남이의 이러쿵저러쿵이라는 블로그를 우연히 발견하게 되어 이리저리 글을 계속 읽어보다가, SpriteMe 라는 사이트를 보게 됐고 여기서 이것저것 만지다보니 발견하였습니다. 파이어폭스 플러그인으로만 지원되던 Firebug 를 자바스크립트로 구현해 IE, Opera, Safari, Chrome 에서 firebug를 쓸 수 있게 하는 겁니다. 크롬의 경우 개발자툴이 내장되어있기 때문에 별 필요 없지만 IE의 경우 혼자서 렌더링엔진이 개판이기 때문에 평소에 이런 툴이…