Scribd
Upload
10 views9 pages

Exercise-9 MST Programs

The document outlines a series of exercises in TypeScript, covering various topics such as displaying mobile prices in different colors, filtering products using arrow functions, and handling optional parameters in functions. Each exercise includes a course name, module name, aim, procedure steps, and source code examples for implementation. The exercises demonstrate practical applications of TypeScript concepts through HTML integration and JavaScript functionality.

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
10 views9 pages

Exercise-9 MST Programs

The document outlines a series of exercises in TypeScript, covering various topics such as displaying mobile prices in different colors, filtering products using arrow functions, and handling optional parameters in functions. Each exercise includes a course name, module name, aim, procedure steps, and source code examples for implementation. The exercises demonstrate practical applications of TypeScript concepts through HTML integration and JavaScript functionality.

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/ 9

Exercise-9 MST Programs

9.a
Course Name: Typescript
Module Name: Basics of TypeScript
Aim: On the page, display the price of the mobile-based in three different colors.
Instead of using the number in our code, represent them by string values like
GoldPlatinum, PinkGold, SilverTitanium.

Pre-Requisites to install Typescript:


1. Text Editor or VSCODE
2. Node.js Package Manager (npm)

Procedure Steps:
Step 1: Create your directory Typescript in D:/> and change your directory
and Open the Text editor and create a file btscript.ts
Step 2: Install TypeScript using Node.js Package Manager (npm). Open a Node.js
command prompt and use the following command:
D:/Typescript> npm i –g typescript
Step 3: To verify the Typescript installation, run the following command:
D:/Typescript> tsc –v
Step 4: Run the Initialization command in that command prompt to create the necessary
configuration file for your project use the following command:
D:/Typescript> tsc --init
Step 5: Compile the TypeScript code. To compile the source code, open the Node.js
command prompt, and use the following command :
D:/Typescript> tsc btscript.ts
The above command converts the btscript.ts file into btscript.js file . It can easily
run in a Browser or Nodejs.
Step 6: Download a mobile image, and create a file mobile.html and btscript.js file is
embedded into mobile.html and run mobile.html file by the Browser then output
will be displayed.

SOURCE CODE: btscript.ts


const mobilecolors=[
{ color: 'GoldPlatinum', price:'$699' },
{ color: 'PinkGold', price:'$650'},
{ color: 'SilverTitanium', price: '$712' }
];
const colorList = document.getElementById('color-list');
mobilecolors.forEach(colors => {
const p = document.createElement('p');
p.textContent = ` Mobile Color: ${colors.color}, Price: ${colors.price}`;
colorList.appendChild(p);
});
mobile.html
<!DOCTYPE html>
<html>
<head>
<title>Mobile Price in Different Colors</title>
<style>
.mydiv {
text-decoration: bold;
text-align: left;
margin-top: 10px;
height: 200px;
width: 500px;
border: 2px solid purple;
text-align: left;
color: blue;
background-color: #c7f15e;
font-family: verdana;
font-size:18pt;
}
</style>
</head>
<body bgcolor="lightblue">
<center>
<img src="SamsungGalaxy_Gold.jpg" width="400px" height="360px" >
<h1>Samsung Galaxy J7</h1>
<div class="mydiv">
<p id="color-list"></p>
<script type="text/javascript" src="btscript.js">
</script>
</div>
</center>
</body>
</html>

9.a OUTPUT:
9.b
Course Name: Typescript
Module Name: Function
AIM: Define an arrow function inside the event handler to filter the product
array with the selected product object using the productId received by the
function. Pass the selected product object to the next screen.

SOURCE CODE: fun.ts


interface Product {
productId: string;
name: string;
price: string;
}
const products:Product[]= [
{ productId: "1", name: "GoldPlatinum", price: "$150" },
{ productId: "2", name: "PinkGold", price: "$200" },
{ productId: "3", name: "SilverTitanium", price: "$300" },
];
function myFunction1(pid:string):Product[] {
return products.filter((product: Product) => product.productId === pid);
}
let pid1=prompt("<b>Enter the Product Id");
const mobileColor: Product[] = myFunction1(pid1);
console.log(mobileColor);

exp9b.html
<!DOCTYPE html>
<html>
<head>
<title>Design a HTML page </title>
<script type="text/javascript" src="fun.js">
</script>
</head>
<body bgcolor="pink">
<center>
<img src="SamsungGalaxy_Gold.jpg" width="400px" height="360px" >
<h1><font color="red">Samsung Galaxy J7</font></h1>
</body>
</html>

9.b OUTPUT:
9.c
Course Name: Typescript
Module Name: Parameter Types and Return Types
AIM: Consider that developer needs to declare a function - getMobileByVendor
which accepts string as input parameter and returns the list of mobiles.

SOURCE CODE: prtype.ts


interface Mobile {
brand: string; model: string; price: string, status:string;
}
const mobiles: Mobile[] = [
{ brand: 'Apple', model: 'iPhone 13', price: '$999', status: 'Available' },
{ brand: 'Samsung', model: 'Galaxy S21', price: '$799', status: 'Available' },
{ brand: 'OnePlus', model: '9 Pro', price: '$899', status: 'Out of stock' },
{ brand: 'Xiaomi', model: 'Mi 11', price: '$799', status: 'Available' }
];
function getMobileByVendor(vendor: string): Mobile[] {
return mobiles.filter((mobile: Mobile) => mobile.brand.toLowerCase() ===
vendor.toLowerCase());
}
const appleMobiles: Mobile[] = getMobileByVendor("Apple");
console.log(appleMobiles);
const samsungMobiles: Mobile[] = getMobileByVendor("Samsung");
console.log(samsungMobiles);
const oneplusMobiles: Mobile[] = getMobileByVendor("OnePlus");
console.log(oneplusMobiles);

9.c OUTPUT:

9.d
Course Name: Typescript
Module Name: Arrow Function
AIM: Consider that developer needs to declare a manufacturer's array
holding 4 objects with id and price as a parameter and needs to implement an
arrow function - myFunction to populate the id parameter of manufacturers
array whose price is greater than or equal to 200 dollars .

SOURCE CODE: arrowfun.ts


const manufacturers = [ // declaring an Array with 4 objects
{ id: 'Samsung', price: '$450'},
{ id: 'Microsoft', price: '$200'},
{ id: 'Apple', price: '$800'},
{ id: 'Micromax', price: '$100'}
];
let test;
// Arrow function to populate the details of Array whose price is greater than 200
function myFunction() {
test = manufacturers.filter((manufacturer) => manufacturer.price >= '$200');
}
myFunction(); // self-invoking an arrow function
console.log('Details of Manufacturer array are : ');
// logic to populate the manufacturer array details based on id value
for (const item of test)
{
console.log(item.id);
}

9.d OUTPUT:

9.e
Course Name: TypeScript
Module Name: Optional and Default Parameters
AIM: Declare a function - getMobileByManufacturer with two parameters
namely manufacturer and id, where manufacturer value should passed as
Samsung and id parameter should be optional while invoking the function, if id
is passed as 101 then this function should return Moto mobile list and if
manufacturer parameter is either Samsung/Apple then this function should
return respective mobile list and similar to make Samsung as default
Manufacturer.

SOURCE CODE: opdeparameters.ts


// declaring a function with optional parameter
function getMobileByManufacturer(manufacturer: string = 'Samsung', id?: number):
string[] {
let mobileList: string[];
// logic to be evaluated if id parameter while invoking above declared function
if (id) {
if (id === 101) {
mobileList = ['Moto G Play, 4th Gen', 'Moto Z Play with Style Mod'];
return mobileList;
}
}
// logic to return mobileList based on manufacturer category
if (manufacturer === 'Samsung') {
mobileList = [' Samsung Galaxy S6 Edge', ' Samsung Galaxy Note 7',
' Samsung Galaxy J7 SM-J700F'];
return mobileList;
} else if (manufacturer === 'Apple') {
mobileList = [' Apple iPhone 5s', ' Apple iPhone 6s', ' Apple iPhone 7'];
return mobileList;
} else {
mobileList = [' Nokia 105', ' Nokia 230 Dual Sim'];
return mobileList;
}
}
// statement to invoke function with optional parameter
console.log('The available mobile list : ' + getMobileByManufacturer('Samsung'));
console.log('The available mobile list : ' + getMobileByManufacturer('Apple'));
// statement to invoke function with default parameter
console.log('The available mobile list : ' + getMobileByManufacturer(undefined, 101));

9.e OUTPUT:

You might also like