Scribd
Upload
45 views

Sukruthi WT Week5

The document is a lab submission document from B.M.S College of Engineering that discusses concepts covered in their Web Programming lab. It contains 8 sections that summarize code examples demonstrating various JavaScript concepts like primitive data types, embedding external JavaScript, mathematical operations, control structures, popup boxes, functions, creating and modifying objects, and form validation.

Uploaded by

Sukruthi Kc
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
45 views

Sukruthi WT Week5

The document is a lab submission document from B.M.S College of Engineering that discusses concepts covered in their Web Programming lab. It contains 8 sections that summarize code examples demonstrating various JavaScript concepts like primitive data types, embedding external JavaScript, mathematical operations, control structures, popup boxes, functions, creating and modifying objects, and form validation.

Uploaded by

Sukruthi Kc
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/ 15

B.M.S.

COLLEGE OF ENGINEERING
(Autonomous College under VTU, Approved by AICTE, Accredited by NAAC)

MASTER OF COMPUTER APPLICATIONS


(Accredited by NBA for 5 years 2019 - 2024)

WEB PROGRAMMING LAB

SUBMITTED BY
SUKRUTHI KC

UNDER THE GUIDANCE OF


PADMAPRIYA P
Page 1
Department of Computer Applications-BMSCE
CONTENTS

SL No. Content Page Number

1 Primitive datatypes in JavaScript 3

2 Embedding external JavaScript file in an HTML 4


file

3 Mathematical operations 4-5

4 Control Structures 5-7

5 Popup boxes 7-9

6 Function 9-10

7 Create,delete and insert objects 10

8 Event registeration form validation 11-15

Page 2
Department of Computer Applications-BMSCE
WEEK 5
a. Write an HTML program and embed relevant JavaScript code to demonstrate the following
concepts:

 Primitive datatypes in JavaScript

<html lang="en">
<head>
<title>Primitive data </title>
</head>
<body>
<script type="text/javascript">
var a = 10;
document.write("Number date type",a);
document.write("<br>");
var b = "Hello";
document.write("String data type",b);
document.write("<br>");
var c = true;
document.write("Boolean data type",c);
document.write("<br>");
var d=null;
document.write("Null data type",d);
document.write("<br>");
var e;
document.write("Undefined data type",e);
document.write("<br>");
</script>
</body>
</html>

OUTPUT:

Page 3
Department of Computer Applications-BMSCE
 Embedding external JavaScript file in an HTML file

<!DOCTYPE html>
<html>
<head>
<title>External Javascript</title>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript" src="ext.js"></script>
</body>
</html>

Ext.js

document.write("This is from external javascript");

OUTPUT:

 Mathematical operations

<!DOCTYPE html>
<html>
<head>
<title>Mathematical Operation</title>
</head>
<body>
<script type="text/javascript">
var num1 = parseInt(prompt("Enter first number:"));
var num2 = parseInt(prompt("Enter second number:"));

var addition = num1 + num2;

Page 4
Department of Computer Applications-BMSCE
var subtraction = num1 - num2;
var multiplication = num1 * num2;
var division = num1 / num2;
var remainder = num1 % num2;

document.write("Addition: " + addition + "<br>");


document.write("Subtraction: " + subtraction + "<br>");
document.write("Multiplication: " + multiplication + "<br>");
document.write("Division: " + division + "<br>");
document.write("Remainder: " + remainder + "<br>");
</script>
</body>
</html>

OUTPUT:

 Control structures
<!DOCTYPE html>
<html>
<head>
<title>Control Structures</title>
</head>
<body>
<h1>Control Structures</h1>

<label>Enter a number:</label>
<input type="number" id="number" />

<button onclick="analyzeNumber()">Analyze Number</button>

<h2>Results</h2>
<p id="message1"></p>
<p id="message2"></p>
<p id="message3"></p>

<script>

Page 5
Department of Computer Applications-BMSCE
function analyzeNumber() {

var number = parseInt(document.getElementById("number").value);

if (number > 0) {
document.getElementById("message1").innerHTML = "The number is positive.";
} else if (number < 0) {
document.getElementById("message1").innerHTML = "The number is negative.";
} else {
document.getElementById("message1").innerHTML = "The number is zero.";
}

var day = new Date().getDay();


switch (day) {
case 0:
document.getElementById("message2").innerHTML = "Today is Sunday.";
break;
case 1:
document.getElementById("message2").innerHTML = "Today is Monday.";
break;
case 2:
document.getElementById("message2").innerHTML = "Today is Tuesday.";
break;
case 3:
document.getElementById("message2").innerHTML = "Today is Wednesday.";
break;
case 4:
document.getElementById("message2").innerHTML = "Today is Thursday.";
break;
case 5:
document.getElementById("message2").innerHTML = "Today is Friday.";
break;
case 6:
document.getElementById("message2").innerHTML = "Today is Saturday.";
break;
default:
document.getElementById("message2").innerHTML = "Error: Invalid day.";
}

var message = "";

Page 6
Department of Computer Applications-BMSCE
for (var i = 0; i <= number; i += 2) {
message += i + ", ";
}
document.getElementById("message3").innerHTML =
"even numbers till the entered element are: " + message.slice(0, -2);
}
</script>
</body>
</html>

OUTPUT:

 Popup boxes – alert, confirm and prompt box


<!DOCTYPE html>
<html>
<head>
<title>Popup Boxes Example</title>
</head>
<body>
<h1>Popup Boxes Example</h1>

<button onclick="showAlert()">Show Alert</button>


<button onclick="showConfirm()">Show Confirm</button>
<button onclick="showPrompt()">Show Prompt</button>

<script>
function showAlert() {
alert("This is an alert box!");

Page 7
Department of Computer Applications-BMSCE
}

function showConfirm() {
let result = confirm("Do you want to continue?");
if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
}

function showPrompt() {
let name = prompt("Please enter your name:");
if (name) {
alert("Hello, " + name + "!");
} else {
alert("You did not enter your name!");
}
}
</script>
</body>
</html>

OUTPUT:

Page 8
Department of Computer Applications-BMSCE
 Functions - variables with local and global scope

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Local and Global Scope in JavaScript</title>

Page 9
Department of Computer Applications-BMSCE
</head>
<body>
<script>
var globalVar = "I'm global variable";

function myFunction() {
var localVar = prompt("Enter");
document.write(localVar + "I am a local variable"+"<br>");
document.write(globalVar + "<br>");
}

myFunction();
document.write(globalVar);
</script>
</body>
</html>

OUTPUT:

 Create Object, insert and delete properties of the object


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Creating and Modifying Objects in JavaScript</title>
</head>
<body>

<script>

var myObject = {
firstName: "Sukruthi",
lastName: "KC",
age: 22,

Page 10
Department of Computer Applications-BMSCE
city: "Bangalore"
};

myObject.email = "[email protected]";
delete myObject.city;
document.write(JSON.stringify(myObject));
</script>
</body>
</html>

OUTPUT:

b. Design a form based interface that accepts students USN, name, semester and the co-
curricular event
name, venue details and the date of the event.
Create an HTML page with appropriate CSS styles for designing this form with relevant
validation for
the form fields.

<!DOCTYPE html>
<html>
<head>
<title>Event Registration Form</title>
<style type="text/css">
body{
font-family: Calibri;
}
input[type="text"], input[type="number"], select {
width: 250px;
}
input[type="submit"], input[type="reset"] {
width: 77px;
height: 27px;
position: relative;
left: 180px;
}
form{

Page 11
Department of Computer Applications-BMSCE
text-align: center;
font-family: Calibri;
font-size: 20px;
border: 3px solid black;
width: 600px;
margin: 20px auto;
}
td {
padding: 10px;
}
td:first-child {
text-align: right;
font-weight: bold;
}
td:last-child {
text-align: left;
}
</style>
<script>
function validate() {
var usn = document.reg_form.usn;
var name = document.reg_form.name;
var semester = document.reg_form.semester;
var venue = document.reg_form.venue;
var event = document.reg_form.event;

if (usn.value.trim().length <= 0) {
alert("usn is required");
fname.focus();
return false;
}
if (!/^[a-zA-Z]+$/.test(name.value)) {
alert("Please enter a valid name (letters only)");
name.focus();
return false;
}

if (name.value.trim().length <= 0) {
alert(" name is required");
lname.focus();
return false;
}

Page 12
Department of Computer Applications-BMSCE
if (semester.value.trim().length <= 0) {
alert("Semester is required");
semester[0].focus();
return false;
}

if (venue.value.trim().length <= 0) {
alert("venue is required");
venue.focus();
return false;
}

if (event.value == "select event") {


alert("Course is required");
event.focus();
return false;
}

return true;
}
</script>
</head>
<body>
<center><h1>Form Validation using HTML, CSS, and JavaScript</h1></center>
<hr>
<form method="post" action="#" name="reg_form" onsubmit="return validate()">
<h2>Registration Form</h2>
<table>
<tr>
<td><label>USN: </label></td>
<td>
<input type="text" name="usn" placeholder="USN">
</td>
</tr>
<tr>

<td><label> Name: </label></td>


<td>

Page 13
Department of Computer Applications-BMSCE
<input type="text" name="name" placeholder="Name">
</td>
</tr>

<tr>
<td><label>Semester: </label></td>
<td>
<input type="radio" name="semester" value="male">Semester 1
<input type="radio" name="semester" value="femele">Semester 2
<input type="radio" name="semester" value="femele">Semester 3
<input type="radio" name="semester" value="femele">Semester 4
</td>
</tr>
<tr>
<td><label>Venue</label></td>
<td>
<input type="text" name="venue">
</td>
</tr>

<tr>
<td><label>Event: </label></td>
<td>
<select name="event">
<option value="select event">select event</option>
<option value="Treasure hunt">Treasure hunt</option>
<option value="html">web designing</option>
<option value="coding">coding</option>
<option value="debate">debate</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>

Page 14
Department of Computer Applications-BMSCE
OUTPUT:

Page 15
Department of Computer Applications-BMSCE

You might also like