1.NET Web Forms Client-Side JavaScript © 2002 by Jerry Post

2 Syntax: C variant  Netscape  Microsoft Web Development + HTML and Dynamic HTML + SDK Documentation + Reference  Variables:var i; (does not support data types)  Conditionsif (i > 10) { … }  Loopswhile (condition) { … }  Functionsfunction myFn(a, b, c) { … }  No pointers!  alert(“Message”) helps with debugging  WARNING: Everything in Javascript is case-sensitive!!!!

3 Document Object Model (DOM)  Anything you really want to do in client JavaScript relies on the document object model.  The “old” Netscape DOM has nothing in common with  The “standard” Microsoft DOM  Which is good, since the Netscape version was awful.  Two primary elements to learn  Reference to objects on the page (especially in forms)  Events

4 Document/Form Items  Refer to a value: document.form1.UserID.value  Submit a form with a button (rare): onClick=“this.form.submit()”

5 Form Validation  Today, build it into ASP.NET and let it write the code.  But, in case you need more detailed code: Function ValidateMe() { // a bunch of if tests on document.form1.whatever if (valid) { return true; } else { return false; }

6 Events  Many objects on the page support events. Common list:  click  focus  onmouseover  Onmouseout  Easiest structure is to define functions to handle each desired event, and then add the appropriate call to the object: 

7 Setting focus  A common script task is the ability to set focus to the initial text element. Strangely, ASP.NET does not yet support this feature.  Put the script at the end of the document, and double-check that control exists before you set focus (to ensure the form is loaded). if(document.Form1.txtUser != null) document.Form1.txtUser.focus();

8 Rollover Effects  Commonly used with buttons. You can add the code to an asp button, or to an HTML button. It will only work with Microsoft Internet Explorer. <asp:ImageButton id="ImageButton1" style="Z-INDEX: 119; LEFT: 202px; POSITION: absolute; TOP: 504px“ runat="server" ImageUrl="images/DeleteButton1.gif“ onmouseover="this.src='images/DeleteButton2.gif';“ onmouseout="this.src='images/DeleteButton1.gif';">

9 Drop-Down Menus  These require relatively complex code.  The code is really ugly if you want to support Netscape as well as Microsoft.  Several versions can be found on the Internet. Only a few support Netscape.  Microsoft documentation (MSDN) a couple of years ago had a nice system that uses XML and XSL to set the menu items. Style was controlled through style sheets, so the system was easy to implement.  ASP.NET does support a tree-structure control, but it probably requires a round-trip for each click.  It would take a dedicated class in JavaScript to cover all of the details to write your own.