introduction to web 2.0 programming - tug _apps_to_… · title: introduction to web 2.0...

Bring Your Web Applications

to Life with jQuery

John Valance

Division 1 Systems

[email protected]

© 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

http://www.div1sys.com/

3


• 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


•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


• 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


• 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


• 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


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

http://172.25.0.1:10080/sandbox/connect_dots/cust_prompt_validate.html

12


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


• 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


•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


• 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


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

http://jvalance.com/webdemos/cust_list_table.php

http://jvalance.com/webdemos/cust_list_table_style.php

http://jvalance.com/webdemos/cust_list_table_style2.php

The Document Object Model

aka: The DOM

18


• 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


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


• 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


<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


$("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


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


•$('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


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/

http://api.jquery.com/

28


•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

http://www.w3schools.com/jquery/jquery_examples.asp

http://jvalance.com/web20/jqtricks.html


http://trirand.com/blog/jqgrid/jqgrid.html

Installing and Using jQuery

30


•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


•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


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


•$.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


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


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


$.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


•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


•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


•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

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/

jQuery Extensions and Plugins

43


•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


• 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

http://demos.jquerymobile.com/1.4.2/intro/

45


• 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

http://www.trirand.com/blog/jqgrid/jqgrid.html

46


• Production Scheduling Application,

running on IBM i,

over BPCS/LX database,

using:

PHP

jQuery

jQueryUI

jqGrid

Real-Life Demo

47


• 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


• Download jQuery:

http://jquery.org/

• jQuery UI (widgets, extensions to jQuery):


• References and Tutorials on all web technologies:

http://www.w3schools.com/

• Examples used in this presentation available at:

http://jvalance.com/web20/

More Information

http://jquery.com/


http://www.w3schools.com/

http://jvalance.com/web20/

Thanks for Attending!

Please sign up for

the Div1Sys newsletter

50

Bring Web Application to Life with jQuery

Contact Information

John Valance

[email protected]

802-355-4024

Division 1 Systems

http://www.div1sys.com

introduction to web 2.0 programming - tug _apps_to_… · title: introduction to web 2.0...

Documents