Call Us Today!

Blog

JavaScript Basics: Control Flow

Welcome back to the JavaScript Basics tutorial series! If you’re joining us for the first time, you might want to start with the first tutorial in this series: What is JavaScript?. If you’re already acquainted with the basics, and are interested in exploring more about JavaScript’s “control flow” capabilities, read on.

Control Flow in JavaScript: program the browser to take different actions in different situations

In the last tutorial, we learned how to initialize variables. But that’s not really all that much fun, is it? The real fun starts when we can apply logic to things; to control flow of the website’s behavior.

“If” Statements

We can use “if statements” to tell the browser what to do if a certain scenario occurs. For example, check out the following pseudocode:

if (the user clicks on thing #1) {
execute these instructions;
} else if (the user clicks on thing #2)
execute these other instructions;
} else {
execute these default instructions;
}

This kind of code is really pretty self-explanatory; if the user clicks on thing #1, then the instructions inside of the first pair of curly braces { … } are executed. If the user clicks on thing #2, then the instructions inside of the second { … } are executed. If the user didn’t click on either of them, then the default (“else”) instructions will be executed.

Note that this structure is relatively flexible in JavaScript. You can use an “if” statement alone (without any “else if” or “else” statements), you can use multiple “if” and “else if” statements in a row, etc.

Switches

Switches are similar to if statements, but are easier to use when there are many possibilities. For example:

switch (new Date().getDay()) {
case 0:
alert("Today is Sunday!");
break;
case 1:
alert("Today is Monday!");
break;
case 2:
alert("Today is Tuesday!");
break;
case 3:
alert("Today is Wednesday!");
break;
case 4:
alert("Today is Thursday!");
break;
case 5:
alert("Today is Friday!");
break;
case 6:
alert("Today is Saturday!");
}

This one is also pretty self explanatory. In this case, the first thing the switch does is use a specialized JavaScript function to check the day of the week. The browser will generate a number from zero (Sunday) through six (Saturday).

Let’s Build A Video Game!

If you’ve been following along with this series so far, you’ve already started playing around with JavaScript and creating a simple video game. Well, this week we’re jumping to hyper-speed and really diving into the deep end. We’ve created the HTML/CSS graphics of the video game, and created some of the JavaScript logic as well. This will allow you to dive in and get real-world examples of if statements in the real world.

CLICK HERE TO DOWNLOAD THE UPDATED JAVASCRIPT TUTORIAL FILES

Before you start even looking at the code, double-click the “playWithCode.html” file, to open it in your browser. You can use the arrow keys on your keyboard to move the ship around. Cool, right?

Now open up the HTML & JavaScript files in your favorite text editor (if you don’t have a favorite text editor, we recommend checking out our atom tutorial). Now, before you start getting overwhelmed by all the new code, calm down. Don’t worry. You don’t need to understand almost any of it right now. All you need to do is look through the code and notice where there are “if” statements. There are a lot of “if” statements in this code. Try to read through the code and figure out how it all works. If you have questions, or need any help understanding the code, feel free to email us for help (info@fvi.edu)!

Next week we’ll dive deeper into this code, add some asteroids into the mix, and learn a little bit about JavaScript LOOPS (so we can create a potentially infinite number of asteroids with only a few lines of code)!