Lec 08 JQuery & Ajax.pptx

(1)

1

CS428 Web Engineering

Lecture 08

JavaScript Library

(2)

Today’s Goal:

Jquery & Ajax

• _{To become able to}_appreciate_{the concept of}

JavaScript libraries including JQuery:

– _What_{are they?}

– _What_{do they do?}

– _{How do we}_benefit_{from them?}

(3)

3

JavaScript Libraries(1)

• _{JavaScript is really a}_{small language}_.

• But unlike technologies like C++, Java, .Net etc

it doesn’t have dozens of built-in libraries with thousands of objects to use.

• _{A lot of people write}_code_{in JavaScript and}

bundled it together into one of the form of

(4)

JavaScript Libraries(2)

• _{JavaScript libraries}_{simply means the}

JavaScript code that someone else wrote and you don’t have to.

• So, what are these libraries, they are dozens of

them, we just used few

• Some of these libraries like google closure,

(5)

(6)

(7)

(8)

(9)

(10)

JavaScript Libraries(3)

• _{They have whole lots of function that helps} navigating to the DOM, they include code for

cross browser detection. Easier to work with

events without worrying which version of

Internet Explorer you might using or working with animations.

• Make it easy to have your JavaScript request

(11)

11

• _{To use any of these}_libraries_{I just have to go}

there and downloaded.

• _{For Example:}_{www.jquery.com}

• You just download it and link it like you link your

(12)

• _{Now on other hand some}_{JavaScript libraries}

are more specialized rather then the general purpose.

• Example: www.huddletogether.com LightBox

are simple JavaScript libraries for popping up images on your website.

• _{They might be use for implementing things like}

(13)

(14)

(15)

15

• _{They help you to add}_{curve corners}_etc

• _{Most of these libraries are}_{open source}_{and they}

are free, No licensing

• _{You simply}_{grab the code}_{and use it.}

• The most general purpose JavaScript library is

JQuery. Knowing the JavaScript library particularly JQuery is core skill for a JavaScript developer

(16)

What is JQuery?

• _JQuery_{is a}_lightweight_{,”write less, do more”}

JavaScript library.

• _{The purpose of jQuery is to}_{make it much}

easier to use JavaScript on your website.

• How to use it?

• Visit www.jquery.com and download both

(17)

Downloading JQuery

• _{There are}_{two versions}_{of jQuery available for}

downloading:

– _{Production version}_{- this is for your live website}

because it has been minified and compressed

– _{Development version}_{- this is for testing and}

development (uncompressed and readable code)

• Both versions can be downloaded from

jQuery.com.

(18)

(19)

jQuery Environment Setup

<!DOCTYPE html>

<title>Title of page</title>

<script type="text/javascript"

src="/js/jquery-2.1.3.min.js"></script>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

(20)

jQuery CDN

• _{If you don't want to download and host jQuery yourself, you can include it}

from a CDN (Content Delivery Network).

• _Both_Google_and_Microsoft_{host jQuery.}

• _{Google CDN:}

• _<head>

<script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></ script>

</head>

• _{Microsoft CDN:}

• _<head>

(21)

21

THE DOCUMENT READY EVENT

• _$₍_document_).ready(_function()_{ // jQuery methods go here...

});

• _{This is to prevent any jQuery code from running before}

the document is finished loading (is ready).

• _{It is good practice to wait for the document to be fully}

(22)

JQUERY SYNTAX

• _{Basic syntax is:}_$(_selector_)._action()

• A $ sign to define/access jQuery

• _{A (}_selector_{) to "}_{query (or find)}_{" HTML elements} • _{A jQuery}_action()_{to be performed on the}

(23)

23

EXAMPLES

• _$₍_this_)._hide()_{- hides the current element.}

• $("p").hide() - hides all <p> elements.

• _$₍_".test"_)._hide()_{- hides all elements with}

class="test".

• _$₍_"#test"_)._hide()_{- hides the element with}

(24)

JQUERY SELECTORS

• _{jQuery selectors}_{allow you to}_select_and

manipulate HTML element(s).

• _{With jQuery selectors you can find}_elements

based on their id, classes, types, attributes,

values of attributes and much more. It's based

on the existing CSS Selectors, and in addition, it has some own custom selectors.

(25)

25

THE ELEMENT SELECTOR

• _The_{jQuery element selector}_selects_elements

based on their tag names. You can select all <p> elements on a page like this:

• Example:

(26)

26

THE #ID SELECTOR

• _The_{jQuery #id selector}_{uses the}_{id attribute}_of

an HTML tag to find the specific element.

• _{To find an element with a specific id, write a}

hash character, followed by the id of the element:

• Example:

(27)

27

THE

.

CLASS SELECTOR

• _The_{jQuery class selector}_{finds elements with a}

specific class.

• _{To find elements with a specific class, write a}

period character, followed by the name of the class:

• Example:

(28)

28

MORE EXAMPLES OF SELECTOR

Syntax Description

• $("*") Selects all elements

• $(this) Selects the current HTML

element

• $("p.intro") Selects all <p> elements with

class="intro"

• _$("p:first") _{Selects the first <p> element} • _$("[href]") _{Selects all elements with an}

href attribute

(29)

REGULAR JavaScript vs. JQuery

• _{Without JQuery we often write lines of code like this:}

document.getElementById(“myDiv”).className = “highlight”;

jQuery(“#myDiv”).addClass(“highlight”);

there is two reason why JQuery code is preferable:

1) getElementById(“myDiv”) we must have an ID “myDiv” in HTML, if we doesn’t have ID “myDiv” we can’t get to it. But JQuery is much more flexible

2) We can give JQuery ID to find using hash sign, but we can also find other parts of the page that we can’t get

element by ID. For Example: we can get all the elements belong to a particular class

jQuery(“.someClass”)

(30)

jQuery(“p”) jQuery(“a”)

jQuery(“li”)

• jQuery(“#myDiv”).addClass(“highlight”);

• _{We are telling jQuery what we wanted to find}

• jQuery(“p.description”)

• Give me all the paragraph that have a class

(31)

• _{Further words we can add to}_{further refine}

our jQuery statement.

:first :last

:contains() :visible

(32)

JQUERY METHODS

• _$_{( “}_{what to find}_{” ).}_someAction;

• $( “#myDiv” ).addClass( “highlight” );

.removeClass( “highlight” ); .toggleClass( “highlight” );

Note:

(33)

JQUERY ALIAS

• _jQuery₍_“#myDiv_{” ).}_addClass_{( “}_highlight_{” );}

• $( “#myDiv” ).addClass( “highlight” );

• _{General Format:}

• _$_{( “}_{what to find}_{” ).}_someAction₍_{any params}_);

(34)

What is AJAX?

•

AJAX stands for Asynchronous JavaScript And

XML

•

Allows web pages or parts of them to be

updated asynchronously

•

Based on XML HTTP request object aka ( XHR)

•

Requires basic understanding of:

•

(X)HTML – displaying the data/Dynamic content

•

CSS – styling the data

•

JavaScript – manipulating the DOM

(35)

Ajax -

Usage samples

•

Autocomplete search textboxes ( sample)

•

Cascading dropdown list boxes (sample )

•

Real-time - Continuous data refresh (long polling, chat systems…)

•

Immediate forms validation feedback ( sample)

•

Conditional display / dynamic content ( sample)

•

Auto save user information (Google Docs, Facebook)

•

Ratings, voting & other instant actions (sample)

(36)

(37)

(38)

Advantage of Ajax

•

Better interactivity & responsiveness

•

Impressive UX

•

Reduced connections to the web server

(partial rendering)

(39)

Disadvantage of Ajax

•

The back and refresh button are rendered useless

•

Bookmarking is useless (HTML 5 History API to the rescue)

•

Requires JavaScript to be enabled on browsers

•

SEO & analytics unfriendly

•

Screen readers unfriendly – affects accessibility

•

Callbacks can lead to complex code

•

Network latency may break usability