Thông tin tài liệu
JavaScript Base Type Extensions The main goal of the ASP.NET AJAX client-side framework is to emulate the ASP.NET and .NET Framework as much as possible to bring similar .NET-style programming to your client-side scripting. The ASP.NET AJAX JavaScript base type extensions are the first step toward achieving this goal. These extensions extend the functionality of the JavaScript base types such as Array , Boolean , Date , Error , Number , Object , and String to add support for .NET-like methods and properties. As such, the ASP.NET AJAX JavaScript base type extensions make client-side programming against these JavaScript base types more like server-side programming against their .NET counter- parts as much as possible . The code samples presented in this chapter use a new JavaScript function named pageLoad and a new server control named ScriptManager as shown in the boldfaced portion of Listing 2-1 . Listing 2-1: The ASP . NET Page Used by the Examples <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { . . . } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 27c02.indd 27 8/20/07 5:42:26 PM8/20/07 5:42:26 PM Chapter 2: JavaScript Base Type Extensions 28 I’ll discuss the pageLoad JavaScript function and ScriptManager server control in detail in future chapters. For now, here are two key concepts: ❑ One of the responsibilities of the ScriptManager server control is to download the ASP.NET AJAX client-side framework to the requesting browser to make it available to the browser’s JavaScript engine. ❑ The ASP.NET AJAX client-side framework automatically calls the pageLoad JavaScript function after the page and the related client-side scripts are completely loaded. ASP . NET AJAX Array Type Extensions The .NET Array type features methods such as Clone , Add , Clear , Contains , IndexOf , Insert , Remove , and RemoveAt . The ASP.NET AJAX client-side framework extends the JavaScript Array type to add support for similar methods. These extensions allow the JavaScript Array type to emulate its .NET counterpart as much as possible to make you feel like you’re programming against the .NET Array type. Keep in mind that these new methods are static methods, which means that you must call these methods directly on the Array class itself. add The add method takes two arguments of type Array and Object , respectively and adds the Object to the end of the Array as shown in the following code. Because the second argument is of type Object , you can add any type of object to the specified array. <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = [‘m1’,’m2’]; Array.add(a, ‘m3’); for (var i = 0; i<a.length; i++) alert(a[i]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 28c02.indd 28 8/20/07 5:42:27 PM8/20/07 5:42:27 PM Chapter 2: JavaScript Base Type Extensions 29 add Range The addRange method takes two arguments of type Array and adds the contents of the second Array object to the end of the first Array object, as shown in the following code: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a1 = [‘m1’,’m2’]; var a2 = [‘m3’,’m4’,’m5’]; Array.addRange(a1, a2); for (var i = 0; i<a1.length; i++) alert(a1[i]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> clear The clear method clears the specified Array object and sets its length property to zero, as shown in the following code fragment: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a1 = [‘m1’,’m2’]; alert(a1.length); Array.clear(a1); alert(a1.length); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 29c02.indd 29 8/20/07 5:42:27 PM8/20/07 5:42:27 PM Chapter 2: JavaScript Base Type Extensions 30 clone The clone method clones the specified Array object. This cloning operation is a shallow copy , which means that the object referenced in the Array object and its clone reference the same objects. That is, the references are copied, but the objects being referenced are not copied, as shown in the following code: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a1 = [‘m1’,’m2’]; var a2 = Array.clone(a1); alert(“a1[0] = “ + a1[0] + “\n” + “a2[0] = “ + a2[0]); alert(“a1[1] = “ + a1[1] + “\n” + “a2[1] = “ + a2[1]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> contains The contains method returns a Boolean value that indicates whether the specified Array object contains the specified element. For example: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a1 = [‘m1’,’m2’]; alert(Array.contains(a1,’m2’)); alert(Array.contains(a1,’m4’)); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 30c02.indd 30 8/20/07 5:42:27 PM8/20/07 5:42:27 PM Chapter 2: JavaScript Base Type Extensions 31 enqueue and dequeue The JavaScript Array type can be used as a stack. The standard JavaScript Array type exposes two methods named push and pop . The push method pushes a specified item onto the top of the stack, and the pop method pops up the item at the top of the stack. Here is an example: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = []; a.push(‘m1’); a.push(‘m2’); a.push(‘m3’); alert(a.pop()); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> This example respectively pushes the m1 , m2 , and m3 items onto the top of the stack. Note that the last pushed item—that is, m3 —sits on the top of the stack. The call into the pop method pops up the topmost item—that is, m3 . Figure 2-1 presents the stack before and after the call into the pop method. Stack (Before Calling pop) Stack (After Calling pop) ‘m3’ ‘m2’ ‘m2’ ‘m1’ ‘m1’ Figure 2-1 The JavaScript Array type can also be used as a queue. A queue is the opposite of a stack. A queue uses a FIFO (first in, first out) algorithm where the first item added to the queue is the first item to be served. The JavaScript Array type includes a method named shift that allows you to access the first item c02.indd 31c02.indd 31 8/20/07 5:42:28 PM8/20/07 5:42:28 PM Chapter 2: JavaScript Base Type Extensions 32 added to the list. Here is an example of a queue in JavaScript: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = []; a[0] = ‘m1’; a[1] = ‘m2’; a[2] = ‘m3’; alert(a.shift()); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> As you can see, JavaScript already supports the concept of queueing. However, the way this is done in JavaScript is quite different from the way it’s done in the .NET Framework. The main problem is that JavaScript uses an unintuitive approach to implement a queue. The ASP.NET AJAX client-side framework extends the functionality of the JavaScript Array type to add support for two convenient .NET-like methods named enqueue and dequeue , as shown here: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = []; Array.enqueue(a,’m1’); Array.enqueue(a,’m2’); Array.enqueue(a,’m3’); alert(Array.dequeue(a)); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> Figure 2-2 presents the queue before and after the call into the dequeue method. c02.indd 32c02.indd 32 8/20/07 5:42:28 PM8/20/07 5:42:28 PM Chapter 2: JavaScript Base Type Extensions 33 for Each The ASP.NET AJAX client-side framework extends the functionality of the JavaScript Array type to add support for a method named forEach . The best way to understand what this method does is to look at the internal implementation of this method as shown in Listing 2-2 . Listing 2-2: The Internal Implementation of the for Each Method Array.forEach = function(b, e, d) { for(var a = 0, f = b.length; a < f; a ++ ) { var c = b[a]; if(typeof c !== “undefined”) e.call(d, c, a, b); } } The forEach method takes the following three parameters: ❑ b : This parameter references a JavaScript Array object. ❑ e : This parameter references a JavaScript function that takes three parameters, which will be dis- cussed shortly . ❑ d : This parameter references a JavaScript object. As Listing 2-2 shows, the forEach function iterates through the elements of the Array object ( b ), calls the JavaScript function ( e ) once for each enumerated element, and passes the following parameters into the call method of this JavaScript function ( e ): ❑ The JavaScript object ( d ) ❑ The value of the enumerated element ( c ) ❑ The index of the enumerated element ( a ) ❑ The JavaScript Array itself ( b ) It’s completely up to the implementation of the JavaScript function ( e ) and the JavaScript object ( d ) what to do with the enumerated element of the specified array object ( b ) when the JavaScript function ( e ) is called. Listing 2-3 shows an example. Queue (Before Calling dequeue) Queue (After Calling dequeue) ‘m3’ ‘m2’ ‘m3’ ‘m2’ ‘m1’ Figure 2-2 c02.indd 33c02.indd 33 8/20/07 5:42:28 PM8/20/07 5:42:28 PM Chapter 2: JavaScript Base Type Extensions 34 Listing 2-3: Demonstration of the for Each Method <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function multiply(val,index,ar) { ar[index] = val * this.get_c(); } function myClass(c) { this.c = c; this.get_c = function () { return this.c; }; } function pageLoad() { var a = [1, 2, 3, 4]; var myObj = new myClass(6); Array.forEach(a, multiply, myObj); for (var j = 0; j<a.length; j++) alert(a[j]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> In this case, the forEach function calls the multiply JavaScript function once for each element of the Array ( a ). Note that Listing 2-3 also defines a class named myClass with a simple field and a getter method that returns the value of this field. In this case, the forEach function simply multiplies the value of each element of the array by the number 6. index Of The ASP.NET AJAX client-side framework extends the functionality of the JavaScript Array type to add support for a method named indexOf . As the name implies, this method returns the index of a specified element of a specified array. As such, it takes the following three parameters: ❑ The JavaScript array to be searched ❑ The array element to search for ❑ The index at which to start searching the array c02.indd 34c02.indd 34 8/20/07 5:42:29 PM8/20/07 5:42:29 PM Chapter 2: JavaScript Base Type Extensions 35 Here is an example: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = [1, 2, 3, 4]; alert (Array.indexOf(a, 3, 1)); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> insert The ASP.NET AJAX client-side framework extends the JavaScript Array type to add support for a method named insert , which inserts a specified object into a specified array at the specified index. The following code fragment inserts the number 5 into the specified array at position 1 , which means that after the insertion, the array will contain these elements: 1 , 5 , 2 , 3 , and 4 . <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = [1, 2, 3, 4]; Array.insert(a, 1, 5); for (var i = 0; i<a.length; i++) alert(a[i]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 35c02.indd 35 8/20/07 5:42:29 PM8/20/07 5:42:29 PM Chapter 2: JavaScript Base Type Extensions 36 parse The parse extension method allows you to parse the content of a string into an array. The string must follow this format: “[m1, m2, m3, m4, m5]” . Here is an example: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var str = “[1, 2, 3, 4]”; var a = Array.parse(str); for (var i = 0; i<a.length; i++) alert(a[i]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> remove The remove extension method allows you to remove a specified item from a specified array. The follow- ing code fragment removes the number 3 from the specified array: <%@ Page Language = “C#” %> <html xmlns = “http://www.w3.org/1999/xhtml”> <head runat = “server”> <title>Untitled Page</title> <script language = “JavaScript” type = “text/javascript”> function pageLoad() { var a = [1, 2, 3, 4]; Array.remove(a,3); for (var i = 0; i<a.length; i++) alert(a[i]); } </script> </head> <body> <form id = “form1” runat = “server”> <asp:ScriptManager ID = “ScriptManager1” runat = “server” /> </form> </body> </html> c02.indd 36c02.indd 36 8/20/07 5:42:30 PM8/20/07 5:42:30 PM [...]... id = “date” /> Figure 2- 3 shows what you’ll see in your browser when you access this page 42 c 02. indd 42 8 /20 /07 5: 42: 32 PM Chapter 2: JavaScript Base Type Extensions Figure 2- 3 As you can see, this is a simple page that consists of a text box and a button When you enter a date in the text box and... an error stack and a stack frame are, run the page shown in Listing 2- 4 48 c 02. indd 48 8 /20 /07 5: 42: 34 PM Chapter 2: JavaScript Base Type Extensions Listing 2- 4 : A Web Page that Displays an Error Stack . Listing 2- 3 shows an example. Queue (Before Calling dequeue) Queue (After Calling dequeue) ‘m3’ ‘m2’ ‘m3’ ‘m2’ ‘m1’ Figure 2- 2 c 02. indd 33c 02. indd 33 8 /20 /07 5: 42: 28 PM8 /20 /07 5: 42: 28 PM Chapter 2: . </form> </body> </html> Figure 2- 2 presents the queue before and after the call into the dequeue method. c 02. indd 32c 02. indd 32 8 /20 /07 5: 42: 28 PM8 /20 /07 5: 42: 28 PM Chapter 2: JavaScript Base Type. </form> </body> </html> Figure 2- 3 shows what you’ll see in your browser when you access this page. c 02. indd 42c 02. indd 42 8 /20 /07 5: 42: 32 PM8 /20 /07 5: 42: 32 PM Chapter 2: JavaScript Base Type Extensions 43
Ngày đăng: 09/08/2014, 06:23
Xem thêm: ASP.NET AJAX Programmer’s Reference - Chapter 2 ppsx, ASP.NET AJAX Programmer’s Reference - Chapter 2 ppsx
