포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다. 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠으며, 잘못된 번역 부분은 원문 영문 웹 페이지를 참조하시기 바랍니다.
- 필요에 의한, 실제적인 코드의 작성 방법은 원문과 달리 제 나름대로 요약할 수 있습니다.
- 원문의 경로는 JavaScript Tips for ASP.NET Developers - Part 2입니다.
이 아티클은 ASP.NET 개발자들을 위한 JavaScript 팁을 제공하는 시리즈 중의 첫번째 파트입니다.
ASP.NET 서버 컨트롤이 서버측에서 우리가 작성하는 코드를 더 쉽게 만들 수 있게 해준다는 점은 의심할 필요가 없습니다. Karamasoft UISuite™와 같은 써드파티 컴포넌트들은 서버측과 클라이언트측 둘 다를 더 쉽게 개발할 수 있도록 만들어줍니다. 그러나, 여러분은 아직 여러분의 웹 사이트를 방문하는 방문자에게 강력한 사용자 인터페이스를 제공하기 위한 클라이언트측 프로그래밍에 대한 어느 정도의 지식이 여전히 필요할 것입니다.
JavaScript는 여러분이 서버측 개발 환경에서 개발을 함에도 불구하고 클라이언트측 프로그래밍을 위해 가장 일반적으로 사용되는 언어입니다. 비록 이번 아티클이 다른 언어와 프레임워크에 적용될 수도 있지만, 대부분의 팁이 ASPX와 C#의 샘플 코드로 작성되는 것이기 때문에, ASP.NET 개발자들에게 더 좋을 것이라고 생각합니다.
12. Cache your scripts
13. Get inner text
14 Toggle display
15. Preload your images
16. Concatenate your strings efficiently
17. Use hash tables for efficient lookups
18. Check whether an item exists in the array
19. Retrieve query string values
20. Move the focus away from your dropdown after change event
21. Handle asynchronous operations with minimally growing arrays
22. Pass data from one page to another using post
JavaScript가 포함된 파일을 사용하는 것은 스크립트 블록 안에 JavaScript 코드를 직접 내장하는 것과 비교하여 몇 가지의 이점이 있습니다. 주된 이점은 중심지(central place)에서 코드를 보존함으로써 코드의 재사용성을 제공한다는 것입니다. 다른 이점은 더 쉽게 페이지를 유지할 수 있기 때문에 페이지의 크기를 상당히 격감시킨다는 것입니다. 아마도 가장 중요한 이점은 브라우저에 의해서 캐싱된다는 것입니다. 페이지로 들어오는 요청은 더 빨리 로드하기 위해서 브라우저 캐쉬에서 JavaScript 라이브러리를 검색할 것입니다.
Internet Explorer는 객체의 시작과 끝 태그 사이의 텍스트를 얻거나 쓰기 위한 innerText 속성을 제공합니다. Firefox는 innerText 속성을 제공하지는 않지만, TextContent 속성으로 inner text를 얻거나 쓸 수 있습니다. inner text를 얻거나 쓰거나 하는 속성을 제공하지 않는 브라우저들을 위해, 여러분은 innerHTML 속성 안에 있는 HTML 태그를 클리어할 수 있습니다.
여러분은 HTML 요소의 스타일의 display를 'none'과 '' 사이의 값으로 전환함으로써, 쉽게 HTML 요소의 디스플레이를 토글(toggle : 하나의 설정 값으로부터 다른 값으로 전환하는 것)할 수 있습니다.
JavaScript :
ASPX :
만약 여러분이 페이지가 로드될 때 즉시 이미지를 표현하기를 원한다면, 웹 페이지의 HEAD 섹션에 JavaScript를 사용하여 이미지를 미리로드(preload)해야 합니다. 또한 이 기술은, 여러분이 이미지 위로 마우스를 가져갔을 때 다른 이미지를 표시하는 rollover 효과를 가질 때도 도움이 됩니다.
여러분은 새로운 JavaScript 이미지 객체를 만들고, 이미지의 경로를 src 속성에 설정할 필요가 있습니다.
모든 이미지를 위한 새로운 JavaScript Image 객체를 만드는 필요와 서로 다른 지역변수명을 사용하여 캐시를 할 필요가 있다는 것을 기억하십시요. 이러한 이슈를 극복하기 위해서, 인수로써 이미지 경로를 취하고, Array 요소 안에 JavaScript Image 객체를 저장하는 다음의 JavaScript 함수를 사용할 수 있습니다.
이 함수는 여러분이 전달하는 많은 이미지 경로 인수를 취하고, 각 경로에 대한 JavaScript Image 객체를 만들고, Array에 이것들을 저장합니다.
+ 연산자를 사용하여 스트링들을 결합시키는 것이 아주 쉽다 할지라도, 스트링 연산은 스트링이 더 커지거나, 많은 스트링을 결합할 경우에 CPU 주기동안의 기간에 많은 비용이 들게 됩니다.
대안으로 가장 좋은 것은 .NET 프레임워크에 있는 StringBuilder 객체와 유사한 여러분 자신의 StringBuilder JavaScript 객체를 만드는 것입니다. 여러분은 결합하고자 하는 스트링을 저장하기 위한 버퍼 Array 속성을 가진 StringBuilder 객체를 정의할 수 있습니다. 그리고 버퍼 Array로 스트링을 추가하기 위한 Append 메소드를 추가합니다. JavaScript Array 객체는 특정 구분자에 의해 구별되는 스트링 안으로 Array의 모든 요소를 밀어넣는 join 메소드를 제공합니다. ConvertToString 메소드는 스트링 안으로 버퍼 Array의 모든 객체를 결합시킬 것입니다.
다음과 같은 코드 대신에
다음 코드를 이제 사용할 수 있습니다.
우리의 테스트로는 Inernet Explorer에서 'test'라는 스트링을 50000번 결합했을 경우, StringBuilder Append 메소드가 + 연산자를 사용하는 것보다 10배정도 더 빠르게 작업하는 것이라고 나왔습니다.
Hash 테이블은 새로운 엔트리들의 효과적인 추가에 대한 방법과 특정 키의 검색에 소비되는 시간이 O(1)고 같은 저장된 아이템들에 독립적이다라는 것을 제공합니다. (Hash tables provide a way of efficient addition of new entries and the time spent searching for a specified key is independent of the number of items stored, which is O(1).) 설명하기 전에 어떻게 JavaScript 파일에서 Hash 테이블을 만드는지를 알기 위해, JavaScript에서 결합 Array에 대하여 먼저 시작하도록 하겠습니다.
결합 Array은 키 컬렉션과 값 컬렉션들로 구성된 추상 데이터 타입이며, 하나의 키는 하나의 값과 연계되어 있습니다. JavaScript에서, 모든 객체는 연관된 Array입니다. 여러분은 다음과 같이 객체의 속성들에 접근할 수 있습니다.
또는
JavaScript 객체는 Array 객체처럼 length 속성을 제공하지는 않지만, 여러분은 다음과 같은 구조를 사용하여 객체의 속성들을 반복시킬 수 있습니다.
예를 들어, UltimateEditor 컴포넌트는 클라이언트측 API에서 호출된 UltimateEditors의 연관된 Array을 제공합니다. 각 UltimateEditors 클라이언트측 객체들은 UltimateEditors 연관된 Array의 속성으로써 정의되어 있습니다. 만약 페이지가 여러개의 UltimateEditors 컴포넌트를 가진다면, 다음의 JavaScript 코드는 모든 UltimateEditors 객체들을 반복시킬 것이고, HTML 컨텐츠를 표현할 것입니다.
우리는 이제 연관된 Array 기능을 사용하여 HashTable 객체를 만들 수 있습니다. 우리의 HashTable 객체는 키/값 쌍을 저장하는 hashArr 속성과 hash 테이블에 있는 아이템들의 수를 추적하는 length 속성, 이 두 개의 속성을 가질 것입니다. 또한, 주어진 키 값을 검색하기 위한 get 메소드, hash 테이블로 키/값 쌍을 저장하기 위한 put 메소드, hash 테이블에서 키/값 쌍을 제거하기 위한 remove 메소드, hash 테이블에 주어진 키 값이 존재하는지를 반환하는 has 메소드, 이 네 개의 메소드를 가집니다.
자, 이제 효과적인 전화번호 검색을 위한 예제 hash 테이블을 만들어보겠습니다.
JavaScript Array 객체는 배열에 주어진 값이 존재하는지를 반환하는 내장된 메소드를 제공하지 않습니다 그러나, 우리는 Array이 주어진 값을 가지고 있는지를 반환하기 위한 메소드를 추가함으로써 Array 기능을 확장시킨 프로토타입 메소드를 추가할 수 있습니다.
이 메소드가 배열에서 값이 유일한 것인지를 체크하기 위해 === 연산자를 사용하는 것에 주목하십시요. 만약, 여러분이 단지 동일한지만을 체크하는 것이라면, === 연산자 대신에 == 연산자로 교체해야 할 것입니다.
이제, 우리는 이 메소드를 다음과 같이 사용할 수 있습니다.
ASP.NET은 HTTP 쿼리 스트링에서 변수의 값을 검색하는 Request.QuerString 컬렉션을 제공하지만, 클라이언트측에서 쿼리 스트링 컬렉션을 검색하기 위한 내장된 기법은 아닙니다. 그러나, 여러분은 이전 팁 중에서 제공된 GetAttributeValue 메소드를 사용하여 쿼리 스트링 값들을 얻기 위한 window location search 속성을 분석(parse)할 수 있습니다.
이 메소드는 이름/값 쌍의 목록과 값을 검색하기 위한 속성명, 그리고 첫번째와 두번째의 구분자등의 3가지 인수를 취합니다. 첫번째 구분자는 &이고 두번째 구분자는 쿼리 스트링 값들을 분석하기 위한 =기호입니다. 이제 여러분은 주어진 쿼리 스트링 변수명을 가지고 쿼리 스트링 값을 검색하기 위한 다음의 메소드를 사용할 수 있습니다.
사용자가 DropDonwList의 선택을 변경할 때, 포커스는 DropDown 안에 남아있게 됩니다. 만약 사용자가 위/아래 키를 누르거나, 마우스 휠을 움직이게 되면, 이 행동들은 dropdown에서 onchange 이벤트를 발생시킬 것입니다.
여러분은 onchange 이벤트에서 dropdown 컨트롤을 포커스를 잃어버리게 만듬으로써 이러한 행동들을 방지할 수 있습니다.
JavaScript :
ASPX :
CS :
여러분이 비동기 AJAX 콜백을 가지고 작업을 수행할 때, 나중에 Callback의 결과를 처리하기 위해 배열안에 Callback 결과들을 저장할 필요가 있을 것입니다. 여기에서 까다로운 부분은 배열의 사이즈를 최소로 유지해야 한다는 것입니다. 이 작업을 하기 위해서, 여러분은 이러한 처리가 종료되었을 때 배열의 아이템들을 비울 수 있으며, 다음 콜백 결과들을 이용할 수 있도록 만들 수 있으며, 배열 아이템으로 새로운 콜백 결과들을 항상 추가할 수 있습니다.
여러분이 콜백 결과를 가지고 작업을 끝냈을 때, 다음과 같이 간단하게 배열 아이템을 null로 설정할 수 있습니다.
만약 여러분이 하나의 페이지에서 다른 페이지로 소량의 데이터를 전달할 필요가 있다면, 쿼리 스트링으로 데이터를 전달할 수 있으며, 타켓 페이지에서는 Request.QueryString 컬렉션을 통하여 이 데이터들을 검색할 수 있습니다. 그러나, 만약 여러분이 대량의 데이터를 전달할 필요가 있다면, Internet Explorer의 경우 페이지의 주소창에 전달할 수 있는 글자가 최대 2048 글자이기 때문에 쿼리 스트링으로 전달할 수 없습니다. 이러한 경우에, 여러분은 하나의 페이지에서 다른 페이지로 POST 연산을 사용하여 데이터를 전달할 수 있습니다. 여러분의 소스 페이지에 전달할 데이터를 저장하는 hidden 변수를 정의하고 쿼리 스트링에서 타켓 페이지로의 ID를 전달합니다.
타켓 페이지에서는 Request.QueryString 컬렉션을 통해 ID를 얻을 수 있습니다. 그리고 BODY onload 이벤트 핸들러를 통해 클라이언트측에서 hidden 변수의 값을 소스 페이지에서의 값으로 설정합니다. 여러분은 부모(opener) 페이지에서 DOM 요소를 검색하기 위해 opener 객체를 사용할 수 있습니다. 그리고, 타켓 페이지 자신이 포스트백을 하고 Request.Form 컬렉션을 통해 hidden 변수의 값을 검색합니다.
Source Page JavaScript :
Source Page ASPX :
Target Page JavaScript :
Target Page ASPX :
Target Page C# :
## 출처 : http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=071203102303236&categoryname=ASP.NET
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다. 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠으며, 잘못된 번역 부분은 원문 영문 웹 페이지를 참조하시기 바랍니다.
- 필요에 의한, 실제적인 코드의 작성 방법은 원문과 달리 제 나름대로 요약할 수 있습니다.
- 원문의 경로는 JavaScript Tips for ASP.NET Developers - Part 2입니다.
Introduction
이 아티클은 ASP.NET 개발자들을 위한 JavaScript 팁을 제공하는 시리즈 중의 첫번째 파트입니다.
Background
ASP.NET 서버 컨트롤이 서버측에서 우리가 작성하는 코드를 더 쉽게 만들 수 있게 해준다는 점은 의심할 필요가 없습니다. Karamasoft UISuite™와 같은 써드파티 컴포넌트들은 서버측과 클라이언트측 둘 다를 더 쉽게 개발할 수 있도록 만들어줍니다. 그러나, 여러분은 아직 여러분의 웹 사이트를 방문하는 방문자에게 강력한 사용자 인터페이스를 제공하기 위한 클라이언트측 프로그래밍에 대한 어느 정도의 지식이 여전히 필요할 것입니다.
JavaScript는 여러분이 서버측 개발 환경에서 개발을 함에도 불구하고 클라이언트측 프로그래밍을 위해 가장 일반적으로 사용되는 언어입니다. 비록 이번 아티클이 다른 언어와 프레임워크에 적용될 수도 있지만, 대부분의 팁이 ASPX와 C#의 샘플 코드로 작성되는 것이기 때문에, ASP.NET 개발자들에게 더 좋을 것이라고 생각합니다.
Using the code
12. Cache your scripts
13. Get inner text
14 Toggle display
15. Preload your images
16. Concatenate your strings efficiently
17. Use hash tables for efficient lookups
18. Check whether an item exists in the array
19. Retrieve query string values
20. Move the focus away from your dropdown after change event
21. Handle asynchronous operations with minimally growing arrays
22. Pass data from one page to another using post
12. Cache your scripts
JavaScript가 포함된 파일을 사용하는 것은 스크립트 블록 안에 JavaScript 코드를 직접 내장하는 것과 비교하여 몇 가지의 이점이 있습니다. 주된 이점은 중심지(central place)에서 코드를 보존함으로써 코드의 재사용성을 제공한다는 것입니다. 다른 이점은 더 쉽게 페이지를 유지할 수 있기 때문에 페이지의 크기를 상당히 격감시킨다는 것입니다. 아마도 가장 중요한 이점은 브라우저에 의해서 캐싱된다는 것입니다. 페이지로 들어오는 요청은 더 빨리 로드하기 위해서 브라우저 캐쉬에서 JavaScript 라이브러리를 검색할 것입니다.
<script src="KaramasoftUtility.js" type="text/javascript"></script>
13. Get inner text
Internet Explorer는 객체의 시작과 끝 태그 사이의 텍스트를 얻거나 쓰기 위한 innerText 속성을 제공합니다. Firefox는 innerText 속성을 제공하지는 않지만, TextContent 속성으로 inner text를 얻거나 쓸 수 있습니다. inner text를 얻거나 쓰거나 하는 속성을 제공하지 않는 브라우저들을 위해, 여러분은 innerHTML 속성 안에 있는 HTML 태그를 클리어할 수 있습니다.
function GetInnerText(elem) {
return (typeof(elem.innerText) != 'undefined') ? elem.innerText : (typeof(elem.textContent) != 'undefined') ?
elem.textContent : elem.innerHTML.replace(/<[^>]+>/g, '');
}
return (typeof(elem.innerText) != 'undefined') ? elem.innerText : (typeof(elem.textContent) != 'undefined') ?
elem.textContent : elem.innerHTML.replace(/<[^>]+>/g, '');
}
14. Toggle display
여러분은 HTML 요소의 스타일의 display를 'none'과 '' 사이의 값으로 전환함으로써, 쉽게 HTML 요소의 디스플레이를 토글(toggle : 하나의 설정 값으로부터 다른 값으로 전환하는 것)할 수 있습니다.
JavaScript :
function ToggleDisplay(elemId) {
var elem = d0cument.getElementById(elemId);
elem.style.display = (elem.style.display != 'none') ? 'none' : '';
}
var elem = d0cument.getElementById(elemId);
elem.style.display = (elem.style.display != 'none') ? 'none' : '';
}
ASPX :
<asp:LinkButton ID="lbToggleDisplay" runat="server" omClientClick="ToggleDisplay('pnlToggleDisplay'); return false;">Toggle Display</asp:LinkButton>
<asp:Panel ID="pnlToggleDisplay" runat="server">
Panel content here!
</asp:Panel>
<asp:Panel ID="pnlToggleDisplay" runat="server">
Panel content here!
</asp:Panel>
15. Preload your images
만약 여러분이 페이지가 로드될 때 즉시 이미지를 표현하기를 원한다면, 웹 페이지의 HEAD 섹션에 JavaScript를 사용하여 이미지를 미리로드(preload)해야 합니다. 또한 이 기술은, 여러분이 이미지 위로 마우스를 가져갔을 때 다른 이미지를 표시하는 rollover 효과를 가질 때도 도움이 됩니다.
여러분은 새로운 JavaScript 이미지 객체를 만들고, 이미지의 경로를 src 속성에 설정할 필요가 있습니다.
<head runat="server">
<script type="text/javascript">
var img1 = new Image();
img1.src = '/Images/Product/UISuite.gif';
</script>
</head>
<script type="text/javascript">
var img1 = new Image();
img1.src = '/Images/Product/UISuite.gif';
</script>
</head>
모든 이미지를 위한 새로운 JavaScript Image 객체를 만드는 필요와 서로 다른 지역변수명을 사용하여 캐시를 할 필요가 있다는 것을 기억하십시요. 이러한 이슈를 극복하기 위해서, 인수로써 이미지 경로를 취하고, Array 요소 안에 JavaScript Image 객체를 저장하는 다음의 JavaScript 함수를 사용할 수 있습니다.
<head runat="server">
<script type="text/javascript">
function PreloadImages() {
var lenArg = arguments.length;
if (lenArg > 0) {
var imgArr = new Array();
for (var i = 0; i < lenArg; i++) {
imgArr[i] = new Image();
imgArr[i].src = arguments[i];
}
}
}
PreloadImages('/Images/Product/UltimateEditor.gif'
, '/Images/Product/UltimateSearch.gif', '/Images/Product/UltimateSpell.gif');
</script>
</head>
<script type="text/javascript">
function PreloadImages() {
var lenArg = arguments.length;
if (lenArg > 0) {
var imgArr = new Array();
for (var i = 0; i < lenArg; i++) {
imgArr[i] = new Image();
imgArr[i].src = arguments[i];
}
}
}
PreloadImages('/Images/Product/UltimateEditor.gif'
, '/Images/Product/UltimateSearch.gif', '/Images/Product/UltimateSpell.gif');
</script>
</head>
이 함수는 여러분이 전달하는 많은 이미지 경로 인수를 취하고, 각 경로에 대한 JavaScript Image 객체를 만들고, Array에 이것들을 저장합니다.
16. Concatenate your strings efficiently
+ 연산자를 사용하여 스트링들을 결합시키는 것이 아주 쉽다 할지라도, 스트링 연산은 스트링이 더 커지거나, 많은 스트링을 결합할 경우에 CPU 주기동안의 기간에 많은 비용이 들게 됩니다.
대안으로 가장 좋은 것은 .NET 프레임워크에 있는 StringBuilder 객체와 유사한 여러분 자신의 StringBuilder JavaScript 객체를 만드는 것입니다. 여러분은 결합하고자 하는 스트링을 저장하기 위한 버퍼 Array 속성을 가진 StringBuilder 객체를 정의할 수 있습니다. 그리고 버퍼 Array로 스트링을 추가하기 위한 Append 메소드를 추가합니다. JavaScript Array 객체는 특정 구분자에 의해 구별되는 스트링 안으로 Array의 모든 요소를 밀어넣는 join 메소드를 제공합니다. ConvertToString 메소드는 스트링 안으로 버퍼 Array의 모든 객체를 결합시킬 것입니다.
function StringBuilder() {
this.buffer = [];
}
StringBuilder.prototype.Append = function(str) {
this.buffer[this.buffer.length] = str;
};
StringBuilder.prototype.ConvertToString = function() {
return this.buffer.join('');
};
this.buffer = [];
}
StringBuilder.prototype.Append = function(str) {
this.buffer[this.buffer.length] = str;
};
StringBuilder.prototype.ConvertToString = function() {
return this.buffer.join('');
};
다음과 같은 코드 대신에
var str = 'This ' + 'is ' + 'a ' + 'test';
다음 코드를 이제 사용할 수 있습니다.
var sb = new StringBuilder;
sb.Append('This ');
sb.Append('is ');
sb.Append('a ');
sb.Append('test');
var str = sb.ConvertToString();
sb.Append('This ');
sb.Append('is ');
sb.Append('a ');
sb.Append('test');
var str = sb.ConvertToString();
우리의 테스트로는 Inernet Explorer에서 'test'라는 스트링을 50000번 결합했을 경우, StringBuilder Append 메소드가 + 연산자를 사용하는 것보다 10배정도 더 빠르게 작업하는 것이라고 나왔습니다.
17. Use hash tables for efficient lookups
Hash 테이블은 새로운 엔트리들의 효과적인 추가에 대한 방법과 특정 키의 검색에 소비되는 시간이 O(1)고 같은 저장된 아이템들에 독립적이다라는 것을 제공합니다. (Hash tables provide a way of efficient addition of new entries and the time spent searching for a specified key is independent of the number of items stored, which is O(1).) 설명하기 전에 어떻게 JavaScript 파일에서 Hash 테이블을 만드는지를 알기 위해, JavaScript에서 결합 Array에 대하여 먼저 시작하도록 하겠습니다.
결합 Array은 키 컬렉션과 값 컬렉션들로 구성된 추상 데이터 타입이며, 하나의 키는 하나의 값과 연계되어 있습니다. JavaScript에서, 모든 객체는 연관된 Array입니다. 여러분은 다음과 같이 객체의 속성들에 접근할 수 있습니다.
d0cument.forms['Form1']
또는
d0cument.forms.Form1
JavaScript 객체는 Array 객체처럼 length 속성을 제공하지는 않지만, 여러분은 다음과 같은 구조를 사용하여 객체의 속성들을 반복시킬 수 있습니다.
for (var prop in object)
예를 들어, UltimateEditor 컴포넌트는 클라이언트측 API에서 호출된 UltimateEditors의 연관된 Array을 제공합니다. 각 UltimateEditors 클라이언트측 객체들은 UltimateEditors 연관된 Array의 속성으로써 정의되어 있습니다. 만약 페이지가 여러개의 UltimateEditors 컴포넌트를 가진다면, 다음의 JavaScript 코드는 모든 UltimateEditors 객체들을 반복시킬 것이고, HTML 컨텐츠를 표현할 것입니다.
for (var ueObj in UltimateEditors) {
alert(ueObj.GetEditorHTML());
}
alert(ueObj.GetEditorHTML());
}
우리는 이제 연관된 Array 기능을 사용하여 HashTable 객체를 만들 수 있습니다. 우리의 HashTable 객체는 키/값 쌍을 저장하는 hashArr 속성과 hash 테이블에 있는 아이템들의 수를 추적하는 length 속성, 이 두 개의 속성을 가질 것입니다. 또한, 주어진 키 값을 검색하기 위한 get 메소드, hash 테이블로 키/값 쌍을 저장하기 위한 put 메소드, hash 테이블에서 키/값 쌍을 제거하기 위한 remove 메소드, hash 테이블에 주어진 키 값이 존재하는지를 반환하는 has 메소드, 이 네 개의 메소드를 가집니다.
function HashTable(){
this.hashArr = new Array();
this.length = 0;
}
HashTable.prototype.get = function(key) {
return this.hashArr[key];
};
HashTable.prototype.put = function(key, value) {
if (typeof(this.hashArr[key]) == 'undefined') {
this.length++;
}
this.hashArr[key] = value;
};
HashTable.prototype.remove = function(key) {
if (typeof(this.hashArr[key]) != 'undefined') {
this.length--;
var value = this.hashArr[key];
delete this.hashArr[key];
return value;
}
};
HashTable.prototype.has = function(key) {
return (typeof(this.hashArr[key]) != 'undefined');
};
this.hashArr = new Array();
this.length = 0;
}
HashTable.prototype.get = function(key) {
return this.hashArr[key];
};
HashTable.prototype.put = function(key, value) {
if (typeof(this.hashArr[key]) == 'undefined') {
this.length++;
}
this.hashArr[key] = value;
};
HashTable.prototype.remove = function(key) {
if (typeof(this.hashArr[key]) != 'undefined') {
this.length--;
var value = this.hashArr[key];
delete this.hashArr[key];
return value;
}
};
HashTable.prototype.has = function(key) {
return (typeof(this.hashArr[key]) != 'undefined');
};
자, 이제 효과적인 전화번호 검색을 위한 예제 hash 테이블을 만들어보겠습니다.
var phoneLookup = new HashTable();
phoneLookup.put('Jane', '111-222-3333');
phoneLookup.put('John', '444-555-6666');
alert(phoneLookup.get('Jane'));
phoneLookup.put('Jane', '111-222-3333');
phoneLookup.put('John', '444-555-6666');
alert(phoneLookup.get('Jane'));
18. Check whether an item exists in the array
JavaScript Array 객체는 배열에 주어진 값이 존재하는지를 반환하는 내장된 메소드를 제공하지 않습니다 그러나, 우리는 Array이 주어진 값을 가지고 있는지를 반환하기 위한 메소드를 추가함으로써 Array 기능을 확장시킨 프로토타입 메소드를 추가할 수 있습니다.
Array.prototype.has = function(value) {
var i;
for (var i = 0, loopCnt = this.length; i < loopCnt; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
var i;
for (var i = 0, loopCnt = this.length; i < loopCnt; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
이 메소드가 배열에서 값이 유일한 것인지를 체크하기 위해 === 연산자를 사용하는 것에 주목하십시요. 만약, 여러분이 단지 동일한지만을 체크하는 것이라면, === 연산자 대신에 == 연산자로 교체해야 할 것입니다.
Array.prototype.has = function(value) {
var i;
for (var i = 0, loopCnt = this.length; i < loopCnt; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
var i;
for (var i = 0, loopCnt = this.length; i < loopCnt; i++) {
if (this[i] === value) {
return true;
}
}
return false;
};
이제, 우리는 이 메소드를 다음과 같이 사용할 수 있습니다.
var arr = new Array();
arr[0] = 'test';
alert(arr.has('test')); // Should display true
alert(arr.has('test2')); // Should display false
arr[0] = 'test';
alert(arr.has('test')); // Should display true
alert(arr.has('test2')); // Should display false
19. Retrieve query string values
ASP.NET은 HTTP 쿼리 스트링에서 변수의 값을 검색하는 Request.QuerString 컬렉션을 제공하지만, 클라이언트측에서 쿼리 스트링 컬렉션을 검색하기 위한 내장된 기법은 아닙니다. 그러나, 여러분은 이전 팁 중에서 제공된 GetAttributeValue 메소드를 사용하여 쿼리 스트링 값들을 얻기 위한 window location search 속성을 분석(parse)할 수 있습니다.
function GetAttributeValue(attribList, attribName, firstDelim, secondDelim) {
var attribNameLowerCase = attribName.toLowerCase();
if (attribList) {
var attribArr = attribList.split(firstDelim);
for (var i = 0, loopCnt = attribArr.length; i < loopCnt; i++) {
var nameValueArr = attribArr[i].split(secondDelim);
for (var j = 0, loopCnt2 = nameValueArr.length; j < loopCnt2; j++) {
if (nameValueArr[0].toLowerCase().replace(/\s/g, '') ==
attribNameLowerCase && loopCnt2 > 1) {
return nameValueArr[1];
}
}
}
}
}
var attribNameLowerCase = attribName.toLowerCase();
if (attribList) {
var attribArr = attribList.split(firstDelim);
for (var i = 0, loopCnt = attribArr.length; i < loopCnt; i++) {
var nameValueArr = attribArr[i].split(secondDelim);
for (var j = 0, loopCnt2 = nameValueArr.length; j < loopCnt2; j++) {
if (nameValueArr[0].toLowerCase().replace(/\s/g, '') ==
attribNameLowerCase && loopCnt2 > 1) {
return nameValueArr[1];
}
}
}
}
}
이 메소드는 이름/값 쌍의 목록과 값을 검색하기 위한 속성명, 그리고 첫번째와 두번째의 구분자등의 3가지 인수를 취합니다. 첫번째 구분자는 &이고 두번째 구분자는 쿼리 스트링 값들을 분석하기 위한 =기호입니다. 이제 여러분은 주어진 쿼리 스트링 변수명을 가지고 쿼리 스트링 값을 검색하기 위한 다음의 메소드를 사용할 수 있습니다.
function GetQueryStringValue(varName) {
return GetAttributeValue(window.location.search.substring(1), varName, '&', '=');
}
return GetAttributeValue(window.location.search.substring(1), varName, '&', '=');
}
20. Move the focus away from your dropdown after change event
사용자가 DropDonwList의 선택을 변경할 때, 포커스는 DropDown 안에 남아있게 됩니다. 만약 사용자가 위/아래 키를 누르거나, 마우스 휠을 움직이게 되면, 이 행동들은 dropdown에서 onchange 이벤트를 발생시킬 것입니다.
여러분은 onchange 이벤트에서 dropdown 컨트롤을 포커스를 잃어버리게 만듬으로써 이러한 행동들을 방지할 수 있습니다.
JavaScript :
function LoseFocus(ddlElem) {
ddlElem.blur();
}
ddlElem.blur();
}
ASPX :
<asp:DropDownList id="ddlLoseFocus" runat="server" AutoPostBack="true" />
CS :
protected void Page_Load(object sender, EventArgs e)
{
ddlLoseFocus.Attributes.Add("onchange", "LoseFocus(this)");
}
{
ddlLoseFocus.Attributes.Add("onchange", "LoseFocus(this)");
}
21. Handle asynchronous operations with minimally growing arrays
여러분이 비동기 AJAX 콜백을 가지고 작업을 수행할 때, 나중에 Callback의 결과를 처리하기 위해 배열안에 Callback 결과들을 저장할 필요가 있을 것입니다. 여기에서 까다로운 부분은 배열의 사이즈를 최소로 유지해야 한다는 것입니다. 이 작업을 하기 위해서, 여러분은 이러한 처리가 종료되었을 때 배열의 아이템들을 비울 수 있으며, 다음 콜백 결과들을 이용할 수 있도록 만들 수 있으며, 배열 아이템으로 새로운 콜백 결과들을 항상 추가할 수 있습니다.
function InsertActiveCallbackArr(arrayObj, arrayElem) {
var i = 0;
for (var loopCnt = arrayObj.length; (i < loopCnt) && arrayObj[i]; i++);
arrayObj[i] = arrayElem;
}
var i = 0;
for (var loopCnt = arrayObj.length; (i < loopCnt) && arrayObj[i]; i++);
arrayObj[i] = arrayElem;
}
여러분이 콜백 결과를 가지고 작업을 끝냈을 때, 다음과 같이 간단하게 배열 아이템을 null로 설정할 수 있습니다.
function ProcessActiveCallbackArr(arrayObj) {
for (var i = 0, loopCnt = arrayObj.length; i < loopCnt; i++) {
// Process the callback result here
// Then set the array item to null
arrayObj[i] = null;
}
}
for (var i = 0, loopCnt = arrayObj.length; i < loopCnt; i++) {
// Process the callback result here
// Then set the array item to null
arrayObj[i] = null;
}
}
22. Pass data from one page to another using post
만약 여러분이 하나의 페이지에서 다른 페이지로 소량의 데이터를 전달할 필요가 있다면, 쿼리 스트링으로 데이터를 전달할 수 있으며, 타켓 페이지에서는 Request.QueryString 컬렉션을 통하여 이 데이터들을 검색할 수 있습니다. 그러나, 만약 여러분이 대량의 데이터를 전달할 필요가 있다면, Internet Explorer의 경우 페이지의 주소창에 전달할 수 있는 글자가 최대 2048 글자이기 때문에 쿼리 스트링으로 전달할 수 없습니다. 이러한 경우에, 여러분은 하나의 페이지에서 다른 페이지로 POST 연산을 사용하여 데이터를 전달할 수 있습니다. 여러분의 소스 페이지에 전달할 데이터를 저장하는 hidden 변수를 정의하고 쿼리 스트링에서 타켓 페이지로의 ID를 전달합니다.
타켓 페이지에서는 Request.QueryString 컬렉션을 통해 ID를 얻을 수 있습니다. 그리고 BODY onload 이벤트 핸들러를 통해 클라이언트측에서 hidden 변수의 값을 소스 페이지에서의 값으로 설정합니다. 여러분은 부모(opener) 페이지에서 DOM 요소를 검색하기 위해 opener 객체를 사용할 수 있습니다. 그리고, 타켓 페이지 자신이 포스트백을 하고 Request.Form 컬렉션을 통해 hidden 변수의 값을 검색합니다.
Source Page JavaScript :
function PassData(ctlID) {
window.open('TargetPage.aspx?ctlID=' + ctlID, 'NewWindow'
, 'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,status=yes,toolbars=no');
}
window.open('TargetPage.aspx?ctlID=' + ctlID, 'NewWindow'
, 'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,status=yes,toolbars=no');
}
Source Page ASPX :
<asp:TextBox ID="txtPassData" runat="server" Text="Data to pass" CssClass="TextBox"></asp:TextBox>
<asp:Button ID="btnPassData" runat="server" Text="Pass Data" CssClass="Button"
omClientClick="PassData('txtPassData'); return false;" />
<asp:Button ID="btnPassData" runat="server" Text="Pass Data" CssClass="Button"
omClientClick="PassData('txtPassData'); return false;" />
Target Page JavaScript :
function Body_Onload() {
var pageStatusElem = d0cument.getElementById('hfPageStatus');
// Page status hidden field value is initially empty string
if (pageStatusElem.value == '') {
// Set text to spell check hidden field value to the text in the opener window
d0cument.getElementById('hfTextPassed').value =
opener.window.d0cument.getElementById('<%=Request.QueryString["ctlID"]%>').value;
// Set page status hidden field value so that when the page is posted back
// it can process text to spell check retrieved from the opener window
pageStatusElem.value = '<%=SET_TEXT%>';
// Post back the page
d0cument.form1.submit();
}
}
var pageStatusElem = d0cument.getElementById('hfPageStatus');
// Page status hidden field value is initially empty string
if (pageStatusElem.value == '') {
// Set text to spell check hidden field value to the text in the opener window
d0cument.getElementById('hfTextPassed').value =
opener.window.d0cument.getElementById('<%=Request.QueryString["ctlID"]%>').value;
// Set page status hidden field value so that when the page is posted back
// it can process text to spell check retrieved from the opener window
pageStatusElem.value = '<%=SET_TEXT%>';
// Post back the page
d0cument.form1.submit();
}
}
Target Page ASPX :
<body omload="Body_Onload()">
<form id="form1" runat="server">
<div>
Text passed: <asp:Label ID="lblTextPassed" runat="server" Text="Label"></asp:Label>
</div>
<asp:HiddenField ID="hfTextPassed" runat="server" Value="" />
<asp:HiddenField ID="hfPageStatus" runat="server" Value="" />
</form>
</body>
<form id="form1" runat="server">
<div>
Text passed: <asp:Label ID="lblTextPassed" runat="server" Text="Label"></asp:Label>
</div>
<asp:HiddenField ID="hfTextPassed" runat="server" Value="" />
<asp:HiddenField ID="hfPageStatus" runat="server" Value="" />
</form>
</body>
Target Page C# :
public const string SET_TEXT = "SetText";
public const string TEXT_IS_SET = "TextIsSet";
protected void Page_Load(object sender, EventArgs e)
{
// Initial entry
if (hfPageStatus.Value == SET_TEXT)
{
// Set page status not to enter again
hfPageStatus.Value = TEXT_IS_SET;
}
lblTextPassed.Text = hfTextPassed.Value;
}
public const string TEXT_IS_SET = "TextIsSet";
protected void Page_Load(object sender, EventArgs e)
{
// Initial entry
if (hfPageStatus.Value == SET_TEXT)
{
// Set page status not to enter again
hfPageStatus.Value = TEXT_IS_SET;
}
lblTextPassed.Text = hfTextPassed.Value;
}
## 출처 : http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=071203102303236&categoryname=ASP.NET
'JavaScript' 카테고리의 다른 글
| IE와 파폭의 스크립트 문제 해결법 (0) | 2009.01.02 |
|---|---|
| 링크에 레이어 툴팁 효과 (0) | 2009.01.02 |
| ASP.NET 개발자들을 위한 JavaScript Tips - Part 1 (0) | 2009.01.02 |
| 자바스크립트로 구성된 이미지 슬라이더입니다. (0) | 2009.01.02 |
| 자바스크립트 복수 게시물 더보기/접기(more/less) 소스 (0) | 2009.01.02 |
