Thursday, March 28, 2024

The JavaScript Diaries: Part 5

This week, as we continue our quest to learn the JavaScript language, we’ll
look at conditional statements and loops. These can help us to add more depth
and complexity to our scripts.

Conditional Statements

A conditional statement is used to execute a portion of code, based on the
outcome of whether a condition is met. We perform these types of operations
all the time in our everyday lives. Here’s an example: “If Bob wins the lottery,
he will retire; otherwise he will continue working at his current job.”

This conditional statement is actually pretty simple. The outcome of the problem
depends upon one condition: whether Bob wins the lottery. The results are based
on a true/false (Boolean) statement: if Bob wins the lottery (which we would
consider “true”), then he will retire; if Bob doesn’t win the lottery (which
we would consider “false”), his current situation will not change so no action
will be taken.

In JavaScript, conditional statements can be an effective aid in developing
more complex scripts. These type of statements make use of the comparison operators
we learned about in section
3
. The result, as I said, is a Boolean
value. We are testing to see if a value is true or false, not looking at the
actual value of it, as such. There are several different types of conditional
statements.

The if Statement

This conditional statement is written as:

  if (condition) {
    action to be taken
  }

This statement says that if the condition stated in the parentheses is true then execute the code given within the curly brackets. If the condition is false, the code within the curly brackets will be ignored and the script will continue executing the code located after the closing curly bracket. Let’s take another look at our conditional statement above about Bob and the lottery. Here’s what it would look like if we used a conditional statement:

  var winsLottery=true
  if (winsLottery) {
    retire to life of luxury;
  }
  else {
    keep job;
  }

Using JavaScript, let’s look at an example of a working script:

  var userName=prompt("Enter your name","");

  if (userName=="Lee") {
    alert("Hey, nice name!");
  }

When this script is executed, if the name entered in the prompt box is “Lee,”
it will display an alert box that says: “Hey, nice name!”; otherwise, if any
other action is taken (e.g., another name is entered; the name is entered in
a different case; the box is left empty; or the “Cancel” button is pressed),
the script will just end. Basically, the script says that if the variable userName
is not true (not equal to “Lee”) then don’t do anything.

The Statement Block

The area within the curly brackets is called a “statement block.” The curly
brackets can be formatted in whatever format you wish. If you are only executing
one statement, the curly brackets are not required, but it’s good to use them
even for one statement, in case you happen to add others later. The two most
popular formats are:

  if (condition) {
    action to be taken
  }
  else {
    action to be taken
  }

and

  if (condition)
  {
    action to be taken
  }
  else
  {
    action to be taken
  }

We’ll be using the first one.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured