Java Script 3 Extending Java Script with j

Chapter 10 1 j. Query Foundations 2 Event Handling in j. Query 3 DOM

j. Query Foundations A popular framework Randy Connolly and Ricardo Hoar Fundamentals of Web

j. Query Foundations Including j. Query Use a Content Delivery Network (CDN) <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="http:

j. Query Foundations j. Query Selector Remember get. Element. By. ID()… • The power

j. Query Foundations j. Query Selector /* selecting using regular Java. Script */ var

j. Query Foundations Basic Selectors • $("*")—Universal selector matches all elements (and is slow).

j. Query Foundations Some examples Randy Connolly and Ricardo Hoar Fundamentals of Web Development

j. Query Foundations Advanced Selectors (Go back to Chapter 4 in CSS for a

j. Query Foundations j. Query's content filter selection Randy Connolly and Ricardo Hoar Fundamentals

j. Query Foundations Common element Manipulations - HTML attributes • We can both set

j. Query Foundations Common element Manipulations - HTML properties • The prop() method is

j. Query Foundations Common element Manipulations – Changing CSS • j. Query provides the

Event Handling in j. Query Just like Java. Script, j. Query supports creation and

Event Handling in j. Query Binding and Unbinding Events Randy Connolly and Ricardo Hoar

Event Handling in j. Query Page Loading $(document). ready(function() { // set up listeners

DOM Manipulation Creating Nodes // pure Java. Script way var js. Link = document.

DOM Manipulation Creating Nodes // j. Query version 2 var link 2 = $('<a></a>';

DOM Manipulation Adding DOM Elements Randy Connolly and Ricardo Hoar Fundamentals of Web Development

DOM Manipulation Wrapping Existing DOM in New Tags • Wrap all elements matched by

DOM Manipulation Wrapping Existing DOM in New Tags <div class="external-links"> <div class="gallery">Uffuzi Museum</div> <div

Effects and Animation Show() and fade. In() Randy Connolly and Ricardo Hoar Fundamentals of

Effects and Animation Using slide() Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Effects and Animation Raw Animation $(#"box"). animate(}left: '495 px'}); • Describes a final state

Effects and Animation Raw Animation Randy Connolly and Ricardo Hoar Fundamentals of Web Development

Effects and Animation Easing Functions Randy Connolly and Ricardo Hoar Fundamentals of Web Development

AJAX Asynchronous Java. Script with XML (AJAX) Randy Connolly and Ricardo Hoar Fundamentals of

AJAX Making Asynchronous Requests Randy Connolly and Ricardo Hoar Fundamentals of Web Development -

AJAX Synchronous example Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2

AJAX Asynchronous example – what's changed? Randy Connolly and Ricardo Hoar Fundamentals of Web

AJAX Making Asynchronous requests – load() Easy shortcut functions like load() $("#time. Div"). load("current.

AJAX Making Asynchronous requests - GET Easy shortcut functions. get() $. get("service. Travel. Countries.

AJAX Making Asynchronous requests – GET formal j. Query. get ( url [, data

AJAX The jq. XHR Object • $. get() requests made by j. Query return

AJAX The jq. XHR Object Randy Connolly and Ricardo Hoar Fundamentals of Web Development

AJAX The POST Method j. Query handles POST almost as easily as GET, with

AJAX The POST Method – form serialization The serialize() method can be called on

AJAX Complete Control over AJAX Over 30 fields to customize control. Here we add

AJAX Cross-Origin Resource Sharing cross-origin resource sharing described in greater detail in Chapter 18.

Asynchronous File Transmission The Form. Data Interface Randy Connolly and Ricardo Hoar Fundamentals of

Asynchronous File Transmission The Form. Data Interface function upload. File () { // get

Asynchronous File Transmission Appending Files to a POST var all. Files = $(": file")[0].

Summary Key Terms Animation Asynchronous Java. Script cross-origin resource sharing (CORS) with XML (AJAX)

Summary Questions? Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd

Slides: 53

Download presentation

Java. Script 3: Extending Java. Script with j. Query Chapter 10 Randy Connolly and Ricardo Hoar Fundamentals of Web Development © 2017 Pearson Fundamentals of Web Development 2 nd Ed. http: //www. funwebdev. com

Chapter 10 1 j. Query Foundations 2 Event Handling in j. Query 3 DOM Manipulation 4 Effects and Animation 6 Asynchronous File Transmission 5 AJAX 7 Summary Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations A popular framework Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Including j. Query Use a Content Delivery Network (CDN) <script src="http: //code. jquery. com/jquery-3. 1. 0. min. js"> </script> Use a failsafe in case the CDN is down Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations j. Query Selector Remember get. Element. By. ID()… • The power of j. Query resides in the function named j. Query(). • There’s also an alias for this function named $(). • You can combine CSS selectors with the $() notation to select DOM objects that match CSS attributes Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations j. Query Selector /* selecting using regular Java. Script */ var node = document. get. Element. By. Id("here"); var link = document. query. Selector. All("ul li"); /* equivalent selection using j. Query */ var node = $("#here"); var link = $("ul li"); • The $() function always returns a set of results Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Basic Selectors • $("*")—Universal selector matches all elements (and is 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. Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Some examples Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Advanced Selectors (Go back to Chapter 4 in CSS for a refresher) • Attribute Selector • Pseudo-Element Selector • Contextual Selector • j. Query Filters • Form Selectors Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations j. Query's content filter selection Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Common element Manipulations - HTML attributes • We can both set and get an attribute value by using the attr() method. // link is assigned the href attribute of the first <a> tag var link = $("a"). attr("href; (" // change all links in the page to http: //funwebdev. com $("a"). attr("href", "http: //funwebdev. com"); // change the class for all images on the page to fancy $("img"). attr("class", "fancy"); Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Common element Manipulations - HTML properties • The prop() method is the preferred way to retrieve and set the value of a property. <input class="meh" type="checkbox" checked="checked"> var the. Box = $(". meh"); the. Box. prop("checked"); // evaluates to TRUE Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

j. Query Foundations Common element Manipulations – Changing CSS • j. Query provides the extremely intuitive css() method. var color = $("#element"). css("background-color"); // get the color $("#element"). css("background-color", "red"); // set color to red Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Event Handling in j. Query Just like Java. Script, j. Query supports creation and management of listeners/handlers for Java. Script events. While pure Java. Script uses the add. Event. Listener() method, j. Query has on() and off() methods as well as shortcut methods to attach events. Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Event Handling in j. Query Binding and Unbinding Events Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Event Handling in j. Query Page Loading $(document). ready(function() { // set up listeners knowing page loads before this runs $("#example"). click(function () { $("#message"). html("you clicked"); {); Or the even simpler $(function () {. . . {); Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Creating Nodes // pure Java. Script way var js. Link = document. create. Element("a"); js. Link. href = "http: // www. funwebdev. com"; js. Link. inner. HTML = "Visit Us"; js. Link. title = "JS"; // j. Query version 1 var link 1 = $('<a href="http: //funwebdev. com" title="j. Query">Visit Us</a>'; ( Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Creating Nodes // j. Query version 2 var link 2 = $('<a></a>'; ( link 2. attr("href", "http: //funwebdev. com"); link 2. attr("title", "j. Query verbose"); link 2. html("Visit Us"); // version 3 )$'<a>'} , href: 'http: //funwebdev. com', title: 'j. Query', text: 'Visit Us' }); Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Adding DOM Elements Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Wrapping Existing DOM in New Tags • Wrap all elements matched by a selector within a new element using wrap(). Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Wrapping Existing DOM in New Tags <div class="external-links"> <div class="gallery">Uffuzi Museum</div> <div class="gallery">National Gallery</div> <div class="link-out">funwebdev. com</div> $(". gallery"). wrap('<div class="gallery. Link"><div>'); <div class="external-links"> <div class="gallery. Link"> <div class="gallery">Uffuzi Museum</div> />div< <div class="gallery. Link"> <div class="gallery">National Gallery</div> />div< <div class="link-out">funwebdev. com</div> />div< Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

DOM Manipulation Wrapping Existing DOM in New Tags <div class="external-links"> <div class="gallery">Uffuzi Museum</div> <div class="gallery">National Gallery</div> <div class="link-out">funwebdev. com</div> $(". gallery"). wrap(function() { return "<div class='gallery. Link' title='Visit " + )$this). html() + "'></div; "< ; ({ <div class="external-links"> <div class="gallery. Link" title="Visit Uffuzi Museum"> <div class="gallery">Uffuzi Museum</div> />div< <div class="gallery. Link" title="Visit National Gallery"> <div class="gallery">National Gallery</div> />div< <div class="link-out">funwebdev. com</div> />div< Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Effects and Animation Show() and fade. In() Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Effects and Animation Using slide() Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Effects and Animation Raw Animation $(#"box"). animate(}left: '495 px'}); • Describes a final state in CSS. • The state before defines where the animations starts. • Animate() has many parameters including: • Duration • Step • Done • … Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Effects and Animation Raw Animation Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Effects and Animation Easing Functions Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Asynchronous Java. Script with XML (AJAX) Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Making Asynchronous Requests Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Synchronous example Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Asynchronous example – what's changed? Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Making Asynchronous requests – load() Easy shortcut functions like load() $("#time. Div"). load("current. Time. php"); • Asynchronously calls current. Time. php and puts the returned content into the selected div with id time. Div Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Making Asynchronous requests - GET Easy shortcut functions. get() $. get("service. Travel. Countries. php? name=Italy"); Note that the $ symbol is followed by a dot. Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Making Asynchronous requests – GET formal j. Query. get ( url [, data ] [, success([data, text. Status, jq. XHR]) ] [ , data. Type ] ) • url is a string that holds the location to send the request. • data is an optional parameter that is a query string or a Java. Script object literal. • success(data, text. Status, jq. XHR) is an optional callback function • data holding the body of the response as a string. • text. Status holding the status of the request (i. e. , “success”). • jq. XHR holding a jq. XHR object • data. Type is an optional parameter to hold the type of data expected Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX The jq. XHR Object • $. get() requests made by j. Query return a jq. XHR object • jq. XHR objects implement the methods • done(), • fail(), and • always(), Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX The jq. XHR Object Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX The POST Method j. Query handles POST almost as easily as GET, with the need for an added field to hold our data. $. get("service. Travel. Cities. php", param) to $. post("service. Travel. Cities. php", param) Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX The POST Method – form serialization The serialize() method can be called on a DOM form element to encode it into a query string var post. Data = $("#some. Form"). serialize(); $. post("form. Handler. php", post. Data); Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Complete Control over AJAX Over 30 fields to customize control. Here we add headers $. ajax({ url: "vote. php", data: $("#vote. Form"). serialize(), async: true, type: post, headers: {"User-Agent" : "Homebrew Vote Engine", "Referer": "http: //funwebdev. com" } {); Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

AJAX Cross-Origin Resource Sharing cross-origin resource sharing described in greater detail in Chapter 18. • a way by which some malicious software can gain access to the content of other web pages you are surfing despite the scripts being hosted on another domain • sharing content legitimately between two domains becomes harder • images. funwebdev. com and www. funwebdev. com are considered different origins • Access-Control-Allow-Origin Randy Connolly and Ricardo Hoar header Fundamentals of Web Development - 2 nd Ed.

Asynchronous File Transmission The Form. Data Interface Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Asynchronous File Transmission The Form. Data Interface function upload. File () { // get the file as a string var form. Data = new Form. Data($("#file. Upload")[0]); var xhr = new XMLHttp. Request(); xhr. add. Event. Listener("load", transfer. Complete, false); xhr. add. Event. Listener("error", transfer. Failed, false); xhr. add. Event. Listener("abort", transfer. Canceled, false); xhr. open('POST', 'upload. php', true); xhr. send(form. Data); // actually send the form data function transfer. Complete(evt) { // stylized upload complete #")$progress"). css("width", "100%; (" #")$progress"). html("100%; (" { function transfer. Failed(evt) { alert("An error occurred while transferring the file. "); } function transfer. Canceled(evt) { alert("The transfer has been canceled by the user. "); } } Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Asynchronous File Transmission Appending Files to a POST var all. Files = $(": file")[0]. files; for (var i=0; i<all. Files. length; i++) { form. Data. append('images[]', all. Files[i]); } Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.

Summary Key Terms Animation Asynchronous Java. Script cross-origin resource sharing (CORS) with XML (AJAX) easing function content delivery filters network framework )CDN( Form. Data content filters graceful Randy Connolly and Ricardo Hoar degredation j. Query jq. XHR library progressive enhancement Fundamentals of Web Development - 2 nd Ed.

Summary Questions? Randy Connolly and Ricardo Hoar Fundamentals of Web Development - 2 nd Ed.