Scribd
Upload
14 views

L2. Function in JS, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

L2. Function in JS, CSE 202, BN11

JavaScript

Uploaded by

Saurav Barua
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Course Code: CSE 202

Course Title: Computer Programming Lab


Lecture 2: Function in JS
Course Teacher: Saurav Barua (SB)
Assistant Professor, Dept. of CE, DIU
Phone: +88-01715334075
Email: [email protected]
Contents

DOM Basic CSS


Basic HTML
selectors and
tags
.
properties

DOM
manipulation Function Parameter,
through JS argument.

2
3
Accessing element by ID
Syntax: document.getElementById(“ID_name");

❑ The getElementById() method of the Document interface


returns an Element object representing the element whose id
property matches the specified string.
❑ Since element IDs are required to be unique if specified,
they're a useful way to get access to a specific element
quickly.

4
Function definition
Syntax: function function_name(){
//code
}
function_name(); //function invoking

A function in JavaScript is similar to a procedure—a set of statements that performs a task or


calculates a value, but for a procedure to qualify as a function, it should take some input and
return an output. A function definition (also called a function declaration, or function
statement) consists of the function keyword, followed by:

✓ The name of the function.


✓ A list of parameters to the function, enclosed in parentheses and separated by commas.
✓ The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }.

5
Return
Syntax: function function_name(){
//code
return val;
}

✓ The return statement ends function execution and specifies


a value to be returned to the function caller.
✓ Return can be zero, value or expression.
✓ Return must be stored in a variable.

6
Parameters and arguments
Syntax: function function_name(para1,
para2){
//code
}
function_name(arg1, arg2);

❑ Function parameters are the names listed in the function


definition.
❑ Function arguments are the real values passed to (and received
by) the function.

7
Changing text in html
Syntax: element.innerText = text;

The innerText property sets or returns the text content of an


element.

8
Worked out example
Example 2: Program to calculate multiplication of two numbers in JS and display
result in the browser. (Calculate total masonry labor cost using per day wage and
nos. of mason worked in a construction project and display total cost in the
browser.)

Google drive link:


https://drive.google.com/drive/folders/15iLzTYrZmplDGngEk1e1CnhMIBoR
X1OF?usp=drive_link

Git-hub link: https://github.com/sauravbarua02/MasonCostEstimate

9
Interface

10
html codes
<body>
<!DOCTYPE html>
<div class="container" id="container">
<html lang="en">
<head>
</div>
<meta charset="UTF-8">
<meta name="viewport"
<script src="app.js"></script>
content="width=device-width, initial-
</body>
scale=1.0">
</html>
<title>Function Calculation</title>
<link rel="stylesheet" href="style.css">
</head>

11
css codes

body{
margin: 0px; padding: 10px;
background-color: rgba(176, 129, 219, display: flex;
0.6); flex-direction: column;
}
.container{ justify-content: center;
background-color: rgba(176, 129, 219, align-items: center;
0.2); border-radius: 10px;
height: 300px; box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
width: 300px; }
margin: 20px auto;

12
JS codes
const containerEl =
document.getElementById("container");

function costEstimate(masonNo, perDayWage){ costValue = costEstimate(5,500);


containerEl.innerText = "Total masonry labor
const totalCost = masonNo * perDayWage; cost: " + costValue + " BDT";
return totalCost;
}

13
Class tasks
Task 2.1: Program to calculate total cost of a building, where material cost,
labor cost, equipment cost and overhead cost are given. Display total cost in
the browser. (hints: totalCost = materialCost + laborCost + equipmentCost + overheadCost;)
Task 2.2: Program to calculate number of masons required to erect a N sq.ft
brick wall (5”thick) per day, where one mason can work p sq.ft wall per day.
(hints: NoOfMasonRequired = N/p;)
Task 2.3: Program to calculate gallons of plastic paint required to cover N sq.
ft interior wall. (hints: gallonOfPaintRequired = N/400)
Task 2.4: Program to calculate volume of a rectangular shaped timber log,
where width (inch), breadth (inch) and length (ft) are given. (hints:
timberVolume = width x breadth x length/144;)
Task 2.5: Program to calculate bacterial growth rate of pathogen in a water
sample, where growth rate = 2n. (hints: a**b returns a power b value)
14
End of the Lecture

15

You might also like