CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 4 Client Side JS & jQueryJan 30, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Monday, January 31, 2011References2jQuery: Novice to Ninja, Castledine & Sharkie, SitePoint Pty. Ltd, Feb 2010Pro JavaScript Techniques, John Resig, Apress, 2006JavaScript Programmer's Reference, MacAuley & Jobson, Osborne/McGraw-Hill, 2001HTML5 & CSS3 Develop with Tomorrow's Standards Today, Hogan, Pragmatic Programmersw3schools, http://www.w3schools.comjQuery Documentation, http://docs.jquery.com/Main_PageMonday, January 31, 2011Client-side Example3<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /><title>ClientSide</title> <script defer="defer" type="text/javascript"> function likeJavaScript(){ var paragraphs = document.getElementsByTagName("p"); alert( paragraphs.length); var message='Do you like JavaScript?'; if (confirm(message)) paragraphs[0].innerHTML="<b>JavaScript is awesome!</b>" else paragraphs[0].innerHTML="JavaScript sucks!" } </script></head><body onmouseover="likeJavaScript();"><p>Question?</p></body></html>RunMonday, January 31, 2011Prompting User4alert – dialog window with textconfirm – dialog window with text & yes no buttonsprompt – dialog window with text and input areaMonday, January 31, 2011Events5onblurAn element loses focusonchangeThe content of a field changesonclickMouse clicks an objectondblclickMouse double-clicks an objectonerrorAn error occurs when loading a document or an imageonfocusAn element gets focusonkeydownA keyboard key is pressedonkeypressA keyboard key is pressed or held downonkeyupA keyboard key is releasedonmousedownA mouse button is pressedonmousemoveThe mouse is movedonmouseoutThe mouse is moved off an elementonmouseoverThe mouse is moved over an elementonmouseupA mouse button is releasedonresizeA window or frame is resizedonselectText is selectedonunloadThe user exits the pageMonday, January 31, 2011Table from http://www.w3schools.com/jsref/dom_obj_event.aspBubbling of Events6<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>BubbleExample</title></head><body onclick="alert('body')" > <p onclick="alert('p')" > <a onclick="alert('a')" >Hello</a> </p></body></html>Runfirst alert('a')Second alert('p')Third alert('body')Monday, January 31, 2011Bubbling7<body><div id="foo"><p><a href="../../">Cat</a></p></div></body>DefaultUnless explicitly stopped event will be handled byhandler in originating elementhandler in enclosing elements then default (if any) action by browserElements may not have handler forgiven eventMonday, January 31, 2011Stopping Event from Bubbling8In IEwindow.event.cancelBubble = true;Other browsersevent.stopPropagation();Monday, January 31, 2011Default Browser Behavior9EventBrowser Default ActionClick on an <a> elementLoad new pageClick on submit buttonSubmit form data to serverMouse hover over <img>Show tool tipMonday, January 31, 2011Stopping the Default Browser Behavior10IEwindow.event.returnValue = false;Every one elseevent.preventDefault():Monday, January 31, 2011DOM - Document Object Model11Convention for representing and interacting with elements in HTML documentJavascript uses DOM to interact & modify HTML documentMonday, January 31, 2011Diagram from http://www.w3schools.com/HTMLDOM/default.aspDocument - Properties12anchors[]forms[]images[]links[]cookieName/value pairs of cookies in the documentdocumentModeMode used by the browser to render documentdomainDomain name of the serverlastModifiedDate & time the document was last modifiedreadyStateReturns the (loading) status of the documentreferrerURL of the current documenttitleSets or returns the title of the documentURLFull URL of the documentMonday, January 31, 2011Document - Methods13close()Closes the output stream opened with document.open()getElementById()Accesses the first element with the specified idgetElementsByName()Accesses all elements with a specified namegetElementsByTagName()Accesses all elements with a specified tagnameopen()Opens an output stream to collect the output from document.write() or document.writeln()write()Writes HTML expressions or JavaScript code to a documentwriteln()Same as write(), but adds a newlineMonday, January 31, 2011Document write/writeln14<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Javascript.html</title></head><body><script type="text/javascript">document.writeln( "Hello World!",'<br/>');</script></body></html>Can only use write/writeln before page has been renderedMonday, January 31, 2011getElementById15<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>ClientSide</title> <script type="text/javascript"> function change(){ document.getElementById("test").style.color='red'; } </script></head><body> <p id="test" onclick="change()" >Sample text</p></body></html>can only query/modify documentafter page is renderedMonday, January 31, 2011How to tell if page is done rendering?16There are a number of waysEasiest it to use jQueryMonday, January 31, 201117jQueryMonday, January 31, 2011jQuery18JavaScript library forHTML document traversing/modifyingevent handlinganimatingAjaxCross-browserStop worrying about IEjQuery UIUseful WidgetsjQuery pluginsUseful additionsjQuery 1.5 was released Jan 31, 2011Monday, January 31, 2011jQuery Example19<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ alert("The link no longer works"); $("a").click(function(event){ event.preventDefault(); $(this).hide("slow"); }); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html>Monday, January 31, 2011Loading jQuery - Local Copy20Download jQueryhttp://docs.jquery.com/Downloading_jQueryjquery-1.4.4.js 183KBjquery-1.4.4.min.js78.6KBWhite space removed<script src="jquery-1.4.4.min.js" type="text/javascript"></script>Monday, January 31, 2011Loading jQuery - CDN21Content Delivery NetworkSystem of computers with copy of dataWhen client requests data closest machine is usedWith jQuery browser may have already
View Full Document
Unlocking...