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

JavascriptLike coffee if coffee could read a script

(that would be coffeescript)

JavascriptClient 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 browsersYou can even write a Windows 8 app with it

JavacriptTons of libraries exist with new ones created/updated all

the timehttp://en.wikipedia.org/wiki/List_of_JavaScript_libraries

How to add it to a pageAdd this script tag to the header section of

your page:<script src="Content/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

If you plan on using this throughout your website, this would be something to put in a master page

How to use itAdd a script tag for javascripts

You can add it to the page or reference a separate .js file containing other javascripts

<script type="text/javascript"> alert("Hello world!");</script>

Accessing elementsHere’s our ASPX page:<div id="divContent" runat="server"> <div> <asp:Label ID="Label1" runat="server"

Text="Enter Some Text:"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> <div> <asp:Button ID="Button1" runat="server"

Text="Do Stuff" /> </div></div>

Accessing ElementsIt Looks like this:

Accessing ElementsSuppose we want to show an alert when the

user clicks the buttonfunction showMessage() { var textbox = document.getElementById(

"TextBox1") alert(textbox.value);}

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

Name ManglingASP.NET mangles control names. We have to

use the ClientIDThe actual name of this textbox is:

“ctl00$ContentPlaceHolder1$Button1“

<input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Do Stuff" onclick="showMessage();" id="ContentPlaceHolder1_Button1" />

How to get the correct IDTwo 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 IdWe need to set the ClientIDMode of the

control<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox>

Static IDWhen the control renders, it will render

without mangling the name. The ID is Static – it will not change

<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="TextBox1" />

Static IdThe ID is static, but the name is still mangled

Our javascript will now work as is.

Accessing the ClientIDTo access the client ID, we need to change

our javascript

function showMessage() { var textbox = document.getElementById(

"<%=TextBox1.ClientID%>") alert(textbox.value);}

Accessing the ClientIDOur javascript will now render like this:

function showMessage() { var textbox = document.getElementById("ContentPlaceHolder1_TextBox1") alert(textbox.value);}

Accessing the ClientIDAnd it works:

jQueryWe’re going to focus on jQuery

Easy to useWidely acceptedDecent documentation

http://api.jquery.com/

Accessing ElementsjQuery uses a funny syntax for selecting

elements$(“#IdOfControl”)

function showMessageJquery() { var textbox = $("#" + "<%=TextBox1.ClientID%>"); alert(textbox.val());}

Accessing ElementsValue 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 useReturn value is a jQuery object

You now have access to other jquery methods

Show/HideAdjusts the visibility of an elementYou can change the appearance of the

document without needing a postbackAdjusts the display style

Show/Hide<div id="divShowHideContent"> <asp:Label ID="Label2" runat="server" Text="content 1"></asp:Label> <br /> <asp:Label ID="Label3" runat="server" Text="content 2"></asp:Label> <br /> <asp:Label ID="Label4" runat="server" Text="content 3"></asp:Label> <br /> <asp:Label ID="Label5" runat="server" Text="content 4"></asp:Label></div>

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

Show/Hide

Show/Hide

Toggle()Same method to show/hide contentAll 3 of these methods can take arguments to

adjust the animationfunction toggleContent() { var content = $("#divShowHideContent"); content.toggle("Blind");}

Toggle()

Other EffectsThere are tons of thesePreviews online: http://jqueryui.com/

DatePicker()Dates are annoying to type by hand. jQueryUI has a pre-built date picker to make

this easierAssociate a textbox with a datepicker

DatePicker()This one is found in jQueryUI

In this case, we’re using a custom theme http://jqueryui.com/themeroller/

<link href="~/Styles/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"runat="server" /><script src="../Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript“/>

DatePicker()$("#" + "<%=TextBox2.ClientID%>")

.datepicker();

DatePicker()

Modal PopupsThis is also found in jQueryUI

Shows content in a window

<div id="dialog" title="Basic dialog">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </div>

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