Javascript

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

2. 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

3. Javacript • Tons of libraries exist with new ones created/updated all the time http://en.wikipedia.org/wiki/List_of_JavaScript_libraries

4. How to add it to a page • Add this script tag to the header section of your page: <scriptsrc="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

5. 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 <scripttype="text/javascript"> alert("Hello world!"); </script>

6. Accessing elements • Here’s our ASPX page: <divid="divContent"runat="server"> <div> <asp:LabelID="Label1"runat="server"Text="Enter Some Text:"></asp:Label> <asp:TextBoxID="TextBox1"runat="server"></asp:TextBox> </div> <div> <asp:ButtonID="Button1"runat="server"Text="Do Stuff"/> </div> </div>

7. Accessing Elements • It Looks like this:

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

9. Why didn’t that work? • Value is null???

10. Name Mangling • ASP.NET mangles control names. We have to use the ClientID • The actual name of this textbox is: “ctl00$ContentPlaceHolder1$Button1“ <inputtype="submit"name="ctl00$ContentPlaceHolder1$Button1"value="Do Stuff"onclick="showMessage();"id="ContentPlaceHolder1_Button1"/>

11. 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

12. Static Id • We need to set the ClientIDMode of the control <asp:TextBoxID="TextBox1"ClientIDMode="Static"runat="server"></asp:TextBox>

13. Static ID • When the control renders, it will render without mangling the name. • The ID is Static – it will not change <inputname="ctl00$ContentPlaceHolder1$TextBox1"type="text"id="TextBox1"/>

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

15. Accessing the ClientID • To access the client ID, we need to change our javascript functionshowMessage() { var textbox = document.getElementById( "<%=TextBox1.ClientID%>") alert(textbox.value); }

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

17. Accessing the ClientID • And it works:

18. jQuery • We’re going to focus on jQuery • Easy to use • Widely accepted • Decent documentation • http://api.jquery.com/

19. Accessing Elements • jQuery uses a funny syntax for selecting elements • $(“#IdOfControl”) functionshowMessageJquery() { var textbox = $("#"+ "<%=TextBox1.ClientID%>"); alert(textbox.val()); }

20. 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

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

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

23. Show/Hide functionshowContent() { var content = $("#divShowHideContent"); content.show(); } functionhideContent() { var content = $("#divShowHideContent"); content.hide(); }

24. Show/Hide

25. Show/Hide

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

27. Toggle()

28. Other Effects • There are tons of these • Previews online: http://jqueryui.com/

29. 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

30. DatePicker() • This one is found in jQueryUI • In this case, we’re using a custom theme http://jqueryui.com/themeroller/ <linkhref="~/Styles/custom-theme/jquery-ui-1.8.23.custom.css"rel="stylesheet"type="text/css"runat="server"/> <scriptsrc="../Scripts/jquery-ui-1.8.23.custom.min.js"type="text/javascript“/>

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

32. DatePicker()

33. Modal Popups • This is also found in jQueryUI • Shows content in a window <divid="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>

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