chapter 12 jquery, ajax, json -...

Web programming Networking Laboratory 1/65

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2016 Networking Laboratory

Chapter 12

JQUERY, AJAX, JSON

Prepared by Vi Van Vo and H. Choo


jQuery

jQuery is a JavaScript Library.

It greatly simplifies JavaScript programming.

It is easy to learn.

JavaScript jQuery

document.getElementsByClassName(“Hello”); $(“Hello”);


jQuery – How to use

Local Installation: Download jQuery library on your local machine and

include it in your HTML code

CDN Based Version: Include jQuery library into your HTML code

directly from Content Delivery Network (CDN)


jQuery – How to useLocal Installation

Download the jQuery library from https://jquery.com/download/

Put downloaded jquery-3.3.1.min.js file in a directory of your

website, and you reference it with the HTML <script> tag

<head>

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

</head>

https://jquery.com/download/


jQuery – How to useLocal Installation - Example

“Hello World”

<html>

<head>

<title>The jQuery Example</title>

<script type = "text/javascript" src =

"jquery-3.3.1.min.js">

</script>

<script type = "text/javascript">

$(document).ready(function() {

document.write("Hello World!");

});

</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>


jQuery – How to useCDN Based Version

Include jQuery library into your HTML code directly from a Content

Delivery Network, such as Google, Microsoft

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquer

y/3.3.1/jquery.min.js"></script>

</head>


jQuery – How to useCDN Based Version - Example

Web_jQuery.html

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3

.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("p").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<p>Click me to disappear.</p>

</body>

</html>


jQuery – How to use

CDN Based Version - Example

Result


jQuery syntax

Tailor-made for selecting HTML elements and performing some

actions on the element(s).

$(selector).action();

Define/Access jQuery

To "query (or find)" HTML elements

Be performed on the element(s)


jQuery syntax

Example:

$(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 id="test".


jQuery Selector

Allow to select and manipulate HTML element(s).

Used to select HTML elements based on their name, id, classes,

types, attributes, values of attributes and much more.

Start with the dollar sign and parentheses: $().

Syntax Description

$("p") Selects elements based on the element name.

$("#id") Selects the element with the ID attribute

$(".class") Selects elements with a specific class.

$("*") Selects all elements

$(this) Selects the current HTML element

$(":button") Selects all <button> elements and <input> elements of

type="button"


jQuery Selector - Exercise (1/3)

jQuery_selector.html

<!DOCTYPE html>

<html>

<head>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jqu

ery.min.js"></script>

<script src = "jQuery_selector_function"></script>

</head>

<body>

<h1>This is a heading</h2>

<h2 class="test">This is another heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is a second paragraph.</p>

<p>This is another paragraph.</p>

<a href="https://skku.edu/">SKKU Homepage</a>

<a href="https://http://ice.skku.edu/eng_ice/">CICE</a>


jQuery Selector - Exercise (2/3) jQuery_selector.html (Cont)

jQuery_selector_function.js

Use the correct selector to hide

All <p> elements.

The element with id="test".

All elements with class="test".

All elements in the document.

All elements with an href attribute. (hint: $("[href]"))


$("selector").hide();

});

<button>This is a button</button>

<p id="test">This is a paragraph with id="test".</p>

</body>

</html>


jQuery Selector - Exercise (3/3)

All <p> elements.

$("p").hide();

The element with id="test".

$("#test").hide();

All elements with class="test".

$(".test").hide();

All elements in the document.

$("*").hide();

All elements with an href attribute. ($("[href]"))

$("[href]").hide();


jQuery Events (1/3)

Tailor-made to respond to events in an HTML page.

What are events?

All the different visitor's actions that a web page can respond to.

An event represents the precise moment when something happens.

Examples:

Moving a mouse over an element

Selecting a button

Clicking on an element


jQuery Events (2/3)

Here are some common DOM (Document Object Model) Events:

Mouse Events Keyboard Events Form EventsDocument/Window

Events

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload


jQuery Events (3/3)

If you want an events to work on your page, you should call it inside

the function:

$(document).ready(function) {

// jQuery methods go here...

});

Everything inside this function will load as soon as the DOM is loaded

and before the page contents are loaded


How to use Custom Scripts?

It is better to write our custom code in the custom JavaScript file as

follow:

/* Filename: custom.js */

$(document).ready(function() {

$("div").click(function() {

alert("Hello, world!");

});

});


How to use Custom Scripts?

Then, we can include the custom file in our HTML file:

<html>

<head>

<script type = "text/javascript" src =

"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jque

ry.min.js">

</script>

<script src = "/jquery/custom.js">

</script>

</head>

<body>

….

</body>

</html>


jQuery Events - click() (1/3)

Web_jQuery.html

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.

1/jquery.min.js"></script>

<script src="function.js"></script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

<p>Click me too!</p>

</body>

</html>



Function.js


$("p").click(function(){

$(this).hide();

});

});



Result


jQuery Events - mouseenter() (1/3)

Web_jQuery.html

<!DOCTYPE html>

<html>

<head>



<script src="function.js"> </script>

</head>

<body>

<p id="p1">Enter this paragraph.</p>

</body>

</html>



Function.js


$("#p1").mouseenter(function(){

alert("You entered p1!");

});

});



Result


jQuery Events - hover() (1/3)

Web_jQuery.html

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.

3.1/jquery.min.js"></script>


</head>

<body> <p id="p1">This is a paragraph.</p>

</body>

</html>



Function.js


$("#p1").hover(function(){

alert("You entered p1!");

},

function(){

alert("Bye! You now leave p1!");

});

});



Result


jQuery Events - focus() & blur() (1/3)

Web_jQuery.html

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="function.js"></script></head><body>Name: <input type="text" name="fullname"><br>Email: <input type="text" name="email"></body></html>



Function.js

$(document).ready(function(){$("input").focus(function(){

$(this).css("background-color", "#cccccc");});$("input").blur(function(){

$(this).css("background-color", "#ffffff");});

});



Result


jQuery Events – Exercise (1/3)

jQuery_event.html

<!DOCTYPE html>

<html>

<head>



<script src =" jQuery_event_function.js" ></script>

</head>

<body>

<input type="text" value="Press any key inside me to hide me"

size="40">

</body>

</html>



jQuery_event_function.js

Use the correct event to:

If you press a keyboard key inside the <input> element, it should be

hidden.


$("selector").event(function(){

$(this).hide();

});

});



Solution


$("input").keypress(function(){

$(this).hide();

});

});


jQuery Effects

There are some jQuery methods for creating animation effects.

Hide()/Show()

Fade()

Animate()

Chaining()


jQuery EffectsHide()/Show()

Hide and show HTML elements

Syntax:

$(selector).hide();

$(selector).show();

jQuery toggle()

Toggle method helps toggle between the hide() and show() methods

Syntax:

$(selector).toggle();


jQuery EffectsHide()/Show() – Example (1/3)

jQuery_toggle.html

<!DOCTYPE html>

<html>

<head>



<script src =" function.js"></script>

</head>

<body>

<button>Toggle between hiding and showing the paragraphs</but

ton>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

</body>

</html>



function.js


$("button").click(function(){

$("p").toggle();

});

});



Result


jQuery EffectsFade()

Fade elements in and out of visibility.

fadeIn():

Fade in a hidden element.

Syntax: $(selector).fadeIn();

fadeOut():

Fade out a visible element.

Syntax: $(selector).fadeOut();

fadeToggle():

Toggles between the fadeIn() and fadeOut() methods.

Syntax: $(selector).fadeToggle();

fadeTo():

Allows fading to a given opacity (value between 0 and 1).

Syntax: $(selector).fadeTo();


jQuery Effects Animate()

Used to create custom animations.

Syntax:

$(selector).animate({params}, speed, callback);

params parameter defines the CSS properties to be animated.

speed parameter specifies the duration of the effect.

callback parameter is a function to be executed after the animation completes


jQuery Effects Chaining (1/3)

Allows us to run multiple jQuery methods (on the same element) within

a single statement.

Web_jQuery.html

<!DOCTYPE html>

<html>

<head>



<script src ="function.js"></script>

</head>

<body>

<p id="p1">jQuery is fun!!</p>

<button>Click me</button>

</body>

</html>



Function.js



$("#p1").css("color", "red").fadeOut("slow").fadeIn("

slow");

});

});



Result


jQuery HTML

Change Content and Attributes:

text(), html(), val()

attr()

Add elements

Add new HTML content: append(), prepend(), after(), before()

Add several new Elements

Remove Elements/Content: remove(), empty()

Get and Set CSS classes: addClass(), removeClass(), toggleClass()

Work with Dimensions: width(), height()


jQuery HTMLGet/Set Content and Attributes

text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements

val() - Sets or returns the value of form fields

attr() – Get/Change attribute values.


jQuery HTMLGet Content and Attributes – Example (1/3)

jQuery_html_Content.html

<!DOCTYPE html>

<html>

<head>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.

min.js"></script>

<script src ="function.js" ></script>

</head>

<body>

<p id="test">This is some <i>italic</i> text in a para.</p>

<button id="btn1">Show Text</button>

<button id="btn2">Show HTML</button>

<p><a href="https://www.skku.edu" id="w3s">SKKU

Homepage</a></p>

<button id="btn3">Show href Value</button>

</body>

</html>



function.js


$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});


alert("HTML: " + $("#test").html());

});


alert($("#w3s").attr("href"));

});

});



Result


jQuery HTMLGet and Set CSS Classes

addClass() - Adds one or more classes to the selected elements

removeClass() - Removes one or more classes from the selected elem

ents

toggleClass() - Toggles between adding/removing classes from the sel

ected elements

css() - Sets or returns the style attribute


jQuery HTMLGet and Set CSS Classes – Example (1/3)

jQuery_html_css.html

<!DOCTYPE html>

<html>

<head>




<style>.blue {color: blue;} </style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Toggle class</button>

</body>

</html>



function.js



$("h1, h2, p").toggleClass("blue");

});

});



Result


jQuery HTMLDimensions

There are several important methods for working with dimensions:

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()


AJAX Introduction

AJAX stands for Asynchronous JavaScript And XML.

This is not a programming language. AJAX is a web development

technique for creating better, faster and more interactive web

applications of XML, HTML, CSS, and JavaScript

AJAX uses HTML for content, CSS for presentation, along with Document

Object Model and JavaScript for dynamic content display.

With AJAX, when you hit submit, JavaScript will make a request to the

server, interpret the results, and update the current screen. The user would

never know that anything was even transmitted to the server.

A user can continue to use the application while the client program

requests information from the server in the background.


AJAX – Browser support

All the available browsers cannot support AJAX. Here is a list of major

browsers that support AJAX.

Mozilla Firefox 1.0 and above.

Netscape version 7.1 and above.

Apple Safari 1.2 and above.

Microsoft Internet Explorer 5 and above.

Konqueror.

Opera 7.6 and above.

NOTE − When we say that a browser does not support AJAX, it simply

means that the browser does not support the creation of JavaScript

object – XMLHttpRequest object.


How AJAX Works

An event occurs in a web

page (the page is loaded, a

button is clicked)

An XMLHttpRequest object

is created by JavaScript

The XMLHttpRequest

object sends a request to a

web server

The server processes the

request

The server sends a response back to the web page

The response is read by JavaScript

Proper action (like page update) is performed by JavaScript


AJAX - Examples

Examples of applications using AJAX:

Gmail: A webmail built on the idea that emails can be more intuitive,

efficient, and useful.

Google Maps: A user can drag an entire map by using the mouse, rather

than clicking on a button.

Google: As you type, Google offers suggestions. Use the arrow keys to

navigate the results.

YouTube: Offers suggestions when we type.

Difference between AJAX and Conventional CGI Program

https://www.tutorialspoint.com/ajax/ajax_examples.htm

https://www.tutorialspoint.com/ajax/ajax_examples.htm


AJAX with jQuery

jQuery provides several methods for AJAX functionality.

With the jQuery - AJAX methods, we can

Request text, HTML, XML, or JSON from a remote server using both

HTTP Get and HTTP Post

Load the external data directly into the selected HTML elements of your

web page


JSON Introduction

JSON stands for JavaScript Object Notation.

It was designed for human-readable data interchange.

It has been extended from the JavaScript scripting language.

The filename extension is .json.

JSON is language independent

Uses JavaScript syntax, but the JSON format is text only.

Text can be read and used as a data format by any programming

language.


The uses of JSON

Exchanging between a server and web applications,

When exchanging data between a browser and a server, the data can be text.

JSON is text, we can convert any JavaScript object into JSON, and vice

verse.

Storing Data

When storing data, the data has to be a certain format, and regardless of

where you choose to store it, text is always one of the legal formats.

It can be used with modern programming languages, which include C,

C++, Java, Python, etc…


JSON Basic Syntax Rules

Data is in name/value pairs – {“name” : ”ABC”}

Uses double quotes (“”) around NAME and VALUE

Data is separated by commas (,)

Curly braces ({}) hold objects, each name is followed by colon (:)

Square brackets ([]) hold arrays

File type is “.json”


JSON – Data Types

Number: Can be an Integer/Float, Fraction, Exponent

String: String of Unicode character. Use double quotes

Boolean: True or False values

Array: An ordered collection of values. The values are separated by

comma and these are enclosed in square brackets

Object: Unordered collection of key/values pairs. Objects are enclosed

in curly braces. Each name is followed by colon and the key/value

pairs are separated by comma.

Null: Empty value


JSON – Example

{

“name”:”Kim”

“age”:40

“address”:{

“city”:”Seoul”

“country”: “Korea”

}

“children”:[“Anna”,”Bell”]

}


Q & A

chapter 12 jquery, ajax, json -...

Documents