5 Exercise
5 Exercise
a )
AIM:Create an array of objects having movie details. The object
should include the movie name, starring, language, and ratings.
Render the details of movies on the page using the array.
DESCRIPTION:
Creating Arrays: Arrays can be created in JavaScript by enclosing
a comma-separated list of values in square brackets []. An array
can contain any type of data, including numbers, strings, objects,
or other arrays.
Destructuring Arrays: Array destructuring is a feature in JavaScript
that allows you to unpack values from an array into separate
variables. You can use destructuring to assign array values to
variables with a more concise syntax
Array Methods: JavaScript provides a number of built-in methods
for working with arrays. Some of the most commonly used
methods include:
push(): Adds one or more elements to the end of an array.
pop(): Removes the last element from an array and returns it.
shift(): Removes the first element from an array and returns it.
unshift(): Adds one or more elements to the beginning of an
array.
concat(): Joins two or more arrays together.
slice(): Returns a portion of an array as a new array
<!DOCTYPE html>
<html>
<head>
<title>Movie Details</title>
</head>
<body bgcolor=yellow>
<h1>Movie Details</h1>
<table border=2 bordercolor=teal>
<thead>
<tr>
<th>Name</th>
<th>Starring</th>
<th>Language</th>
<th>Ratings</th>
</tr>
</thead>
<tbody id="movie-details">
</tbody>
</table>
<script>
let movies = [
{
name: "The Shawshank Redemption",
starring: "Tim Robbins, Morgan Freeman",
language: "English",
ratings: 9.3,
},
{
name: "The Godfather",
starring: "Marlon Brando, Al Pacino, James Caan",
language: "English",
ratings: 9.2,
},
{
name: "The Dark Knight",
starring: "Christian Bale, Heath Ledger",
language: "English",
ratings: 9.0,
},
{
name: "Schindler's List",
starring: "Liam Neeson, Ben Kingsley, Ralph Fiennes",
language: "English",
ratings: 8.9,
},
];
let movieTable = document.getElementById("movie-details");
movies.forEach((movie) => {
let row = document.createElement("tr");
let nameCell = document.createElement("td");
nameCell.textContent = movie.name;
row.appendChild(nameCell);
let starringCell = document.createElement("td");
starringCell.textContent = movie.starring;
row.appendChild(starringCell);
let languageCell = document.createElement("td");
languageCell.textContent = movie.language;
row.appendChild(languageCell);
let ratingsCell = document.createElement("td");
ratingsCell.textContent = movie.ratings;
row.appendChild(ratingsCell);
movieTable.appendChild(row);
});
</script>
</body>
</html>
5.b )
AIM:Simulate a periodic stock price change and display on the console. Hints:
(i) Create amethod which returns a random number - use Math.random, floor
and other methods
to return a rounded value. (ii) Invoke the method for every three seconds
and stop
when
DESCRIPTION:
Introduction to Asynchronous Programming: Asynchronous programming is a
programming paradigm that allows multiple tasks to run concurrently. This
means that a program can perform multiple tasks simultaneously without
blocking the execution of other tasks. In JavaScript, asynchronous
programming is essential for handling long-running operations, such as
network requests or file operations, without freezing the user interface.
Callbacks: A callback is a function
that is passed as an argument to another function and is executed after
some operation is completed. In JavaScript, callbacks are often used in
asynchronous programming to handle the results of asynchronous
operations. For example, when making a network request, a callback
function can be used to handle the response once it is received.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Stock Price Simulator</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Stock Price Simulator</h1>
<p>Click the button to start simulating periodic stock price changes.</p>
<button onclick="startSimulation()">Start Simulation</button>
<script>
function getRandomPrice(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
let intervalId;
function startSimulation() {
intervalId = setInterval(() => {
const price = getRandomPrice(50, 150);
document.write("Stock price: $"+price);
document.write("<br>");
}, 3000);
}
function stopSimulation() {
clearInterval(intervalId);
document.write("<br>");
document.write("Simulation stopped.");
}
</script>
</body>
</script>
</body>
</html>
The simulation will continue to generate and display stock prices every three
seconds until you stop it by calling the stopSimulation() function or closing
the browser tab.
5.c )
AIM:
Validate the user by creating a login module. Hints: (i) Create a file login.js
with a
User class. (ii) Create a validate method with username and password as
arguments.
(iii) If the username and password are equal it will return "Login Successful"
DESCRIPTION:In JavaScript, you can create a module by defining an object or
function in a separate file and exporting it using the export keyword. You can
then import the module into another file using the import keyword.
Consuming modules means using the exported functions, objects, or
variables from the module in other parts of the program. To consume a
module, you need to import it into the file where you want to use it and then
use the imported functions or objects as needed
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<button type="button" onclick="validateLogin()">Login</button>
</form>
<script>
class User {
constructor(username, password) {
this.username = username;
this.password = password;
}
validate() {
if (this.username === this.password) {
return "Login Successful";
} else {
return "Invalid username or password";
}
}
}
function validateLogin() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
const user = new User(username, password);
const validationMsg = user.validate();
alert(validationMsg);
}
</script>
</body>
</html>