SlideShare uma empresa Scribd logo
1 de 15
Ayes Chinmay
Internet
&
Web Technology
(jQuery & JSON)
IWT Syllabus:
Module 3:
XML
Introduction to XML, XML vs HTML, Structures of a XML Document, Document Type Declaration (DTD),
XML Validation, Well Formed XML Documents, Valid XML Document, XML DOM, XSL, XSL ransformation,
XML Namespaces, XML Schema.
AJAX
AJAX Introduction, AJAX - The XMLHttpRequest Object, AJAX - Server Response, Ajax XML,
Ajax Database
jQuery
jQuery DOM Selectors, HTML Content, jQuery CSS Styles, jQuery HTML DOM
JSON
Introduction, syntax, Data Types, Parsing, Stringify, Object, Arrays
React.js
Introduction, ES6, Render HTML, JSX, Components , props, state, Lifecycle, Events, forms,
CSS
jQuery:
 jQuery is a small and lightweight JavaScript library.
 jQuery is cross-platform.
 jQuery means "write less do more".
 jQuery simplifies AJAX call and DOM manipulation.
jQuery HTML:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.1
1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello <b>Javatpoint.com</b>");
});
});
</script>
</head>
<body>
<button>Click here to change the
content of all p elements</button>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
jQuery CSS:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery
/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow",
"font-size": "100%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">The
background-color of this paragraph is red.</p>
<p style="background-color:#00ff00">The
background-color of this paragraph is green.</p>
<p style="background-color:#0000ff">The
background-color of this paragraph is blue.</p>
<p>This paragraph has no background-color.</p>
<button>Click here to set multiple styles for all
selected elements.</button>
</body>
</html>
jQuery DOM:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3
/jquery.min.js"> </script>
<script type = "text/javascript" language
= "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
}); });
</script>
<style>
.div{ margin:10px;padding:12px;
border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-
color:blue;"></div>
<div class = "div" style = "background-
color:green;"></div>
<div class = "div" style = "background-
color:red;"></div>
</body>
</html>
jQuery Animate:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:50%;width:50%;position:absolute;"></div>
</body>
</html>
JSON:
 JSON: JavaScript Object Notation.
 JSON is a syntax for storing and exchanging data.
 JSON is text, written with JavaScript object notation.
 JSON is a lightweight data-interchange format
 JSON is "self-describing" and easy to understand
JSON Syntax:
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
JSON vs XML:
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
<employees>
<employee>
<firstName>John</firstName>
<lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName>
<lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName>
<lastName>Jones</lastName>
</employee>
</employees>
 Both JSON and XML are "self describing"
(human readable).
 Both JSON and XML are hierarchical (values
within values).
 Both JSON and XML can be parsed and used by
lots of programming languages.
 Both JSON and XML can be fetched with an
XMLHttpRequest.
 JSON doesn't use end tag
 JSON is shorter
 JSON is quicker to read and
write
 JSON can use arrays
JSON vs XML
JSON is Like XML
JSON.stringify():
 A common use of JSON is to exchange data to/from a web
server.
 When sending data to a web server, the data has to be a
string.
 Convert a JavaScript object into a string with JSON.stringify()
<!DOCTYPE html>
<html>
<body>
<h2>Create JSON string from a JavaScript object.</h2>
<p id="demo"></p>
<script>
var obj = { name: "John", age: 30, city: "New York" };
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
JSON Array:
<!DOCTYPE html>
<html>
<body>
<p>Looping through an array using a for in loop:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
};
for (i in myObj.cars) {
x += myObj.cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Access an array value of a JSON object.</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
};
x = myObj.cars[0];
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Model Questions:
1. How do you round the number 7.25, to the nearest
integer?
(a) Math.round(7.25) (b) Math.rnd(7.25)
(c) Math.rnd(7.25) (d) round(7.25)
2. How do you find the number with the highest value of
x and y?
(a) top(x, y) (b) ceil(x, y)
(c) Math.ceil(x, y) (d) Math.max(x, y)
Model Questions: (Cont.)
3. Is JavaScript case-sensitive?
(a) True
(b) False
4. Which symbol is used in the beginning of jQuery code ?
(a) ? (b) @
(c) $ (d) *
5. The correct syntax for a conditional statement to execute following
code if “x” is NOT equal to 8?
(a) if x =! 8 then (b) if (x<> 8)
(c) if x<>8 then (d) if (x != 8)
Next Class:
React.js

Mais conteúdo relacionado

Mais procurados

Document Object Model
Document Object ModelDocument Object Model
Document Object Model
chomas kandar
 
introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5
FLYMAN TECHNOLOGY LIMITED
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 

Mais procurados (20)

Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS] Internet and Web Technology (CLASS-4) [CSS & JS]
Internet and Web Technology (CLASS-4) [CSS & JS]
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5
 
Unit 4(it workshop)
Unit 4(it workshop)Unit 4(it workshop)
Unit 4(it workshop)
 
JavaScript & Dom Manipulation
JavaScript & Dom ManipulationJavaScript & Dom Manipulation
JavaScript & Dom Manipulation
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Java Script
Java ScriptJava Script
Java Script
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basics
 
Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2Javascript: Ajax & DOM Manipulation v1.2
Javascript: Ajax & DOM Manipulation v1.2
 
KMUTNB - Internet Programming 4/7
KMUTNB - Internet Programming 4/7KMUTNB - Internet Programming 4/7
KMUTNB - Internet Programming 4/7
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
 
Intro to jQuery
Intro to jQueryIntro to jQuery
Intro to jQuery
 
Java script Advance
Java script   AdvanceJava script   Advance
Java script Advance
 
Part 7
Part 7Part 7
Part 7
 
Xml part 6
Xml part 6Xml part 6
Xml part 6
 
Introduction towebmatrix
Introduction towebmatrixIntroduction towebmatrix
Introduction towebmatrix
 

Semelhante a Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Technology

Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
baygross
 

Semelhante a Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Technology (20)

GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4GDI Seattle - Intro to JavaScript Class 4
GDI Seattle - Intro to JavaScript Class 4
 
前端概述
前端概述前端概述
前端概述
 
J query training
J query trainingJ query training
J query training
 
JavaScript
JavaScriptJavaScript
JavaScript
 
jQuery
jQueryjQuery
jQuery
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Pracitcal AJAX
Pracitcal AJAXPracitcal AJAX
Pracitcal AJAX
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Week 4 - jQuery + Ajax
Week 4 - jQuery + AjaxWeek 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
 
Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
Jquery
JqueryJquery
Jquery
 
Jquery fundamentals
Jquery fundamentalsJquery fundamentals
Jquery fundamentals
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
 
Java Script
Java ScriptJava Script
Java Script
 
Ajax for dummies, and not only.
Ajax for dummies, and not only.Ajax for dummies, and not only.
Ajax for dummies, and not only.
 

Mais de Ayes Chinmay

Mais de Ayes Chinmay (8)

Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
Internet and Web Technology (CLASS-16) [Basic Elements of Java Program] | NIC...
 
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
Internet and Web Technology (CLASS-15) [JAVA Basics] | NIC/NIELIT Web Technol...
 
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-14) [JSP] | NIC/NIELIT Web Technology
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
 
Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS] Internet and Web Technology (CLASS-3) [HTML & CSS]
Internet and Web Technology (CLASS-3) [HTML & CSS]
 
Internet and Web Technology (CLASS-2) [HTTP & HTML]
Internet and Web Technology (CLASS-2) [HTTP & HTML]Internet and Web Technology (CLASS-2) [HTTP & HTML]
Internet and Web Technology (CLASS-2) [HTTP & HTML]
 
Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]Internet and Web Technology (CLASS-1) [Introduction]
Internet and Web Technology (CLASS-1) [Introduction]
 

Último

1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 

Último (20)

Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 

Internet and Web Technology (CLASS-8) [jQuery and JSON] | NIC/NIELIT Web Technology

  • 2. IWT Syllabus: Module 3: XML Introduction to XML, XML vs HTML, Structures of a XML Document, Document Type Declaration (DTD), XML Validation, Well Formed XML Documents, Valid XML Document, XML DOM, XSL, XSL ransformation, XML Namespaces, XML Schema. AJAX AJAX Introduction, AJAX - The XMLHttpRequest Object, AJAX - Server Response, Ajax XML, Ajax Database jQuery jQuery DOM Selectors, HTML Content, jQuery CSS Styles, jQuery HTML DOM JSON Introduction, syntax, Data Types, Parsing, Stringify, Object, Arrays React.js Introduction, ES6, Render HTML, JSX, Components , props, state, Lifecycle, Events, forms, CSS
  • 3. jQuery:  jQuery is a small and lightweight JavaScript library.  jQuery is cross-platform.  jQuery means "write less do more".  jQuery simplifies AJAX call and DOM manipulation.
  • 4. jQuery HTML: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 1.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").html("Hello <b>Javatpoint.com</b>"); }); }); </script> </head> <body> <button>Click here to change the content of all p elements</button> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>
  • 5. jQuery CSS: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery /1.11.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color": "yellow", "font-size": "100%"}); }); }); </script> </head> <body> <h2>This is a heading</h2> <p style="background-color:#ff0000">The background-color of this paragraph is red.</p> <p style="background-color:#00ff00">The background-color of this paragraph is green.</p> <p style="background-color:#0000ff">The background-color of this paragraph is blue.</p> <p>This paragraph has no background-color.</p> <button>Click here to set multiple styles for all selected elements.</button> </body> </html>
  • 6. jQuery DOM: <html> <head> <title>The jQuery Example</title> <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3 /jquery.min.js"> </script> <script type = "text/javascript" language = "javascript"> $(document).ready(function() { $("div").click(function () { $(this).before('<div class="div"></div>' ); }); }); </script> <style> .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;} </style> </head> <body> <p>Click on any square below:</p> <span id = "result"> </span> <div class = "div" style = "background- color:blue;"></div> <div class = "div" style = "background- color:green;"></div> <div class = "div" style = "background- color:red;"></div> </body> </html>
  • 7. jQuery Animate: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); }); </script> </head> <body> <button>Start Animation</button> <div style="background:#98bf21;height:50%;width:50%;position:absolute;"></div> </body> </html>
  • 8. JSON:  JSON: JavaScript Object Notation.  JSON is a syntax for storing and exchanging data.  JSON is text, written with JavaScript object notation.  JSON is a lightweight data-interchange format  JSON is "self-describing" and easy to understand
  • 9. JSON Syntax: <!DOCTYPE html> <html> <body> <h2>Create Object from JSON String</h2> <p id="demo"></p> <script> var txt = '{"name":"John", "age":30, "city":"New York"}' var obj = JSON.parse(txt); document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; </script> </body> </html>
  • 10. JSON vs XML: {"employees":[ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ]} <employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName> </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees>  Both JSON and XML are "self describing" (human readable).  Both JSON and XML are hierarchical (values within values).  Both JSON and XML can be parsed and used by lots of programming languages.  Both JSON and XML can be fetched with an XMLHttpRequest.  JSON doesn't use end tag  JSON is shorter  JSON is quicker to read and write  JSON can use arrays JSON vs XML JSON is Like XML
  • 11. JSON.stringify():  A common use of JSON is to exchange data to/from a web server.  When sending data to a web server, the data has to be a string.  Convert a JavaScript object into a string with JSON.stringify() <!DOCTYPE html> <html> <body> <h2>Create JSON string from a JavaScript object.</h2> <p id="demo"></p> <script> var obj = { name: "John", age: 30, city: "New York" }; var myJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON; </script> </body> </html>
  • 12. JSON Array: <!DOCTYPE html> <html> <body> <p>Looping through an array using a for in loop:</p> <p id="demo"></p> <script> var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; for (i in myObj.cars) { x += myObj.cars[i] + "<br>"; } document.getElementById("demo").innerHTML = x; </script> </body> </html> <!DOCTYPE html> <html> <body> <p>Access an array value of a JSON object.</p> <p id="demo"></p> <script> var myObj, x; myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; x = myObj.cars[0]; document.getElementById("demo").innerHTML = x; </script> </body> </html>
  • 13. Model Questions: 1. How do you round the number 7.25, to the nearest integer? (a) Math.round(7.25) (b) Math.rnd(7.25) (c) Math.rnd(7.25) (d) round(7.25) 2. How do you find the number with the highest value of x and y? (a) top(x, y) (b) ceil(x, y) (c) Math.ceil(x, y) (d) Math.max(x, y)
  • 14. Model Questions: (Cont.) 3. Is JavaScript case-sensitive? (a) True (b) False 4. Which symbol is used in the beginning of jQuery code ? (a) ? (b) @ (c) $ (d) * 5. The correct syntax for a conditional statement to execute following code if “x” is NOT equal to 8? (a) if x =! 8 then (b) if (x<> 8) (c) if x<>8 then (d) if (x != 8)