블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
AJAX (6)
COMET (1)
JAVASCRIPT (34)
EXTJS (50)
jQuery (5)
Prototype.js (1)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'Scripter/JAVASCRIPT'에 해당되는 글 34건

  1. 2008.03.06 Native CSS selectors with querySelector
  2. 2008.03.06 IE minimize 2
  3. 2008.03.03 Javascript Performance Stack 2
  4. 2008.02.18 팁 : 크로스브라우저 지원 스크롤바 바꾸기

Native CSS selectors with querySelector

Scripter/JAVASCRIPT / 2008. 3. 6. 09:54
Ext2.0의 Dom Query와 비슷하게 사파리에서 querySelector 와 querySelectorAll 메쏘드를 정의하다.
흠..이게 표준일줄이야 이제야 알다니...
2007년 12월 21일에 W3C에 Working Draft되어 있다. (URL : http://www.w3.org/TR/selectors-api/ )

많은 자바스크립트 라이브러리들이 이러한 돔쿼리를 제공하고 있는데
prototype.js, jQuery, Ext2.0 의 speed test 결과 Ext2.0이 조금 빨랐다..(단 내경우에... 크~ : IE7 on Vista)
넥스트리 내부에서 AJAX Framework 벤치마킹할때 이점도 가만이 됐는 부분이라 다시한번 정리해본다.


사파리에서의 샘플코드
 
/*
  * Get all the elements with class "hot" (duplicating getElementsByClassName)
   * A common use for this is as a toggle;
   * for example, a search feature might tag results with a class
  */
  document.querySelectorAll(".hot");

  /*
   * Get the currently hovered element
   */
  document.querySelector(":hover");

  /*
   * Get every other element in the <li> with id "large"
   * This is mostly useful for doing "zebra stripe" alternating rows.
   * Once CSS3 becomes more widespread, doing this directly via CSS will be more practical
  */
  document.querySelectorAll("#large:nth-child(even)");


Ext2.0에서 번역했던 DomQuery부분 : http://extjs.com/learn/Tutorial:DomQuery_Basics%28Korean%29


'Scripter > JAVASCRIPT' 카테고리의 다른 글

자바스크립트로 구현한 3D 포토갤러리  (0) 2008.03.06
JsonSQL: JSON parser, SQL style  (0) 2008.03.06
IE minimize  (2) 2008.03.06
Javascript Performance Stack  (2) 2008.03.03
팁 : 크로스브라우저 지원 스크롤바 바꾸기  (0) 2008.02.18
Post by 넥스트리소프트 데꾸벅(techbug)
, |

IE minimize

Scripter/JAVASCRIPT / 2008. 3. 6. 09:50
자바스크립트만으로 브라우저 최소화 최대화를 구현해보고 싶어 소스를 찾다 괜찮은 것들만 추려본다.
(IE6이전 버전 기준)


<script type="text/javascript">
function minimize() {
    document.getElementById("minimizer").Click();
}
</script>

<span onclick="minimize()" style="cursor:pointer;">최소화</span>

<object id="minimizer" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object>


<SCRIPT LANGUAGE="JavaScript">

function Minimize()
{
window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;
}

function Maximize()
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
</SCRIPT>

<A HREF="javascript:onClick=Minimize()">Minimize</A>
<A HREF="javascript:onClick=Maximize()">Maximize</A>
출처 : htmlgoodies



최소화가 아니라 다른창 뒤에 숨기기위해 간단한 소스
function Minimize(){
 window.blur()
}
출처 : rahmanhadi








'Scripter > JAVASCRIPT' 카테고리의 다른 글

자바스크립트로 구현한 3D 포토갤러리  (0) 2008.03.06
JsonSQL: JSON parser, SQL style  (0) 2008.03.06
Native CSS selectors with querySelector  (0) 2008.03.06
Javascript Performance Stack  (2) 2008.03.03
팁 : 크로스브라우저 지원 스크롤바 바꾸기  (0) 2008.02.18
Post by 넥스트리소프트 데꾸벅(techbug)
, |

Javascript Performance Stack

Scripter/JAVASCRIPT / 2008. 3. 3. 10:42

자바스크립트의 퍼포먼스는 대부분 브라우저에 의해 결정된다.


사용자 삽입 이미지



































끊임없이 회자되어 왔던 자바스크립트 퍼포먼스에 대한 이슈는 다음과 같은 중요한 키로 정리될수 있다.
  • 자바스크립트
  • 객체모델(Object Models : XMLHttpRequest, Timers, Browser, DOM and CSS)
  • Parsing
  • Rendering

흥미로운것은 브라우저안에서 퍼포먼스에 중요하게 영향을 끼치는것으로 자바스크립트를 삼았다.( by John resig) 그러나 자바스크립트는 철저하게 퍼포먼스를 극복하기위해 많이 향상되어왔으면 최근에는 DOM,CSS, 렌더링레이어에서 바틀렉(bottlenecks)이 걸린다는것이다.
여기서 흥미로운 이슈사항이 대두되는데.
  • 브라우저 밖에서의 자바스크립트 퍼포먼스는 브라우저안쪽에서의 그것보다 더 빠르다는것이다. 객체모델의 오버헤드와 객체모델과 관련된 중요한 보안체크에 대한것은 매우 다르다는것이다.
  • 적절하지 못한 자바스크립트코딩은 렌더링엔진에 퍼포먼스에 많은 영향을 끼친다.

원본 : http://ejohn.org/blog/javascript-performance-stack/


윗글에서도 보다시피 자바스크립트의 퍼포먼스는 어떤 브라우저를 선택하느냐에 따라 크게 달라질수도 있다는것이다.
이번에 버전업된 firefox3 의 퍼포먼스가 상당히 향상되었다는 오늘자 ajaxian에 포스팅글을 인용한다.

사용자 삽입 이미지
















윈도우머신에서 테스트한 선스파이터 자바스크립트 벤치마크 결과에 의하면
이번 파이어폭스3의 성능은 이전버전 2.0.0.12와는 달리 크게 향상되었다는것을 느낄수 있다.  파이어폭스 Nightly(어떻게 번역해야 하는거야..매일빌드? ) 버전이 나오기전에는 오페라9.5.9807이 제일 빠른것이였는데 브라우저 시장에서 다시한번 파이어폭스의 선전이 기대된다.


  1. Firefox 3 Nightly (PGO Optimized): 7263.8ms
  2. Firefox 3 Nightly (02/25/2008 build): 8219.4ms
  3. Opera 9.5.9807 Beta: 10824.0ms
  4. Firefox 3 Beta 3: 16080.6ms
  5. Safari 3.0.4 Beta: 18012.6ms
  6. Firefox 2.0.0.12: 29376.4ms
  7. Internet Explorer 7: 72375.0ms






'Scripter > JAVASCRIPT' 카테고리의 다른 글

자바스크립트로 구현한 3D 포토갤러리  (0) 2008.03.06
JsonSQL: JSON parser, SQL style  (0) 2008.03.06
Native CSS selectors with querySelector  (0) 2008.03.06
IE minimize  (2) 2008.03.06
팁 : 크로스브라우저 지원 스크롤바 바꾸기  (0) 2008.02.18
Post by 넥스트리소프트 데꾸벅(techbug)
, |

팁 : 크로스브라우저 지원 스크롤바 바꾸기

Scripter/JAVASCRIPT / 2008. 2. 18. 20:07
스크롤바에 자바스크립트로 스킨을 입힌 사이트를 발견하다.
CSS로 색깔만 바꾸는것만 가능한줄 알았던 것이 이미지를 입힐수 있게 해주는 스크립트이다

사용자 삽입 이미지



















관련소스(flexcrolljs.zip)를 첨부하다.
invalid-file



'Scripter > JAVASCRIPT' 카테고리의 다른 글

자바스크립트로 구현한 3D 포토갤러리  (0) 2008.03.06
JsonSQL: JSON parser, SQL style  (0) 2008.03.06
Native CSS selectors with querySelector  (0) 2008.03.06
IE minimize  (2) 2008.03.06
Javascript Performance Stack  (2) 2008.03.03
Post by 넥스트리소프트 데꾸벅(techbug)
, |

티스토리툴바