INF-250: Web Design and Development — JS Functions and if/else statements

Javascript Function Basics

Like most programming languages, JavaScript lets you re-use code snippets by putting them in functions. A function is a block of code designed to perform a particular task that can be used multiple times throughout your program.

To define a function, you use the function keyword followed by the name of the function and parentheses. The code to be executed is enclosed in curly braces.

function createAlert() {
	alert('This is an alert message!');
}

You would "call" or "execute" the function by using its name followed by parentheses: createAlert()

Functions can contain multiple lines of code, and they will execute all of the code within them when called.

function createAlert() {
	alert('This is an alert message!');
	console.log('Alert was created!');
	console.log('This is another line of code in the function.');
}

if/else statements

The if statement is used to execute a block of code only if a specified condition is true.

if (condition)
{
	console.log('Condition is true!');
} 

Inside the parentheses, you place the condition you want to check.

What can we check? Remember the confirm() function? When the user clicks "OK", the condition is true. When they click cancel, the condition is false.

if ( confirm('Do you want to proceed?') )
{
	console.log('User clicked OK');
} 

Adding the else part

if (condition)
{
	console.log('Condition is true!');
} 
else
{
	console.log('Condition is false!');
}

Now we can check for both results from the confirm() function.

if ( confirm('Do you want to proceed?') )
{
	console.log('User clicked OK');
}
else
{
	console.log('User clicked Cancel');
} 

Combining functions, if/else, and onclick

Perfectly Centered Content

Use this general purpose container style to perfectly center any content both horizontally and vertically.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Group Work

Choose one of these activities to work on with your group: