Scribd
Upload
134 views

Practical Assignment 4 ClZzudDnqF

1. The document discusses client-side validation in JavaScript by manipulating DOM elements and form objects. 2. Students are asked to apply JavaScript validation to a feedback form, calculate order totals from selected items, and add responsive menu functionality to their website from the previous assignment. 3. The part B questions ask students to submit their code, output, observations, and answer questions about external JavaScript, DOM, and code samples.

Uploaded by

ritika sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
134 views

Practical Assignment 4 ClZzudDnqF

1. The document discusses client-side validation in JavaScript by manipulating DOM elements and form objects. 2. Students are asked to apply JavaScript validation to a feedback form, calculate order totals from selected items, and add responsive menu functionality to their website from the previous assignment. 3. The part B questions ask students to submit their code, output, observations, and answer questions about external JavaScript, DOM, and code samples.

Uploaded by

ritika sahu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like