Scribd
Upload
8 views

Exercise-4 MST Programs

The document contains JavaScript exercises focusing on various programming concepts such as functions, classes, events, and objects. It includes code snippets for booking movie tickets with pricing conditions, creating an Employee class that extends a Person class, and handling user interactions with dynamic content changes. Each section provides source code and aims to demonstrate specific JavaScript functionalities.

Uploaded by

rayavaraputhanusri
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
8 views

Exercise-4 MST Programs

The document contains JavaScript exercises focusing on various programming concepts such as functions, classes, events, and objects. It includes code snippets for booking movie tickets with pricing conditions, creating an Employee class that extends a Person class, and handling user interactions with dynamic content changes. Each section provides source code and aims to demonstrate specific JavaScript functionalities.

Uploaded by

rayavaraputhanusri
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/ 12

Exercise-4 MST Programs

4(a).
Course Name: JavaScript
Module Name: Types of Functions, Declaring and Invoking Function, Arrow Function,
Function Parameters, Nested Function, Built-in Functions, Variable Scope in Functions
AIM: Write a JavaScript code to book movie tickets online and calculate the total price
based on the 3 conditions: (a) If seats to be booked are not more than 2, the cost per ticket
remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If seats to be booked
are more than 2 but less than 5, based on the number of seats booked. (festive season
discount of 10% )

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title>Booking Details</title>
<style>
.mydiv {
text-decoration: bold;
text-align: left;
margin-top: 5px;
width: 1200px;
border: 2px solid purple;
text-align: center;
color: blue;
background-color: #c7f15e;
font-family: verdana;
font-size: 15;
padding: 10px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;font-size:60;"><b>Theatre Suresh Mahal, Chirala</b>
<div class="mydiv">
<h4>Your Ticket Details:</h4>
<script type="text/javascript">
let tickets = prompt("Enter the number of tickets you want to book:");
let tp = 150;
function movie_tickets ()
{
var totalcost = tp * tickets;
document.write("<br>The number of seats booked: " +tickets);
document.write("<br>Actual price per ticket : Rs."+tp);
if (tickets <=2)
{
document.write('<br>The cost of '+tickets+ ' tickets Rs: '+totalcost);
}
if (tickets >= 6)
{
document.write('<br>The cost of '+tickets+ ' tickets Rs : '+totalcost);
document.write('<br>Booking is not allowed for 6 or more tickets');
}
if (tickets> 2 && tickets < 5)// 3 or 4 tickets are eligible for festive discount 10%
{
var discount = (totalcost *10)/100 ;
document.write('<br>The cost of '+tickets+ ' tickets Rs : '+totalcost);
document.write("<br>3 or 4 tickets are eligible for festive season discount 10% ");
document.write(" <br>Discounted Amount : "+"Rs."+discount);
document.write('<br>For '+tickets+' tickets ,you need to pay: Rs. '+ (totalcost - discount) +'
instead of Rs. '+totalcost);
}
}
movie_tickets();
</script>

</body>
</html>

4(a) OUTPUT:
4(b).
Course Name: JavaScript
Module Name: Working With Classes, Creating and Inheriting Classes
AIM: Create an Employee class extending from a base class Person. Hints: (i) Create a
class Person with name and age as attributes. (ii) Add a constructor to initialize the values
(iii) Create a class Employee extending Person with additional attributes role

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title> Employee Details</title>
<style>
.mydiv {
text-decoration: bold;
text-align: left;
margin-top: 10px;
width: 600px;
border: 2px solid purple;
text-align: center;
color: blue;
background-color: #c7f15e;
font-family: verdana;
font-size:20pt;
padding: 10px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;font-size:30pt;"><b>Creating and Inheriting Classes </b></h1>
<div class="mydiv">
<script type="text/javascript">
class Person
{
constructor(name, age,empid)
{
this.name = name;
this.age = age;
this.empid = empid;
}
}
class Employee extends Person
{
constructor(name, age,empid,job,salary,contact, role)
{
super(name, age,empid);
this.job=job;
this.salary=salary;
this.contact=contact;
this.role = role;
}
getEmployeeDetails()
{
document.write("*** EMPLOYEE DETAILS ***");
document.write(" <br> Name : "+this.name);
document.write(" <br> Age :",this.age);
document.write("<br> Empid : ",this.empid);
document.write("<br> Job : ",this.job);
document.write("<br> Salary : ",this.salary);
document.write("<br>Contact No :",this.contact);
document.write("<br> Role : ",this.role);
}
}
let employee1 = new Employee("Karth", 25,"Sacet180", "Software",100000,9110307238,
"Software Manager");
employee1.getEmployeeDetails();
</script>
</div>
</body>
</html>

4(b) OUTPUT:

4(c).

Course Name: JavaScript


Module Name: In-built Events and Handlers
AIM: Write a JavaScript code to book movie tickets online and calculate the total price
based on the 3 conditions: (a) If seats to be booked are not more than 2, the cost per ticket
remains Rs. 150. (b) If seats are 6 or more, booking is not allowed. (c) If seats to be booked
are more than 2 but less than 5, based on the number of seats booked. (festive season
discount of 10% )
SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title> In-built Events and Handlers </title>
<style>
.mydiv {
text-decoration: bold;
margin-top: 5px;
width: 600px;
height: 200px;
border: 2px solid purple;
text-align: center;
color:red;
background-color:#c7f15e;
font-family: verdana;
font-size: 40;
padding: 15px;
}
</style>
</head>
<body>
<center>
<h1 style=" color:red;font-size:100;"><b>Theatre Suresh Mahal, Chirala</b></h1>
<div class="mydiv">
<h1>Movie Ticket Booking</h1>
<label for="num-of-tickets"><font color="red" size=5><b>Number of Tickets: </label>
</font>
<input type="number" id="num-of-tickets" name="num-of-tickets">
<button id="submit-btn">Submit</button>
<script type="text/JavaScript">
let tp = 150; // ticket price
// Get the number of tickets input element and the submit button element
let numOfTicketsInput = document.getElementById("num-of-tickets");
let submitBtn = document.getElementById("submit-btn");
// Add a click event listener to the submit button
submitBtn.addEventListener("click", () =>
{
// Get the number of tickets from the input element
let numOfTickets = parseInt(numOfTicketsInput.value);
var totalcost = tp * numOfTickets;
document.write("<br>The number of seats booked: " +numOfTickets);
document.write("<br>Actual price per ticket : Rs."+tp);
// Check if the number of tickets is valid
if (numOfTickets <=2)
{
document.write('<br>The cost of '+numOfTickets+ ' tickets Rs: '+totalcost);
}
else if (numOfTickets >= 6)
{
alert("Sorry, booking is not allowed for 6 or more tickets.");
}
// 3 or 4 tickets are eligible for festive discount 10%
else if (numOfTickets> 2 && numOfTickets < 5)
{
var discount = (totalcost *10)/100 ;
document.write('<br>The cost of '+numOfTickets+ ' tickets Rs : '+totalcost);
document.write("<br>3 or 4 tickets are eligible for festive season discount 10% ");
document.write(" <br>Discounted Amount : "+"Rs."+discount);
document.write('<br>For '+numOfTickets+' tickets ,you need to pay: Rs. '+ (totalcost - discount)
+' instead of Rs. '+totalcost);
}
});
</script>
</div>
</center>
</body>
</html>

4(c) OUTPUT:
4(d).
Course Name: JavaScript
Module Name: Working with Objects, Types of Objects, Creating Objects, Combining and
cloning Objects using Spread operator, De-structuring Objects, Browser Object Model,
Document Object Model .
AIM: If a user clicks on the given link, they should see an empty cone, a different heading,
and a different message and a different background color. If user clicks again, they should
see a re-filled cone, a different heading, a different message, and a different background
color.

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title>BOM & DOM Models</title>
</head>
<body style="background-color:lightblue;text-align:center;">
<h1 id="hdr1"><b>Here's your ice cream</h1>
<img id="img1" src="full-cone.jpg">
<p id="p1" onclick="eat()" style="color:red;font-size:30px;"><b>Click here to eat</p>
<script>
function eat() {
document.getElementsByTagName("body")[0].style.background = "#c7f15e";
document.getElementById("img1").src = "1.jpg"
document.getElementById("hdr1").innerHTML="Here is empty cone. Hope you liked it!"
document.getElementById("p1").innerHTML="Click here to fill"
document.getElementById("p1").setAttribute("onclick","fill()")
}
function fill()
{
document.getElementsByTagName("body")[0].style.background = "#F0E68C";
document.getElementById("img1").src = "2.jpg"
document.getElementById("hdr1").innerHTML="Here is Re-filled Cone"
document.getElementById("p1").innerHTML="Click here to eat"
document.getElementById("p1").setAttribute("onclick","eat()")
}
</script>
</body>
</html>

4(d) OUTPUT:

You might also like