SVKM’s NMIMS University
Mukesh Patel School of Technology Management & Engineering
MCA SEMESTER III
SUBJECT: Web Technologies Practical Assignment: 4
Part A (To be referred by students)
Topic: Implementation of Client Side validation using JavaScript
Aim: Client side validation using JavaScript
Theory:
Client Side
Client Side JavaScript (CSJS) is an extended version of JavaScript that
enables the enhancement and manipulation of web pages and client browsers.
In a browser environment , your code will have access to things provided only
by the browser, like the document object for the current page, the window,
functions like alert that pop up a message, etc.
The main tasks of Client side JavaScript are validating input, animation,
manipulating UI elements, applying styles, some calculations are done when
you don't want the page to refresh so often.
In web developing it's the browser, in the user's machine, that runs this code,
and is mainly done in javascript .
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Form Object
HTML form is an object that is a property of the document object. Most properties of
the form object can be both accessed and changed after the Web page containing the form has
been loaded
Example
<html>
<head>
<script language="javascript">
<!--
function total()
{
var subtotal=0;
var total=0;
var adjustment=1;
payment=false;
for(var x=0;x<=3;x++)
{
if(document.payform.item[x].checked)
subtotal+=parseFloat(document.payform.item[x].value);
}
for(var x=0;x<=4;x++)
{
if(document.payform.pay[x].checked)
{adjustment=document.payform.pay[x].value;
payment=true;}
}
if(payment)
{
total=subtotal*adjustment;
document.payform.display.value="$subtotal: "+subtotal+
"\nAdjustment: "+adjustment+"\nTotal: "+total;
}
else
window.alert("Please choose payment type");
}
//-->
</script>
</head>
<body>
<h1><font color=“blue”>Payment Form</font></h1>
<form name="payform">
<table border="0" cellpadding="5">
<tr>
<td width="250" valign="top">
<b>Select the products to be purchased</b><br>
<input type="checkbox" name="item" value="14.99">Item1 Rs.14.99<br>
<input type="checkbox" name="item" value="12.99">Item2 Rs.12.99<br>
<input type="checkbox" name="item" value="13.99">Item3 Rs.13.99<br>
<input type="checkbox" name="item" value="11.99">Item4 Rs.11.99<br>
<br><br>
<b>Select the products to be purchased</b><br>
<input type="radio" name="pay" value="1.2">Money Order (20% service charge)<br>
<input type="radio" name="pay" value="1.1">Personal Check (10% service charge)<br>
<input type="radio" name="pay" value=".8">Visa (Preferred 8% discount)<br>
<input type="radio" name="pay" value=".9">MasterCard (9% discount)<br>
<input type="radio" name="pay" value=".7">Discover (7% discount)<br>
<br><br>
<input type="button" value="Process Order" onclick="total()">
<input type="reset" value="Reset Form">
</td>
<td width="200" valign="bottom">
<textarea name="display" rows="5" cols="35"></textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
Programs:
Apply the JavaScript for the website which you had created during Practical Assignment 2.
Try to include following.
Validate all the fields in feedback form, if validation are correct then feedback form
data should to emailed to the email address entered in email textbox of the form
Calculate the total bill based on items selected from the order form and display the
bill details using the alert of confirm JavaScript box.
If your website is responsive then apply the JavaScript for showing the menu when
screen size is small.
Apply JavaScript to any other pages where its possible to apply.
Part B (to be completed by students)
(Students must submit the soft copy as per the following segments. Save
your file as Rollno_Name_Practical3)
Roll no.: Name:
Class: Batch:
Date of Experiment: Date of Submission:
1. Program scenario and Program code: (Paste you program code )
2. Output: (Paste Output of all web pages)
3. Observation learning and conclusion: mention what learning you got out
of practical
4. Questions:
1. With example explain how to write and include external JavaScript
2. What is DOM used for, explain it
3. Find the correct output for the following given JavaScript code. Justify
your answer
functionheight()
{
var height=123.56;
var type =(height>=190)?"Taller":"Little short";
return type;
}
4. Which one of the following is correct output for the following given
JavaScript code. Justify your answer
functionoutputfun(object)
{
var place=object ?object.place: "Italy";
return "clean:"+ place;
}
console.log(outputfun({place:India}));
a. Error b. clean:Italy c. clean:India d. undefined
