chapter 12 jquery, ajax, json - skkumonet.skku.edu/.../09/chapter-12_jquery_ajax_json_v5.pdf ·...

Web programming Networking Laboratory 1/67

Sungkyunkwan University

Copyright 2000-2012 Networking LaboratoryCopyright 2000-2019 Networking Laboratory

Chapter 12

JQUERY, AJAX, JSON

Prepared by Vi Van Vo and H. Choo


Content

jQuery

Introduction

jQuery syntax

jQuery Events

jQuery Effects

jQuery HTML

AJAX introduction

JSON introduction


jQuery

jQuery is a JavaScript Library.

It greatly simplifies JavaScript programming.

It is easy to learn.

JavaScript jQuery

document.getElementById("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/

Place downloaded jquery-3.4.1.min.js file in the same directory

as the pages where you wish to use it then reference it with the HTML

<script> tag

<body>

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

</body>

https://jquery.com/download/


jQuery – How To UseLocal installation - Example

“Hello World”

<!DOCTYPE html>

<html>

<head>

<title>jQuery Local Installation</title>

</head>

<body>

<h1 id=“example" >Hello</h1><script type = "text/javascript" src =

"jquery-3.4.1.min.js">

</script>

<script type = "text/javascript">

$("#example").html("Hello World!")

</script>

</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

Google CDN:

Microsoft CDN:

<body>

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

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

</body>

<body>

<script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jq

uery-3.4.1.min.js"></script>

</body>


jQuery – How To UseCDN based version - Example

Web_jQuery.html

<!DOCTYPE html>

<html>

<head> <title>CDN Based version</title>

</head>

<body>

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

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

ery/3.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

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

$("p").hide();

});

});

</script>

</body>

</html>


jQuery – How To UseCDN 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 Syntax

You might have noticed that all jQuery methods in our examples, are

inside a document ready event:

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

and before the page contents are loaded

Wait for the document to be fully loaded and ready before working with it.

Allow JavaScript code, which is in the head section (before the body of

document), executes successfully.

$(document).ready(function() {

$(selector).action();

});


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.4.1/jquery.mi

n.js"></script>

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

</head>

<body>

<h1>This is a heading</h2>

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

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

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

<p>This is another paragraph without id and class.</p>

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

<a href="https://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: selecting [href])


$("selector").hide();

});

<button>This is a button</button>

<p id="test">This is a final 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]").hide();


jQuery Events (1/2)

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/2)

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


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/3.4.1/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.4.

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="https://ajax.googleapis.com/ajax/libs/jquery/3.4

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

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

4.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.4.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 will be hidden.


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

$("selector").hide();

});

});



Solution


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

$(this).hide();

});

});


jQuery Effects

List of some representative jQuery methods for creating animation effects.

Hide()/Show()

Animate()

Fade()


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 the paragraphs</button>

<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 Effects Animate()

Used to create custom animations.

Syntax:

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

Styles: Required. Specifies CSS properties/values to animate.

Speed: Optional. Specifies the speed of the animation.

Default value is 400 milliseconds

milliseconds (like 100, 1000, 5000, etc)

"slow"/ "fast"

Easing: Optional. Specifies the speed of the element in different points of the

animation.

Default value is "swing“ - moves slower at the beginning/end, faster in the middle

"linear" - moves in a constant speed

Callback: Optional. A function to be executed after the animation completes


jQuery Effects Animate() - Example(1/3)

HTML file

<!DOCTYPE html>

<html>

<head>



<script src="function.js">

</script>

</head>

<body>

<button>Hide</button>

<p>I am going to be hidden</p>

<p>Yes, you are</p>

</body>

</html>



function.js



$("p").hide("slow", function(){

alert("The paragraph is now hidden");

});

});

});



Result


jQuery EffectsFade()

Fade elements in and out of visibility.

fadeIn():

Fade in a hidden element.

Syntax: $(selector).fadeIn(speed,callback);

fadeOut():

Fade out a visible element.

Syntax: $(selector).fadeOut(speed,callback);

fadeToggle():

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

Syntax: $(selector).fadeToggle(speed,callback);

fadeTo():

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

Syntax: $(selector).fadeTo(speed,opacity,callback);


jQuery HTML

Change Content and Attributes:

text(), html(), val()

attr()

Add Content/Elements

append(), prepend()

after(), before()

Remove Elements/Content:

remove(),

empty()

Get and Set CSS classes:

addClass(),

removeClass),

toggleClass()


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.4.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">Click</button>

<input id="inp"></input>

<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());

});


$("#inp").val("haha");

});


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

});

});



Result


jQuery HTMLAdd/Remove elements

Add content or elements

append() - Inserts content at the end of the selected elements

prepend() - Inserts content at the beginning of the selected elements

after() - Inserts content after the selected elements

before() - Insert content before the selected elements

Remove elements

remove() - Removes the selected element and its child elements

empty() - Removes the child elements of the selected element(s).


jQuery HTMLAdd elements – Example (1/3)

jQuery_html_css.html

<!DOCTYPE html>

<html>

<head>




</head>

<body>

<p id="p1">Say something</p>

<p>Don't wanna say anything else.</p>

<ol>

<li>List item 1</li>

</ol>

<button id="btn1">Append text</button>

<button id="btn2">Append list items</button>

</body>

</html>



function.js



$("#p1").append(" <b>Okay</b>.");

});


$("ol").after("<li>Appended list item</li>");

});

});



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

elements

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

selected elements

css() - Sets or returns the style attribute

css("propertyname"): Return the value of a specified CSS property

css("propertyname","value"): set a specified CSS property

css({"propertyname":"value","propertyname":"value",...}): set multiple CSS

properties


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>


jQuery HTMLGet and Set CSS classes – Example (2/3)

function.js



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

});

});


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

Result


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.


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


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

An illustrated example

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


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 text, written with JavaScript object notation


The uses of JSON

Exchanging data between a server and web applications easily

The data can only be text.

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

JSON to the server, and vice verse.

=> We can work with the data as JS objects.

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”}

Data is separated by commas (,)

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

Square brackets ([]) hold arrays

Example

JSON Javascript

{ "name" : "Kim" } { name : "Kim" }


JSON – Example

More about JSON, visit: https://www.w3schools.com/js/js_json_intro.asp

<!DOCTYPE html>

<html>

<body>

<p>Access a JSON object using bracket notation:</p>

<p id="demo"></p>

<script>

var myObj, x;

myObj = {"name":"John", "age":30, "car":null};

x = myObj["name"];

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

https://www.w3schools.com/js/js_json_intro.asp


Q & A

chapter 12 jquery, ajax, json - skkumonet.skku.edu/.../09/chapter-12_jquery_ajax_json_v5.pdf ·...

Documents