CS计算机代考程序代写 cache angularjs gui javascript jquery Java COMP5347: Web Application Development Client-Side Libraries

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

element with id="grab" – varsingleElement=$("#grab");
– Get a set of all the elements the selector – varallAs=$("a");
– Select all odd

elements – $(“tr:odd”)
– These selectors replace the use of getElementById() and similar functions entirely
The University of Sydney
COMP5347 Web Application Development
Page 13

jQuery – Advanced Selectors
– Pseudoclassselector
– E.g.Selectingalllinksthathavebeenvisited – var visitedLinks = $("a:visited");
– Beyond CSS selectors – ContentFilters
• Select elements based on criteria – FormSelectors
• Shorthand version to select form elements
The University of Sydney
COMP5347 Web Application Development
Page 15

jQuery – Content Filters Selector
– $("body *:contains('warning')”)
The University of Sydney
COMP5347 Web Application Development
Page 16

jQuery – Content Filters Selector
– $("body *:contains('warning')”)
The University of Sydney
COMP5347 Web Application Development
Page 17

jQuery – HTML Attributes and Properties
• We can both set and get an attribute value by using the attr() method
var link = $("a").attr("href"); $("a").attr("href","http://funwebdev.com"); $("img").attr("class","fancy");
The University of Sydney Page 18

jQuery – HTML Attributes and Properties
• The prop() method is the preferred way to retrieve and set
the value of a property.

var theBox = $(".meh"); theBox.prop("checked"); // evaluates to TRUE
The University of Sydney
Page 19

Form Selectors
Selector
CSS Equivalent
Description
$(:button)
$("button, input[type='button']")
Selects all buttons
$(:checkbox )
$('[type=checkbox]‘)
Selects all checkboxes
$(:checked)
No Equivalent
Selects elements that are checked. This includes radio buttons and checkboxes.
$(:disabled)
No Equivalent
Selects form elements that are disabled.
$(:enabled)
No Equivalent
Opposite of :disabled
$(:file)
$('[type=file]')
Selects all elements of type file
$(:focus)
$( document.activeElement )
The element with focus
$(:image)
$('[type=image]')
Selects all elements of type image
$(:input)
No Equivalent
Selects all ,