L2. Function in JS, CSE 202, BN11.p1df documents
- 1. 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: saurav.ce@diu.edu.bd
- 2. Contents 2 Function Basic HTML tags Basic CSS selectors and properties DOM manipulation through JS DOM . Parameter, argument.
- 3. 3
- 4. Accessing element by ID 4 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.
- 5. Function definition 5 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, { /* … */ }.
- 6. Return 6 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.
- 7. Parameters and arguments 7 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.
- 8. Changing text in html 8 Syntax: element.innerText = text; The innerText property sets or returns the text content of an element.
- 9. Worked out example 9 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
- 10. Interface 10
- 11. html codes 11 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <title>Function Calculation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container" id="container"> </div> <script src="app.js"></script> </body> </html>
- 12. css codes 12 body{ margin: 0px; background-color: rgba(176, 129, 219, 0.6); } .container{ background-color: rgba(176, 129, 219, 0.2); height: 300px; width: 300px; margin: 20px auto; padding: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; box-shadow: 0 0 3px 1px rgba(0,0,0,0.5); }
- 13. JS codes 13 const containerEl = document.getElementById("container"); function costEstimate(masonNo, perDayWage){ const totalCost = masonNo * perDayWage; return totalCost; } costValue = costEstimate(5,500); containerEl.innerText = "Total masonry labor cost: " + costValue + " BDT";
- 14. Class tasks 14 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)
- 15. End of the Lecture 15