Scribd
Upload
16 views

Lab 06

This document discusses JavaScript event handling and provides examples of using JavaScript for form validation and other tasks. It includes activities demonstrating adding click handlers, validating password fields, and finding the position of the first vowel in a string. It concludes with an assignment to build a shopping cart application using JavaScript.

Uploaded by

Muhammad Abubakar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Lab 06

This document discusses JavaScript event handling and provides examples of using JavaScript for form validation and other tasks. It includes activities demonstrating adding click handlers, validating password fields, and finding the position of the first vowel in a string. It concludes with an assignment to build a shopping cart application using JavaScript.

Uploaded by

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

LAB # 06

Statement Purpose:
This lab will give you practical implementation of javascript as internal or external file in web
pages
Activity Outcomes:
This lab teaches you the following topics:

 JavaScrip Event Handling


What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute without preliminary
compilation)
 Everyone can use JavaScript without purchasing a license

Start End Tag:


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

JavaScript is Case Sensitive


Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you
write JavaScript statements, create or call variables, objects and functions.

JavaScript Statements
A JavaScript statement is a command to a browser. The purpose of the command is to tell the browser
what to do.
This JavaScript statement tells the browser to write "Hello " to the web page: document.write("Hello
");
It is normal to add a semicolon at the end of each executable statement. Most people think this is a
good programming practice, and most often you will see this in JavaScript examples on the web. The
semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret
the end of the line as the end of the statement. Because of this you will often see examples without the
semicolon at the end.

JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.


Event and Event Handling:
• Events handlers are placed in the BODY part of a Web page as attributes in HTML tags
• Events can be captured and responded to directly with JavaScript embedded in HTML tags in
the BODY portion

Activity 1:

<html><head>
<script type = "text/javascript" >
function myFun()
{
alert("Samsung Button was Clicked");
}
</script>
<head><body>
<form>
<input type = "button" value="SAMSUNG" onclick="myFun();" />
</form>
</body></html>

Activity 2:
<html>
<head>
<script type = "text/javascript" >
function chkpasswords() {
if (document.getElementById("firstpwd").value == ""){
alert('You have not entered a password, please enter ');
document.getElementById("firstpwd").focus();
return false;
}
if (document.getElementById("firstpwd").value !=
document.getElementById("secondpwd").value)
{
alert('Two password you entered are not same, re-enter');
document.getElementById("firstpwd").focus();
document.getElementById("firstpwd").select();
return false;
}

else {
alert('Two password you entered are same');
return true;
}
}
</script> </head>
<body>
<form name = "myForm" action="" onsubmit = "return(chkpasswords());">
<p>
</label> User Name: <input type = "text" id="username"> </label>
<br /><br />
</label> Password: <input type = "password" id = "firstpwd" /> </label>
<br /><br />
<label> Retype Password: <input type = "password" id = "secondpwd" /> </label>
<br /><br />
<input type = "submit" name = "submit" />
</p>
</form> </body> </html>
Activity 3:
<html> <head>
<script type = "text/javascript" >
</script> </head>
<body>
<form name = "myForm" action="" onsubmit="return(chkpasswords());">
<p>
</label> User Name:
<input type = "text" id="username"> </label>
<br /> <br />
</label> Password:
<input type = "password" id = "firstpwd" /> </label>
<br /> <br />
<label> Retype Password:
<input type = "password" id = "secondpwd" /> </label>
<br /><br />
<input type = "submit" name = "submit" />
</p> </form>
</body></html>
<script type = "text/javascript" >
function chkpasswords() {
if (document.getElementById("firstpwd").value == ""){
alert('You have not entered a password, please enter ');
document.getElementById("firstpwd").focus();
return false;
}
if (document.getElementById("firstpwd").value !=
document.getElementById("secondpwd").value)
{
alert('The two password you entered are not same, please re-enter');
document.getElementById("firstpwd").focus();
document.getElementById("firstpwd").select();
return false;
}
else {
alert('The two password you entered are same');
return true;
}
}
</script>

Activity 4:
<html>
<body>
<script type="text/javascript">
//function to print the position of the leftmost vowel in the string
function firstvowel(){
var find = 0,pos,i;
var str=prompt("Enter the string: ");
str=str.toLowerCase();
for(i=0;i<str.length;i++) {
if(str[i]=='a' || str[i]=='e' || str[i]=='i' || str[i]=='o' || str[i]=='u')
{
find=1; pos=i; break;
}
}
if(find)
document.write("Position of first vowel in the string ", str, " was ",(pos+1));
else
document.write("Vowel Not found");
return;
}
document.write("Function to find first vowel in a String","<br />");
firstvowel();
</script>
</body>
</html>
Lab Task:

Create a web-based shopping cart application that allows users to dynamically add, remove, and
update items in their cart. The application should calculate the total price of the items and provide
feedback to the user.

Implement he following functionality.


 Display a list of products with details such as name, price, and quantity available.
 Implement "Add to Cart" buttons next to each product, allowing users to add items to their
shopping cart.
 Enable users to view their shopping cart, modify item quantities, and remove items.
 Calculate the total price of items in the cart, including quantity adjustments, and display it to the
user.
 Utilize event handling to handle button clicks for adding/removing items, as well as textbox
changes for quantity adjustments.
 Provide feedback to the user on successful addition/removal of items, and dynamically update the
total price as changes are made.

Instructions:
 Create HTML markup for product listing, shopping cart display, and interactive elements
(buttons, textboxes).
 Use CSS for styling to enhance the user interface.
 Implement JavaScript logic to handle events such as button clicks and textbox changes.
 Utilize arrays or objects to manage the shopping cart data.
 Implement functions for adding, removing, and updating items in the cart.
 Calculate the total price dynamically based on the items in the cart and update the display
accordingly.

You might also like