Scribd
Upload
17 views9 pages

L008 ABCA Exp7

The document provides instructions for students to complete two tasks - one using JavaScript to implement repetitive actions on checkbox clicks, and another using jQuery to add validation on button clicks. It includes the aim, prerequisites, outcomes, theory on jQuery, and steps to complete the tasks and submit the code. Students are expected to paste their code for each task, along with any input/output. They also write a conclusion and answer a question of curiosity.

Uploaded by

Burhanuddin Bohra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views9 pages

L008 ABCA Exp7

The document provides instructions for students to complete two tasks - one using JavaScript to implement repetitive actions on checkbox clicks, and another using jQuery to add validation on button clicks. It includes the aim, prerequisites, outcomes, theory on jQuery, and steps to complete the tasks and submit the code. Students are expected to paste their code for each task, along with any input/output. They also write a conclusion and answer a question of curiosity.

Uploaded by

Burhanuddin Bohra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

SVKM’s NMIMS

Mukesh Patel School of Technology Management & Engineering


Computer Engineering Department
Program: B.Tech SEM-V

Course: Advanced Business Computing and


Applications
Experiment No.07

PART A
(PART A : TO BE REFFERED BY STUDENTS)

A.1 Aim:
Write code in Javascript to implement repetitive actions in the event of clicking a checkbox.
Write a code in Jquery to implement the action requiring repetitive validations, on the event
of clicking a button.

A.2 Prerequisite:
1. Fundamental concepts of HTML, Javascript and JQuery.

A.3 Outcome:
After successful completion of this experiment students will be able to

1. Write code in Javascript for repetitive actions to be taken on events like


clicking on HTML elements like checkboxes and buttons.
2. Write code in JQuery to implement repetitive actions on events.

A.4 Theory:
A.4.1. Introduction to JQuery :
 JQuery is basically a wrapper built on top of Javascript.
 It is a manipulator of the Document Object Model (DOM).
 It shortens Javascript code to find elements of a type and to manipulate events
centered around them.
 It is written in Javascript itself and is recognized by most popular browsers.
 It helps in separating event handlers from HTML code.
A.5 Tasks / Procedures:
Using HTML, implement a simple tabular page containing the following columns:

A checkbox labelled “Select All”.


Items.
Cost.

Add atleast 5 rows to this table.

TASK 1:

At the bottom there must be a button labelled “Submit”. Using Javascript, write a function to
execute upon the event of clicking the checkbox “Select All” on top. If this checkbox is checked,
all the checkboxes below it must be checked, and vice-versa.

TASK 2:
Using JQuery, write a validation upon the click of the button, “Submit”. If this button is clicked
and none of the checkboxes against their respective rows are checked, it must alert the user to
select at least 1 checkbox.

PART B
(PART B : TO BE COMPLETED BY STUDENTS)

Students must submit the soft copy as per following segments within two hours of the practical.
The soft copy must be uploaded on the portal at the end of the practical. The filename should be
ABCA_batch_rollno_experimentno Example: ABCA_E2_E001_Exp1

Roll No. L008 Name: Burhanuddin Bohra


Class : CSDS 311 Batch : B1
Date of Experiment: Date of Submission
Grade : Time of Submission:
Date of Grading:
B.1 Software Code written by student:
(Paste your code completed during the 2 hours of practical in the lab here)

Task 1:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<input type="checkbox" id="selectAll"> Select All<br>
<input type="checkbox" class="checkbox"> Checkbox 1<br>
<input type="checkbox" class="checkbox"> Checkbox 2<br>
<input type="checkbox" class="checkbox"> Checkbox 3<br>
<button id="submitBtn">Submit</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
const selectAllCheckbox = document.getElementById("selectAll");
const checkboxes = document.querySelectorAll(".checkbox");
const submitButton = document.getElementById("submitBtn");

// Add click event listener to the "Select All" checkbox


selectAllCheckbox.addEventListener("click", function() {
// Loop through all checkboxes and set their checked property
checkboxes.forEach(function(checkbox) {
checkbox.checked = selectAllCheckbox.checked;
});
});
// Add click event listener to the "Submit" button
submitButton.addEventListener("click", function() {
// You can implement your submit logic here
// For example, alert a message if any checkbox is checked
if (document.querySelectorAll(".checkbox:checked").length > 0) {
alert("At least one checkbox is checked. Submitting...");
} else {
alert("No checkboxes are checked. Please select at least one.");
}
});
});
</script>
</body>
</html>

Task 2:
<html>

<head>
<title> Hehehehhe </title>

<style>

body

background: rgb(2,0,36);

background: radial-gradient(circle, rgba(2,0,36,0) 0%, rgba(121,9,98,0.9248074229691877) 70%);

border-style: groove;

margin: 250;

.button {

border: 1px solid black;

color: gray;

border-radius: 12px;

padding: 6px 32px;

text-align: center;

display: inline-block;

font-size: 16px;

margin-top: 25px;

h1{

margin-top: 140px;

text-align: center;

font-size: 45px;

.MyDiv{
margin-top: 25px;

text-align: center;

font-size: 20px;

</style>

</head>

<body>

<h1> Welcome to HomePage</h1>

<div class="myDiv">

<label for="uname"><b>Username</b> </label>

<input type="text" placeholder="Enter Username" name="uname" id="uid">

<br> <br>

<label for="psw"><b>Password</b> </label>

<input type="password" placeholder="Enter Password" name="psw" id="ups">

<br>

<br>

<input type="checkbox" id="ch1" name ="ch">

<label for="ch1">One time Login</label>

<input type="checkbox" id="ch2" name ="ch">

<label for="ch2">Remember Me</label>

<br>

<input type="submit" class="button" onClick = "submitData()" value = "Submit">

<input type="reset" class="button" onClick = "resetData()" value = "Reset">

</div>

<script>
function resetData(){

document.getElementById("uid").value=""

document.getElementById("ups").value=""

function submitData(){

var x = document.getElementById("uid").value;

var y = document.getElementById("ups").value;

var checkBox1 = document.getElementById("ch1")

var checkBox2 = document.getElementById("ch2")

if (x == "" || y == "") {

alert("Fields must be filled out");

return false;

if(checkBox1.checked == true && checkBox2.checked == true)

alert("Select only one")

if(checkBox1.checked != true && checkBox2.checked != true)

alert("Select atleast one")

</script>

</body>

</html>

B.2 Input and Output:


(Paste your program input and output in following format, If there is error then paste the specific
error in the output part. In case of error with due permission of the faculty extension can be given to
submit the error free code with output in due course of time. Students will be graded accordingly.)

Task 1:

Task 2:

B.3 Conclusion:
(Students must write the conclusion as per the attainment of individual outcome listed above and
learning/observation noted in section B.3. It must be purely based on personal learning only.)

1. I could write code in Javascript for repetitive actions to be taken on events like
clicking on HTML elements like checkboxes and buttons.
2. I was able to write code in JQuery to implement repetitive actions on
events.
B.4 Question of Curiosity
(To be answered by student based on the practical performed and learning/observations. Students
are free to explore the websites, books etc to answer these questions)

Q1. What are JQuery plugins ?


jQuery plugins are additional pieces of code that extend the functionality of the
jQuery library, allowing developers to add new features or behaviors to their web
applications more easily. These plugins are typically developed by the jQuery
community and other developers and can be integrated into jQuery-powered
websites or web applications. Here are some key points about jQuery plugins:
1. Extending jQuery Functionality: jQuery itself provides a powerful set of
functions and methods for DOM manipulation, event handling, animations, and
more. However, jQuery plugins allow developers to enhance and extend
jQuery's capabilities by encapsulating specific functionality into reusable
modules.
2. Easy Integration: jQuery plugins are designed to be easy to integrate into a web
project. Developers can include the necessary plugin script files alongside
jQuery, and then they can use the plugin's methods just like any other jQuery
method.
3. Diverse Range of Plugins: There is a wide variety of jQuery plugins available
for different purposes. Some popular types of jQuery plugins include:
 UI Widgets: Plugins for creating interactive user interface elements like
date pickers, sliders, and accordions.
 Form Enhancements: Plugins for improving form validation, auto-
complete, and form submission handling.
 Image and Media: Plugins for creating image galleries, slideshows, and
video players.
 Animation: Plugins for adding animations and transitions to elements on
a web page.
 AJAX and Data Manipulation: Plugins for simplifying AJAX requests,
working with JSON data, and managing data-driven applications.
 Charting and Data Visualization: Plugins for creating charts, graphs, and
data visualizations.
4. Customization: jQuery plugins are often configurable, allowing developers to
customize their behavior by passing options and parameters when initializing
the plugin. This flexibility makes it possible to adapt the plugin to specific project
requirements.
5. Community Support: The jQuery community has contributed a vast number of
plugins over the years, and many of them are well-documented and actively
maintained. This means that developers can often find plugins that suit their
needs without having to reinvent the wheel.

************************

You might also like