Scribd
Upload
2 views6 pages

Unit_3 Function and Control Structure

The document explains the concept of functions and control structures in JavaScript, emphasizing code reusability and compactness. It details various control structures including conditional statements (if, if-else, if-else-if, switch) and loop controls (for, while, do-while) with syntax and examples. Each section provides clear explanations and practical examples to illustrate how these concepts are implemented in JavaScript programming.

Uploaded by

Harsh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
2 views6 pages

Unit_3 Function and Control Structure

The document explains the concept of functions and control structures in JavaScript, emphasizing code reusability and compactness. It details various control structures including conditional statements (if, if-else, if-else-if, switch) and loop controls (for, while, do-while) with syntax and examples. Each section provides clear explanations and practical examples to illustrate how these concepts are implemented in JavaScript programming.

Uploaded by

Harsh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 6

Function and Control Structure:

A function in JavaScript is a group of reusable code that can be called anywhere in


your program. It eliminates the need of writing the same code again and again..
There are mainly two advantages of functions:

 Code reusability: We can call a function several times, so it saves coding.


 Less coding: It makes our program compact. We don’t need to write many
lines of code each time to perform a common task.

The most common way to define a function in JavaScript is by using the function
keyword, followed by a unique function name, a list of parameters, and a statement
block surrounded by curly braces.

Syntax:
function functionName(parameter-list) {

statements

Calling a Function

To invoke(call) a function somewhere later in the script, you would simply need
to write the name of that function with the parentheses () as shown in the
following code.

Example

<html>
<head>
<script type= "text/javascript">
function sayHello() // function declaration and definition
{
document.write("Hello there");
}
</script>
<head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type= "button" onclick="sayHello()" value= "Say Hello">
</form>
</body> Function call
</html>

Control Structures

Control structure defines the flow of control within the program.


1. Conditional control structure
2. Loop control structure

1. Conditional control structure


a. if statement: It evaluates the content only if expression is true.

Syntax

if (expression)
{
Statement(s) to be executed if expression is true
}

Example:

<!doctype html>
<html>
<body>
<div id ='output'> </div>
<script type = "text/javascript">
let result;
let age = 20;
if( age > 18 ) {
result = "Qualifies for driving";
}
document.getElementById("output").innerHTML = result;
</script>
<p> Set the variable to a different value and then try... </p>
</body>
</html>

b. if-else statement: It allows JavaScript to execute statements in a more


controlled way.

Syntax

if (expression){
Statement(s) to be executed if expression is true
}else{
Statement(s) to be executed if expression is false
}
Example:
<html>
<body>
<div id ='output'> </div>
<script type = "text/javascript">
let result;
let age = 15;
if( age > 18 ) {
result = "Qualifies for driving";
} else {
result = "Does not qualify for driving";
}
document.getElementById("output").innerHTML = result;
</script>
<p> Set the variable to a different value and then try... </p>
</body>
</html>

c. if-else-if statement: It is an advance form of if-else statement that allows


JavaScript to make correct decision out of several conditions.

Syntax

if (expression 1){
Statement(s) to be executed if expression 1 is true
}else if(expression 2){
Statement(s) to be executed if expression 2 is true
}else if (expression 3){
Statement(s) to be executed if expression 3 is true
}else{
Statement(s) to be executed if no expression is true
}

Example:
<html>
<body>
<div id ="demo"></div>
<script type="text/javascript">
const output = document.getElementById("demo")
let book = "maths";
if (book == "history") {
output.innerHTML="<b>History Book</b>";
} else if (book == "maths") {
output.innerHTML="<b>Maths Book</b>";
} else if (book == "economics") {
output.innerHTML="<b>Economics Book</b>";
} else {
output.innerHTML="<b>Unknown Book</b>";
}
</script>
<p> Set the variable to a different value and then try... </p>
</body>
<html>

d. Switch case

The basic syntax of the switch statement is to give an expression to evaluate and
several different statements to execute based on the value of the expression. The
interpreter checks each case against the value of the expression until a match is
found. If nothing matches, a default condition will be used.

Syntax

switch (expression){
case condition 1: statement(S)
break;
case condition 2: statement(s)
break;
.
.
.
case condition n: statement(s)
break;
default: statement(s)
}
Example:
<html>
<head>
<title> JavaScript - Switch case statement </title>
</head>
<body>
<p id = "output"> </p>
<script>
const output = document.getElementById("output");
let grade = 'A';
output.innerHTML += "Entering switch block <br />";
switch (grade) {
case 'A': output.innerHTML += "Good job <br />";
break;
case 'B': output.innerHTML += "Passed <br />";
break;
case 'C': output.innerHTML += "Failed <br />";
break;
default: output.innerHTML += "Unknown grade <br />";
}
output.innerHTML += "Exiting switch block";
</script>
</body>
</html>

2. Loop Control:
1. For loop control
2. While loop control
3. Do while control

1. For loop control:


JavaScript for loop is a control flow statement that allows code to be
executed repeatedly based on a condition.
Syntax
for (initialization; condition; increment/decrement )
{
code here...
}
 Initialization: It is the initialization of the counter.
 condition: It defines the testing condition for executing the code block
 increment/ decrement: It is the increment or decrement of the counter

example:

let arr = [10, 20, 30, 40];


for (let i = 0; i < arr.length; i++)
{
document.write(arr[i]);
}

2. while loop control:


The while loop executes a block of code as long as a specified
condition is true. In JavaScript, this loop evaluates the condition before
each iteration and continues running as long as the condition remains
true.
Syntax
while (condition) {
Code block to be executed
}

example:

let count = 1;
while (count <= 5)
{

document.write(count);
4
count++;
5
}
3. do-while loop control:
The do...while loop is similar to the while loop except that the condition
check happens at the end of the loop. This means that the loop will always
be executed at least once, even if the condition is false.

Syntax

do {
Statement(s) to be executed;
} while (expression);

Example:

let count = 1;
do {
document.write(count);
count++;
} while (count <= 5);

You might also like