Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
Bring Your Web Applications
to Life with jQuery
John Valance
Division 1 Systems
© 2014-2018 Division 1 Systems
<div1>
www.div1sys.com
'
2
Bring Web Applications to Life with jQuery
About John Valance
• 30+ years IBM midrange experience (S/38 thru IBM i)
• 17+ years of web development experience
• Independent consultant since Feb. 2000
• COMMON Board of Directors since May 2017
• Founder and CTO of Division 1 Systems – www.div1sys.com
Helping IBM shops modernize and web-enable applications and skills
• Frequent presenter on web development topics
• Relationship with Zend Technologies
Instructor, Zend Reseller, Zend Certified Engineer
3
Bring Web Applications to Life with jQuery
• Intro to jQuery
• Technology Background
Web 2.0 / JavaScript / CSS / DOM
• jQuery
Concepts / Basic Syntax / Example Methods
• jQuery demos – w3schools.com
• Installing jQuery
• Ajax and JSON
• Extensions to jQuery
• Real Life Example (time permitting)
Agenda – What We Will Cover
Introduction to jQuery
5
Bring Web Applications to Life with jQuery
•A demo is worth a thousand PowerPoint slides
Let us take a field trip…
jQuery Demos
Web 2.0:The Dynamic Web
and
Web Applications
7
Bring Web Applications to Life with jQuery
• Web 2.0 refers to transition from static web content
to dynamic web applications
• Highly Interactive / High performance
Response time and functionality rival PC desktop applications
• Very dynamic interface
Change page contents on the fly
Animations
Drag 'n Drop
Auto-complete (Google search)
• UI and UX is controlled by JavaScript and CSS
Lots of client-side code
Web 2.0 Applications
8
Bring Web Applications to Life with jQuery
• Interaction with Server via Ajax Used to retrieve bits of data from the server without reloading
the entire page
Can also update the server through Ajax calls
• Use of JavaScript frameworks to simplify client-side code and cross-browser issues jQuery
Prototype
Dojo
ExtJS
• Heavy reliance on JavaScript and CSS
Characteristics of Web 2.0 Applications
JavaScript and CSS
10
Bring Web Applications to Life with jQuery
• It isn't Java, but similar syntax
C language syntax
• Scripting language for web browsers
Runs on the client-side only (typically)
All browsers have built-in JavaScript interpreter – you don't buy it or install it.
• Interpreted at run-time (as page loads)
What is JavaScript?
11
Bring Web Applications to Life with jQuery
JavaScript Example – input validation
<html>
<head>
<title>JavaScript Example</title>
<script>
function checkCustNo() {
if (document.myForm.custNo.value == '') {
alert('Customer number is required.');
} else {
alert('Customer No. entered was: ' + document.myForm.custNo.value);
}
}
</script>
</head>http://172.25.0.1:10080/sandbox/connect_dots/cust_prompt_validate.html
12
Bring Web Applications to Life with jQuery
JavaScript can manipulate the HTML document after it has been sent to the browser in a myriad of ways.
• Handle events
mouse clicks, cursor movement, etc.
• Communicate with user via pop-up alerts.
• Handle forms and input values
• Alter CSS attributes of HTML elements
• Add, change, delete HTML elements
• Open & close windows, and communicate between windows
• Read and write cookies
• Ajax – call server scripts and retrieve response without page
reload
What Can JavaScript Do?
13
Bring Web Applications to Life with jQuery
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
help separate content from presentation.
• Styles are normally stored in Style Sheets
a list of styling rules
• External Style Sheets are stored in .css files
site-wide style changes can be made in one place
What is CSS?
14
Bring Web Applications to Life with jQuery
•Selector: identifies a part of the document to be styled HTML tag name, Class name, or a Unique ID
•Property: A specific presentation attribute to be styled color, font-weight, border attributes, visibility
•Value: How the presentation attribute should be styled color: red; font-weight: bold; border: 2px solid blue;
CSS Style Rule Syntax
selector { property: value; property: value;...
}
body { font-size: 14pt; color: navy;...
}
Syntax: Example:
15
Bring Web Applications to Life with jQuery
• HTML Tag Name:
BODY { font: arial; font-size: 12pt; color: navy }
Can use any HTML tag name Applies to all occurences of the tag throughout a document
• Class Name - precede with period (.) :
.error { color: red; font-weight: bold}
<p class=“error”>Invalid email address</p>
Can specify the same class on many different HTML tags
• Unique ID – precede with hash (#):
#shipto { visibility: hidden }
<div id=“shipto”> <table>... </div>
ID name should only occur once in HTML document
Examples of CSS Selectors
16
Bring Web Applications to Life with jQuery
Same web application, different style sheets
•No style sheet (i.e. browser default style sheet)
http://jvalance.com/webdemos/cust_list_table.php
•Style sheet 1:
http://jvalance.com/webdemos/cust_list_table_style.php
•Style sheet 2:
http://jvalance.com/webdemos/cust_list_table_style2.php
CSS Demo
The Document Object Model
aka: The DOM
18
Bring Web Applications to Life with jQuery
• DOM is how JavaScript accesses HTML elements
• HTML document = hierarchy of elements defined
by tags
• As browser loads document, elements are loaded
into Objects that JavaScript can easily access
• These objects form a model of the document
structure, and are tied directly to the display
If JavaScript modifies the DOM, the display is
immediately updated
Document Object Model
19
Bring Web Application to Life with jQuery
HTML and DOM tree
HTML
<html>
<head>
<title>My
Document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
DOM
20
Bring Web Applications to Life with jQuery
JavaScript needs to access specific parts of the DOM to render dynamic content.
DOM Access via core JavaScript
• Very limited set of functions for accessing elements
• Awkwardness and Complexity of Code
DOM traversal and selection
• Arrays, Loops, Indexes
• Referencing Nodes and Elements
• Testing types and attributes of nodes
• Cross-browser compatibility issues
• Performance issues
How Do We Access the DOM Elements?
jQuery
22
Bring Web Applications to Life with jQuery
• Most widely used JavaScript
framework
• Greatly simplifies coding of
browser scripting
DOM selection and traversal
Cross browser API
Dynamic UI controls
Ajax calls
• Seamless integration with CSS
Easy to select elements via JavaScript
Easy to modify HTML attributes and
CSS properties
jQuery to the Rescue
• Intuitive syntax
well… mostly
• Open source and free
download from jQuery.com
• High performance and small file size
(~72K)
• No plug-ins required
Built on pure JavaScript
23
Bring Web Applications to Life with jQuery
<div id=“box”>
•Using Core JavaScript:
•Using jQuery
Example: Toggle Visibility
function toggleBox () {var elem = document.getElementById('box');if (elem.style.display == "none") {
elem.style.display = "";} else {
elem.style.display = "none";}
}
$("#box").toggle();
24
Bring Web Applications to Life with jQuery
$("css-selector").method();Example: $("#box").toggle();
• $( )
Synonymous with calling jQuery( )
This example could be coded jQuery("#box").toggle();
• $("#box")
This selects the element with id=“box”
• $("#box").toggle()
This toggles the visibility (hidden/visible) of the box element
• Same as if statement in previous slide
• Other visibility methods besides toggle():
show(), hide(), slideDown(), slideUp(),
slideToggle(), fadeIn(), fadeOut()
jQuery Syntax
25
Bring Web Applications to Life with jQuery
jQuery selectors = CSS selectors
• HTML tag name$('input') – selects all <input> elements
$('p') – selects all <p> elements
• Class attribute$('.inputLabel') – selects any element with class=“inputLabel”
• ID attribute$('#mainContent') – selects the element with id=“mainContent”
Selectors
26
Bring Web Applications to Life with jQuery
•$('p.helpText')
Select all paragraphs with class=“helpText”
No space between tag and class
•$('div#shippingInfo .label')
Select all elements with class=“label”, but only within the <div> tag with
id=“shippingInfo”
Note the space between the two selectors, indicates descendent relationship
•$('h1, h2, h3')
Select all <h1>, <h2>, and <h3> tags
Commas means a list of selectors
Combined Selectors
27
Bring Web Applications to Life with jQuery
Once elements are selected, we can call a variety of methods to alter the document
• hide(), show() and related methods
Saw these earlier
• addClass(), removeClass()
Add and remove a CSS class
• css()
Directly alter values of CSS properties
• attr(), removeAttr()
Change or remove HTML tag attributes
• text()
Change text contained between open/close tags
• insertBefore(), insertAfter, prepend() append(), remove(), replaceWith(), clone()
Allows insertion, deletion, moving, copying of HTML elements
Methods
jQuery API Documentation:
http://api.jquery.com/
28
Bring Web Applications to Life with jQuery
•w3Schools http://www.w3schools.com/jquery/jquery_examples.asp
•jQuery Party Tricks
http://jvalance.com/web20/jqtricks.html
•jQueryUI
http://jqueryui.com/demos/
•jqGrid
http://trirand.com/blog/jqgrid/jqgrid.html
Demos
Installing and Using jQuery
30
Bring Web Applications to Life with jQuery
•Two ways to start using:
1) Download the library from jQuery.com, and deliver
it to users from your server
<script src=“jquery.min.js”>
2) Use a Content Delivery Network (CDN), like Google
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.11.0/jquery.min.js">
•Put above <script> tag in <head> section
•Start coding with jQuery!
How to Use jQuery
31
Bring Web Applications to Life with jQuery
•Reduce latency
Google has a lot more servers than you do
They probably have one closer to your user than you do
•Increase parallelism
One less (fairly large) file to serve
Browsers can only request 2 to 6 files simultaneously from same
server
•Better caching
jQuery is used everywhere, most sites use the google CDN
Your users have probably already downloaded jQuery from google's
CDN
Benefits of Using CDN
Ajax and JSON
33
Bring Web Applications to Life with jQuery
Asynchronous JavaScript and XML
• Allows calling a server script from within an HTML page via
JavaScript
Server script can be any language (PHP, Java, RPG)
Call is asynchronous (JavaScript doesn't wait for response)
Can specify a JavaScript function to be called when response is received
• No page reload
• Can retrieve and update data on server very quickly
Sub-second response is typical (like a local PC application)
Can modify page contents or styling based on what's returned by the
server script
• Ajax calls are simplified by using jQuery
Eliminates cross-browser syntactical differences
Ajax
34
Bring Web Applications to Life with jQuery
•$.get(<url>, <callback-function>);
•$.post(<url>, <data>, <callback-function>);
•Data returned by server script can be any format
XML, HTML, JSON
Making an Ajax Call
// Event handler for click on get customer buttonfunction handleGetCustButtonClick() {
var url = 'getCustomer.php?custNum=1234';$.get(url, processGetCustResponse);
}
// Callback function for Ajax responsefunction processGetCustResponse( data ) {
alert('data returned = ' + data);}
35
Bring Web Applications to Life with jQuery
JSON = JavaScript Object Notation
• Simpler, more compact format than XML
Basically a list of name:value pairs enclosed in braces
{"error":true, "message":"Invalid zip code"}
• Easy to use and parse
• PHP has json_encode() function
Transform variables into JSON as
• {<var-name>:<var-value>}
Can be used with associative/multi-dimensional arrays
• JavaScript can automatically parse JSON response into JavaScript
object
JSON
36
Bring Web Applications to Life with jQuery
PHP's json_encode() function
var_dump($responseArray): json_encode($responseArray):
// Callback function for Ajax responsefunction processAjaxResponse( data ) {
alert('Cust name is ' + data.custRec.NAME);}
37
Bring Web Applications to Life with jQuery
$.ajax( { …// json parameters … } );
https://tutorialzine.com/2009/09/simple-ajax-website-jquery
https://demo.tutorialzine.com/2009/09/simple-ajax-website-jquery/demo.html
Generic $.ajax() method – using JSON data
Closures
39
Bring Web Applications to Life with jQuery
•Used extensively in jQuery
•Closures are also known as “Anonymous” functions, or
“Lambda” functions
•Below example shows a typical usage of
closures with jQuery
•“this” refers to whatever object was clicked
•We can reference that object's properties
Closures with jQuery
$(“input, button").click(function() {
alert(this.attr("name"));
});
40
Bring Web Applications to Life with jQuery
•Closures are often used as callback functions
callback = function which gets called upon completion of an event
•Ajax example from earlier could be written with an
anonymous callback:
•Closure has access to outer functions variables in the
state they had when the closure was created.
Closure as Callback
// Event handler for click on get customer button$('button.getcust').click( function(){
var url = 'getCustomer.php?custNum=1234';$.get(url, function( respData ) {
alert(url + ' returned: ' + respData);}
} );
41
Bring Web Applications to Life with jQuery
•Some good explanations of JavaScript closures, with
examples
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide/Closures
http://javascriptissexy.com/understand-javascript-closures-with-ease/
http://www.javascriptkit.com/javatutors/closures.shtml
http://forum.codecall.net/topic/58835-javascript-using-lambda-
functions/
Closures - References
jQuery Extensions and Plugins
43
Bring Web Applications to Life with jQuery
•Library of Widgets
•Built on jQuery
•Simple to create fancy, web standard UI controls
Drag/drop
Date picker
Accordion
Modal dialogs, etc.
•jQuery syntax, including CSS selectors
•http://jqueryui.com/demos/
jQuery UI
44
Bring Web Applications to Life with jQuery
• UI framework based on jQuery core
• Provides a professional design for a web
site/application, without having to be a designer
• Responsive Web Design principles
mobile first
resize/reflow DOM elements to fit any device
• UI widgets that are mobile friendly (touch screen)
good for “fat fingers”
can use same design for desktop
• Can be employed with light-weight HTML5 and CSS3
jQuery Mobile classes and roles
• http://demos.jquerymobile.com/1.4.2/intro/
jQuery Mobile
45
Bring Web Applications to Life with jQuery
• Plugin, built on jQuery
• Generates a grid control, i.e., an Rich-UI HTML table
pagination and scrolling
data load from multiple sources & formats
sort by columns
rich search capabilities
row grouping
pivot tables (new)
lots more…
• http://www.trirand.com/blog/jqgrid/jqgrid.html
• One of many jQuery-based grid packages
one of the most feature-rich ones
jqGrid
46
Bring Web Applications to Life with jQuery
• Production Scheduling Application,
running on IBM i,
over BPCS/LX database,
using:
PHP
jQuery
jQueryUI
jqGrid
Real-Life Demo
47
Bring Web Applications to Life with jQuery
• Cross-browser JS code compatibility
• HTML/DOM traversal and manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
Plus:
• Many other plugins/libraries/frameworks built on jQuery
Summary - jQuery Features
48
Bring Web Applications to Life with jQuery
• Download jQuery:
http://jquery.org/
• jQuery UI (widgets, extensions to jQuery):
http://jqueryui.com/demos/
• References and Tutorials on all web technologies:
http://www.w3schools.com/
• Examples used in this presentation available at:
http://jvalance.com/web20/
More Information
Thanks for Attending!
Please sign up for
the Div1Sys newsletter
50
Bring Web Application to Life with jQuery
Contact Information
John Valance
802-355-4024
Division 1 Systems
http://www.div1sys.com