Like coffee if coffee could read a script (that would be coffeescript)
-
Upload
marianna-jefferson -
Category
Documents
-
view
220 -
download
5
Transcript of Like coffee if coffee could read a script (that would be coffeescript)
![Page 1: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/1.jpg)
JavascriptLike coffee if coffee could read a script
(that would be coffeescript)
![Page 2: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/2.jpg)
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
![Page 3: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/3.jpg)
JavacriptTons of libraries exist with new ones created/updated all
the timehttp://en.wikipedia.org/wiki/List_of_JavaScript_libraries
![Page 4: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/4.jpg)
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
![Page 5: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/5.jpg)
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>
![Page 6: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/6.jpg)
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>
![Page 7: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/7.jpg)
Accessing ElementsIt Looks like this:
![Page 8: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/8.jpg)
Accessing ElementsSuppose we want to show an alert when the
user clicks the buttonfunction showMessage() { var textbox = document.getElementById(
"TextBox1") alert(textbox.value);}
![Page 9: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/9.jpg)
Why didn’t that work?Value is null???
![Page 10: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/10.jpg)
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" />
![Page 11: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/11.jpg)
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
![Page 12: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/12.jpg)
Static IdWe need to set the ClientIDMode of the
control<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox>
![Page 13: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/13.jpg)
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" />
![Page 14: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/14.jpg)
Static IdThe ID is static, but the name is still mangled
Our javascript will now work as is.
![Page 15: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/15.jpg)
Accessing the ClientIDTo access the client ID, we need to change
our javascript
function showMessage() { var textbox = document.getElementById(
"<%=TextBox1.ClientID%>") alert(textbox.value);}
![Page 16: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/16.jpg)
Accessing the ClientIDOur javascript will now render like this:
function showMessage() { var textbox = document.getElementById("ContentPlaceHolder1_TextBox1") alert(textbox.value);}
![Page 17: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/17.jpg)
Accessing the ClientIDAnd it works:
![Page 18: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/18.jpg)
jQueryWe’re going to focus on jQuery
Easy to useWidely acceptedDecent documentation
http://api.jquery.com/
![Page 19: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/19.jpg)
Accessing ElementsjQuery uses a funny syntax for selecting
elements$(“#IdOfControl”)
function showMessageJquery() { var textbox = $("#" + "<%=TextBox1.ClientID%>"); alert(textbox.val());}
![Page 20: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/20.jpg)
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
![Page 21: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/21.jpg)
Show/HideAdjusts the visibility of an elementYou can change the appearance of the
document without needing a postbackAdjusts the display style
![Page 22: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/22.jpg)
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>
![Page 23: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/23.jpg)
Show/Hidefunction showContent() { var content = $("#divShowHideContent"); content.show();}function hideContent() { var content = $("#divShowHideContent"); content.hide();}
![Page 24: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/24.jpg)
Show/Hide
![Page 25: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/25.jpg)
Show/Hide
![Page 26: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/26.jpg)
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");}
![Page 27: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/27.jpg)
Toggle()
![Page 28: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/28.jpg)
Other EffectsThere are tons of thesePreviews online: http://jqueryui.com/
![Page 29: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/29.jpg)
DatePicker()Dates are annoying to type by hand. jQueryUI has a pre-built date picker to make
this easierAssociate a textbox with a datepicker
![Page 30: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/30.jpg)
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“/>
![Page 31: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/31.jpg)
DatePicker()$("#" + "<%=TextBox2.ClientID%>")
.datepicker();
![Page 32: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/32.jpg)
DatePicker()
![Page 33: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/33.jpg)
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>
![Page 34: Like coffee if coffee could read a script (that would be coffeescript)](https://reader038.fdocuments.us/reader038/viewer/2022110210/56649e685503460f94b63b82/html5/thumbnails/34.jpg)
Modal Popups$("#dialog").dialog();