Scribd
Upload
18 views8 pages

Compp

The document provides an overview of functions and control structures in JavaScript, emphasizing the importance of functions for code reusability and modular programming. It explains how to define and call functions, use parameters, and implement return statements, along with various control structures like if, if...else, if...else if, and switch statements. Examples are provided to illustrate each concept clearly.

Uploaded by

jelishasubedi85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views8 pages

Compp

The document provides an overview of functions and control structures in JavaScript, emphasizing the importance of functions for code reusability and modular programming. It explains how to define and call functions, use parameters, and implement return statements, along with various control structures like if, if...else, if...else if, and switch statements. Examples are provided to illustrate each concept clearly.

Uploaded by

jelishasubedi85
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Functions and control structures

Functions
A function is a group of reusable code which can be called anywhere in your program.
This eliminates the need of writing the same code again and again. It helps
programmers in writing modular codes. Functions allow a programmer to divide a big
program into a number of small and manageable functions.
There are mainly two advantages of Javascript 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.

Function Definition
Before we use a function, we need to define it. 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 (that might be empty), and a statement block
surrounded by curly braces.

Syntax
The basic syntax is shown here.
<script type = "text/javascript">
<!--
function functionname(parameter-list) {
statements
}
//-->
</script>

Example
In the following example, it defines a function called sayHello that takes no
parameters −
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello there");
}
//-->
</script>

1
Calling a Function
To invoke a function somewhere later in the script, you would simply need to write
the name of that function as shown in the following code.
<html>
<head>

<script type = "text/javascript">


function sayHello()
{
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>
</html>

Function Parameters
A function can take multiple parameters separated by comma.

Example
<html>
<head>

<script type = "text/javascript">


function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
}
</script>

2
</head>
<body>
<p>Click the following button to call the function</p>

<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
</form>
</body>
</html>

The return Statement


A JavaScript function can have an optional return statement. This is required if you
want to return a value from a function. This statement should be the last statement in
a function.

Example
In the following example, It defines a function that takes two parameters and
concatenates them before returning the resultant in the calling program.
<html>
<head>

<script type = "text/javascript">


function concatenate(first, last)
{
var full;
full = first + last;
return full;
}

function secondFunction()
{
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>

</head>

3
<body>
<p>Click the following button to call the function</p>

<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
</body>
</html>

Control structures
Control structure defines the flow of control within the program.
JavaScript supports the following forms of if..else statement −
● if statement
● if...else statement
● if...else if... statement.

1. if statement

Syntax
It evaluates the content only if expression is true.
The syntax for a basic if statement is as follows −
if (expression) {
Statement(s) to be executed if expression is true
}

Here a JavaScript expression is evaluated. If the resulting value is true, the given
statement(s) are executed. If the expression is false, then no statement would be not
executed.

Example
<html>
<body>

<script type = "text/javascript">


var age = 20;

4
if( age > 18 ) {
document.write("<b>Qualifies for driving</b>");
}
</script>
</body>
</html>

2. if...else statement
The 'if...else' statement is the next form of control statement that 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
}

Here JavaScript expression is evaluated. If the resulting value is true, the given
statement(s) in the ‘if’ block, are executed. If the expression is false, then the given
statement(s) in the else block are executed.

Example
<html>
<body>

<script type = "text/javascript">


var age = 15;

if( age > 18 ){


document.write("<b>Qualifies for driving</b>");
}

else{
document.write("<b>Does not qualify for driving</b>");
}
</script>
</body>
</html>

5
3. if...else if... statement
The if...else if... statement is an advanced form of if…else that allows JavaScript to
make a correct decision out of several conditions.

Syntax
The syntax of an if-else-if statement is as follows −
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
}

Statement(s) are executed based on the true condition, if none of the conditions is
true, then the else block is executed.

Example
<html>
<body>

<script type = "text/javascript">


var book = "maths";
if( book == "history" ) {
document.write("<b>History Book</b>");
}

else if( book == "maths" ) {


document.write("<b>Maths Book</b>");
}

else if( book == "economics" ) {


document.write("<b>Economics Book</b>");
}

else {
document.write("<b>Unknown Book</b>");

6
}
</script>
</body>
<html>

Switch Statement

Syntax
The objective of a 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.
switch (expression) {
case condition 1: statement(s)
break;

case condition 2: statement(s)


break;
...

case condition n: statement(s)


break;

default: statement(s)
}

The break statements indicate the end of a particular case. If they were omitted, the
interpreter would continue executing each statement in each of the following cases.

Example
<html>
<body>

<script type = "text/javascript">


var grade = 'A';
document.write("Entering switch block<br />");
switch (grade)
{

7
case 'A': document.write("Good job<br />");
break;

case 'B': document.write("Pretty good<br />");


break;

case 'C': document.write("Passed<br />");


break;

case 'D': document.write("Not so good<br />");


break;

case 'F': document.write("Failed<br />");


break;

default: document.write("Unknown grade<br />")


}
document.write("Exiting switch block");
</script>
</body>
</html>

You might also like