Lab2 3wplab Manual

Lab No : 2
JQuery
Objectives:
In this lab, student will be able to
1. Develop responsive web pages using jquery

2. Familiarize with DOM manipulation and animations
jQuery
jQuery is a fast and concise JavaScript library to develop web based application.
Here is the list of important core features supported by jQuery −

• DOM manipulation − The jQuery made it easy to select DOM elements,
negotiate them and modifying their content by using cross-browser open source
selector engine called Sizzle.
• Event handling − The jQuery offers an elegant way to capture a wide variety of
events, such as a user clicking on a link, without the need to clutter the HTML
code itself with event handlers.
• AJAX Support − The jQuery eases developing a responsive and feature rich site
using AJAX technology.
• Animations − The jQuery comes with plenty of built-in animation effects which
you can use in your websites.
• Lightweight − The jQuery is very lightweight library - about 19KB in size
(Minified and gzipped).
• Cross Browser Support − The jQuery has cross-browser support, and works well
in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
• Latest Technology − The jQuery supports CSS3 selectors and basic XPath syntax.
You can download jQuery library from https://jquery.com/download/ on your local

machine and include it in your HTML code.
Solved Example:
<html>
Page: 1
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "jquery-3.4.1.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>
A good rule of thumb is to put your JavaScript programming (all your <script> tags)
after any other content inside the <head> tag, but before the closing </head> tag. The
$(document).ready() function is a built-in jQuery function that waits until the HTML
for a page loads before it runs your script.
When a web browser loads an HTML file, it displays the contents of that file on the
screen and also the web browser remembers the HTML tags, their attributes, and the
order in which they appear in the file—this representation of the page is called the
Document Object Model, or DOM for short.
Selector: jQuery offers a very powerful technique for selecting and working on a
collection of elements—CSS selectors. The basic syntax is like this:
$('selector') use a CSS class
selector like this:
$('.submenu')
$("p").css("background-color", "yellow");
$("#myid").css("background-color", "red");
});
</script>
</head>
<body>
<div>
Page 2
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
We can select tag available with the given class in the DOM. For example $('.someclass')
selects all elements in the document that have a class name as some-class.
Get And Set Atrributes:

var title = $("p").attr("title");
$("#divid").text(title);
$("#myimg").attr("src", "/jquery/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<p title = "Bold and Brave">This is first paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
<img id = "myimg" alt = "Sample image" />
</div>
</body>
</html>
You can replace a complete DOM element with the specified HTML or DOM elements.
selector.replaceWith( content )
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
Page 3
Events
To make your web page interactive, you write programs that respond to events.
Mouse events: click, dblclick, mousedown, mouseup, mouseover, etc
Document/Window Events: load, resize, scroll, unload etc
Form Events: submit, reset, focus, and change

$('#button').click(function() {
$(this).val("Stop that!");
}); // end click
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
<input type="button" id="button">
</div>
</body>
 The hover( over, out ) method simulates hovering (moving the mouse on, and off,
an object).

$('div').hover(
function () {
$(this).css({"background-color":"red"});
},
function () {
$(this).css({"background-color":"blue"});
}
);
}); </script>
The bind() method is a more flexible way of dealing with events than jQuery’s event
specific functions like click() or mouseover(). It not only lets you specify an event and a
Page 4
function to respond to the event, but also lets you pass additional data for the event-
handling function to use.
$('#theElement').bind('click', function() {
// do something interesting
}); // end bind
 checked selector selects all checked check-boxes or radio buttons. Let us

understand this with an example.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () { $
('#btnSubmit').click(function () {
var result = $('input[type="radio"]:checked');
if (result.length > 0) {
$('#divResult').html(result.val() + " is checked");
}
else {
$('#divResult').html("No radio button checked");
}
});
});
</script>
</head>
<body style="font-family:Arial">
Gender :
<input type="radio" name="gender" value="Male">Male
<input type="radio" name="gender" value="Female">Female
<input id="btnSubmit" type="submit" value="submit" />
<div id="divResult">
</div>
</body>
</html>
 The each() method in jQuery is used to execute a function for each matched
element.
<html>
Page 5
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () { $
('#btnSubmit').click(function () {
var result = $('input[type="checkbox"]:checked');
if (result.length > 0) {
var resultString = result.length + " checkboxe(s) checked<br/>";
result.each(function () {
resultString += $(this).val() + "<br/>";
});
$('#divResult').html(resultString);
} Lab No:1
else {
$('#divResult').html("No checkbox checked");
}
});
});
</script>
</head>
<body style="font-family:Arial">
Skills :
<input type="checkbox" name="skills" value="JavaScript" />JavaScript
<input type="checkbox" name="skills" value="jQuery" />jQuery
<input type="checkbox" name="skills" value="C#" />C#
<input type="checkbox" name="skills" value="VB" />VB
<br /><br />
<input id="btnSubmit" type="submit" value="submit" />
<br /><br />
<div id="divResult">
</div>
</body>
</html>
The animate() Method
The jQuery animate() method is used to create custom animations.
Page 6
$(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.
$("button").click(function(){
$("div").animate({left:'250px'});
});
Exercises:
1. Write a web page which contains table with 3 X 3 dimensions (fill some data) and one
image. Style the rows with alternate color. Move the table and image together from
right to left when button is clicked.
2. Design a calculator to perform basic arithmetic operations. Use textboxes and buttons
to design web page.
3. Create a web page to design a birthday card shown below.
Page 7
Home Assignments:
1. Design a webpage. The page contains:
• Dropdown list with HP, Nokia, Samsung, Motorola, Apple as items.
• Checkbox with Mobile and Laptop as items.  Textbox where you enter quantity.
• There is a button with text as ‘Produce Bill’.
On Clicking Produce Bill button, alert should be displayed with total amount.
2. Implement the bouncing ball using animate() function.

3. Write a web page which displays image and show the sliding text on the image.
Page 8
Lab No:3
Bootstrap
Objectives:
In this lab, student will be able to
1. Develop web pages using design templates

2. Learn how to use bootstrap elements What is Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many other, as
well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive
designs(automatically adjust themselves to look good on all devices)
Bootstrap Containers are used to pad the content inside of them, and there are
two container classes available:
• The .container class provides a responsive fixed width container

• The .container-fluid class provides a full width container, spanning the entire
width of the viewport Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
Page 9
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></scr
ipt>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that its width (max-width) will change at
different breakpoints.</p>
</div>
</body></html>
Bootstrap Tables
The .table-striped class adds zebra-stripes to a table.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
Page 10
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></scrip
t> <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine .table-dark and .table-striped to create a dark, striped table:</p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
</tbody>
</table>
Page: 11
</div>
</body>
</html>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
Exercise:
1. Design the student bio-data form using button, label, textbox, radio button, table and
checkbox.
2. Design a web page which shows the database oriented CRUD operation. Consider
Employee data.
3. Create a web page using bootstrap as mentioned. Divide the page in to 2 parts top
and bottom, then divide the bottom into 3 parts and design each top and bottom part
using different input groups, input, badges, buttons and button groups. Make the design
more attractive.
Home Assignments:
1. Design an attractive ‘train ticket booking form’ using different bootstrap elements.
2. Design an attractive ‘magazine cover page’ using different bootstrap elements.

3. Design your class timetable using bootstrap table and carousel.
Page 12

Lab2 3wplab Manual

Uploaded by

Copyright:

Available Formats

Lab2 3wplab Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab2 3wplab Manual

Uploaded by

Copyright:

Available Formats

Lab No : 2

1. Develop responsive web pages using jquery

Here is the list of important core features supported by jQuery −

You can download jQuery library from https://jquery.com/download/ on your local

Get And Set Atrributes:

<script type = "text/javascript" language = "javascript">

<script type = "text/javascript" language = "javascript">

 checked selector selects all checked check-boxes or radio buttons. Let us

The animate() Method

The jQuery animate() method is used to create custom animations.

2. Implement the bouncing ball using animate() function.

In this lab, student will be able to

1. Develop web pages using design templates

• The .container class provides a responsive fixed width container

<h1>My First Bootstrap Page</h1>

<p>This part is inside a .container class.</p>

<p>The .container class provides a responsive fixed width container.</p>

The .table-striped class adds zebra-stripes to a table.

2. Design an attractive ‘magazine cover page’ using different bootstrap elements.

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.