jQuery 1.6.1 릴리즈, 성능 , 버그 픽스 내용

성능향상과 몇몇 주요한 bug fixed 1.6 (글 작성 시점엔 1.6.1) 이 릴리즈 되었습니다.

data 부분 성능 향상이 눈에 띄네요.

 

1.6에서 코딩 상 중요한 변경 점은 기존엔 attribute, property 모두 .attr() 메소드를 이용했다면

1.6에서는 구분하여 .attr(), .prop() 을 이용하게 되었다는 겁니다.

일례로 흔하게 쓰는 체크박스의 checked 프로퍼티를 기존에는

.attr( checked , true );  처럼 attribute 조작 메소드로 다루던 것을 .prop(checked , true );와 같이

프로퍼티 전용 메소드로 변경했습니다.

기존에는 ele.attr( checked) 으로 체크박스 상태를 검출 하는게 가능했지만 1.6에서는 그냥

빈 문자열을 리턴하기 때문에 ele.prop( checked) 로 확인해야 합니다.
attribute와 property 구분이 html 엘리먼트에만 국한된 게 아니라 DOM 엘리먼트까지 적용됩니다.

attribute와 property 구분은 다음과 같습니다.

Attribute/Property

.attr()

.prop()

accesskey

align

async

autofocus

checked

class

contenteditable

defaultValue


draggable

href

id

label

location *

multiple

nodeName


nodeType


readOnly

rel

selected

selectedIndex


src

style

tabindex

tagName


title

type

width **

* For example, with window.location
** If needed over .width()

Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr(“value”, “somevalue”) will continue to work, as it did before 1.6).
 

attribute, property 구분으로 인해 기존 1.6 이전 버전으로 개발을 진행한 상태에서
1.6 적용 시 소스를 수정해야하는 부분이 상당할 수 있기 때문에 적절한 판단을 해야 할 것 같습니다.

 

1.6에서 변경된 개략적인 내용은 전체 릴리즈 노트
http://blog.jquery.com/2011/05/03/jquery-16-released/
http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/ 
를 참조하세요.

2011/06/15 11:28 2011/06/15 11:28
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다

cross browser iframe auto resize

firefox 3.5 에서 iframe resize 스크립트가 작동하지 않는 문제로 골머릴 썩다 발견한 해결책.

원문 : http://overfloweb.com/zbxe/?mid=study&category=363&document_srl=741

test browser : ie6, ie7, firefox 3, safari 3, chrome, opera 9
...
<iframe id="contentFrame" name="contentFrame" src="about:blank" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
...

...
<div id="content">
... contents ...
</div>
...
<script type="text/javascript">
function init(){
  var doc = document.getElementById('content');
  if(doc.offsetHeight == 0){
  } else {
  pageheight = doc.offsetHeight;
  parent.document.getElementById("contentFrame").height = pageheight+"px";
  }
}
window.onload = function(){
  init();
}
</script>
...



iframe 안의 소스에서 내용이 들어가는 전체를 <div id="content"></div> 로 감싸고,

onload 이벤트로 그 div 의 dom.offsetHeight 를 구해서 parent.iframe 의 height 를 바꿔주는 방식이다.
붉은색으로 표시된 height 가 크로스 브라우징의 핵심이다.
겨우 height 가 핵심이냐고? 모르는 소리다.

clientHeight, scrollheight,innerHeight, 등등 모두 크로스브라우징은 안된다. 하지만 그냥 height 는 된다.

2009/11/16 12:23 2009/11/16 12:23
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다
  1. Blog Icon
    thisgun

    감사합니다. 안되는 문제를 이거보고 해결했어요 ^^

  2. Blog Icon
    이진영

    좋은소스가 아닙니다.
    크로스브라우징이 되지 않습니다.

NetBeans 6.1의 놀라운 javascript 에디팅 기능

넷빈즈의 스크립트 랭귀지에 대한 지원이 지속적으로 확대되는 가운데, 이번 넷빈즈 6.1버전에서는
자바스크립트 에디터 역시 놀라운 기능 향상이 있습니다.
흡사 메이저 언어를 다루는듯한 신택스 하이라이팅 이라든지 코드 어시스턴스, 코드 인사이트뿐만 아니라
<script src=".."> 와 같이 불러들인 외부 js파일 역시 인라인 스크립트와 동일하게 지원하고 있습니다.

아래 url은 썬마이크로시스템즈의 넷빈즈 에반젤리스트 roman씨의 '넷빈즈 6.1의 자바스크립트 에디터 지원'
에 대한 스크린캐스트입니다.
http://www.netbeans.org/download/flash/js/javascript_demo.html

JavaScript에 대한 Code Completion

JavaScript에 대한 Code Completion


JavaScript에 대한 Rename Refactoring

JavaScript에 대한 Rename Refactoring


JavaScript 함수에 대한 Code Completion

JavaScript 함수에 대한 Code Completion


JavaScript 함수에 대한 Tasklist 지원

JavaScript 함수에 대한 Tasklist 지원


JavaScript에 대한 Quick Fix

JavaScript에 대한 Quick Fix



2008/05/07 13:49 2008/05/07 13:49
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다

JavaScript Base64 Encode / Decode

// This code was written by Tyler Akins and has been placed in the
// public domain.  It would be nice if you left this header intact.
// Base64 code from Tyler Akins --
http://rumkin.com

var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

function encode64(input) {
   var output = "";
   var chr1, chr2, chr3;
   var enc1, enc2, enc3, enc4;
   var i = 0;

   do {
      chr1 = input.charCodeAt(i++);
      chr2 = input.charCodeAt(i++);
      chr3 = input.charCodeAt(i++);

      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;

      if (isNaN(chr2)) {
         enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
         enc4 = 64;
      }

      output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) +
         keyStr.charAt(enc3) + keyStr.charAt(enc4);
   } while (i < input.length);
  
   return output;
}

function decode64(input) {
   var output = "";
   var chr1, chr2, chr3;
   var enc1, enc2, enc3, enc4;
   var i = 0;

   // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
   input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

   do {
      enc1 = keyStr.indexOf(input.charAt(i++));
      enc2 = keyStr.indexOf(input.charAt(i++));
      enc3 = keyStr.indexOf(input.charAt(i++));
      enc4 = keyStr.indexOf(input.charAt(i++));

      chr1 = (enc1 << 2) | (enc2 >> 4);
      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
      chr3 = ((enc3 & 3) << 6) | enc4;

      output = output + String.fromCharCode(chr1);

      if (enc3 != 64) {
         output = output + String.fromCharCode(chr2);
      }
      if (enc4 != 64) {
         output = output + String.fromCharCode(chr3);
      }
   } while (i < input.length);

   return output;
}
function encode64Han(str) {
  return encode64(escape(str))
}
function decode64Han(str) {
  return unescape(decode64(str))
}

2007/10/12 20:47 2007/10/12 20:47
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다

Javascript Array 의 유용한 메소드들

Java 의 Vector 클래스는 내부적으로 배열을 사용하고 있다. 따라서 Vector 의 자바스크립트 버전을 만들기 위해서는 Array 객체에 대한 빵빵한 지식이 필요하다 (없어도 된다. 그러나 있으면 매우 좋다). 자! 배열의 기초와 유용한 메쏘드들을 살펴보자.

배열의 생성
1. 생성자를 이용한 생성
- new Array(arrayLength)
ex) friends = new Array(3); // 크기가 3 인 배열 생성
- new Array(element0, element1, ... , elementN)
ex) friends = new Array("개똥이", "소똥이", "말똥이"); // 크기 3인 배열 생성(값이 채워짐)
2. 직접 생성
friends = ["개똥이", "소똥이", "말똥이"];

간접적인 배열 길이의 증가
배열의 길이는 현재 배열의 길이보다 큰 인덱스를 사용하면 자동으로 증가한다. 아래는 배열의 길이가 0 인 객체 생성 후 99번째 요소에 값을 할당하여 배열의 길이가 100 으로 증가한 예이다.
friends = new Array();
friends[99] = "새똥이";

메쏘드 종류
concat : 두개의 배열을 합쳐 새로운 배열을 리턴한다. 원본 배열은 변하지 않는다.
문법
arrayName.concat(arrayName2, arrayName3, ... , arrayNameN)
인자
arrayName2, ... , arrayNameN - 합쳐질 인자들
예제
두 배열을 합치는 예
alpha = new Array("a", "b", "c");
numeric = new Array(1, 2, 3);
alphaNumeric = alpha.concat(numeric); // ["a", "b", "c", 1, 2, 3] 배열 생성

join : 모든 요소가 구분자로 이어진 문자열을 리턴한다. 디폴트 구분자는 comma(,) 이다.
문법
arrayName.join(separator)
인자
separator 요소와 요소 사이에 사용될 구분자 문자열
예제
friends = new Array("소똥이", "개똥이", "말똥이");
strFriends1 = friends.join(); // 소똥이,개똥이,말똥이
strFriends2 = friends.join(", "); // 소똥이, 개똥이, 말똥이
strFriends3 = friends.join(" + "); // 소똥이 + 개똥이 + 말똥이

pop : 배열의 마지막 요소를 삭제한 후 그 값을 리턴하고 배열의 크기를 줄인다.
문법
arrayName.pop()
인자
없음
예제
// 말똥이가 pop 되고 배열에는 "개똥이", "소똥이"만 남는다.
// 배열크기도 2로 줄어든다.
friends = ["개똥이", "소똥이", "말똥이"];
popped = friends.pop(); // popped 에 말똥이가 할당된다.

push : 배열에 하나 또는 여러개의 값을 넣고 새로운 배열의 길이를 리턴한다.(배열길이 증가)
문법
arrayName.push(element1, element2, ... , elementN)
인자
element1, element2, ... , elementN - 추가될 요소들
예제
friends = ["개똥이", "소똥이"];
pushed = friends.push("말똥이", "새똥이"); // ["개똥이", "소똥이", "말똥이", "새똥이"]
alert(pushed); // 4

reverse : 배열 요소를 역순으로 재배치한다(첫번째 요소는 마지막으로, 마지막 요소는 처음으로).
문법
arrayName.reverse()
인자
없음
예제
myArray = new Array("1", "2", "3");
myArray.reverse(); // ["3", "2", "1"]

shift : 첫번째 요소를 삭제하고 배열의 길이를 하나 줄인 후, 삭제된 요소를 리턴한다.
문법
arrayName.shift()
인자
없음
예제
friends = ["개똥이", "소똥이", "말똥이"];
shifted = friends.shift(); // ["소똥이", "말똥이"]
alert("삭제된 요소는 " + shifted + " 입니다."); // 개똥이

slice : 얇게 썬 슬라이스 치즈가 생각난다(^^). 배열의 일부를 잘라내어 새로운 배열을 리턴한다.
문법
arrayName.slice(begin[,end]) : [] 은 선택사항임
인자
begin - 0보다 큰 시작 인덱스 (필수)
end - 0보다 큰 끝 인덱스 (선택). 지정되지 않으면 배열의 끝까지 복사된다.
예제
numbers = ["0", "1", "2", "3", "4"];
sliced1 = numbers.slice(2, 3); // ["2"]
sliced2 = numbers.slice(2); // ["2", "3", "4"]

sort : 배열의 요소를 정렬한다.
문법
arrayName.sort([compareFunction])
인자
compareFunction - 정렬방법을 지정한 함수.
생략시에는 요소들의 toString() 값을 사전순서(Dictionary order) 대로 정렬한다.
compareFunction(a, b) 에서
1) a > b : 0 보다 큰 값 리턴
2) a = b : 0 리턴
3) a < b : 0 보다 작은 값 리턴
예제
// 역행 정렬
function descComparator(a, b) {
return b - a;
}

// 순행 정렬
function ascComparator(a, b) {
return a - b;
}

numbers = ["0", "1", "2", "3", "4"];
numbers.sort(); // ["1", "2", "3", "4", "5"]
numbers.sort(ascComparator); // ["1", "2", "3", "4", "5"]
numbers.sort(descComparator); // ["4", "3", "2", "1", "0"]

splice : 이전 배열요소를 삭제하고 새로운 내용물을 추가하는 형태로 배열 내용을 변경한다. 삭제된 요소들은 리턴된다. Vector 와 유사한 기능을 하므로 숙지하자.
문법
arrayName.splice(index, howMany, [element1][, ..., elementN])
인자
index - 변경하고자 하는 요소의 시작 인덱스
howMany - 삭제하고자 하는 이전 배열요소 갯수.
element,...,elementN - 추가하고자 하는 배열 요소들
예제
// numbers[2]부터 2개("2", "3")를 삭제하고 그 자리에 "5"와 "6" 을 삽입한다.
numbers = ["0", "1", "2", "3", "4"];
spliced = numbers.splice(2, 2, "5", "6"); // ["0", "1", "5", "6", "4"]
alert(spliced); // "2", "3"

unshift : 하나 또는 여러개의 요소를 배열의 왼쪽에 추가한다. 배열길이는 증가한다.
문법
arrayName.unshift(element1,..., elementN)
인자
element1,...,elementN - 배열의 앞쪽에 들어갈 요소들
예제
numbers = ["0", "1", "2"];
numbers.unshift("-2", "-1"); // ["-2", "-1", "0", "1", "2"]

출처 : http://blog.empas.com/jjh7266/6264266
2007/02/26 22:32 2007/02/26 22:32
Trackback Address:이 글에는 트랙백을 보낼 수 없습니다