Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
88 views

Lecture 3 Jquery & JSON

The document provides an outline for a lecture on jQuery & JSON. It includes: 1. An introduction to jQuery, its features and how it makes writing JavaScript easier. 2. How to incorporate jQuery into web pages and the basic jQuery syntax. 3. An overview of JSON including its structure, arrays, and how to send and receive JSON data from servers using jQuery's AJAX functionality. The lecture aims to help students understand the basics of jQuery and JSON.

Uploaded by

Jisun Aurnob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
88 views

Lecture 3 Jquery & JSON

The document provides an outline for a lecture on jQuery & JSON. It includes: 1. An introduction to jQuery, its features and how it makes writing JavaScript easier. 2. How to incorporate jQuery into web pages and the basic jQuery syntax. 3. An overview of JSON including its structure, arrays, and how to send and receive JSON data from servers using jQuery's AJAX functionality. The lecture aims to help students understand the basics of jQuery and JSON.

Uploaded by

Jisun Aurnob
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

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 (alamin@aiub.edu)
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!

You might also like