chapter 12 jquery, ajax, json - skkumonet.skku.edu/.../09/chapter-12_jquery_ajax_json_v5.pdf ·...
Post on 21-Apr-2020
9 Views
Preview:
TRANSCRIPT
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
Web programming Networking Laboratory 2/67
Content
jQuery
Introduction
jQuery syntax
jQuery Events
jQuery Effects
jQuery HTML
AJAX introduction
JSON introduction
Web programming Networking Laboratory 3/67
jQuery
jQuery is a JavaScript Library.
It greatly simplifies JavaScript programming.
It is easy to learn.
JavaScript jQuery
document.getElementById("Hello"); $("#Hello");
Web programming Networking Laboratory 4/67
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)
Web programming Networking Laboratory 5/67
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>
Web programming Networking Laboratory 6/67
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>
Web programming Networking Laboratory 7/67
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>
Web programming Networking Laboratory 8/67
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>
Web programming Networking Laboratory 10/67
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)
Web programming Networking Laboratory 11/67
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".
Web programming Networking Laboratory 12/67
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();
});
Web programming Networking Laboratory 13/67
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"
Web programming Networking Laboratory 14/67
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>
Web programming Networking Laboratory 15/67
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])
$(document).ready(function(){
$("selector").hide();
});
<button>This is a button</button>
<p id="test">This is a final paragraph with id=test.</p>
</body>
</html>
Web programming Networking Laboratory 16/67
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();
Web programming Networking Laboratory 17/67
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
Web programming Networking Laboratory 18/67
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
Web programming Networking Laboratory 19/67
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!");
});
});
Web programming Networking Laboratory 20/67
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>
Web programming Networking Laboratory 21/67
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>
Web programming Networking Laboratory 22/67
jQuery Events - click() (2/3)
function.js
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Web programming Networking Laboratory 24/67
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>
Web programming Networking Laboratory 25/67
jQuery Events - mouseenter() (2/3)
function.js
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
});
Web programming Networking Laboratory 27/67
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>
<script src="function.js"></script>
</head>
<body>
<p id="p1">This is a paragraph.</p>
</body>
</html>
Web programming Networking Laboratory 28/67
jQuery Events - hover() (2/3)
function.js
$(document).ready(function(){
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
});
Web programming Networking Laboratory 30/67
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>
Web programming Networking Laboratory 31/67
jQuery Events - focus() & blur() (2/3)
function.js
$(document).ready(function(){$("input").focus(function(){
$(this).css("background-color", "#cccccc");});$("input").blur(function(){
$(this).css("background-color", "#ffffff");});
});
Web programming Networking Laboratory 33/67
jQuery Events – Exercise (1/3)
jQuery_event.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4
.1/jquery.min.js"></script>
<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>
Web programming Networking Laboratory 34/67
jQuery Events – Exercise (2/3)
jQuery_event_function.js
Use the correct event to:
If you press a keyboard key inside the <input> element, it will be hidden.
$(document).ready(function(){
$("selector").event(function(){
$("selector").hide();
});
});
Web programming Networking Laboratory 35/67
jQuery Events – Exercise (3/3)
Solution
$(document).ready(function(){
$("input").keypress(function(){
$(this).hide();
});
});
Web programming Networking Laboratory 36/67
jQuery Effects
List of some representative jQuery methods for creating animation effects.
Hide()/Show()
Animate()
Fade()
Web programming Networking Laboratory 37/67
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();
Web programming Networking Laboratory 38/67
jQuery EffectsHide()/Show() – Example (1/3)
jQuery_toggle.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>
<button>Toggle the paragraphs</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
Web programming Networking Laboratory 39/67
jQuery EffectsHide()/Show() – Example (2/3)
function.js
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
Web programming Networking Laboratory 41/67
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
Web programming Networking Laboratory 42/67
jQuery Effects Animate() - Example(1/3)
HTML file
<!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>
<button>Hide</button>
<p>I am going to be hidden</p>
<p>Yes, you are</p>
</body>
</html>
Web programming Networking Laboratory 43/67
jQuery Effects Animate() - Example(2/3)
function.js
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
Web programming Networking Laboratory 45/67
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);
Web programming Networking Laboratory 46/67
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()
Web programming Networking Laboratory 47/67
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.
Web programming Networking Laboratory 48/67
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>
Web programming Networking Laboratory 49/67
jQuery HTMLGet Content and Attributes – Example (2/3)
function.js
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
$("#inp").val("haha");
});
$("#btn3").click(function(){
alert($("#w3s").attr("href"));
});
});
Web programming Networking Laboratory 50/67
jQuery HTMLGet Content and Attributes – Example (3/3)
Result
Web programming Networking Laboratory 51/67
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).
Web programming Networking Laboratory 52/67
jQuery HTMLAdd elements – Example (1/3)
jQuery_html_css.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">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>
Web programming Networking Laboratory 53/67
jQuery HTMLAdd elements – Example (2/3)
function.js
$(document).ready(function(){
$("#btn1").click(function(){
$("#p1").append(" <b>Okay</b>.");
});
$("#btn2").click(function(){
$("ol").after("<li>Appended list item</li>");
});
});
Web programming Networking Laboratory 55/67
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
Web programming Networking Laboratory 56/67
jQuery HTMLGet and Set CSS classes – Example (1/3)
jQuery_html_css.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>
<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>
Web programming Networking Laboratory 57/67
jQuery HTMLGet and Set CSS classes – Example (2/3)
function.js
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
Web programming Networking Laboratory 58/67
jQuery HTMLGet and Set CSS Classes – Example (3/3)
Result
Web programming Networking Laboratory 59/67
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.
Web programming Networking Laboratory 60/67
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
Web programming Networking Laboratory 61/67
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.
Web programming Networking Laboratory 62/67
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
Web programming Networking Laboratory 63/67
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
Web programming Networking Laboratory 64/67
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…
Web programming Networking Laboratory 65/67
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" }
Web programming Networking Laboratory 66/67
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>
top related