1

Wd-2
Count No Questions Repeat Ch Page No
1 21 Write about syntax rules of XML Tags, Elements, and Attributes. 3 1 2
2 4 Write a note on jQuery selectors. 2 2 8
3 5 Explain jQuery events with example. 3 2 15
4 8 Explain with example how to create an array of objects in JSON. 3 3 30
5 9 JSON Data Types. 1 3 33
6 1 Write a note on features of AJAX. 2 4 37
7 2 XMLHttpRequest technology. 3 4 40
8 19 Write the difference between Synchronous and Asynchronous web 2 4 43
applications.
9 12 Explain how to create and include user-defined modules. 2 5 44
10 13 Explain the features of Node.js. 2 5 46

20 What are the characteristics of XML? ch-1

→

10 Characteristics of XML (with easy explanation)

1. Self-Descriptive
o XML uses tags to describe data in a meaningful way.
o Example: <name>John</name> clearly shows that "John" is a
name.
2. Hierarchical Structure
o XML data is stored in a tree-like structure.
o Example: A "student" tag can have "name", "age", and "grade"
as child tags.
o This helps in organizing data properly.
3. Platform-Independent
o XML can be used on any device, operating system, or software.
o Example: XML data can be shared between Windows, Mac, and
mobile applications.
4. Extensible (Custom Tags Allowed)
o Unlike HTML, XML does not have fixed tags.
o You can create your own tags based on your needs.
o Example: <product>, <price>, and <category> are custom tags
for a shopping website.
5. Case-Sensitive
o XML treats uppercase and lowercase letters differently.
o Example: <Name> and <name> are two different elements.
6. Supports Unicode (Multiple Languages)
 2

o XML allows storing data in different languages and special

symbols.
o Example: It supports English, Hindi, Chinese, Arabic, and other
scripts.
7. Human & Machine Readable
o XML is written in plain text, so both humans and computers
can understand it.
o Example: Even without special software, you can read an XML
file easily.
8. Data Storage & Transport
o XML is used to store data and send it between applications.
o Example: Websites and apps use XML to share data between a
server and a user’s phone.
9. Requires Proper Formatting (Well-Formed XML)
o XML must follow strict syntax rules.
o Example: Every opening tag <name> must have a closing tag
</name>.
o Mistakes like missing closing tags make the XML invalid.

10. Supports Nested Elements

o XML allows elements inside other elements.

o Example: A <student> tag can have <name>, <age>, and
<grade> inside it.
o This helps in organizing data properly.

21 Write about syntax rules of XML Tags, Elements, and Attributes.

ch-1
Explain XML syntax for declaration, tags, and elements.
ch-1
Write a note on XML document structure in detail with an example.
ch-1
→

1. Syntax Rules of XML Tags, Elements, and Attributes

 3

1. XML Tags Rules

• Tags must be properly nested (e.g.,

<book><title>XML</title></book> is correct, but
<book><title>XML</book></title> is incorrect).
• Tags are case-sensitive (e.g., <Name> and <name> are different).
• Tags must be closed properly (e.g., <tag>content</tag> or <tag/>
for empty tags).
• Tags should not contain spaces (e.g., <first name> is incorrect; use
<firstname> instead).
• XML tags should not start with a number or special character (e.g.,
<1book> is invalid).

2. XML Elements Rules

• Every XML document must have a single root element that contains
all other elements.
• Elements can have text, attributes, or other elements inside them.
• Elements must be closed properly (e.g., <student>John</student>,
not <student>John).
• Element names must not start with "xml" (e.g., <xmlData> is
invalid).

3. XML Attributes Rules

• Attributes must be inside the opening tag (e.g., <student

id="101">John</student>).
• Attribute values must be enclosed in double (" ") or single (' ')
quotes.
• Attribute names must not contain spaces (e.g., id number="101" is
incorrect, use id_number="101").
• Attribute values must not contain < or > symbols.

2.

XML Syntax for Declaration, Tags, and Elements

1. XML Declaration

• The XML declaration is the first line of an XML document.

• It defines the XML version and encoding.
• It is optional but recommended.
 4

Syntax:

<?xml version="1.0" encoding="UTF-8"?>

• version="1.0" → Specifies the XML version.

• encoding="UTF-8" → Defines the character encoding (default is UTF-
8).

2. XML Tags

• XML uses tags to define elements.

• Tags must be properly opened and closed.
• Tags are case-sensitive (e.g., <Name> and <name> are different).

Example:

<student>John</student>

• <student> is the opening tag.

• John is the content.
• </student> is the closing tag.

3. XML Elements

• Elements are the building blocks of XML documents.

• An element consists of a start tag, content, and an end tag.
• Elements can contain attributes, nested elements, or text data.

Example:

<book>
<title>XML Basics</title>
<author>John Doe</author>
</book>

• <book> is a parent element.

• <title> and <author> are child elements.
 5

3.

XML Document Structure (Detailed Explanation)

An XML document follows a structured format that consists of different

components. XML is hierarchical in nature, meaning it organizes data in a
tree-like structure. Every XML document must follow a specific syntax to
be well-formed and properly understood by parsers.

1. Components of an XML Document

1.1 XML Declaration (Optional)

• It is the first line of an XML document.

• It specifies the XML version and character encoding.
• The declaration is optional, but it is good practice to include it.

Example:

<?xml version="1.0" encoding="UTF-8"?>

• version="1.0" → Specifies the XML version.

• encoding="UTF-8" → Defines the character encoding (default is UTF-
8).

1.2 Root Element

• The root element is the topmost element in an XML document.

• It acts as the parent for all other elements.
• An XML document must have only one root element.

Example:

<library>
...
</library>

Here, <library> is the root element that contains other elements inside it.
 6

1.3 Child Elements

• Child elements are the elements inside the root.

• They store data or contain other nested elements.
• Each child element must have a start tag and an end tag.

Example:

<book>
<title>XML Basics</title>
<author>John Doe</author>
</book>

• <book> is the parent element.

• <title> and <author> are child elements inside <book>.

1.4 Attributes (Optional)

• Attributes provide extra information about an element.

• Attributes are defined in name-value pairs inside the opening tag.
• Attribute values must be enclosed in double ("") or single ('')
quotes.

Example:

<book id="101">
<title>XML Basics</title>
<author>John Doe</author>
</book>

• id="101" is an attribute of the <book> element.

1.5 Text Content

• Elements can store text data between their opening and closing
tags.
• Text content should not be placed outside elements.

Example:
 7

<description>This book covers XML fundamentals.</description>

• Here, "This book covers XML fundamentals." is the text content

inside <description>.

1.6 Comments (Optional)

• Comments are used to add explanations to the XML document.

• Comments are ignored by XML parsers.
• A comment starts with <!-- and ends with -->.

Example:

<!-- This is a comment -->

2. Example of a Complete XML Document

Here is a well-formed XML document that follows the correct structure:

<?xml version="1.0" encoding="UTF-8"?>

<library>
<book id="101">
<title>XML Basics</title>
<author>John Doe</author>
<price currency="USD">25.99</price>
</book>

<book id="102">
<title>Advanced XML</title>
<author>Jane Smith</author>
<price currency="EUR">30.50</price>
</book>
</library>

Explanation:

1. The XML declaration defines the version and encoding.

2. The root element <library> contains all books.
3. Each <book> has:
o An id attribute (id="101").
 8

o Child elements <title>, <author>, and <price>.

o The <price> element has an attribute (currency="USD").

4 Write a note on jQuery selectors. ch-2

What are the types of selectors in jQuery? Explain each with an
example. ch-2
→

jQuery Selectors with Explanation and Examples

jQuery selectors help to select and manipulate HTML elements based on

their tag name, class, ID, attributes, position, or state.

Note:- Read any 8 to 10

1. Basic Selectors

These selectors are used to select elements based on tag name, class, ID, or
all elements.

1.1 Tag Selector

Selects all elements of a specific tag.

Syntax: $("tagname")
Example: Select all <p> elements.

$("p").css("color", "blue");

1.2 This Selector

Selects the current element in an event.

Syntax: $(this)
Example: Change background color of clicked button.

$("button").click(function() {
$(this).css("background-color", "yellow");
 9

});

1.3 ID Selector

Selects an element with a specific ID.

Syntax: $("#id")
Example: Select an element with id="name".

$("#name").css("font-size", "20px");

1.4 Class Selector

Selects elements with a specific class.

Syntax: $(".classname")
Example: Select all elements with class highlight.

$(".highlight").css("color", "red");

1.5 Universal Selector

Selects all elements in the document.

Syntax: "*"
Example: Apply a border to all elements.

$(" * ").css("border", "1px solid black");

2. Position-Based Selectors

These selectors are used to select elements based on their position in the
document.

2.1 First Element Selector

Selects the first matching element.

Syntax: $("tag:first")
Example: Select the first <p> element.

$("p:first").css("font-weight", "bold");
 10

2.2 Last Element Selector

Selects the last matching element.

Syntax: $("tag:last")
Example: Select the last <p> element.

$("p:last").css("font-style", "italic");

2.3 Even Elements Selector

Selects even-numbered elements (index starts from 0).

Syntax: $("tag:even")
Example: Select even <li> elements.

$("li:even").css("background-color", "lightgray");

2.4 Odd Elements Selector

Selects odd-numbered elements.

Syntax: $("tag:odd")
Example: Select odd <li> elements.

$("li:odd").css("background-color", "lightblue");

3. State-Based Selectors

These selectors help select elements based on their state (enabled,

disabled, selected, etc.).

3.1 Enabled Selector

Selects all enabled input fields.

Syntax: $(":enabled")
Example: Apply a green border to enabled inputs.

$(":enabled").css("border", "2px solid green");

 11

3.2 Disabled Selector

Selects all disabled input fields.

Syntax: $(":disabled")
Example: Apply a gray background to disabled inputs.

$(":disabled").css("background-color", "gray");

3.3 Selected Selector

Selects the currently selected option in a dropdown.

Syntax: $(":selected")
Example: Change text color of selected option.

$(":selected").css("color", "red");

3.4 Checked Selector

Selects all checked checkboxes or radio buttons.

Syntax: $(":checked")
Example: Apply bold text to checked checkboxes.

$(":checked").css("font-weight", "bold");

4. Form and Input Selectors

Used to select form elements.

4.1 Input Selector

Selects all input elements.

Syntax: $(":input")
Example: Apply padding to all input fields.

$(":input").css("padding", "10px");

4.2 Text Input Selector

 12

Selects all text input fields.

Syntax: $(":text")
Example: Apply a red border to text inputs.

$(":text").css("border", "2px solid red");

4.3 Password Input Selector

Selects all password input fields.

Syntax: $(":password")
Example: Change background color of password fields.

$(":password").css("background-color", "yellow");

4.4 Checkbox Selector

Selects all checkboxes.

Syntax: $(":checkbox")
Example: Make checkboxes bigger.

$(":checkbox").css("width", "20px");

4.5 Submit Button Selector

Selects all submit buttons.

Syntax: $(":submit")
Example: Change the background of submit buttons.

$(":submit").css("background-color", "green");

5. Visibility Selectors

Used to select elements based on their visibility.

5.1 Header Selector

 13

Selects all heading elements (h1 to h6).

Syntax: $(":header")
Example: Change color of all headings.

$(":header").css("color", "purple");

5.2 Animated Selector

Selects elements that are currently being animated.

Syntax: $(":animated")
Example: Apply a border to animated elements.

$(":animated").css("border", "3px dashed blue");

5.3 Hidden Selector

Selects all hidden elements.

Syntax: $(":hidden")
Example: Show hidden elements.

$(":hidden").show();

5.4 Visible Selector

Selects all visible elements.

Syntax: $(":visible")
Example: Apply bold text to visible elements.

$(":visible").css("font-weight", "bold");

5.5 Empty Selector

Selects elements with no child elements.

Syntax: $(":empty")
Example: Add text to empty <div>.

$(":empty").text("This was empty!");

 14

6. Content-Based Selector

6.1 Contains Selector

Selects elements that contain specific text.

Syntax: $(":contains('text')")
Example: Highlight elements containing "jQuery".

$(":contains('jQuery')").css("background-color", "yellow");

7. Attribute Selectors

Used to select elements based on attributes.

7.1 Attribute Exists Selector

Selects elements with a specific attribute.

Syntax: $("[attribute]")
Example: Select all elements with href attribute.

$("[href]").css("color", "blue");

7.2 Attribute Equals Selector

Selects elements with a specific attribute value.

Syntax: $("[attribute=value]")
Example: Select all links with href="#".

$("[href='#']").css("color", "red");

7.3 Attribute Not Equals Selector

Selects elements without a specific attribute value.

Syntax: $("[attribute!=value]")
Example: Select all links except href="#".

$("[href!='#']").css("color", "green");
 15

7.4 Attribute Ends With Selector

Selects elements where an attribute ends with a value.

Syntax: $("[attribute$=value]")
Example: Select all links ending in .org.

$("[href$='.org']").css("font-weight", "bold");

5 Explain jQuery events with example. ch-2

jQuery Events. ch-2
Write a note on jQuery events. ch-2
→
Note :- Read any 4 to 6

Explanation of jQuery Events with Simple Examples

In a web page, events happen when users interact with elements like
clicking a button, typing in a text box, or moving the mouse. jQuery helps in
handling these events easily. Let's understand some important event types
with simple explanations and examples.

1. Blur Event

• Occurs when an element loses focus (for example, when you click
away from a text box).
• Example: If a user types in an input field and clicks somewhere else,
an alert appears.

<input type="text" id="name">

<script>
$("#name").blur(function(){
alert("Input field lost focus!");
});
</script>
 16

2. Change Event

• Occurs when the value of an input field, dropdown, or checkbox

changes.
• Example: When a user selects a different option from a dropdown, a
message appears.

<select id="city">
<option>New York</option>
<option>London</option>
</select>

<script>
$("#city").change(function(){
alert("You changed the city!");
});
</script>

3. Click Event

• Occurs when a user clicks on an element (button, link, etc.).

• Example: Clicking a button displays a message.

<button id="btn">Click Me</button>

<script>
$("#btn").click(function(){
alert("Button clicked!");
});
</script>

4. Dblclick Event

• Occurs when a user double-clicks on an element.

• Example: Double-clicking a paragraph changes its color.

<p id="text">Double-click me!</p>

<script>
$("#text").dblclick(function(){
$(this).css("color", "red");
});
</script>
 17

5. Error Event

• Occurs when an image or resource fails to load.

• Example: If an image fails to load, a message appears.

<img src="wrong.jpg" id="myImage">

<script>
$("#myImage").on("error", function(){
alert("Image failed to load!");
});
</script>

6. Focus Event

• Occurs when an input field gets focus (clicked or selected).

• Example: Clicking inside a text box changes its background color.

<input type="text" id="focusInput">

<script>
$("#focusInput").focus(function(){
$(this).css("background-color", "yellow");
});
</script>

7. Keydown Event

• Occurs when a key is pressed down.

• Example: Pressing any key in a text box triggers a message.

<input type="text" id="keyDown">

<script>
$("#keyDown").keydown(function(){
alert("A key was pressed down!");
});
</script>

8. Keypress Event
 18

• Occurs when a key is pressed and released.

• Example: Pressing a key in a text box displays the pressed key.

<input type="text" id="keyPress">

<script>
$("#keyPress").keypress(function(event){
alert("You pressed: " + event.key);
});
</script>

9. Keyup Event

• Occurs when a key is released.

• Example: After typing in a text box, an alert appears.

<input type="text" id="keyUp">

<script>
$("#keyUp").keyup(function(){
alert("Key released!");
});
</script>

10. Load Event

• Occurs when the web page is fully loaded.

• Example: A message appears when the page loads.

<script>
$(document).ready(function(){
alert("Page loaded successfully!");
});
</script>

11. Mousedown Event

• Occurs when a mouse button is pressed down.

• Example: Clicking a button changes its text.

<button id="mouseDownBtn">Press Mouse</button>

<script>
 19

$("#mouseDownBtn").mousedown(function(){
$(this).text("Mouse Pressed!");
});
</script>

12. Mouseenter Event

• Occurs when the mouse enters an element.

• Example: Hovering over a div changes its background color.

<div id="box" style="width:100px; height:100px; background-

color:blue;"></div>
<script>
$("#box").mouseenter(function(){
$(this).css("background-color", "green");
});
</script>

13. Mouseleave Event

• Occurs when the mouse leaves an element.

• Example: Moving the mouse away from a div changes its background
color.

<div id="box2" style="width:100px; height:100px; background-

color:red;"></div>
<script>
$("#box2").mouseleave(function(){
$(this).css("background-color", "gray");
});
</script>

14. Mousemove Event

• Occurs when the mouse moves inside an element.

• Example: Display the current mouse coordinates.

<p id="coord">Move the mouse here!</p>

<script>
$("#coord").mousemove(function(event){
 20

$(this).text("X: " + event.pageX + ", Y: " + event.pageY);

});
</script>

15. Mouseout Event

• Occurs when the mouse moves out of an element.

• Example: Moving the mouse out changes the text.

<p id="out">Move mouse out!</p>

<script>
$("#out").mouseout(function(){
$(this).text("Mouse moved out!");
});
</script>

16. Mouseover Event

• Occurs when the mouse moves over an element.

• Example: Hovering over a button changes its text.

<button id="hoverBtn">Hover Me</button>

<script>
$("#hoverBtn").mouseover(function(){
$(this).text("Mouse Over!");
});
</script>

17. Mouseup Event

• Occurs when the mouse button is released.

• Example: Releasing the mouse button changes text.

<button id="mouseUpBtn">Release Mouse</button>

<script>
$("#mouseUpBtn").mouseup(function(){
$(this).text("Mouse Released!");
});
</script>
 21

18. Resize Event

• Occurs when the browser window is resized.

• Example: An alert appears when the window size changes.

<script>
$(window).resize(function(){
alert("Window resized!");
});
</script>

19. Scroll Event

• Occurs when a user scrolls the page.

• Example: An alert appears when scrolling.

<script>
$(window).scroll(function(){
alert("Page scrolled!");
});
</script>

20. Select Event

• Occurs when text is selected.

• Example: Selecting text in a text box triggers an alert.

<input type="text" id="selectText">

<script>
$("#selectText").select(function(){
alert("Text selected!");
});
</script>

21. Submit Event

• Occurs when a form is submitted.

• Example: Prevents form submission and shows a message.

<form id="myForm">
 22

<input type="text" required>

<button type="submit">Submit</button>
</form>
<script>
$("#myForm").submit(function(event){
event.preventDefault();
alert("Form submitted!");
});
</script>

22. Unload Event

• Occurs when the page is closed or reloaded.

• Example: Shows a message before leaving the page.

<script>
$(window).on("unload", function(){
alert("You are leaving the page!");
});
</script>

6 Write about Insert methods of jQuery. ch-2

→
Note :- Read any 4 to 6

Insert Methods in jQuery

jQuery provides insert methods to add new content inside, before, or after
elements. These methods are useful for dynamically modifying a webpage.

1. append() – Add Inside (At End)

• Adds new content inside an element at the end.

Example: Add a new <li> at the end of a list.

<ul id="list">
<li>Item 1</li>
 23

<li>Item 2</li>
</ul>
<button>Add Item</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("button").click(function() {
$("#list").append("<li>New Item</li>");
});
</script>

New item is added at the end of <ul>.

2. prepend() – Add Inside (At Start)

• Adds new content inside an element at the beginning.

Example: Add a new <li> at the start of a list.

<script>
$("button").click(function() {
$("#list").prepend("<li>First Item</li>");
});
</script>

New item is added at the start of <ul>.

3. after() – Add Outside (After Element)

• Adds new content after the selected element.

Example: Add a paragraph after a button.

<script>
$("button").click(function() {
$("button").after("<p>New Paragraph after button.</p>");
});
</script>
 24

New paragraph is added after the button.

4. before() – Add Outside (Before Element)

• Adds new content before the selected element.

Example: Add a heading before a paragraph.

<script>
$("p").before("<h3>New Heading</h3>");
</script>

New heading is added before the paragraph.

7 Explain various methods related to jQuery effects. Ch-2

→
Note :- Read any 4 to 6

jQuery Effects Methods (With Explanation & Examples)

jQuery provides several methods to create visual effects like hiding,

showing, fading, sliding, and animating elements. These effects make web
pages more interactive.

1. show() – Display an Element

• The show() method makes a hidden element visible.

• It is useful for showing elements that were previously hidden.

Example: Show a hidden paragraph when a button is clicked.

<p id="text" style="display:none;">Hello, this is a paragraph!</p>

<button>Show</button>

<script>
 25

$("button").click(function() {
$("#text").show();
});
</script>

When the button is clicked, the paragraph appears.

2. hide() – Hide an Element

• The hide() method makes an element disappear from the page.

• It is useful for temporarily hiding content.

Example: Hide a paragraph when a button is clicked.

<p id="text">Hello, this is a paragraph!</p>

<button>Hide</button>

<script>
$("button").click(function() {
$("#text").hide();
});
</script>

When the button is clicked, the paragraph disappears.

3. toggle() – Show/Hide an Element

• The toggle() method switches between show() and hide().

• If the element is visible, it gets hidden; if it is hidden, it gets shown.

Example: Toggle a paragraph when a button is clicked.

<p id="text">Click the button to toggle me.</p>

<button>Toggle</button>

<script>
$("button").click(function() {
$("#text").toggle();
});
 26

</script>

Each button click will show or hide the paragraph.

4. fadeIn() – Gradually Show an Element

• The fadeIn() method makes an element appear slowly with a fading

effect.
• It is useful for smooth transitions.

Example: Fade in a paragraph when a button is clicked.

<p id="text" style="display:none;">This is a fading effect!</p>

<button>Fade In</button>

<script>
$("button").click(function() {
$("#text").fadeIn();
});
</script>

The paragraph appears with a smooth fade effect.

5. fadeOut() – Gradually Hide an Element

• The fadeOut() method makes an element disappear slowly.

Example: Fade out a paragraph when a button is clicked.

<p id="text">This text will fade out.</p>

<button>Fade Out</button>

<script>
$("button").click(function() {
$("#text").fadeOut();
});
</script>

The paragraph fades out smoothly.

 27

6. fadeToggle() – Fade In/Out on Click

• The fadeToggle() method switches between fadeIn() and fadeOut().

Example: Toggle fade effect on a paragraph.

<p id="text">Click to fade in or out.</p>

<button>Fade Toggle</button>

<script>
$("button").click(function() {
$("#text").fadeToggle();
});
</script>

Each button click will fade in or fade out the paragraph.

7. slideDown() – Slide an Element Down

• The slideDown() method reveals an element with a sliding effect.

Example: Slide down a hidden paragraph.

<p id="text" style="display:none;">This is a sliding effect!</p>

<button>Slide Down</button>

<script>
$("button").click(function() {
$("#text").slideDown();
});
</script>

The paragraph slides down smoothly.

8. slideUp() – Slide an Element Up

• The slideUp() method hides an element by sliding it upward.

 28

Example: Slide up a paragraph.

<p id="text">This text will slide up.</p>

<button>Slide Up</button>

<script>
$("button").click(function() {
$("#text").slideUp();
});
</script>

The paragraph slides up and disappears.

9. slideToggle() – Slide Up/Down

• The slideToggle() method switches between slideDown() and

slideUp().

Example: Toggle slide effect.

<p id="text">Click to slide up or down.</p>

<button>Slide Toggle</button>

<script>
$("button").click(function() {
$("#text").slideToggle();
});
</script>

Each button click will slide the paragraph up or down.

10. animate() – Custom Animation

• The animate() method allows moving, resizing, or changing an

element's properties dynamically.

Example: Move a box 200px to the right.

 29

<div id="box" style="width:50px; height:50px; background:red;

position:absolute;"></div>
<button>Move</button>

<script>
$("button").click(function() {
$("#box").animate({ left: '200px' });
});
</script>

The box moves 200 pixels to the right.

Summary of jQuery Effects Methods

Method Description Example

show() Shows a hidden element. $("#text").show();

hide() Hides an element. $("#text").hide();

Switches between
toggle() $("#text").toggle();
show/hide.

Gradually shows an
fadeIn() $("#text").fadeIn();
element.

Gradually hides an
fadeOut() $("#text").fadeOut();
element.

Switches between fade

fadeToggle() $("#text").fadeToggle();
in/out.

slideDown() Slides an element down. $("#text").slideDown();

slideUp() Slides an element up. $("#text").slideUp();

Switches between slide

slideToggle() $("#text").slideToggle();
up/down.

Creates a custom $("#box").animate({ left:

animate()
animation. '200px' });
 30

8 Explain with example how to create an array of objects in JSON. Ch-3

Write about JSON Array of objects and multi-dimensional arrays with
example. ch-3
Write a note on JSON array. ch-3
→

1. Creating an Array of Objects in JSON – Step-by-Step

1. What is an Array of Objects in JSON?

• A JSON array is a collection of values inside square brackets [].

• When the array contains multiple objects, it is called an array of
objects.
• Each object has key-value pairs enclosed in curly braces {}.
• Objects are separated by commas , inside the array.

2. How to Create an Array of Objects?

✅ Start with square brackets [] to define an array.

✅ Use curly braces {} inside the array to create objects.
✅ Each object contains key-value pairs with:

• A key (always a string) → "name", "age", "city".

• A value (can be a string, number, or boolean).
✅ Separate objects with commas , inside the array.

5. Why Use an Array of Objects in JSON?

✅ Stores multiple records in an organized way.

✅ Used in APIs, databases, and web applications.
✅ Makes data easy to access, update, and process.

3. Example: JSON Array of Objects

[
 31

{ "name": "John", "age": 25, "city": "New York" },

{ "name": "Alice", "age": 30, "city": "London" },
{ "name": "Bob", "age": 28, "city": "Paris" }
]

4. Explanation of the Example

• The array [] contains 3 objects {}.

• Each object represents a person with details:
o "name" → The person's name (John, Alice, Bob).
o "age" → The person's age (25, 30, 28).
o "city" → The person's city (New York, London, Paris).
• Objects are separated by commas , inside the array.

2. JSON Array of Objects & Multi-Dimensional Arrays

2. JSON Multi-Dimensional Array

• A multi-dimensional JSON array is an array that contains nested

arrays [] inside it.
• This is used to group related data within categories.
• Helps in structuring complex data.

Example: JSON Multi-Dimensional Array (Product Categories)

[
[
{ "product": "Laptop", "price": 800 },
{ "product": "Tablet", "price": 400 }
],
[
{ "product": "Phone", "price": 600 },
{ "product": "Headphones", "price": 100 }
]
]
Explanation:

• The outer array [] contains two inner arrays [].

• Each inner array represents a category of products.
• Each inner array contains objects {} with:
 32

o "product" → Stores the product name.

o "price" → Stores the product price.

3. Note on JSON Array

1. What is a JSON Array?

A JSON array is a list of values written inside square brackets [ ]. It helps

store multiple pieces of data together in an organized way.

2. What Can a JSON Array Contain?

A JSON array can hold different types of data:

• Words (Strings) → "apple", "banana", "cherry"

• Numbers → 10, 20, 30
• True/False (Boolean values) → true, false
• Objects (Key-Value Pairs) → { "name": "John", "age": 25 }
• Another Array (Nested Arrays) → [["red", "blue"], ["green",
"yellow"]]

3. Examples of JSON Arrays

✅ List of Fruits (Strings):

["apple", "banana", "cherry"]

✅ List of Numbers:

[10, 20, 30, 40]

✅ List of Students (Array of Objects):

[
{ "student": "Alex", "grade": "A" },
{ "student": "Emma", "grade": "B" }
]
4. Features of JSON Arrays

• Data is Stored in Order → Items stay in sequence.

• First Item is at Index 0 → Counting starts from zero.
 33

• Can Store Different Data Types → Strings, numbers, objects, and

even other arrays.

5. Where is a JSON Array Used?

• To Store Lists (like products, students, cities).

• For Data Sharing in APIs, websites, and mobile apps.
• For Storing Large Data in databases.

9 JSON Data Types. ch-3

→

JSON Data Types (Detailed Explanation)

JSON (JavaScript Object Notation) supports six main data types. These
types help in storing and organizing data in a structured format.

1. String

• Strings are used to store text values.

• Strings must be enclosed in double quotes ("").
• Example:
o { "name": "Alice", "city": "New York" }

2. Number

• Used to store integer and floating-point (decimal) values.

• No need to use quotes for numbers.
• Example:
o { "age": 25, "height": 5.6, "weight": 65 }

3. Boolean

• Stores true or false values.

• Used for logical conditions and decision-making.
• Example:
 34

{ "isStudent": true, "hasLicense": false }

4. Null

• Represents an empty or missing value.

• Useful when a value is unknown or not assigned yet.
• Example:

{ "middleName": null }

5. Object

• Stores multiple key-value pairs inside {}.

• Each key is a string, and the value can be any JSON data type.
• Example:

{
"student": {
"name": "John",
"age": 22,
"course": "Math"
}
}

6. Array

• Stores multiple values in a list inside [].

• Values can be of any JSON data type.
• Example:

"subjects": ["Math", "Science", "English"]

}
 35

10 What is JSON? Write features of JSON. ch-3

→

Features of JSON

1. Lightweight
o JSON has a simple format with less data, making it quick to
transfer over networks.
o It is smaller in size compared to XML, reducing bandwidth
usage.
2. Easy to Read & Write
o JSON follows a key-value pair structure, making it easy to
understand.
o Even beginners can write and read JSON without much effort.
3. Language-Independent
o JSON is not limited to JavaScript; it works with Python, Java,
PHP, and more.
o Many programming languages have built-in functions to parse
JSON.
4. Supports Multiple Data Types
o JSON can store different types of data like strings, numbers,
booleans, null, objects, and arrays.
o This makes it flexible for handling different kinds of
information.
5. Faster Processing
o JSON has a simpler structure compared to XML, making it faster
to parse.
o Many browsers and servers can quickly process JSON data.
6. Widely Used in APIs
o JSON is the most common format for data exchange in web and
mobile applications.
o RESTful APIs use JSON to send and receive data between
clients and servers.
7. Supports Nested Data
o JSON allows objects and arrays to be placed inside other
objects or arrays.
o This helps in representing complex data structures easily.
8. Easy to Convert
o JSON data can be easily converted into JavaScript objects.
o This makes it useful for web development, where JavaScript is
widely used.
9. Compatible with Databases
 36

o JSON is commonly used with NoSQL databases like MongoDB,

which store data in JSON-like format.
o It also works with SQL databases by storing JSON data in text
format.
10. Structured Format

o JSON follows a clear and organized format using {} for objects

and [] for arrays.
o This structured approach makes it easier to store and retrieve
data.

11 Write about similarities and differences of JSON and XML. ch-3 &1
→
JSON (JavaScript Object XML (eXtensible Markup
Notation) Language)
JSON is simple and easier to XML is verbose and less readable
read and write
JSON doesn’t use end tag In XML, the end tag is mandatory
JSON supports array thus it is XML doesn’t support array
easy to transfer a big chunk of
homogeneous data items using
JSON
JSON is easier to parse and can XML is difficult to parse than
be parsed to ready-to-use JSON
JavaScript object
JSON is short XML document is lengthy,
verbose and redundant
JSON is less secure than XML XML is more secured than JSON
JSON file is more readable than XML file is big and filled with
XML because it is short and to userdefined tags, thus less-
the point. readable
JSON is data-oriented XML is document-oriented
It doesn't provide display It provides the display capability
capabilities. because it is a markup language.
 37

Example: <student>
["student" : <sname>Ashish</sname>
{ <rno>101</rno>
"sname" : "Ashish", <div>I</div>
"rno" : "101", </student>
"div" : "I"
},
{
"sname" : "Binita",
"rno" : "102",
"div" : "I"
}
]

1 Write a note on features of AJAX. ch-4

Explain the working of AJAX and its architecture. ch-4
→

1. Features of AJAX

1. Asynchronous Processing
o Data is fetched in the background without disturbing the
webpage.
o Users can continue using the page while data loads.
2. Faster Page Load
o Only required data is loaded instead of the full webpage.
o Reduces waiting time and improves website speed.
3. Better User Experience
o Provides smooth and dynamic content updates.
o Reduces unnecessary page refreshes, making browsing
seamless.
4. Uses JavaScript and XMLHttpRequest
o JavaScript is used to handle requests and responses.
o The XMLHttpRequest object helps in data communication with
the server.
5. Supports Multiple Data Formats
o AJAX works with XML, JSON, HTML, and plain text.
 38

o JSON is commonly used as it is lightweight and easy to read.

6. Reduces Server Load
o Sends and receives only necessary data, saving bandwidth.
o Lowers the burden on the server, improving performance.
7. Cross-Browser Compatibility
o Works on almost all modern browsers like Chrome, Firefox,
and Edge.
o Different browsers may have slight variations but support
AJAX.
8. Improves Web Application Performance
o Enables quick data fetching, improving responsiveness.
o Used in search suggestions, auto-refresh, and chat applications.
9. Easy Integration with Other Technologies
o Works well with PHP, ASP.NET, Python, and other backend
technologies.
o Can be combined with jQuery to simplify AJAX operations.

10. Supports Partial Page Updates

o Specific sections of a page can be updated instead of the entire

page.
o Example: Updating a shopping cart without refreshing the full
page.

2. Working of AJAX and Its Architecture

AJAX (Asynchronous JavaScript and XML) is a web development

technique that allows web pages to fetch and update data without
reloading the entire page. It enables asynchronous communication
between the browser and the server using the XMLHttpRequest (XHR)
object.

Working of AJAX (Step-by-Step Process)

1. User Action:
o The user interacts with a webpage (e.g., clicking a button,
entering text).
2. JavaScript Creates an XMLHttpRequest Object:
 39

oThe browser creates an XMLHttpRequest object to handle

communication with the server.
3. Request is Sent to the Server:
o The request can be of type GET (to retrieve data) or POST (to
send data).
o Example:

xhr.open("GET", "data.json", true);

xhr.send();

4. Server Processes the Request:

o The server receives the request, processes it, and sends a
response (usually in JSON, XML, or plain text format).
5. AJAX Receives the Response:
o The onreadystatechange event monitors the response status.
o Example:

xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("demo").innerHTML =
xhr.responseText;
}
};

6. Webpage is Updated Dynamically:

o JavaScript updates the webpage without reloading it,
improving user experience.

Architecture of AJAX

AJAX follows a client-server architecture, consisting of five key

components:

1. Browser (Client-Side)
o Uses JavaScript to create an XMLHttpRequest object and send
asynchronous requests to the server.
2. XMLHttpRequest (XHR) Object
o Handles communication between the client and server.
3. Server-Side Script
o A server-side script (e.g., PHP, Node.js, or Python) processes
the request and prepares a response.
 40

4. Database (Optional)
o If necessary, the server retrieves data from a database (e.g.,
MySQL, MongoDB) before sending a response.
5. Response Format
o The server sends data in formats such as JSON, XML, or plain
text, which the client processes and displays dynamically.

Example of AJAX in Action

<button onclick="loadData()">Click to Load Data</button>
<p id="demo"></p>

<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "data.txt", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("demo").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>

Explanation:

• When the button is clicked, the loadData() function is triggered.

• The function creates an XMLHttpRequest object and sends a GET
request to fetch data.txt.
• Once the server responds successfully (readyState == 4 && status ==
200), the text is displayed in the <p> element without refreshing
the page.

2 XMLHttpRequest technology. ch-4

Explain XMLHttpRequest technology. ch-4
→
 41

XMLHttpRequest (XHR) Technology

1. What is XMLHttpRequest?

• XMLHttpRequest (XHR) is a JavaScript object that allows a webpage

to communicate with a server without refreshing the page.
• It is used to send and receive data from a web server
asynchronously.
• XHR is commonly used in AJAX (Asynchronous JavaScript and
XML) to make web applications faster and more dynamic.

2. Why is XMLHttpRequest Important?

• Allows data exchange in the background without affecting user

experience.
• Helps in fetching and updating data without reloading the entire
page.
• Supports various data formats like JSON, XML, plain text, and
HTML.
• Enables real-time applications like live chat, weather updates, and
stock market data.
• Works with various HTTP methods like GET, POST, PUT, DELETE
for data transfer.

3. How Does XMLHttpRequest Work?

1. Create an XHR object using new XMLHttpRequest().

2. Open a connection to the server with open(method, URL, async).
3. Send the request using send().
4. Wait for the server response (processed in the background).
5. Handle the response when received using onreadystatechange.

4. Example of XMLHttpRequest (Fetching Data Using GET Request)

var xhr = new XMLHttpRequest(); // Step 1: Create XHR object

 42

xhr.open("GET", "data.txt", true); // Step 2: Open connection (GET

request)
xhr.onreadystatechange = function() { // Step 5: Handle response
if (xhr.readyState == 4 && xhr.status == 200) { // Check if request is
complete
console.log(xhr.responseText); // Display server response
}
};
xhr.send(); // Step 3: Send request

Explanation:

• A request is sent to data.txt.

• When the request is completed (readyState == 4 and status == 200),
the response is displayed.

5. Important Properties of XMLHttpRequest

• readyState → Tells the current state of the request (from 0 to 4).

• status → Shows the HTTP response status (e.g., 200 = Success, 404 =
Not Found).
• responseText → Stores the response in plain text format.
• responseXML → Stores the response in XML format (if applicable).

6. readyState Values (Tracking Request Progress)

Value Meaning
0 Request not initialized
1 Connection opened
2 Request received
3 Processing request
4 Request completed, response received

7. Common Methods of XMLHttpRequest

Method Purpose
open(method, URL, async) Initializes a request (GET/POST, URL,
async option)
 43

send() Sends the request to the server

setRequestHeader(header, Adds custom headers to the request
value)
abort() Cancels the request

8. Uses of XMLHttpRequest

✔ Fetching real-time weather updates, stock prices, and news.

✔ Loading new content without refreshing the page.
✔ Submitting form data to a server without page reload.
✔ Creating live chat applications.
✔ Fetching API data from web services.

3 Write a note on XMLHttpRequest object. ch-4

→

Features of XMLHttpRequest Object

• Allows background communication between a web page and a server.

• Supports GET, POST, PUT, and DELETE HTTP methods.
• Can work with different data formats like JSON, XML, HTML, and plain text.
• Supports both synchronous and asynchronous requests (asynchronous is preferred).
• Provides methods and properties to handle server responses.

Note :- Same answer oh xmlhttprequest technology add only one.

19 Write the difference between Synchronous and Asynchronous web

applications. ch-4
Difference between Synchronous and Asynchronous web
applications. ch-4
→

Difference Between Synchronous and Asynchronous Web Applications

 44

Point Synchronous Web Application Asynchronous Web Application

Tasks run one after another, waiting Tasks run at the same time, without
1. Execution
for the previous task to finish. waiting for others to finish.

The page reloads when sending or The page does not reload, only updates
2. Page Reload
receiving data. needed parts.

Slower, as each request stops other Faster, because multiple actions can
3. Speed
actions until it's completed. happen at once.

4. User Less smooth, as users must wait for More interactive, as users can continue
Experience the page to load. using the page while data loads.

Needs a full-page reload to get Can update only specific parts of the
5. Data Fetching
updated data. page without reloading.

Used in older websites and simple Used in modern websites and real-time
6. Usage
applications. applications.

Submitting a form and waiting for a Chat applications where messages

7. Example
new page to load. update instantly.

Can be slow, especially with large More efficient, as multiple requests can
8. Performance
amounts of data. be processed at the same time.

9. Technologies Simple HTTP requests, traditional form AJAX, Fetch API, WebSockets, and
Used submissions. Promises.

Basic websites where real-time Dynamic websites like social media,

10. Best For
updates are not needed. chats, and stock market apps.

12 Explain how to create and include user-defined modules. ch-5

Explain user-defined modules in Node.js. ch-5
→

Answer: User-Defined Modules in Node.js

In Node.js, a user-defined module is a JavaScript file that contains

reusable code, which can be imported and used in other files. This helps in
organizing and managing code efficiently.
 45

Creating a Module (Exports)

• In Node.js, every JavaScript file is treated as a module by default.

• We use module.exports or exports to define functions, objects, or
variables that can be used in other files.

Example: Exporting a Simple Message

Create a file Message.js:

module.exports = 'Hello World';

This module simply exports a string message.

Including a Module (Require)

• The require() function is used to import a module into another file.

• It reads and executes the module and returns its exports object.

Example: Using the Exported Message in app.js

var msg = require('./Message.js');

console.log(msg);

Output:

Hello World
Exporting Objects and Functions

You can also export objects and functions instead of just strings.

Example: Exporting an Object (data.js)

module.exports = {
firstName: 'James',
lastName: 'Bond'
};

Now, import and use it in app.js:

var person = require('./data.js');

console.log(person.firstName + ' ' + person.lastName);

Output:
 46

James Bond
Exporting a Function (Log.js)
module.exports.log = function (msg) {
console.log(msg);
};

Now, import and use it in app.js:

var msg = require('./Log.js');

msg.log('Hello World');

Output:

Hello World

13 Explain the features of Node.js. ch-5

Discuss various components of Node.js. ch-5
→

Features and Components of Node.js

1. Asynchronous and Fast

• Node.js does not wait for tasks to finish before moving to the next
one.
• It handles multiple requests at the same time.

2. Single-Threaded but Scalable

• Works on one thread, but can manage many requests.

• Uses non-blocking I/O to be fast and efficient.

3. Cross-Platform

• Works on Windows, Linux, and macOS.

• Runs JavaScript outside the browser.

4. Uses V8 JavaScript Engine

• Uses Google’s V8 engine to convert JavaScript into fast machine

code.
 47

• Makes execution very fast.

5. No Buffering

• Sends data in small parts (streams) instead of storing it in

memory.
• Helps in faster file processing.

6. Built-in Modules

• Provides many ready-to-use modules (like HTTP, File System, URL,

etc.).
• No need to install extra libraries.

7. NPM (Node Package Manager)

• NPM is used to install extra libraries easily.

• It has millions of packages available.

8. Supports Databases

• Works with MySQL, MongoDB, PostgreSQL, etc.

• Good for real-time data processing.

9. Secure and High Performance

• Provides security features like HTTPS and authentication.

• Handles high-performance applications smoothly

14 Explain Node as a Server. ch-5

15 `fs.writeFile()` and `fs.readFile()` methods of Node.js. ch-5

16 `require()` function of Node.js. ch-5

17 Node.js File System Module. ch-5

18 Query String in Node.js. ch-5
48