[go: up one dir, main page]
Scribd
Upload
8 views10 pages

MST Ex-5

The document outlines a JavaScript course covering array creation, destructuring, accessing, and methods, along with asynchronous programming concepts like callbacks and promises. It includes practical examples such as creating a movie details array, simulating stock price changes using setInterval and promises, and implementing a user login validation module. Each section provides code snippets and explanations to illustrate the concepts being taught.

Uploaded by

Raj Gopal
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 views10 pages

MST Ex-5

The document outlines a JavaScript course covering array creation, destructuring, accessing, and methods, along with asynchronous programming concepts like callbacks and promises. It includes practical examples such as creating a movie details array, simulating stock price changes using setInterval and promises, and implementing a user login validation module. Each section provides code snippets and explanations to illustrate the concepts being taught.

Uploaded by

Raj Gopal
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/ 10

1

5.a Course Name: Javascript


Module Name: Creating Arrays, Destructuring Arrays,
Accessing Arrays, Array Methods
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.

Aim: To create an array of object having movie details.

Description:
Creating an array:- Using an array literal is the easiest way to
create a JavaScript Array.

Syntax:
constarray_name = [item1, item2, ...];

Destructuring an Array:-When destructuring in javascript, a syntax


you would want to keep in mind would be placing the element you
want to destructure on the right side of the assignment operator and
placing the variable you want to access on the left side of the
assignment operator. The variables should be in { } when
destructuring objects and [ ] when destructuring arrays.
const [var1, var2, ...] = arrayName;

Accessing Arrays:-The items of an array are called elements. To


access an array element, you have to write the array name, followed
by square brackets and pass the index value of the element you want
to access to the square brackets.

Array Methods
In JavaScript, there are various array methods available that makes it
easier to perform useful calculations.

Some of the commonly used JavaScript array methods are: concat():-


joins two or more arrays and returns a result indexOf():-searches an
2

element of an array and returns its position find():-returns the first


value of an array element that passes a test

findIndex():-returns the first index of an array element that passes a


test

forEach():-calls a function for each element

includes():-checks if an array contains a specified element push():-


aads a new element to the end of an array and returns the new
length of an array

unshift():-adds a new element to the beginning of an array and


returns the new length of an array

pop():-removes the last element of an array and returns the removed


element

shift():-removes the first element of an array and returns the removed


element

sort():-sorts the elements alphabetically in strings and in ascending


order

slice():-selects the part of an array and returns the new array


splice():-removes or replaces existing elements and/or adds new
elements.

Program:
<!DOCTYPE html>

<html>

<body bgcolor="cyan">

<center><h1><i>ShopTime</i></h1>

<h2 align="center"><i>One stop for all your needs<i></h2>

<header>

<nav align="center"><h3>
3

Home || Login || Register || Wishlist || My

Orders || Movies || Help</h3>

</nav>

</header></center>

<I><h2>JavaScript Arrays</h2></I>

<img src="Martian.jpg" width="300px" height="300px"></img>

<B><h1 id="demo1"></h1></B>

<p id="demo2"></p>

<p id="demo3"></p>

<p id="demo4"></p>

<script>const
Movie = [ "The
Martian",

"English",

"10",

"Matt Damon",

];

document.getElementById("demo1").innerHTML = "Movie:
"+Movie[0]; document.getElementById("demo2").innerHTML =
"Language: "+Movie[1];
document.getElementById("demo3").innerHTML = "Rating:
"+Movie[2]; document.getElementById("demo4").innerHTML =
"Starring: "+Movie[3];

</script>

</body>

</html>
4

Output:

5.b Course Name: Javascript Module Name:Introduction to


Asynchronous Programming, Callbacks, Promises, Async and
5

Await, Executing Network Requests using Fetch API Simulate


a periodic stock price change and display on the console.
Hints:
(i) Create a method 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
the count is 5 – use the setInterval method.
(iii) Since setInterval is an async method, enclose the code in
a Promise and handle the response generated in a success
callback.
(iv) The random value returned from the method every time
can be used as a stock price and displayed on the console.
Aim:To stimulate a periodic stock price change and display on the
console.
Description:
To use the random function
Syntax: Math.random()

To use the setInterval function

Syntax:
myInterval = setInterval(function, milliseconds);
To stop the execution of setInterval function
Syntax:clearInterval(myInterval);
To create a Promise we have to use to following Syntax
Syntax:

letmyPromise = newPromise(function(Resolve, Reject) {

Resolve(); // when successful


Reject(); // when error
});
6

Program:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible"
content="IE=edge"><meta name="viewport"
content="width=device-width, initialscale=1.0">

<title>Exp__5b</title>

</head>

<body>
<script>
let c=0;
conststock=setInterval(
stokc,3000);
function stokc(){
var myPromise = new Promise(function (resolve, reject)

{
setTimeout(function ()

var a=Math.floor(Math.random() * 10);

resolve(a);

},

3000);
7

});
myPromise.then(
function (data)
{
console.log(data);
},

function (error) {
console.log(error);
}

);

c+=1;
if(c==5)

{
Stop();
}

function Stop() {
clearInterval(stock);

</script>

</body>

</html>

Output:
8

5.c Course Name: Javascript


Module Name: Creating Modules, Consuming Modules 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" else will return "Unauthorized access".
(iv) Create an validateUser.html file with textboxes username and
password and a submit button.
(v) Add a script tag in HTML to include validateUser.js file.
9

(vi) Create an validateUser.js file which imports login module and invokes
validate method of User class.
(vii) On submit of the button in HTML the validate method of the User
class should be invoked.
(viii) Implement the validate method to send the username and
password details entered by the user and capture the return
value to display in the alert.

Program:
<!DOCTYPE html>
<html lang = “en”>
<head>
<meta charset=”UTF-8/>
<meta http-euiv=”X-UA-Compatible” content=”IE=edge”/>
<meta name = “viewname” content=”width = device-width, initial-
scale=1.0”/>
<title>Document</title>
</head>
<body>
<input type = “text” name=”name” id=”name” placeholder=”Enter
your user name here”/>
<input type = “password” name=”pass” id=”password”
placeholder=”Enter your password”/>
<button type = “submit” id =”btn”> LOGIN</button>
<script src = “validateUser.js” type=”module”></script>
< script src = “login.js” type=”module”></script>
</body>
</html>

ValidateUser.js

import { User } from './login.js';


document.getElementById('btn').addEventListener('click',() =>{
let username = document.getElementById('name').value;
let password = document.getElementById('password').value;
let user1 = new User(“abc”,’123’);
10

document.writeln(user1.validateUser(username,password));
});

Login.js
Class User{
Constructor(name,pass)
{
this.username = name;
this.password = pass;
}
validateUser(name,pass)
{
return name = this.name && pass==this.password) ? ”Login
Successful” : “Unauthorized access”;
}
}
Output:

You might also like