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

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>
$("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>
color:green;"></div>
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>
$("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)

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

Recommended

More Related Content

What's hot (20)

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

More from Ayes Chinmay (8)

Recently uploaded (20)

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