COMP5347: Web Application Development Client-Side Libraries
Dr. Basem Suleiman
School of Computer Science
The University of Sydney
Page 1
Outline
– JavaScript Frameworks
– Intro to jQuery – Selectors
– Event handler and DOM Manipulation – Ajax requests
– Integrate jQuery with Expressjs Application
The University of Sydney
COMP5347 Web Application Development
Page 3
Revisits Client Side Technologies
– Web client is not a pure passive receiver of data sent from the server
– Modern client has lots of interactive features to make it like desktop GUI – HTML5
– CSS3
– JavaScript
– Many client side JavaScript libraries – jQuery
– Specialized libraries, e.g. D3.js, various google libraries
– Client side “scripting” becomes real application development with its own
model, view and controller – AngularJSframework
– BackboneMVCframework
The University of Sydney
COMP5347 Web Application Development
Page 4
JavaScript Frameworks
Comparison of the most popular JavaScript frameworks Randy Connolly, Ricardo Hoar (2017). Fundamentals of Web Development, Global Edition, Pearson
The University of Sydney
COMP5347 Web Application Development
Page 5
Outline
– JavaScript Frameworks
– Intro to jQuery – Selectors
– Event handler and DOM Manipulation – Ajax requests
– Integrate jQuery with Expressjs Application
The University of Sydney
COMP5347 Web Application Development
Page 6
jQuery
– jQuery is a lightweight JavaScript library
– Provides methods to wrap common JavaScript tasks
• HTML/DOM and CSS manipulation (e.g., selecting elements)
• HTML event methods (e.g., register element’s event handler)
• AJAX (managing asynchronized request)
• Effects and animation
– jQuery will run consistently across all major browsers
– Cross-browserknowledgeandissuesareconsidered
– Adopted by major companies including Google, Microsoft and IBM
The University of Sydney
COMP5347 Web Application Development
Page 7
Using jQuery
– The library is released as a single JavaScript file
– Can be downloaded then installed locally
– Include it from a CDN like Google, Microsoft or jQuery itself
• Reference it in the HTML
– Use a failsafe in case the CDN is down
The University of Sydney
COMP5347 Web Application Development
Page 8
Using jQuery – Failsafe Loading
– Pros of CDN host:
– Thebandwidthisoffloadedtoreducethedemandonyourservers
– Theusermayalreadyhavecachedthethird-partyfile;reducingthe total loading time
– Cons of CDN host:
– jQuerywillfailifthethird-partyhostfails(unlikelybutpossible)
The University of Sydney
COMP5347 Web Application Development
Page 9
jQuery Function
• The jQuery syntax is customized for selecting HTML elements and performing some action on the element(s)
– RemembergetElementById()... • The jQuery() or $() function
• $(selector).action()
– $signtodefine/accessjQuery
– (selector) to "query (or find)" HTML elements
– jQueryaction()tobeperformedontheelement(s)
• The $() function always returns a set of results
The University of Sydney
COMP5347 Web Application Development
Page 10
jQuery – Selectors
– Selecting using regular JavaScript
var node = document.getElementById("here");
var link = document.querySelectorAll("ul li");
– equivalentselectionusingjQuery var node = $("#here");
var link = $("ul li");
– Example with action
– Hide all elements with class="test“ – $(".test").hide()
The University of Sydney
COMP5347 Web Application Development
Page 11
jQuery – Main Selectors
– The selectors are very similar to CSS selectors
– Thefourbasicselectorsare:
– $("*")Universalselectormatchesallelements(slow)
– $("tag") Element selector matches all elements with the given element name
– $(".class") Class selector matches all elements with the given CSS class
– $("#id") Id selector matches all elements with a given HTML id
attribute.
– Other selectors defined in CSS can be used
The University of Sydney
COMP5347 Web Application Development
Page 12
jQuery – Basic Selector Examples
– Select the single