Scribd
Upload
8 views

ADBMS JQuery - Mixed

Uploaded by

niteshsemwal15
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

ADBMS JQuery - Mixed

Uploaded by

niteshsemwal15
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 74

SYCS26 PRACTICAL - 06 Date : 03/01/2024

Practical – 06

Programs on Basic jQuery, jQuery Events, jQuery Selectors, jQuery Hide and Show
effects, jQuery fading effects, jQuery Sliding effects.

Q1. Demonstrate the working of jQuery Selectors by selecting elements by ID, class
name, element name and attribute.
CODE:
j.html
<!DOCTYPE html>
<head>
<title>jQuery Selectors</title>
<script src="jquery-3.7.1.slim.js"></script>
</head>
<body>
<button id="btn1">Click here </button>
<button class="btn2" >Click here</button>
<button>Click here</button>
<a href="index.html">Click here</a>
</body>
<script>
$(function(){
$("#btn1").click(function(e){
alert("I am selected using ID");
});
$(".btn2").click(function(e){
alert("I am selected using class");
});
$("button").click(function(e){
alert("I am selected using element ");
$(this).css("color","red");
});
$("a[href='index.html']").click(function(e){
alert("I am selected using attribute");
});
});
</script>
</html>
Index.html
<!DOCTYPE html>
<head>
<title>
jQuery Selectors
</title>
</head>
<body>
Hi Hello
</body>
</html>

Page 1 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

OUTPUT:

Click on Button 1

Click on Button 2

Click on Button 3

Click on the link

Redirected to index.html

Page 2 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

Q2. Demonstrate the working of jQuery selector by selecting elements using


compound CSS selector, custom CSS selectors.
compound CSS selector = Nested Tags
custom CSS selectors = Pseudo selectors like – keywords :first, :last
//compound only: div p
//custom CSS selectors: p: first
//both compound and custom selectors: div p:first
//use colour name or hexadecimal colour code for specifying color
CODE:
j2.html
<!DOCTYPE html>
<head>
<title>Compound Selectors and custom selectors</title>
<script src="jquery-3.7.1.slim.js"></script>
<script src="j2.js"></script>
</head>
<body>
<p>I am paragraph outside div tag</p>
<div>
<h4>Paragraphs inside div</h4>
<p>I am paragraph 1</p>
<p>I am paragraph 2</p>
<p>I am paragraph 3</p>
</div>
</body>
</html>
j2.js
$(function(){
$("div h4").css({"border-color":"#C1E0FF",
"border-weight":"1px",
"border-style":"solid" });

$("div p:first").css({"border-color":"red",
"border-weight":"2px",
"border-style":"solid" });
});
OUTPUT:

Page 3 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

3.Design an HTML page. Accept username and age from user. Retrieve textbox values
using jQuery and display it in a alert message.

// Method .val() -This method gives runtime text value of that element

Validation.html
<html>
<head>
<title>Validation</title>
<script src="jquery-3.7.1.slim.js"></script>
<script src="user_input.js"></script>
</head>
<body>
<div class>
<h2> Sign-in </h2>
<div class="container">
<form action="">
<div>
<span>Full Name</span>
<input type="text" name="u_name" id="name" required="required">
</div>
<div>
<span>Age</span>
<input type="text" name="u_age" id="age" required="required">
</div>
<div>
<input type="submit" name="submit" id="sign" value="Sign-in " >
</div>
</form>
</div>
</body>
</html>

User_input.js
$(function(){
$("#sign").click(function(e){
let name = $("#name").val();
let age=$("#age").val();
let greetings="";
if(age>15)
greetings="Welcome to College";
else
greetings="Continue Schooling";
alert("Name : "+name+"\n"+"Age: "+age+"\n"+"Msg for you : "+greetings);
});
});

Page 4 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

Q4. Create a Zebra Stripes table effect using jQuery


<!Doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<table>
<table border=2>
<tr></tr>
<tr><td>Jack</td><td>Franklin</td></tr>
<tr><td>Stuart</td><td>Robson</td></tr>
<tr><td>Rob</td><td>Hawkes</td></tr>
<tr><td>Alex</td><td>Older</td></tr>
</table>
</body>
<script>
$(function(){
$("tr:even").css({"background":"yellow","color":"black"});
});
</script>
</html>
OUTPUT:

Page 5 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

Q5. Design an HTML page and count child elements using jQuery

CODE:
<!Doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>

<body>
<table border="2" class="container">
<tr><td>Jack</td><td>Franklin</td></tr>
<tr><td>Stuart</td><td>Robson</td></tr>
<tr><td>Rob</td><td>Hawkes</td></tr>
<tr><td>Alex</td><td>Older</td></tr>
</table>
<center><button id="click"> Click me </button></center>
</body>

<script>
$("#click").click(function(e){
let count=$(".container").children().length;
alert("Length of Children is "+count);
});
</script>
</html>

OUTPUT:
//Use Div tag to put class attribute

Page 6 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

6.Design webpage to change href attribute at runtime using jQuery(H.W)


CODE:
<html>
<head>
<title>Setting atribute value using attr()</title>
<script src="jquery-3.7.1.js"></script>
</head>
<body>
<center>
<h2><b><i>Changing attribute href at run time </i></b></h2> <br>
<h1>
<input type="button" id="mybtn" value="Click to set the new link">
<a href="https://www.amazon.in/">Amazon</a>
</h1>
</center>
<script>
$(function(){
$("#mybtn").click(function(){
$("a").attr( "href", "https://www.pw.live/") //Setting attribute at runtime
});
});
</script>
</body>
</html>
OUTPUT:

Before clicking on button, the link named Amazon redirected to Amazon website

After clicking on button, the link named Amazon redirected to Physics Walla website

Page 7 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

7.Write a jQuery – based program to demonstrate at fading effect.(fadeIn()


fadeOut(), fadeTo(), fadeToggle() method.

CODE:
<!Doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<p><span>Para 1 </span>H</p>
<p><span>Para 2 </span>E</p>
<p><span>Para 3 </span>L</p>
<p><span>Para 4 </span>L</p>
<p><span>Para 5 </span>O</p>
</div>
<button id="btn1"> Fadeout para 1</button>
<button id="btn2"> Fadein para 2 </button>
<button id="btn3"> Fadeout all para </button>
<button id="btn4"> FadeToggle </button>
<button id="btn5"> FadeTo in last para custom fading </button>
<script>
$(function(){
$("#btn1").click(function(){
$("p:first").fadeOut("slow");
});
$("#btn2").click(function(){
$("p:first").fadeIn("slow");
});
$("#btn3").click(function(){
$("p").fadeOut();
});
$("#btn4").click(function(){
$("p").fadeToggle("fast");
});
$("#btn5").click(function(){
$("p:last").fadeTo("slow",0.5);
});
});
</script>
</body>
</html>

Page 8 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

OUTPUT:

After clicking First button

After clicking Second button

After clicking Third button

After clicking Fourth button

Page 9 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

After clicking Fifth button

8.Write a jQuery based program to demonstrate sliding effect


(slideDown(),slideUp(),slideToggle()

//Do with text para or css box


//If only CSS box is used with no text inside it then no need to use font size, text align
properties.

CODE:
<!Doctype html>
<head>
<title>Demonstrate sliding effect</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<link rel="stylesheet" href="Q8.css">
</head>
<body>
<div id="box1"> </div>
<div id="box2"> </div>
<button id="btn1"> SlideUp on box 1</button>
<button id="btn2"> SlideDown on box1</button>
<button id="btn3"> SlideToggle on box 2</button>

<script>
$(function(){
$("#btn1").click(function(){
$("#box1").slideUp();
});
$("#btn2").click(function(){
$("#box1").slideDown();
});
$("#btn3").click(function(){
$("#box2").slideToggle();
});
});
</script>
</body>
</html>

Page 10 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 06 Date : 03/01/2024

CODE of Q8.css file :


#box1{
width:100px;
height:100px;
background:yellow;
}
#box2{
width:100px;
height:100px;
background:red;
}
OUTPUT:

After Pressing button 1

After Pressing button 2

After Pressing button 3

Page 11 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

Practical – 07
AIM : Programs on Advanced jQuery
9.Demonstrate working of jQuery chaining.
CODE:
<!DOCTYPE html>
<head>
<title> Chaining Effect </title>
<script src="jquery-3.7.1.js"></script>
</head>
<body bgcolor="cyan">
<div></div>
<button>Click here</button>
</table>
</body>
<script>
$(function(){
$("button").click(function(e){
//jquery object
$("div").css({background:"yellow",color:"black"}).text("Colour Changed");
});
});
</script>
</html>
OUTPUT:

10.Demonstrae working of jQuery animation effect. (using animate () method)


CODE:
<!DOCTYPE html>
<head>
<title> </title>
<script src="jquery-3.7.1.js"></script>
</head>
<body bgcolor="cyan">
<div>
<button id="dec"> Decrease height </button>
<button id="inc"> Increase height </button>
</div>
<div>
<img src="spring.png" alt="spring" id="image" height="200px" width="200px">
</div>
</body>

Page 12 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

<script>
$(function(){
$("#dec").click(function(){
$("#image").animate({height:"-=50"},2500);
});
$("#inc").click(function(){
$("#image").animate({height:"+=50"},2500);
});
});
</script>
</html>
OUTPUT:

After pressing decrease in height

After pressing increase in height

Page 13 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

11.Write a jQuery-based program to remove element or attribute in DOM. (Remove(),


removeAttr() )
CODE:
<!DOCTYPE html>
<head>
<title> Removing element or attribute </title>
<script src="jquery-3.7.1.js"></script>
</head>
<body>
<div class="container">
<h1 id="myheading"> My heading for Practical</h1>
</div>

<center>
<a href="https://www.google.com/" target="_blank"> GOOGLE</a>
</center>
<button id="mybtn1">Remove h1 element from DOM</button>
<button id="mybtn2">Remove target attribute from DOM</button>
</body>

<script>
$(function(){
$(".container").click(function(e){
$("h1").css("width","900px");
$("#myheading").css({background:"blue","color":"white"});
$("a[target='_blank']").css({color :"red"});
});
$("#mybtn1").click(function(e){
let con = confirm("Do you really want to delete h1?");
if(con == true){
$("h1").remove();//Removing element
}
});
$("#mybtn2").click(function(e){
$("a").attr("href","https://www.amazon.in/");
$("a").removeAttr("target"); //Removing Attribute
});

});
</script>
</html>

OUTPUT:

Page 14 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

After clicking on heading

On clicking the First button

Before clicking second button, Google link redirects to google website by opening a new
window

After clicking the second button, Google link redirects to amazon by opening it on the same
window

12.Write a jQuery-based program to create and insert element or attribute in DOM.


CODE:
<!DOCTYPE html>
<head>
<title> Inserting Element </title>
<script src="jquery-3.7.1.js"></script>
</head>
<body bgcolor="cyan">
<div>
<p>Hello Everyone</p>
</div>

Page 15 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

<button id="btn" >Insert element</button>


</table>
</body>
<script>
$(function(){
$("#btn").click(function(){
//storing created div tag text attribute
let myDiv =$("<div />", {"text": "I am Div tag added using wrap()" });
//creating new div element
$(function(){
$("p").wrap(myDiv); //inserting div element
});
});
});
</script>
</html>
OUTPUT:

After Clicking the Insert Button

13.Write a program to demonstrate ajax with jQuery.


CODE:
ajax.html
<html>
<head>
<title> Ajax with jQuery </title>
<script src="./jquery-3.7.1.js"></script>
<script src="./ajax.js"></script>
</head>
</html>
ajax.js
$(function(){
$.ajax({
"url":"./ajax.json",
"type":"get",
"datatype":"json"
}).done(function(results){
console.log(results);
});
});

Page 16 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

ajax.json
{
"people":[
{"name":"Jack","age":20},
{"name":"Grant","age":21},
{"name":"Lisa","age":21}
]}
OUTPUT:

Initially
Nothing in html page

Nothing in console – To open console press ctrl + shift + j

Setting a local server in system


➢ Start the python server
➢ Go to command prompt(cmd)
➢ Go to current folder using cd command:
o >cd C:\Users\Aparna\Desktop\jquery
➢ Type the below command
o >python -m http.server 8888
Use port number 7777 if port number 8888 is not working
➢ Allows the windows firewall of python if asked for permission

Page 17 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

Open html file from browser


Type localhost:8888 in the address bar
Open then the html file

Ajax.html

Then open the console by pressing CTRL + SHIFT + J

Expand the object, by clicking on the arrow

Page 18 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

14.Write a simple jQuery program to jQuery plug in.


CODE:

plugin.html
<html>
<head>
<title> jQuery Plugin Simple </title>
<script src="./jquery-3.7.1.js"> </script>
<script src="./logmyId.js"></script>
<script src="./plugin_app.js"></script>

<body bgcolor="yellow">
<h3> Plugin to extract id of each paragraph (this) element</h3>
<p class="Para 1"> Hello Para 1 with class attribute</p>
<p class="Para 2"> Hello Para 2 with class attribute</p>
<br>
<div class="Div 1">Div 1 with class attribute</div>
<br>
<p id="Para 3"> Hello Para 3 with id attribute</p>
<p id="Para 4"> Hello Para 4 with id attribute</p>
</body>
</html>

logmyId.js
//Code to define plugin function
$.fn.logmyId = function(){
return this.each(function()
{
console.log("Id: ",this.id,
"\nClass: ",this.className,"\nElement Type: ",this.nodeName);
});
};

Page 19 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

plugin_app.js
//Code to call plugin function
$(function()
{
$("p").logmyId();
$("div").logmyId();
});
OUTPUT:
On the server using Command prompt

Open html file from browser or you can open it by clicking on current folder file

Output of Plugin.html

Page 20 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

Output in Console:

15.Write a jQuery plug in program with user input. (use backup value i.e. default
parameter)
CODE:
plug2.html
<html>
<head>
<title>jQuery plugin with user input (use back up value)</title>
<script src="./jquery-3.7.1.js"></script>
<script src="./logAttr.js"></script>
<script src="./user_input_app.js"></script>
</head>
<body>
<div id="div1"> Hello 1 </div>
<div id="div2"> Hello 2 </div>
<div id="div3"> Hello 3 </div>
<div id="div4"> Hello 4 </div>
</body>
</html>

logAttr.js
//Code to define plugin function
$.fn.logAttr = function (opts){
let defaults = {
attr:'id',
backup:'N/A',
useAlert: true
};
var options =$.extend( {}, defaults, opts);
//Extend method makes a new object by merging the properties of 2 objects

Page 21 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

return this.each(function()
{
var val=$(this).attr(options.attr)||options.backup;
options.useAlert? alert(val):console.log(val);
});
};

user_input_app.js

//Used to Call the plugins


//trial 1
//User given input and output given in console
/*
$(function(){
$("div").logAttr({
attr:"class",
useAlert:false
});
});
*/

//trial 2
//User given input and output given in alert
/*
$(function(){
$("div").logAttr({
attr:"class",
useAlert:true
});
});
*/

//trial 3
//Default input and output given in console
/*
$(function(){
$("div").logAttr({
useAlert:false
});
});
*/

//trial 4
//Default given input and output given in alert
$(function(){
$("div").logAttr({
useAlert:true
});
});

Page 22 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

OUTPUT:
Set the local server on and then open the files in browser

//User given input and output given in console

//User given input and output given in alert

//Default input and output given in console

//Default given input and output given in alert

Page 23 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

16.Demonstrate the working of jQuery image slider.

CODE: Save the below files inside one folder

first_img_slider.html
<html>
<head>
<title>Image Slider Demo</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-3.7.1.js"></script>
<script src="slider_jquery_with_animation.js"></script>
<script src="app.js"></script>
</head>
<body>

<div class="slider">
<ul>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten"
width="300" height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
<li><img src=" http://placekitten.com/g/300/300 " alt="Kitten" width="300"
height="300" /></li>
</ul>
<a href="#" class="button back">Back</a>
<a href="#" class="button forward">Forward</a>
<span class="index">1</span>
</div>
</body>
</html>

style.css

body {
padding: 50px;
}

Page 24 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

.slider {
width: 300px;
overflow: hidden;
height: 400px;
}
.slider ul {
list-style: none;
width: 3000px;
height: 300px;
margin: 0;
padding: 0;
}
.slider li {
float: left;
width: 300px;
height: 300px;
}
.button {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
padding: 6px;
border: 1px solid #ccc;
margin: 10px 0 0 0;
}
.back {
float: left;
}
.forward {
float: right;
}
a:link, a:visited {
color: blue;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
.button, .index {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
padding: 6px;
border: 1px solid #ccc;
margin: 10px 0 0 0;
}
.index {
text-align: center;
}

Page 25 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

slider_jquery_with_animation.js
//Creating the plugin slider

(function($) {
$.fn.slider = function(options) {
var defaults =
{duration: 1000, animationDelay: 2000 };

var settings = $.extend({}, defaults, options);


return this.each(function() {
// store some initial variables
var $slider = $(this);
var $sliderList = $slider.children("ul");
var $sliderItems = $sliderList.children("li");
var $allButtons = $slider.find(".button");

var $buttons = {
forward: $allButtons.filter(".forward"),
back: $allButtons.filter(".back")
};

var $index = $(".index");


var imageWidth = $sliderItems.first().children("img").width();
var endMargin = -(($sliderItems.length - 1) * imageWidth);
var totalImages = $sliderItems.length;
var currentIndex = 1;
var isPaused = false;

var animateSlider = function(direction, callback) {


$sliderList.stop(true, true).animate({
"margin-left" : direction + "=" + imageWidth
}, settings.duration, function() {
var increment = (direction === "+" ? -1 : 1);

updateIndex(currentIndex + increment);

if(callback && typeof callback == "function") {


callback();
}
});
};

var animateSliderToMargin = function(margin, callback) {


$sliderList.stop(true, true).animate({
"margin-left": margin
}, settings.duration, callback);
};

Page 26 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

var getLeftMargin = function() {


return parseInt($sliderList.css("margin-left"), 10);
};

var isAtBeginning = function() {


return getLeftMargin() >= 0;
};

var isAtEnd = function() {


return getLeftMargin() <= endMargin;
};

var updateIndex = function(newIndex) {


currentIndex = newIndex;
$index.text(currentIndex);
};

var triggerSlider = function(direction, callback) {


var isBackButton = (direction === "+");
if(!isBackButton && isAtEnd()) {
animateSliderToMargin(0, callback);
updateIndex(1);
} else if(isBackButton && isAtBeginning()) {
animateSliderToMargin(endMargin, callback);
updateIndex(totalImages);
} else {
animateSlider(direction, callback);
}
};

var automaticSlide = function() {


timer = setTimeout(function() {
triggerSlider("-", function() { automaticSlide(); }); },
settings.animationDelay);
};

var timer = setTimeout(automaticSlide, settings.animationDelay);


var resetTimer = function() {
if(timer) { clearTimeout(timer); }
timer = setTimeout(automaticSlide, 30000);
}

$allButtons.on("click", function(event) {
resetTimer();
var isBackButton = $(this).hasClass("back");
triggerSlider((isBackButton? "+" : "-"));
event.preventDefault();
});

Page 27 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 07 Date : 13/01/2024

//-----------Keyboard Keys----------------------------//Below CODE can be omitted//

$(document.documentElement).on("keyup", function(event) {
if(event.keyCode === 37) {
resetTimer();
triggerSlider("+");
} else if (event.keyCode === 39) {
resetTimer();
triggerSlider("-");
}
});
});
}
})(jQuery);

app.js // Used to calling the slider() plugin

$(function() {
$(".slider").slider();
});

OUTPUT:

Page 28 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

Practical - 08
JSON: Creating JSON, Parsing JSON, Persisting JSON.

Creating JSON
1. Write a program to demonstrate working of stringify() method.

stringify (value, replacer, space) ----Converts JavaScript object to JSON object

CODE:
<html>
<head>
<title> Demonstrate working of stringify() method. </title>
</head>
<body>
<h1></h1>
<script>
var text = document.getElementsByTagName("h1")[0];
function log(jsonText){
text.innerHTML +=' " '+jsonText +' "<br>"';
}

#OBJECT in JavaScript format

let students = new Object();


students.name="Anu";
students.roll="SYCS17";
students.grade="O"
students.marks =[{
'IOT':78,
'CPP':88,
'Python':97
}];

#Javascript object is converted to JSON object using stringify()

var result = JSON.stringify(students);


log(result);
</script>
</body>
</html>

OUTPUT:

Page 29 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

2. Write a program to demonstrate working of toJSON() method.

CODE:
<html>
<head>
<title>Demonstrating working of JSON.toJSON( ) method</title>
</head>
<body>
<script>

// JavaScript Object
var students= new Object();
students.name = "Shiva",
students.roll="SYCS17",
students.grade="O"
students.marks =[{
'IOT':78,
'CPP':88,
'Python':97
}];

// Defining toJSON() which is used to convert any collection to JSON string/Object


Object.prototype.toJSON =function(key){
console.log(key); //prints current parameter key name
console.log(this); //prints current object with collection of values
return this;
}

//stringify(value) converts JavaScript Object to JSON Object


// when stringify(value) is called, it automatically calls toJSON() inside it
var res = JSON.stringify(students);
document.body.innerHTML = res;
</script>
</body>
</html>

OUTPUT:

OUTPUT IN BROWSER:
It shows the data in JSON format

Page 30 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

OUTPUT IN CONSOLE – To view console, press Ctrl + Shift + J


It shows the data in JSON format

Parsing JSON

3. Write a program to demonstrate working of JSON.parse() method.

Unlike stringify (value, replacer, space), which returns the entire object, the parse ()
method allows to access individual element from the object being parsed.
We can access each element separately using dot operator while parsing the object using
parse ().

CODE:
<!DOCTYPE html>
<html>
<head>
<title> Demonstrate working of JSON.parse() method </title>
</head>
<body>
<script>
var students2 = '{"Name":"Sejal","Roll":"SYCS123"}';
var res =JSON.parse(students2);
document.body.innerHTML ="Name:"+res.Name+"<br>"+"Roll:"+res.Roll;
</script>
</body>
</html>
OUTPUT:

Page 31 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

Persisting JSON
4. Write steps to demonstrate working of Web Local Storage API methods

STEP 1. Open Google home page AND open the console there by pressing Ctrl + Shift + J
try the below code on Console.

STEP 2: To Create a JSON object ‘storeData’. This data is stored temporarily .


var emp = { id: ‘Emp_01’ , name : ‘Vaishnav’ }
var storeData = JSON.stringify(emp)
storeData

localStorage

STEP 3: Storing the JSON object permanently using localStorage and accessing it using
the name ‘data’.
Setting and Getting JSON object using its key.

STEP 4: Now try to access the ‘data’ in another site e.g. https://bhavans.ac.in/
It won’t be accessible.

Google Console
Go back to the first website i.e. Google. Now you can access the data again.

//Note: Open Google on the ‘SAME’ browser.


//If we open Google on different browser then the ‘data’ won’t be accessible

Page 32 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

Also, You can store different types of ‘data values’ inside localStorage, for example
JSON object, string or floating-point number, etc.
1) JSON object

2) String

3) Number

STEP 5: Getting total no. of values stored in localStorage


localStorage.length

STEP 6: Fetching value using key


localStorage.key(0)

STEP 7: Removing data in localStorage


localStorage.removeItem('data2')

Page 33 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

sessionStorage

STEP 8: Create Sessions, for temporary storage

STEP 9: Refresh browser and try to get the key ‘pi’ and variable ‘storeData’
....Check if these data are still persistent(exists) after refreshing the page.

1) Variable storeData is ‘not available’

2) localStorage data is available

3) sessionStorage data is also available

STEP 10 : Close the browser and try to access now it will show pi = null.
But here local storage is available
1) Variable storeData is not available

2) localStorage data is available

3) sessionStorage data is not available

LOCALSTORAGE is persistant but session is not persistent

STEP 11 : Clearing the localStorage

Page 34 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

5. Write a program to create, retrieve and delete cookies.


CODE:
Cookies.html
<html>
<head></head>
<body>
<script src="Cookies_script2.js"></script>
</body>
</html>

CODE of Cookies_script2.js file :

setCookies('FirstName', "Lakshmi", 365);


setCookies('LastName', "Nair", 365);
console.log(getCookies("FirstName")); alert(getCookies("FirstName"));
console.log(getCookies("LastName")); alert(getCookies("LastName"));

function setCookies(cname, cvalue, exdays) {


const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
alert(document.cookie)
}

function deleteCookies(name) {
setCookies(name, null , null); // Setting expiration date in the past to delete cookie
}

function getCookies(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

Page 35 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

OUTPUT:

STEP 1: To set a live server on your system


• Open Command Prompt, Go to the folder where json file is located using cd command.
• Turn On the live server on your system by giving the below command on cmd
python -m http.server 8888

STEP 2: To Open your html file,


Open your browser and type localhost:8888 in the url bar and press Enter

Double click on cookies.html file

Page 36 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________


SYCS26 PRACTICAL - 08 Date : 06/02/2024

STEP 3: View the OUTPUT ON BROWSER

Displaying the document.cookie

STEP 4:
To See the OUTPUT ON CONSOLE : Press Ctrl+Shift+j

Page 37 of 37
BHAVANS COLLEGE AUTONOMOUS, ANDHERI WEST
PRACTICAL JOURNAL
SYCS
Class: _____________ 4
Sem: _____ Date of Performance: ___________
Advanced Database Management
Course Name:_________________________ BH.USCSP401
Course Number: __________
Practical Number: _______ Page Number: _______

Aim:

Teacher’s Signature : ____________________________

You might also like