Start the Hack!

Available Commands

Hints

• Follow any command by an open ( and close ) parentheses.

• End the command with a semicolon character ;

What Are Comments?

So far, you've been writing code for a computer to run. But humans need to read code too! Add a description to your code using comments. This makes reading code a lot easier.

Programmers often work together on teams, editing a single base of code, and use comments to describe their code to one another. If you're writing code together with others, or want feedback from your teachers, you'll want to use comments too, so they can understand what you are trying to do.

Use comments whenever you're writing your own original JavaScript code. They're also handy to remind yourself of what you were writing!

In JavaScript, type two forward slash characters // to start a new comment. Any text that you write after that will be documentation for your code. In other words, it won't affect how your program runs.

Here's an example:

Notice how // can appear after working code. All the text that appears after the // won't affect the commands for the forward, turn right, forward sequence.

The comment symbol can also be used to make lines of code not run. Programmers call this commenting out their code. You can experiment with your code without deleting it in this way. Both lines of the code below are comments, so they won't run.

Sometimes you'll want more than one line of text to describe a section of code.

A multi-line comment starts with /* and ends with */. Any text between the start and end marker will be ignored by JavaScript.

Multi-line comments are useful for writing more detailed documentation.

Try adding and removing // to see what happens. Which lines run? Try adding your own code and comments, too.

Note

Here's how it works:

Step Up!

Available Commands

Hints

• To comment out a line of code, type // at the beginning of the line.

• When counting the number of forward() commands you need, ignore the stairs and just count the path tiles.

Turn the Corner

Available Commands

Hints

• All commands end with an open ( and close ) parentheses, followed by a semicolon ;

• The turnLeft() command will turn the character to the left.

• Straying off the path tiles will cause you to instantly fail.

Staircase

Available Commands

Hints

• All commands end with an open ( and close ) parentheses, followed by a semicolon ;

• Use the stairs to move up to the next level.

• When counting the number of forward() commands you need, ignore the stairs and only count the path tiles.

Zig-Zag

Available Commands

Hints

• All commands end with an open ( and close ) parentheses, followed by a semicolon ;

Many Forwards

Available Commands

Hints

• All commands end with an open ( and close ) parentheses, followed by a semicolon ;

• Use the stairs to move up to the next level.

What Are For Loops?

In the last puzzle, you had to write the forward() command over and over again. That was kind of annoying wasn't it? There's an easier way to repeat code!

We'll use something called loops to run the same code many times. To start things off, let's learn about a kind of loop called the for loop.

For loops execute the same code a certain number of times. They are useful when you need to count (for example, count from 0 to 100) or whenever you know exactly how many times you want your code to run.

Here's what a for loop looks like In JavaScript:

We don't actually use the words setup, condition and increment. We'll need to replace those with real JavaScript code.

So let's take a look at what each of these do.

The setup part of the loop usually defines a variable to keep track of how many times the loop has run. You might set starting value at 0. For example, i = 0 says to start counting at 0. If you put i = 10, that means to start counting from 10.

The condition is how the loop will finish, you can think of it as the end condition. You need to tell JavaScript when to stop counting. An example condition is i < 10. JavaScript will run the for loop while the value of i is less than 10.

The increment tells the loop how to count. You count up by 1 or any other number, or even count down (for example, from 10 down to 0). To count up by 1 at a time, you can use i = i+1 as the increment. Since this add-by-1 case is so common, we typically use i++ as a shortcut for i = i+1. Similarly, to count down instead of up, you can use i-- as a shortcut for i = i-1.

The whole point of using for loops is to repeat code again and again. Any code that's in between the curly brackets, { and } will repeat for the specified number of times.

We'll indent those commands (add four spaces to the front) so that it's clear which commands repeat, and which don't.

Let's revisit the programming puzzle from the last page. You needed to go forward 6 blocks, which means using the forward() command six times.

Here's how we'd write it with a for loop:

Let's use a for loop to count from 0 to 9. Press run to see the output.

Try changing the values in the loop to see how the output changes.

Now let's count down from 9 to 0. Notice that our setup has i start at 9, our condition is i >= 0.

Click run to see the output.

Print numbers from 0 to 20 on your own.

What Is Indentation?

Did you notice that you used spaces in your for loops, for the commands you wanted to repeat? Programmers call this use of "white space" indentation.

To better understand how your code works or to make it easier to debug your code, it helps to indent properly.

Notice how the code inside the loop is indented by 4 spaces. The final } brace is not indented; this shows the end of the loop. This makes the code much easier to read and debug.

Let's look at another countdown loop. When the for loop is complete, this code will print "Liftoff!" to the screen.

The code outside of the loop, console.log("LIFTOFF!"); isn't within the { } braces. This is not indented either! It only runs once, once the loop is complete.

Indentation makes it easy to see which part of your code is in a loop and which part isn't.

Try indenting the following for loop to make the code easier to read and debug. Make sure the indentation is 4 spaces.

Deja Vu

Available Commands

Hints

• A for loop lets you repeat a set of procedures multiple times. It follows this syntax:

Up and Down

Available Commands

Hints

• The highJump() command moves your character up and forward by one tile.

• The longJump() command makes your character jump over one tile.

• Moving to a lower tile will cause your character to drop down.

Onwards, Forward

Available Commands

Hints

• A for loop lets you repeat a set of procedures multiple times. It follows this syntax:

• When you use the fire() command, the character's laser will travel up to 5 tiles.

Jump, Forward

Available Commands

Forward, Jump

Available Commands

On the Nose

Available Commands

Bunny Hop

Available Commands

Hints

• When using the longJump() command, you do not have to land on a tile of the same height. Your character will drop down to the tile after the jump.

Over the Hills

What Is a While Loop?

Earlier, we learned to use the for loop to execute the same code a certain number of times. Now let's learn about another kind of loop called a while loop.

The condition determines how long the loop will continue to execute.

For example, your condition might be i < 10. This says keep running the loop while the value of i is less than 10.

Let's use a while loop to count from 0 to 9. We need to initialize the variable i to 0 outside the while loop and increment the variable (i++;) at the bottom of the loop.

The condition in this case is i < 10. Click on the run button to see how it works.

Now let's count down from 9 to 0. Here, we need to decrement the variable i--; at the bottom of the loop. Click on the run button to see how it works.

Functions can be used within while statements.

For example, you might write:

This says, as long as there is a path ahead, keep moving forward.

While loops are another powerful tool for controlling your programs!

Write your own while loop that prints all numbers from 1 to 10.

Ninja Hacker

Available Commands

Hints

• The longJump() command makes your character jump over one tile.

• The ! character in JavaScript represents not in a condition. You could think of the while loop that's been provided as, "Repeat the following code as long as Skyla has NOT reached the goal."

Tower Battle

Available Commands

Hints

• Remember that your laser will only travel five spaces in the direction you're facing!

What Are Conditionals?

You can write a program so that it performs different tasks based on a condition. In this way, you can have your program "make decisions" all on its own. Conditionals are used for this purpose.

An if statement executes a segment of code only if a condition is true. Otherwise your program won't execute that code.

The if statement is a very common kind of conditional, so let's take a closer look.

An if statement has the following syntax:

If the condition isn't met (that is, if it is false) your program just skips right over any commands in the if statement.

The condition determines if the code inside the if statement will be executed.

An example is i < 10.

The code inside the if statement will be executed if the value of i is less than 10. Every condition you use in an if statement will need to evaluate to either true or false.

The example below shows how to output the odd numbers from 1 to 20 using an if statement.

How does it work? Recall that the % operator is modulo, which returns the remainder of division. If you divide by 2, and the remainder is equal 1, then the number must be odd. Notice how the code behaves in response to this condition:

(i % 2) == 1

Even numbers won't be printed in the for loop.

An else statement is placed after an if statement and executes a segment of code only if the previous condition was false.

An else statement has the following syntax:

• If condition1 is true then commands1() operates.
• If condition1 is false then commands2() operates.

An else if statement is placed after an if statement and executes a segment of code only if the previous condition was false and a new condition is true. Otherwise your program won't execute that code.

An else if statement has the following syntax:

• If condition1 is true then commands1() operates.
• If condition1 is false and condition2 is true then commands2() operates.
• If condition1 and condition2 are both false then commands3() operates.

Notice how the order of your conditions is really important!

Blast the Virus

Available Commands

S-Curve

Available Commands

Mountain Climbing

Available Commands

Take the Leap!

Available Commands