WAI-ARIA의 tab, 아직 사용하긴 이르다. 라는 글을 썼었는데, 탭을 헤딩으로 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업을 위한 자바스크립트 라이브러리는 찾기가 어려워 하나 만들었다. 이름하여 flowTab. (기본적으로 자연스럽게 흐르는 컨텐츠를 탭 UI로 만든다 하여 이렇게 지었다.) 마크업과 자바스크립트를 아래 코드와 같이 작성하면 된다. <script type="text/javascript"> // <!– $(function() { $(‘#tabs’).flowTab(); // $(‘#tabs’).flowTab({tabSelector: ‘> .heading’}); }); [...]
‘JavaScript’ 태그의 글 목록
WAI-ARIA의 tab, 아직 사용하긴 이르다.
WAI-ARIA에는 다양한 위젯 – 여기서 위젯이란 tab, dialog, alert 등을 말한다. – 이 있는데 그 중 tab은 아직 조금 문제가 많은 것 같다. WAI-ARIA 저작 가이드 문서의 tab 부분을 보면 탭 인터페이스를 구현하는 방법을 자세히 소개하고 있는데 그 중 키보드 인터페이스에서 좌/우, Ctrl+Tab/Ctrl+Shift+Tab, Ctrl+PageUp/Ctrl+PageDown 키를 이용하여 탭과 탭을 이동하는 기능을 구현하도록 문서화되어 있는데 좌/우 키는 [...]
IE 자바스크립트 속도튜닝 계의 혁명(?), dynaTrace
dynaTrace는 웹 페이지의 서버 실행 시간, 페이지 렌더링 시간은 물론 자바스크립트 한 줄의 걸린시간까지 볼 수 있는 툴이다. 얼마전 자바스크립트의 실행속도 때문에 시름시름 앓다가 지인의 소개로 이 툴을 알게 된 후로 그런 고민들이 싹 사라졌다. 자바스크립트 속도 때문에 골치를 앓고 있는 이라면 당장 설치하길… 암튼 좀 짱임.
간단 단어 번역 북마클릿, inline translator
단어를 드래그, 더블클릭 등으로 선택하면 선택된 단어를 번역하여 보여주는 북마클릿, 이름하여 inline translator를 만들었습니다. 개인적으로 영문서 읽기 성공률을 올려보고자 만들었는데 생각보다 쓸만한 것 같아 공유해봅니다. :) Google AJAX Language API를 사용하였고 API 지원하는 모든 언어가 번역되어 보여집니다. 아래의 링크를 북마크에 추가하신 후 원하시는 페이지에서 실행하여 사용하시면 됩니다. ( IE7 이상과 파이어폭스, 오페라, 사파리 등의 최신 [...]
접근성을 해치지 않는 자바스크립트의 사용, 그 다음엔?
접근성을 해치지 않는 자바스크립트의 사용 신현석님의 접근성을 해치지 않는 자바스크립트의 사용이라는 글을 읽어보셨는지요? 혹시 어렵고 복잡하다고 생각하실지 모르나 자바스크립트 기술 위에 HTML 표준에 대한 이해가 수반된다면 크게 복잡한 과정이 아닙니다. 웹 사이트 개발에 들어가기 앞서 위의 과정을 이해하고 있다면 접근성을 해치면서(?) 사용하는 자바스크립트와 같은 비용으로 자바스크립트가 불가능한 환경의 접근성, 검색엔진 최적화(SEO) 등의 이득을 챙길 수 [...]
canvas와 VML을 통해 이미지를 둥글게…
요즘 웹에서 벡터 그래픽을 표현하는 방법에 대한 관심이 생겨 canvas, SVG, VML 등을 살펴보고 있습니다. SVG라는 표준이 있고 HTML5에는 canvas 요소가 기본적으로 들어가는데 일단 IE 때문에 표준으로 짜자잔이라던지 CSS background로 벡터 그래픽을 사용한다던지 하는 신나는 일은 나~중에나 될 것 같습니다만 자바스크립트를 통해 IR처럼 구현하는 건 가능할 것 같습니다. 컨텐츠를 HTML로 기본적으로 마크업한 뒤 자바스크립트로 갈아치우는거죠. [...]
Miya Validator 0.2 버전 출시.
Miya Validator에 몇가지 기능을 추가하여 0.2 버전을 공식배포합니다. 변경 사항 MiyaValidator 클래스의 add 함수와 addGroup 함수의 리턴값이 변경되었습니다. 특별히 폼 유효성 검사 외에 다른 작업을 하지 않으셨다면 사용상 변화된 점은 없습니다. add 함수의 리턴값 MiyaCondition의 instance에서 MiyaValidator의 conditions 변수의 해당 index값으로 변경 addGroup 함수의 리턴값 MiyaGroupCondition의 instance에서 MiyaValidator의 groupConditions 변수의 해당 index값으로 변경 추가 기능 [...]
겸손한 자바스크립트의 기본
겸손한 자바스크립트의 사전적인 의미는 문서(HTML)와 동작(자바스크립트)를 분리하는 것이지만, 그 이전에 기본은 자바스크립트를 사용하는 모든 경우에 대해 사용 가능한 경우와 가능하지 않은 경우를 염두하여 설계하는 것이다. 웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. [...]
1k DHTML API
1k DHTML API – document를 handling하는 여러가지 경우에 수에 대한 API를 제공한다. 종류로는… element 얻기 – gE element 보이고 숨기기(table 기반 레이아웃에는 적합하지 않다..) – sE, hE z-index style 지정 – sZ element의 left position set – sX element의 top position set – sY element의 가로길이 set – sW element의 세로길이position set – sH clip [...]
JavaScript/DOM 사용의 비기!..2
우리는 흔히 <script type="text/javascript"> 안의 내용을 다 자바스크립트(이하 JS)라고 생각한다. Document Object Model(이하 DOM)이라는 말 자체가 생소하게 느껴진다는 것이다. 어떤게 JS고 DOM인게 무슨 소용인가? 아니다. 활성화된 커뮤니티에서 문제를 해결할 수도 있겠지만, 그렇지 못할 때에는 매뉴얼을 보아야한다. 에러가 난 부분이 JS인지 DOM인지 알아야 매뉴얼을 찾아볼 수 있지 않겠는가? 분류는 쉽다! html element를 가리키면 DOM이고 아니면 JS다. [...]
JavaScript/DOM 사용의 비기!..1
JavaScript/DOM은 웹이라는 녀석에 기본적으로 포함되는 것이 아니다. 이 말인즉슨, 포함이 안될 경우도 있다는 것이다. 따라서, JavaScript/DOM 사용에 있어서, 포함이 안될 경우에는 어떻게 될것인가에 대한 고찰이 필요하다. 이렇게 얘기해서는 너무 복잡하게 생각될 수도 있겠다. 예를 한번 들어보자. 버튼을 누르면 폼을 서브밋하고 싶다.. 는 예를 들어보겠다. 편의상 일부 필수 태그는 누락시킨 점.. 이해해주시길.. :) <html> <head> <script [...]