MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.

IT(SEM - V)
INDEX

SR.NO DATE NAME OF THE EXPERIMENT SIGN.

.
0 21-06-2024 Installation Steps of MongoDB

1 28-06-2024 MongoDB Basics

(A) Write a MongoDB query to create and drop database.
(B) Write a MongoDB query to create, display and drop
collection
(C) Write a MongoDB query to insert, query, update and
delete a document.
2 05-07-2024 Simple Queries with MongoDB

3 12-07-2024 Implementing Aggregation:

(A) Write a MongoDB query to use sum, avg, min and max
expression.
(B) Write a MongoDB query to use push and addToSet
Expressions.
(C) Write a MongoDB Query to use $first and $last
expression.
4 19-07-2024 Conditional Operators

5 26-07-2024 (A) jQuery Basic,

(B) jQuery Events
6 26-07-2024 (A) Selectors(Tag Selector)
(B) jQuery Hide Paragraph

7 02-08-2024 (A) jQuery Sliding effects

(Slide Up Panel, Slide Down Panel, Slide Up and Down
Panel )
8 08-08-2024 (A) jQuery Animation Effects
(B) jQuery Chaining

9 09-08-2024 (A) jQuery Callback

(B) jQuery Get contents
(C) jQuery Set contents

10 23-08-2024 (A) jQuery Insert contents,

(B) jQuery prepend() Method
(C) jQuery Remove elements
(D) jQuery empty() Method

11 30-08-2024 (A) Creating JSON

(B) Parsing JSON
(C) Persisting JSON
(D) Export Mongodb to JSON

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
Steps to Installing Mongodb in Windows :
1. Go to https://www.mongodb.com/download-center/community and download the setup
file of version 4.2.
2. Go into the download directory of your Mongodb.
3. Go to C:/ Drive and create a folder named “data” and inside the data folder create a
folder named “db”.
4. Run the setup and go through default installation steps but uncheck the “mongodb
compass” prompt to install (Optional).
5. After setup finishes, Open Command Prompt and type :
cd C:/Program Files/Mongodb/Server/4.2/bin
6. Type mongo and press enter.
PRACTICAL :

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

To create database , open the Mongodb app then connect to the localhost server then display
board of Mongodb will appear then click on create database > then add database name and
collection name and click on create database.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
Database will be created and then it will appear like this:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 1
A. QUESTION: Writ e a mongobd Query to create and drop database.
CODE: Create database
use <database_name>
Now Here, in <database_name>, you can enter any name for the database, irrespective
of the existence of that database.
OUTPUT:

Drop database : To Delete a database that you don’t want anymore, simply type :
use <db_name>
db.dropDatabase()

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
B. Question: Write a Mongodb Query to create, display and drop collection.
In order to create a collection, use the following command:
 db.createCollection('student')
 Here student is the collection name. you can write any other name.

Display (read from) collection

To read the documents from a collection, we can use the find() and findOne() method
1. find()
db.student.find()

2. findOne()
db.student.findOne()

(The output comes after inputting the collections and inserting them)

Drop Collection
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
To delete a collection, simply use:
db.collection.drop()

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

 MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

C. Question: Write a Mongodb Query to insert, query, update and delete. Create
using insert()
There are two ways to insert documents inside a collection using insert():
I. Writing the data directly inside insert().
use mks
db.student.insert({"name":”nirmeet dave","roll":108})

2.Writing the data in a variable and then passing it to insert().

use mks
mydoc = {"name":"nirmeet dave", "roll":108)

Update a document
To update a document,
db.student.update({"name":"nirmeet dave"}, {"name":"jemin dave"})

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Delete a document
To delete a document simply use remove() method
db.student.remove({"name":"nirmeet dave"})

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 2
QUESTION : WRITE A CODE TO USE WHERE FUNCTION IN MONGODB
CODE:
We shall use the WHERE clause in this example.
$where
Use the $where operator to pass either a string containing a JavaScript expression or a full
JavaScript function to the query system. The $where provides greater flexibility, but requires
that the database processes the JavaScript expression or function for each document in the
collection. Reference the document in the JavaScript expression or function using either this
or obj.
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL NO 3
(A) WRITE A MONGODB QUERY TO USE SUM, AVG, MIN AND MAX
EXPRESSION.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
$sum:
This expression is used to get the sum of the integer values of a column. For example, Here
in this case we will find the sum of the “total” column to find out how many total items has
the person bought.

QUERY:
db.products.aggregate([ {$match:{}}, { $group:{ _id:"$Customer", Product:
{$first:"$Product"}, total_items:{$sum:"$Total"} } } ])
This will output the different products taken by different customers and their total.

OUTPUT:

$min:
This is used to get the minimum integer value present in the column. In this example, we
shall see the minimum no. of items that a customer has taken.
QUERY:
db.products.aggregate( [ {$match:{}}, {$group:{_id:"$Customer",product:
{$first:"$Product"},total_items:{$min:"$total"} }} ] )

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
$max:
This expression is used to find out the maximum integer value in a column. In this example,
we shall see the maximum total of items a customer has taken.

QUERY:
db.products.aggregate( [ {$match:{}}, {$group:{_id:"$Customer",product:
{$first:"$Product"},total_items:{$max:"$total"} }} ] )

OUTPUT:

$avg:
This expression is used to find the average of the integer values in a specified column. In this
example, we shall find the average of the total items a customer has taken.

QUERY:
db.products.aggregate( [ {$match:{}}, {$group:{_id:"$Customer",product:
{$first:"$Product"},total_items:{$avg:"$total"} }} ] )

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
(B) Write a mongodb query to use push and addtoset expressions.

$push:
The $push operator appends a specified value to an array.
The $push operator has the form : {$push: { <field1>:<value1>, ... } }
To specify a in an embedded document or in an array, use dot notation.
In this example lets say we have a DB as PushDB,
And the collection name is test.
So, use the following queries one by one.
use PushDB
db.createCollection(‘test’)
And then, insert this document:
db.test.insert({'_id':1,'name':'samiksha', 'scores':[80]})
QUERY:
db.test.update( { Customer: "ABC" }, { $push: { Total: 89 } } )
OUTPUT:

$addToSet:
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
The $addToSet operator adds a value to an array unless the value is already present, in which
case $addToSet does nothing to that array.
The $addToSet operator has the form : { $addToSet: :{ <field1>:<value1>, ...}}
To specify a <field> in an embedded document or in an array, use dot notation.
QUERY:
db.test.update( { _id: 1 }, { $addToSet: { surname: "tendulkar" } } )
This will add the surname field in the document and set it to tendulkar.
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
(C) Write a mongodb Query to use $first and $last expression.
(NOTE : PRACTICAL IS IN REFERENCE WITH CONTEXT OF PRACTICAL
NO.3(A) PLEASE REFER IT FOR THE DETAILS.)
$first:
Returns the value that results from applying an expression to the first document in a group of
documents that share the same group by key. Only meaningful when documents are in a
defined order.
$first is only available in the $group stage.
$first has the following syntax: { $first: }
In this example, we shall refer the collection products we used in earlier examples.

QUERY:
db.products.aggregate( [ { $sort: { Customer:1 } }, { $group: { _id: "$Product",
firstItemTotal: { $first: "$Total" } } } ] )

OUTPUT:

$last:
Returns the value that results from applying an expression to the last document in a group of
documents that share the same group by a field. Only meaningful when documents are in a
defined order.
$last is only available in the $group stage.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
$last has the following syntax : { $last: <expression> }
We shall use Same Example as $first.

QUERY:
db.products.aggregate( [ { $sort: { Customer:1 } }, { $group: { _id: "$Product",
lastItemTotal: { $last: "$Total" } } } ] )

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL NO 4
Conditional Operators

$eq
Matches values that are equal to a specified value
{Key: {$eq: value}}
> db.Student.find({ "Age": {"$eq": 19}})
(To find students whose age is equal to 19)

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
$gt:
Matches values that are greater than a specified value.
{Key {$gt value))
> db.Student.find({ "Age": { "$gt": 19}})
(To find students whose age is greater than 19)
OUTPUT:

$gte :
Matches values that are greater than or equal to a specified value
{Key ($gte value}}
> db.Student.find({ "Age": { "$gte": 20}})
(To find students whose age is greater than equal to 20)
OUTPUT:

$lt :
Matches values that are less than a specified value.
{Key: {$lt: value}}
> db.Student.find({ "Age": { "$lt" : 20}})
(To find students whose age is less than 20)
OUTPUT:

$lte :
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
Matches values that are less than or equal to a specified value.
{Key {$lte value}}
> db.Student.find({ "Age": { "$1te" 19}})
(To find students whose age is less than equal to 19)
OUTPUT:

$ne :
Matches all values that are not equal to a specified value
{Key {$ne: value}}
> db.Student.find({ "Age": { "$ne" 19}})
(To find students whose age is not equal to 19)
OUTPUT:

$in :
Matches any of the values specified in an array.
{Key: {$in: value}}
>db.student.find({"Class":{"$in":["C1","c2"]}})
(To find students who belong to either class C1 or C2)
OUTPUT:

PRACTICAL NO:5 (A)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
QUESTION: Programs on Basic jQuery
CODE:
<!DOCTYPE html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var txt = '{"name":"dev","age":19,"city":"Mumbai"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + "," + obj.age +"," + obj.city;
</script>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 05 (B)
QUESTION: jQuery Events - There are different types of jQuery events such as mouse
click, double click and hover.
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>This text will disappear if you click on it.</p>
<p>Click to make this text disappear!</p>
<p>Click to make this disappear!</p>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 06 (A)
QUESTION:jQuery Hide and Show effects
Selectors(Tag Selector)
Following is a simple example which makes use of Tag Selector. This would selectall the
elements with a tag name p.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// jQuery code should be inside the document.ready function
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class="myclass">My First Paragraph.</p>
<p id="myid">My Second paragraph.</p>
<p>My Third Paragraph.</p>
</div>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
(B)jQuery Hide Paragraph
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Dev bhatt 103</title>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Welcome to TyBscIt!</h2>
<p>Paragraph One.</p>
<p>Paragraph Two.</p>
<button>Click this button to hide the paragraphs.</button>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT :

AFTER CLICKING ON THE BUTTON “Click this button to hide the paragraphs.” the
paragraphs will disappear as shown below in the paragraph.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 7
QUESTION: jQuery fading effects, jQuery Sliding effects
1. Slide Up Panel
CODE: <!DOCTYPE html>
<html>
<head>
<title>Dev bhatt 103</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
}
</style>
</head>
<body>
<div id="flip">Click to slide up panel</div>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
<div id="panel">Welcome to TYBscIT!</div>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 7(B)
QUESTION: 2. Slide Down Panel

CODE: <!DOCTYPE html>

<html>
<head>
<title>Dev bhatt 103</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></
script>
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
<div id="flip">Click to slide down panel</div>
<div id="panel">Welcome to TYBseIT!</div>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 7(C)
QUESTION: Slide Up Panel and Slide Down Panel
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dev bhatt 103</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center; /* Fixed the CSS syntax error */
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Welcome to TYBscIT!</div>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 8(A):
QUESTION:
a) jQuery Animation Effects, jQuery Chaining. Animation : The jQuery animate() method
is used to create custom animations. Syntax: $(selector).animate({params},speed,callback);
● The required params parameter defines the CSS properties to be animated.
● The optional speed parameter specifies the duration of the effect. It can take the following:
values: "slow", "fast", or milliseconds.
● The optional callback parameter is a function to be executed after the animation completes.
● The following example demonstrates a simple use of the animate() method; it moves a
element to the right, until it has reached a left property of 250px:
CODE :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 8 (B):
QUESTION: jQuery Chaining :
Until now we have been writing jQuery statements one at a time (one after the other).
However, there is a technique called chaining, that allows us to run multiple jQuery
commands, one after the other, on the same elements.
To chain an action, you simply append the action to the previous action. The following
example chains together the css(), slideUp(), and slideDown() methods. The "h3" element
first changes to red, then it slides up, and then it slides down:
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myh3").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<h3 id="myh3"> Change me!! </h3>
<button> Click me </button>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT:

In the above image, it meant to show that the colour of the text got changed to red, and the
text would slide up first and then slide down.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 9 (A)
QUESTION:
jQuery Callback, jQuery Get and Set contents. Callback :
 JavaScript statements are executed line by line. However, with effects, the next line of
code can be run even though the effect is not finished. This can create errors.
 To prevent this, you can create a callback function.
 A callback function is executed after the current effect is finished.
 Typical syntax: $(selector).hide(speed,callback);
CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("a").hide("slow", function(){
alert("Hide Successful !");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<a href="callback.html">This is a link to itself.</a>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 9 (B):
QUESTION:
Get contents : Three simple, but useful, jQuery methods for DOM manipulation are :
● text() - Sets or returns the text content of selected elements.
● html() - Sets or returns the content of selected elements (including HTML markup).
● val() - Sets or returns the value of form fields.

CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#myh2").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#myh2").html());
});
});
</script>
</head>
<body>
<h2 id="myh2">This is h2 with <i>italic,</i><b>bold</b>, and <u>underline</u>
fonts.</h2>
<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>
</body>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
</html>

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 9 (C)
QUESTION: Set Contents : We will use the same three methods from the previous page to
set content :
● text() - Sets or returns the text content of selected element.
● html() - Sets or returns the content of selected elements (including HTML markup).
● val() - Sets or returns the value of form fields.
The following example demonstrates how to set content with the jQuery text(), html(), and
val() methods :

CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text($("#test3").val());
});
$("#btn2").click(function(){
$("#test2").html($("#test3").val());
});
$("#btn3").click(function(){
$("#test3").val("Value changed.");
});
});
</script>
</head>
<body>
<p id="test1">change my text.</p>
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
<p id="test2">change my html.</p>
<p>Change my value: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>

OUTPUT:
Before clicking any button :

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACTICAL 10(A):
QUESTION: jQuery Insert contents, jQuery remove elements and attributes. Insert contents
:
With jQuery, it is easy to add new elements/content. We will look at two jQuery methods
that are used to add new content :
● append() - Inserts content at the end of the selected elements.
● prepend() - Inserts content at the beginning of the selected elements.
jQuery append() Method The jQuery append() method inserts content AT THE END of the
selected HTML elements.

CODE: <!DOCTYPE html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("<b>And this is an append Text<b>,");
});
});
</script>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<button id="btn1">Append Text</button>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACRTICAL NO 10(B):
QUESTION: jQuery prepend() Method : The jQuery prepend() method inserts content
AT THE BEGINNING of the selected HTML elements.

CODE: <!DOCTYPE html>

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>And this is an prepend Text<b>,");
});
});
</script>
</head>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<button id="btn1">Prepend Text</button>
</body>
</html>
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
PRACRTICAL NO 10 (C)
QUESTION: JQuery Remove elements :
With JQuery, it is easy to remove existing HTML elements.
To remove elements and content, there are mainly two jQuery methods :
● remove() - Removes the selected element (and its child elements).
● empty() - Removes the child elements from the selected element.

JQuery remove() Method :

The Jquery remove() method removes the selected element(s) and its child elements.

CODE:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1">
<h5>I will be removed if you click the button.</h5>
</div>
<br>
<button>Remove above element</button>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

PRACRTICAL NO 10 (D):
QUESTION: jQuery empty() Method :
The jQuery empty() method removes the child elements of the selected element(s).

CODE: <!DOCTYPE html>

<html>
<head>
<title>dev bhatt 103</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:200px;border:3px solid black;background-
color:gray;">
<p>This is a paragraph in the div.</p>
This is a link to <a href="https://www.example.com">www.example.com</a>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

PRACTICAL 11:
QUESTION: (A): Creating JSON
 There are many ways to create JSON with different programming languages like,
Java, Python and PHP. We shall see how to create a JSON in Python.
 Python has a built-in package called JSON, which can be used to work with JSON
data.
 Import the JSON module:
import json
 To create a JSON in python, we need to create a python object.
CODE: import json
# a Python object (dictionary):
x={
"name": "dev",
"age": 19,
"city": "Mumbai"
}
# convert into JSON:
y = json.dumps(x)
# the result is a JSON string:
print(y)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
QUESTION:11(B)
Parsing JSON
Parsing JSON means converting JSON data to an object/data of a different language.
If you have a JSON string, you can parse it by using the JSON.loads() method.
We shall see the example using Python.
CODE :
import json
# some JSON:
x = '{ "name":”dev”, "age":20, "city":"Mumbai"}'
# parse x:
y = json.loads(x)
# the result is a Python dictionary:
print(y["age"])

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
OUTPUT:

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

(C) Persisting JSON:

Persisting json means to add the JSON data collected into a database (Mongodb).
In order to do that, Mongodb provides us a tool called mongoimport.
To use this tool, we need to first have a json file saved.
Syntax : mongoimport --db <db_name> --collection <collection_name> --file
<File_name.json>
(Note : You need to enter the full path of the file.)
Follow these steps to successfully add JSON to Mongodb’s Database :
● Open Explorer and go to C:/ drive and create/open mongo folder.
● In that folder create a new text file and write the following inside the text file :
{
_id: 0,
"name": "MKS",
"Inserted by": "mongoimport"
}

● Save it as persist.json and open a command prompt with its current directory set to
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
Mongodb’s bin path. (C:/Program Files/Mongodb/Server/4.0/bin in my case).

● Now type the command:

mongoimport --db MKSDB --collection mycol --file C:/mongo/persist.json

As you can see, it successfully imported it to the database.

Note : You do not need to worry about creating a db and a collection in order for this
command to execute. It will create automatically.
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

(D) Export Mongodb to JSON:

Exporting a Mongodb database to JSON requires a tool called mongoexport.
This command nicely takes a snapshot of the entire collection and either display it on
the administration console or places it in the dump directory. When the mongoexport
command runs without the host input argument, it simply connects to the local-host Mongo
Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES
MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)
instance on port 27017 and exports the collection.
Syntax :
mongoexport --host <host_name> --username <user_name> --password <password> --db
<database_name> --collection <collection_name> --out <output_file>
Where :
 --host is an optional parameter that specifies the remote server Mongo database
instance.
 --username and --password are the optional parameters that specify the authentication
details of a user.
 --db specifies the database name.
 --collection specifies the collection name.
 --out specifies the path of the output file. If this is not specified, the result is displayed
on the console.
Let’s understand this with the help of an example :
1. Open a command prompt(Run as Administrator) and change directory to Mongodb’s bin
path.
2. Type mongod and press enter.
3. Now open a new Command Prompt(Admin) window and change its directory to
Mongodb’s Bin path.
4. In that window, type the following command :
mongoexport --db MKSDB --collection mycol --out C:/mongo/export.json --jsonArray -
pretty
5. Note : You need to put the database name and collection name of the database that
exists and you need to export to JSON and they are case sensitive.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES

MALINI KISHOR SANGHVI COLLEGE OF COMMERCE TY BSC.IT(SEM - V)

As you can see, the json file is created.

Let’s check its content :

It is the same content which we had in the database.

Dev Hitesh Bhatt 103 EMERGING TECHNOLOGIES