Scribd
Upload
10 views6 pages

5 Exercise

The document outlines three programming tasks in JavaScript: creating a movie details array and rendering it in HTML, simulating periodic stock price changes using random numbers, and validating user login credentials through a simple form. Each task includes an aim, description of relevant concepts, and a sample HTML/JavaScript program. Key concepts covered include arrays, asynchronous programming, callbacks, promises, and module creation.

Uploaded by

ftuy5435
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
10 views6 pages

5 Exercise

The document outlines three programming tasks in JavaScript: creating a movie details array and rendering it in HTML, simulating periodic stock price changes using random numbers, and validating user login credentials through a simple form. Each task includes an aim, description of relevant concepts, and a sample HTML/JavaScript program. Key concepts covered include arrays, asynchronous programming, callbacks, promises, and module creation.

Uploaded by

ftuy5435
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/ 6

5.

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.

Promises: A promise is an object that represents the eventual completion or


failure of an asynchronous operation and its resulting value. A promise has
three states: pending, fulfilled, or rejected. Promises are used to handle
asynchronous operations in a more readable and maintainable way than
callbacks. Promises provide a chainable syntax that allows you to handle the
result of an asynchronous operation without nesting callbacks.
Async and Await: Async/await is a newer syntax introduced in ES2017 that
allows you to write asynchronous code that looks synchronous. It is built on
top of promises and provides a simpler and more concise way to handle
asynchronous operations. Async functions always return a promise, and the
await keyword can be used to wait for the resolution of a promise.
Executing Network Requests using Fetch API: The Fetch API is a modern API
for making network requests in JavaScript. It provides a simple and concise
way to make HTTP requests and handle their responses. The Fetch API
returns a promise that resolves to a response object. The response object
contains information about the response, such as the status code and
headers.
You can then use the methods provided by the response object to extract the
data from the response, such as text, JSON, or binary data

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>

You might also like