jQuery & JSON
Course Code: CSC 4182 Course Title: Advanced Programming In Web
Technologies
Dept. of Computer Science
Faculty of Science and Technology
Lecturer No: 3 Week No: 02 Semester: Summer20-21
Lecturer: Md.Al-Amin (
[email protected])
Lecture Outline
1. Introduction to jQuery
2. Incorporate jQuery
3. jQuery makes writing JS easier
4. jQuery Syntax
5. jQuery Selector
6. jQuery Events
7. jQuery Ajax
8. jQuery UI and its advantages
Lecture Outline
9. Introduction to JSON
10. JSON structure
11. JSON Array
12. JSON data sending from client/server
Lecture Objective
Understanding the basics of jQuery
Understanding the basics of JSON
Introduction to jQuery
jQuery is a fast, small, and feature-rich
JavaScript library. It makes things like
HTML document traversal and
manipulation, event handling, animation, The jQuery library contains
and Ajax much simpler with an easy-to- the following features:
use API that works across a multitude of
browsers. HTML/DOM
manipulation
It is free and open-source software. As of CSS manipulation
May 2019, jQuery is used by 73% of the HTML event methods
10 million most popular websites. Effects and animations
AJAX
Utilities
jQuery makes writing JS easier
The purpose of jQuery is to make it much easier to use JavaScript on
your website. See the following code in two different syntax:
<h1></h1> <h1></h1>
<input type=“button” value=“click”/> <input type=“button” value=“click” onclick=“f1()”/>
<script> <script>
$(‘button’).click(function(){ function f1(){
$(‘h1’).html(‘Button Clicked!’); document.getElementsByTagName(h1).inner
}); HTML = “Button Clicked!”;
</script> });
</script>
jQuery Syntax Vanilla JS Syntax
Incorporate jQuery
There are several ways to start using jQuery on your web site. You can:
Download the jQuery library from jQuery.com
The compressed or production version
The uncompressed or development version
Include jQuery from a CDN(content delivery network), some popular CDN are
following:
-> Google CDN ->Microsoft CDN ->CDNJS CDN ->jsDelivr CDN
Following is the syntax of adding jQuery in your webpage:
<script src="jquery-3.4.1.min.js"></script> (download version)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
(CDN version)
jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML elements and performing
some action on the element(s).
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 element(s)
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 id="test".
jQuery Selector
jQuery selectors allow you to select and manipulate HTML element(s).jQuery
selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more. All selectors in
jQuery start with the dollar sign and parentheses: $().
The element Selector
Selects elements based on the element name: $("p").hide()
The #id Selector
Uses the id attribute of an HTML tag to find the element: $("#test").hide();
The .class Selector
Selector finds elements with a specific class: $(".test").hide();
We can find many more selector here: https://www.w3schools.com/jquery/jquery_selectors.asp
jQuery Events
All the different visitors' actions that a web page can respond to are called events.
Examples:
moving a mouse over an element (hover())
selecting a radio button (change())
clicking on an element (click())
The $(document).ready() method allows us to execute a function when the
document is fully loaded.
jQuery Syntax of Event:
$("p").on("click", function(){ $("p").click(function(){
$(this).hide(); $(this).hide();
}); });
jQuery Ajax
jQuery provides several methods for AJAX functionality. One of the popular
one is $.ajax() event. Following is the syntax of making ajax call using $.ajax()
event:
$("button").click(function(){
$.ajax({
url: “abc.txt",
method: ‘GET’,
data: {},
success: function(result){
$("#div1").html(result);
},
error: function(err){ $("#div1").html(result); }
});
});
jQuery UI
jQuery UI is a curated set of user interface interactions, effects,
widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications, or you
just need to add a date picker to a form control, jQuery UI is the
perfect choice.
Following are some useful module that could help to build
interactive web frontend using jQuery UI:
Accordion
Autocomplete
Datepicker
Tabs etc.
Introduction to JSON
JavaScript Object Notation (JSON) is an open standard file format, and
data interchange format, that uses human-readable text to store and
transmit data objects consisting of attribute–value pairs and array
data types (or any other serializable value).
When exchanging data between a browser and a server, the data can
only be text. JSON is text, and we can convert any JavaScript object
into JSON, and send JSON to the server.
JSON Structure
JSON stores data in name-value pairs. It’s structure is very close to JS
object. Following is the structure of a JSON object:
var data = {
‘name’ : ‘XYZ’,
‘age’ : 23
}
The only difference from JS object is the quotation (“ ”) of property
name.
JSON Array
We generally store multiple json data in an array. Following is the
syntax of a json array:
var cars = [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
JSON Data Sending to Server
Sending JSON data to server:
var myObj = {name: "John", age: 31, city: "New York"};
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
• JSON.stringify() – Convert the JS object to json data
JSON Data Receiving from Server
Receiving JSON data from server:
var myJSON = '{"name":"John", "age":31, "city":"New York"}’;
var myObj = JSON.parse(myJSON);
alert(myObj.name);
• JSON.parse() – Convert the JSON string to JS object
jQuery Ajax + JSON Example
Client Side Request: Server Side Response:
var mydata = {name: 'abc’, age: 33};
var json = JSON.stringify(mydata); <?php
$.ajax({ $json = $_POST['data'];
url: 'abc.php’, $data = json_decode($json);
type: 'POST’, echo json_encode($data);
data: {data: json}, ?>
success: function(response){
var data =JSON.parse(response);
alert(data.age); Output: 23
},
error: function(error){
alert(‘error’);
}
});
Books
PHP Advanced and Object-Oriented Programming, 3rd Edition; Larry
Ullman; Peachpit, Press, 2013
PHP Objects, Patterns and Practice, 5th Edition; Matt Zandstra; Apress,
2016
Learning PHP, MySQL, JavaScript and CSS, 2nd Edition; Robin Nixon;
O’Reilly, 2009
Eloquent JavaScript: A Modern Introduction to Programming; Marijn
Haverbeke; 2011
Learning Node.js: A Hands On Guide to Building Web Applications in
JavaScript; Marc Wandschneider; Addison-Wesley, 2013
Beginning Node.js; Basarat Ali Syed; Apress, 2014
References
1. https://www.w3schools.com/jquery/default.asp
2. https://api.jquery.com/
3. https://jqueryui.com/
4. https://www.w3schools.com/js/js_json_intro.asp
Thank You!
