Like coffee if coffee could read a script (that would be coffeescript)

Javascript Client side code All the code we’ve seen so far runs on the server Javascript is one way to run code on the client side You can avoid needing to do postbacks Javascript runs on all major browsers You can even write a Windows 8 app with it

Javacript Tons of libraries exist with new ones created/updated all the time

How to add it to a page Add this script tag to the header section of your page: If you plan on using this throughout your website, this would be something to put in a master page

How to use it Add a script tag for javascripts You can add it to the page or reference a separate.js file containing other javascripts alert("Hello world!");

Accessing elements Here’s our ASPX page:

Accessing Elements It Looks like this:

Accessing Elements Suppose we want to show an alert when the user clicks the button function showMessage() { var textbox = document.getElementById( "TextBox1") alert(textbox.value); }

Why didn’t that work? Value is null???

Name Mangling ASP.NET mangles control names. We have to use the ClientID The actual name of this textbox is: “ ctl00$ContentPlaceHolder1$Button1 “

How to get the correct ID Two ways: Static Id This turns off the name mangling You now have to manage the ID’s yourself Very easy to end up with name conflicts Use the Client Id Easy to use, but has a funny syntax

Static Id We need to set the ClientIDMode of the control

Static ID When the control renders, it will render without mangling the name. The ID is Static – it will not change

Static Id The ID is static, but the name is still mangled Our javascript will now work as is.

Accessing the ClientID To access the client ID, we need to change our javascript function showMessage() { var textbox = document.getElementById( " ") alert(textbox.value); }

Accessing the ClientID Our javascript will now render like this: function showMessage() { var textbox = document.getElementById( "ContentPlaceHolder1_TextBox1") alert(textbox.value); }

Accessing the ClientID And it works:

jQuery We’re going to focus on jQuery Easy to use Widely accepted Decent documentation

Accessing Elements jQuery uses a funny syntax for selecting elements $(“#IdOfControl”) function showMessageJquery() { var textbox = $("#" + " "); alert(textbox.val()); }

Accessing Elements Value of a textbox is not.value in jquery Most properties like this are accessed through methods.val() More concise syntax to access values Simple to use Return value is a jQuery object You now have access to other jquery methods

Show/Hide Adjusts the visibility of an element You can change the appearance of the document without needing a postback Adjusts the display style

Show/Hide

Show/Hide function showContent() { var content = $("#divShowHideContent"); content.show(); } function hideContent() { var content = $("#divShowHideContent"); content.hide(); }

Show/Hide

Toggle() Same method to show/hide content All 3 of these methods can take arguments to adjust the animation function toggleContent() { var content = $("#divShowHideContent"); content.toggle("Blind"); }

Toggle()

Other Effects There are tons of these Previews online:

DatePicker() Dates are annoying to type by hand. jQueryUI has a pre-built date picker to make this easier Associate a textbox with a datepicker

DatePicker() This one is found in jQueryUI In this case, we’re using a custom theme

DatePicker() $("#" + " ").datepicker();

DatePicker()

Modal Popups This is also found in jQueryUI Shows content in a window This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Modal Popups $("#dialog").dialog();