coreservlets.

com – custom onsite training

jQuery:
Installation, Overview,
and Getting Started
Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

coreservlets.com – custom onsite training

For customized training related to JavaScript or

Java, email [email protected]
Marty is also available for consulting and development support

Taught by lead author of Core Servlets & JSP,

co-author of Core JSF (4th Ed), and this tutorial.

Available at public venues, or

custom versions can be held on-site at your organization.
• Courses developed and taught by Marty Hall
– JavaScript, jQuery, Ext JS, JSF 2.3, PrimeFaces, Java 8 programming,
Spring Framework, Spring MVC, Android, GWT, custom mix of topics
– Courses available in any state or country.
– Maryland/DC companies can also choose afternoon/evening courses.
• Courses developed
Slides and
© 2016 Marty taught
Hall, by coreservlets.com experts (edited by Marty)
[email protected]
– Hadoop, Hibernate/JPA, HTML5, RESTful Web Services

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial

Contact [email protected] forsection
detailscontains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Topics in This Section
• Overview
• Downloading and using jQuery
• Interactive practice
– With Firebug or Chrome Developer Tools
• Manipulating the DOM with jQuery: basics
– Lots more detail in later section
• One small example
• Using “jQuery” instead of “$”

coreservlets.com – custom onsite training

Overview of jQuery

Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 jQuery is the Single-Most Popular JavaScript Library
• Ajax utilities
– General: $.ajax(…), $(…).load(…)
– Shortcuts: $.get, $.post, $.getJSON
• DOM search and manipulation utilities
– $("p.myStyle").addClass("extraStyle").show();
• Simple animation
– Not as extensive as Scriptaculous, but easy to use
• Cross-browser event model
– Assigns handlers programmatically, hides browser differences
• General JavaScript utilities
– Functions operating on strings and arrays
• Rich GUIs
– jQuery UI provides widgets, fancier effects, drag/drop
6

Industry Usage (Job Postings)

7
 Industry Usage (Google Searches)

Browser Compatibility
• Chrome, Firefox, Opera
– Current and previous major version
• Older versions tend to work, but are not tested on new jQuery code
• Same strategy as Google Docs
• Internet Explorer
– jQuery 1.9: IE 6 and later
– jQuery 2.x: IE 9 and later (same API as jQuery 1.9)
• As of 10/2015, no mention of Microsoft Edge on official support page, but work is in progress
• Safari
– 5.1 and later
• Android browser
– 4.0 and later
• iOS browser
– 6.1 and later
9
 JavaScript Testing
• Problem (from first section on general JavaScript)
– Java: very strict compliance tests to be called “Java”
• You can have very high confidence that code written in Java 8 on Windows version will
run identically (except for some differences in how GUIs look) on Java 8 on MacOS,
Linux, Solaris, and other Windows versions. True for Java from Oracle, Apple, IBM, or
open source version from Brazil.
– JavaScript: every browser vendor does it themselves, with no outside checks
• Behavior of same JavaScript program can vary substantially from browser to browser,
and even from one release of the same browser to another
• Consequence
– Before final deployment, you must test on all browsers you expect to support
– One of main benefits of jQuery is that it tries to hides browser differences, and it
mostly succeeds
• But even so, you must test on full range of browsers before final deployment

10

coreservlets.com – custom onsite training

Downloading and
Using jQuery
Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Downloading
• Main download site
– http://jquery.com/download/
• Development vs. deployment versions
– For development, use uncompressed file
• E.g., jquery-2.1.4.js
– For deployment, use compressed file
• E.g., jquery-2.1.4.min.js
• Rename file to generic name
– Rename file to jquery.js (or possibly jquery-2.js)
• Lets you switch from jquery-2.1.4.js to jquery-2.1.4.min.js without editing many HTML
files
• Similarly, lets you later upgrade to 2.1.5 without editing many HTML files

12

Typical Approach for Loading jQuery

...
<head>
<title>Your Title</title>
<link rel="stylesheet"
href="css/your-styles.css"/>
<script src="scripts/jquery.js"></script>
<script src="scripts/your-script.js"></script>
</head>
...

• You should load jQuery before loading your own scripts that make use of jQuery.
• You should rename jquery-x.y.z.js to jquery.js.

13
coreservlets.com – custom onsite training

Interactive Testing
and Practice
Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Practice with Firebug or Chrome

• Firefox with Firebug
– Load HTML page in Firefox
• HTML page should contain a few random HTML elements and load the core jQuery
library. It can optionally have a CSS file.
– Bring up Firebug
• Open Firefox, then click on Firebug logo or hit F12
• In this case, usually better to have Firebug attached to main window instead of as a
separate window
– Click on Console tab
• Enter commands at bottom and see results at top
• Chrome alternative is similar
– Bring up Chrome via Chrome menu, then Tools  Developer Tools, or Control-
Shift-J

15
 A Sample File: Part 1
<!DOCTYPE html>
<html>
<head>
<title>jQuery Test</title>
<link rel="stylesheet" href="css/styles.css"/>
<script src="scripts/jquery.js"></script>
</head>

16

A Sample File: Part 2

<body>
<h1 class="title">jQuery Test</h1>
<div id="main-div">
<br/>
<h1 class="yellow">This is an h1 (class="yellow")</h1>
<h1>This is another h1</h1>
<h2 class="red">This is an h2 (class="red")</h2>
<h2>This is another h2</h2>
<h3 class="green">This is an h3 (class="green")</h3>
<h3>This is another h3</h3>
...
</div>
</body>
</html>
17
 Things to Try First
• $
– Enter “blah” and it says it is undefined. Enter “$” and it should have a real value.
• “$” is the name of the main jQuery function (with alias “jQuery”)
• $("h1")
– If you have at least 1 h1 in the page, this should return an array of the matches. If
you have no h1’s, this should return an empty array. In general, you can supply a
CSS selector pattern as the argument to $.
• $("some-css-pattern").hide("slow")
– First, try
$("some-css-pattern");
If it returns a non-empty array, try
$("some-css-pattern").hide("slow");
and watch the matching elements disappear. Use
$("some-css-pattern").show("slow");
18
to make them come back.

Experimenting with Firebug

coreservlets.com – custom onsite training

Manipulating the
DOM with jQuery:
Basics Note: brief intro only. More details in later tutorial section.

Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.

Idea
• Manipulating the DOM
– One of the main uses of jQuery is to find elements in the DOM (Document Object
Model – the tree structure that represents the HTML page) and modify them in
various ways
• Quick intro now
– You can’t do much with jQuery without simple DOM manipulation, so very simple
intro now
– This will be enough to do Ajax – make network requests to the server and get data
back
• Lots more detail later
– In section entirely devoted to DOM manipulation

21
 Manipulating DOM: Overview
• Find HTML elements that match a pattern
– $("css selector pattern")
• Returns array of HTML elements that match
• Perform operations on the elements
– $("css selector pattern").op1(…);
• Single operation
– $("css selector pattern").op1(…).op2(…).op3(…);
• Consecutive operations via “chaining”
• Example
– $("div h3").addClass("yellow").hide("slow");
• Finds all h3’s that are inside a div, adds the CSS class named “yellow”, then slowly
makes them disappear

22

Selecting DOM Elements: Simple Examples

• $("#some-id")
– Return 1-element set (or empty set) of element that has that id
– Simplest use, and very common for Ajax (note the “#”)
• $("p")
– Return all p elements
• $(".blah")
– Return all elements that have class="blah"
• $("li b span.blah")
– Return all <span class="blah"> elements that are inside b elements, that in turn are
inside li elements

23
 Manipulating DOM Elements: Commonly Used Functions
• $("#some-id").val()
– Returns value of input element. Used on 1-element sets.
• $("selector").each(function)
– Calls function on each element. “this” set to element.
• $("selector").addClass("name")
– Adds CSS class name to each. Also removeClass, toggleClass
• $("selector").hide()
– Makes invisible (display: none). Also show, fadeOut, fadeIn, etc.
• $("selector").click(function)
– Adds onclick handler. Also change, focus, mouseover, etc.
• $("selector").html("<tag>some html</tag>")
– Sets the innerHTML of each element. Also append, prepend
24

coreservlets.com – custom onsite training

jQuery Selectors:
Quick Example
Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Idea
• Press button 1
– Change colors of certain elements
– Make them disappear
• Press button 2
– Make previously hidden elements reappear
• Purpose
– Give quick intro to use of jQuery for manipulating the DOM
– Little explanation now
– Lots more explanation in later sections

26

Example: Randomizing Background Colors (JavaScript)

function randomizeHeadings() {
Call setRandomStyle function on each h3 element
$("h3").each(setRandomStyle);
$("h3.green").hide("slow");
Slowly hide every h3 that has CSS style “green”
}

function setRandomStyle() {
$(this).addClass(randomStyle());
} Add “red”, “yellow” or “green” CSS names to each
matching element

27
 Example: Randomizing Background Colors (Continued)
function randomStyle() {
var styles = ["red", "yellow", "green"];
return(randomElement(styles));
}

function randomElement(array) {
var index = Math.floor(Math.random()*array.length);
return(array[index]);
}

28

Example: Randomizing Colors (Continued)

function revertHeadings() {
$("h3.green").show("slow");
$("h3").removeClass("red")
.removeClass("yellow")
.removeClass("green");
}
Runs when DOM is loaded. Explained in later section.

$(function() {
$("#button1").click(randomizeHeadings);
$("#button2").click(revertHeadings);
});
Sets onclick handlers

29
 Example: Randomizing Colors (Style Sheet)
.red { background-color: red }
.yellow { background-color: yellow }
.green { background-color: green }

Names usecd by setRandomStyles function

30

Example: Randomizing Colors (HTML)

During development, renamed jquery-2.1.4.js to jquery.js and used it here.
For deployment, replaced it with renamed jquery-2.1.4.min.js
...
<head><title>jQuery Basics</title>
<link rel="stylesheet"
href="css/styles.css"/>
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-basics.js"></script>
</head>
...

My file, containing code shown on previous slides. Should be loaded after the main jquery file.

31
 Example: Randomizing Colors (HTML Continued)
…
<h3>Foo, bar, baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, bar, baz</h3>
<h3>Blah, blah, blah</h3>
<h3>Yadda, yadda, yadda</h3>
<h3>Foo, bar, baz</h3>
<h3>Blah, blah, blah</h3> The ids to which click
handlers are attached.

<h3>Yadda, yadda, yadda</h3>

<input type="button" id="button1"
value="Randomize Headings"/>
<input type="button" id="button2"
value="Revert Headings"/>
32
…

Example: Randomizing Colors (Results)

After “Randomize Headings”. Some headings turned
green, then gradually disappeared.

When page originally loaded, or after “Revert Headings”

 Understanding Operations on Sets of Elements
• Instead of this
function randomizeHeadings() {
$("h3").each(setRandomStyle);
$("h3.green").hide("slow");
}
function setRandomStyle() {
$(this).addClass(randomStyle());
}
• Why can’t I simply do this?
function randomizeHeadings() {
$("h3").addClass(randomStyle())
$("h3.green").hide("slow");
34
}

coreservlets.com – custom onsite training

Using “jQuery”
instead of “$”
Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Equivalent Names
• $
– Traditional name of main jQuery object, and the one we use throughout this tutorial
• $("h3").hide("slow");
• $.ajax({ url: "relative-address", success: handlerFunc });
• jQuery
– Alternative and completely equivalent name. Introduced because some other
JavaScript libraries (e.g., Prototype) also use the $ variable
• jQuery("h3").hide("slow");
• jQuery.ajax({ url: "relative-address", success: handlerFunc });
• If you use another library that uses $
– Load jQuery second
– Call jQuery.noConflict();
– Use jQuery.blah instead of $.blah
36

coreservlets.com – custom onsite training

Wrap-Up

Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.
 Summary
• Rename jquery file and load it
– Rename jquery-2.1.x.js or jquery-2.1.x-min.js to jquery.js
• Load HTML file
– Either in Firefox (with Firebug installed) or Chrome
– HTML file should have some HTML elements and should load jquery.js
• Bring up Firebug
– Or Chrome developer tools
• Practice interactively
– Search for CSS selector patterns
$("h1")
$("#main-div ul ul li")
– Hide or show matching elements
$("#main-div ul ul li").hide("slow")
38

Books and References

• jQuery in Action
– by Bear Bibeault, Yehuda Katz, and John Resig
• Pro jQuery 2.0
– by Adam Freeman
• http://api.jquery.com/
– Very complete, but geared to specific methods
– Moderate number of explicit examples
• http://learn.jquery.com/
– Higher-level tutorials than the API site above
– Growing rapidly in 2015

39
coreservlets.com – custom onsite training

Questions? More info:

http://www.coreservlets.com/javascript-jquery-tutorial/ -- Tutorial on JavaScript, jQuery, and jQuery UI
http://courses.coreservlets.com/Course-Materials/java.html – General Java programming tutorial
http://www.coreservlets.com/java-8-tutorial/ – Java 8 tutorial
http://courses.coreservlets.com/java-training.html – Customized Java training courses, at public venues or onsite at your organization
http://coreservlets.com/ – JSF 2, PrimeFaces, Java 8, JavaScript, jQuery, Ext JS, Hadoop, RESTful Web Services, Android, HTML5, Spring, Hibernate, Servlets, JSP, GWT, and other Java EE training
Many additional free tutorials at coreservlets.com (JSF, Android, Ajax, Hadoop, and lots more)

Slides © 2016 Marty Hall, [email protected]

For additional materials, please see http://www.coreservlets.com/. The JavaScript tutorial section contains
complete source code for all examples in the entire tutorial series, plus exercises and exercise solutions for each topic.