나를 찾는 아이 - Simple is the best, Go to basic

자바스크립트는 브라우저마다 DOM 아주 세세하게 조금씩 달라서 버그찾기가 만만치 않습니다.


오늘은 document.documentElement.scrollTop 라는 속성을 사용하여 자바스크립트함수를 구현하고 있었습니다.

IE quirks 모드에서는

document.documentElement.scrollHeight 이 속성을 대체하여

document.body.scrollHeight 를

document.documentElement.scrollTop 이 속성을 대체하여

document.body.scrollTop 를 사용해야 합니다.

IE standard 모드에서는 걱정이 필요없지요.



그래서 무난하게 document.documentElement.scrollTop 을 사용하여 자바스크립트 함수를 구현하였는데

웹킷(사파리, 크롬)에서 자바스크립트함수가 정상적으로 작동하지 않더라고요.

그래서 구글링을 해보니 웹킷은 document.documentElement.scrollTop 이 항상 0 값만 나타나고 document.body.scrollTop을 사용해야 하는 것을 알았습니다.


이런 사소한걸 암기하고 있을수도 없는거고 이거 영귀찮아서 이러고 있던 찰나에 아주 귀중한 링크하나를 발견했습니다.

http://13thparallel.com/archive/viewport/example6.htm

방문해보시면



document.documentElement.scrollLeft  
document.documentElement.scrollTop   
document.body.scrollLeft
document.body.scrollTop
window.pageXOffset
window.pageYOffset
window.scrollX
window.scrollY

속성에 대해서 내가 사용하고 있는 브라우저가 어떠한 속성을 지원하고 있는지 쉽게 알수 있습니다.

이렇게 고마울수가. ㅎ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

• 4 Essential & 7 Optional Ruby on Rails Tutorials
  루비온레일즈 튜토리얼
• Best of RubyLearning Posts for Ruby Beginners
  루비 튜토리얼
• Graphing/Charting Data on Web Pages: JavaScript Solutions
  자바스크립트로 차트와 그래프 만들기 입니다. 지저분하게 html 태그로 만드는 것이 아니라 canvas 이용한 방식입니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

http://www.blogstorm.co.uk/cut-and-paste-one-line-of-code-to-make-any-website-editable/


아무 웹사이트나 방문한 다음에

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

이 한줄만 주소창에 넣으면 어떤 웹사이트던지 편집가능한 상태가 됩니다.

한마디로 웹사이트가 designmode가 on이 되어져 글쓰기에디터 같이

마음껏 웹사이트를 cut, paste 할수 있게 됩니다.


웹사이트 내맘대로 도려내기. 참 쉽죠?

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

autocomplete는 요즘 안쓰이는 사이트가 거의 없습니다.

다른 말로는 자동완성기능이라고 불리우며,

쇼핑몰은 물론, 서적, 음반, 검색엔진 등에서 두루두루 유용하게 쓰이는 컴포넌트 입니다.



최근에 autocomplete 기능을 사용할일이 있어서

크로스브라우징이 잘 되는 autocomplete 국내외 라이브러리들을 찾아봤는데요.

마음에 든다 싶으면 IE에서만 잘되거나,

그게 아닌 경우에는 이상하게도

자동완성창이 렌더링되면서 그 항목들중에서 제일 첫번째의 아이템을 저절로 선택하는 경우가 전부였습니다.

첫번째 아이템이 기본적으로 선택이 되어버리는 바람에

그걸 선택하고 싶지 않음에도 불구하고 엔터키를 눌러버리면 첫번째 항목이 input박스에 나타나더군요.


혹시 같은 문제로 고민스러워하시는 분들이 있을것 같아 이렇게 포스팅 합니다.


scriptaculous가 사용방법도 간단하면서 prototype 라이브러리를 사용하는 웹사이트에서는

가장 무난하게 쓸수 있는 autocomplete라이브러리일것 같습니다.

controls.js 파일이 autocomplete가 있는 파일입니다.

이 파일에서 198줄쯤(1.8.1 버전)에 render 함수가 있는데

바로 이 함수가 자동완성창을 렌더링 하는 함수 입니다.

이 함수를 수정하면 됩니다.


함수의 가장 첫줄에

if(!this.active) this.index = -1; // 검색어자동완성 처음에는 포커스가 없게 하기 직접추가

를 추가해주세요

이렇게 하면 가장 처음에 input 박스에 타이핑을 해서 자동검색창이 나타났을때 아무 아이템도 선택되지 않은 상태가 됩니다.

물론 키보드의 상하키를 이용하면 항목간 이동도 자연스레 됩니다.




render: function() {
   if(!this.active) this.index = -1; // 검색어자동완성 처음에는 포커스가 없게 하기 직접추가
    if(this.entryCount > 0) {
      for (var i = 0; i < this.entryCount; i++)
        this.index==i ?
          Element.addClassName(this.getEntry(i),"selected") :
          Element.removeClassName(this.getEntry(i),"selected");
      if(this.hasFocus) {
        this.show();
        this.active = true;
      }
    } else {
      this.active = false;
      this.hide();
    }
  }







한가지 팁!

자동검색되는 내용중에서 검색어로는 넣고 싶지 않지만 추가하고 싶은 텍스트가 있는 경우도 있습니다.

예를 들면 책 제목과 가격, 출판사, 저자를 한꺼번에 나타내고 싶긴한데

검색어로는 제목만 입력되게 하고 싶을때!!!!

바로 이런 경우를 위해 scriptaculous는 다음과 같은 방법을 사용하면 됩니다.


<li>책제목 <span class="informal">검색에는나타나지않는기타정보</span></li>


이렇게 마크업을 하게 되면(informal 클래스명을 사용) informal 클래스 안에 있는 텍스트는 자동완성 키워드가 완성될때 포함되지 않습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

1. Smashing Magazine


RSS 등록

Smashing Magazine은 디자인관련 자료와 디자인 영감을 얻는데 최고의 사이트 입니다.
웹의 디자인적인관점(UX, UI, design 등)의 포스팅이 수시로 올라옵니다.
물론 프로그래밍 관련 자료도 올라옵니다(ajax 등)
디자이너라면 반드시 필수로 구독해야하는 블로그입니다.
물론 웹개발자들도 포함입니다.

2. Ajaxian


javascript에 대한 모든 자료를 다룹니다.
prototype, jquery, dojo, YUI, ext 등 자바스크립트 프레임워크에 관련된 자료도 발빠르게 올라옵니다.
하루에 5~10개의 포스팅이 올라오는데요. 자바스크립트 개발자라면 꼭 구독해야하는 블로그입니다.

RSS 등록


3. ReadWriteWeb


RSS 등록

인터넷세계에 무슨일이 일어났을때 모든 소식을 이곳에서 접하실수 있습니다.
웹사이트의 비지니스 마케팅에 종사하고 있다면 이 블로그를 구독하세요.

4. Scott Gu’s Blog

.NET 개발자에게 추천해드리는 블로그 입니다.
그리고 Silverlight 2 beta 에 대한 소식도 접하실수 있습니다. MS관련된 내용에 대해 다루고 있습니다.

RSS 등록


5. Flex Examples


Flex 개발자에게 추천해드립니다.
사이트 명이 Flex Examples 입니다.
Flex의 다양한 듀토리얼을 보실수 입니다.

RSS 등록


6. A List Apart


A List Apart는 많은 범위에서의 주제를 다루고 있습니다. 물론 IT쪽 관련이지요.
물론 다른 어떠한 "이슈"에 관해서 토론되는 곳이기도 하지만
웹퍼블리셔, 웹표준에 관심이 많으신 분이라면 http://www.webstandards.org/ 와 함께 구독하셔야 할 블로그입니다.

RSS 등록




7. Vitamin

이곳역시 많은 듀토리얼이 올라오는 블로그 입니다.

RSS 등록



8. Six Revisions

이곳은 앞서 소개한 Smashing Magazine과 비슷한 토픽을 다룹니다.
웹디자이너들을 타겟으로한 포스팅이 자주 올라오며 다양한 소스들과 팁들이 있습니다.

RSS 등록

9. Colour Lovers Blog


컬러를 다루는 곳입니다.
웹사이트에 어떠한 컬러 파레트를 적용해야할지 영감을 주는 블로그입니다.

RSS 등록

10. Agile Ajax


javascript와 ajax에 대해서 다루는 블로그 입니다.

RSS 등록



출처 : Top 10 Blogs for Web Developers



저도 언급한 10개에서 몇개 빼고는 RSS구독하고 있는 곳들입니다.

영문 블로그라서 영어해석의 압박이 있지만

RSS등록하셔서 기사와 함께 올려져 있는 이미지만 보셔도

대충 어떤 내용을 담은 것이구나라고 짐작할수 있습니다.

그림만 보셔도 충분히 좋은 사이트 입니다.

여러분들께 강추합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

자바스크립트라고 쓰고 PHP라고 읽는다?
PHP라고 쓰고 자바스크립트라고 읽는다?

PHP 함수에 친숙한 개발자를 위해!
자바스크립트와 PHP개발간의 차이를 줄이기 위해!

프로젝트가 시작되었다고 하네요.

바로 PHP.js 프로젝트 입니다.


말그대로 PHP함수를 자바스크립트로 구현해 놓았습니다.

함수명도 실제와 똑같고 리턴값, 인자 역시 동일합니다.

또한 API DOC도 잘 작정되어있습니다.

저도 역시 PHP함수에 친숙한 만능을 꿈꾸는 개발자인데 참 반가운소식입니다.


그런데 PHP.js를 다운받아보시면 비압축시에 102kb나 합니다.

어마어마한 수치죠.

그렇기 때문에 무작정 PHP.js를 인클루드 해서 쓰는것보다는

필요함 함수만 잘라서 쓰시길 권장하고 싶군요.

라이센스도 MIT 라이센스를 현재 따르고 있어서 마음대로 사용하셔도 상관없습니다.

아래의 목록은 현재까지 javascript 함수로 만들어진 php함수들입니다.

RSS로 계속해서 업데이트되는 함수가 공지됩니다.

유용하게 사용하세요~

• » PHP.JS Licensing
• abs
• addslashes
• array_change_key_case
• array_chunk
• array_combine
• array_count_values
• array_diff
• array_diff_assoc
• array_diff_key
• array_fill
• array_flip
• array_keys
• array_key_exists
• array_map
• array_pad
• array_pop
• array_push
• array_reverse
• array_search
• array_shift
• array_sum
• array_unique
• array_unshift
• array_values
• base64_decode
• base64_encode
• basename
• checkdate
• chr
• count
• count_chars
• crc32
• date
• defined
• define
• empty
• end
• explode
• file
• file_get_contents
• function_exists
• get_class
• htmlentities
• implode
• include
• include_once
• in_array
• isset
• is_array
• is_numeric
• levenshtein
• ltrim
• md5
• mktime
• nl2br
• number_format
• ord
• preg_quote
• printf
• rand
• range
• reset
• rtrim
• serialize
• setcookie
• sha1
• shuffle
• soundex
• sprintf
• strcmp
• stripslashes
• strip_tags
• stristr
• strlen
• strpos
• strrev
• strripos
• strrpos
• strstr
• strtolower
• strtoupper
• str_pad
• str_repeat
• str_replace
• str_rot13
• substr_count
• trim
• ucfirst
• ucwords
• utf8_decode
• utf8_encode
• wordwrap

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.