Introduction to programming

Conditions and loops

In this part of the course, we'll look at conditions and loops; as before, make a new copy of the template.html file and open it in your browser and text editor.

Conditional logic

Another very significant part of programming is conditional logic: performing different actions depending on user choices, differences in environment, etc. You might want to reveal whether an answer to a quiz question is correct or not, or do different things depending on different keys being pressed on the keyboard.

Conditional logic is usually done inside an if … else structure (although there are other ways). Let's type in a simple example into the JavaScript area of our tempate file (also see my conditional example for a finished version):

var myTown = prompt("Enter your home town or city");

if(myTown === "Manchester") {
  // At each stage here we are doing a test to see if
  //the myTown variable is equal to a certain value
  alert("Is it still raining in Manchester?");
  // the code inside the curly braces is run if the
  //associated test returns true
} else if(myTown === "Barcelona") {
  // else if is how we chain another possibility on to the
  // end of the block
  alert("You have beautiful architecture, and sun");
} else {
  // else is basically the last resort if none of the other
  // tests return true
  alert("I don't know your home town very well");
};

Each stage of this structure tests a condition, and depending on whether this condition is true, you get a different result. If the condition is true, the code inside the curly braces executes; if not it moves on to the next condition test.

Now try the following:

var myTown = prompt("Enter your home town or city");

if(myTown === "Manchester") {
  alert("Is it still raining in Manchester?");
}

alert("I don't know your home town very well");

This still runs because the browser just keeps moving through the code sequentially. But there is a problem. What goes wrong here when you enter your myTown variable value as Manchester when prompted?

Exercise: Building onto our conditional code

In this exercise, try adding some further conditions onto our existing code, to make it able to respond in more different ways when different town options are entered. Remember that for the first condition you need to write if() {}, for further conditions you need to write else if() {}, and then for your final default condition you just need to write else {}.

If you get stuck, check that:

  1. You have closed quoted sections with a second quote mark.
  2. You have included semi colons at the end of the "action" lines (e.g. alerts and prompts)
  3. You haven't confused a single equals sign with a triple equals sign. Single equals is the assignment operator, and you use that to make something equal to something else ("x now equals y!") Triple equals is the strict equality operator, which is used to check whether something is equal to something else ("is x equal to y?")

If you want to create a response based on a combination of different conditions, you have a couple of choices. First of all, you can use the OR and AND operators to make an if ... else statement return true if or one or more conditions are true. For example, here's an OR operator being put to use (run the code if myTown equals Manchester OR Bradford):

if(myTown === "Manchester" || myTown === "Bradford") {
  alert("It is rainy in those Northern towns.");
}

And now an AND operator (run the code if myTown equals Manchester AND mySeason equals Summer):

if(myTown === "Manchester" && mySeason === "Summer") {
  alert("Manchester must be enjoying some warmer weather.");
}

There is also nothing to stop you from nesting if ... else structures. For example:

if(myTown === "Manchester") {
  if(mySeason === "Summer") {
    alert("Manchester must be enjoying some warmer weather.");
  } else if(mySeason === "Winter") {
    alert("Poor you! Must be really cold in Manchester
           at the moment!");
  } else {
    alert("Is it raining in Manchester?");
  }
};

Exercise: advanced conditionals

Now try using some AND and OR operators in your program, and/or a nested conditional.

Loops

Often you will want to do the same thing multiple times, perhaps changing the result a little bit each time. It is really tedious to write out loads of similar lines one after the other, so programming languages tend to provide loops to automate this for you. Let's say we wanted to make a number guessing game, where the program stores a number between 1 and 100 and then you have 20 guesses to get it right. Writing out the same code 20 times, once for each guess would be really tedious: 

var theAnswer = 72;

// guess 1;

var guess = prompt("Enter a guess");

if(guess === theAnswer) {
  ...
}

// guess 2

...

// guess 3

etc.

A much better way to do this would be to use a for loop, the general structure of which looks like this:

for(i = 0; i <= 20 ; i++) {
  // code in here can handle guesses 1 - 10, which become
  // guess i in variable terms
}

Loops nearly always involve a single variable being iterated a certain number of times during the course of the loop. This can be called anything you like, but standard convention dictates that it be called i, mainly due to laziness!

Inside the for() brackets you have three values separated by semi-colons:

  1. i = 0 — this is the starting value of the variable to be iterated.
  2. i <= 20 — this is the "exit condition" of the loop. So in this case, the loop will stop when i is no longer less than or equal to 10. When the value of i hits 11 the loop stops iterating, and the browser moves on to whatever comes next in the code. The loop needs an exit condition; if it didn't have one, the loop would never end, and the browser would just keep running the loop forever until it crashed. This is called an "infinite loop".
  3. i++ — this is the "iterator". Each time the loop has finished running, the iterator modifies the value of i in some way and then the loop is run again (unless of course that iteration is the last one, and the loop doesn't run again). i++ means "add 1 to i each time", and is shorthand for i = i + 1.

Exercise: Implementing a basic loop

Soon we'll try to build the game described above ourselves, but first let's look at a simple real example that outputs the numbers 1 - 20 into the console pane.

for(i = 1; i <= 20 ; i++) {
  console.log(i);
}

Try putting this into the JavaScript section of your template. Save and reload as before, then open the browser console pane so you can see the console.log output.

This code is the equivalent of writing:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);
console.log(11);
console.log(12);
console.log(13);
console.log(14);
console.log(15);
console.log(16);
console.log(17);
console.log(18);
console.log(19);
console.log(20);

This reiterates how much more convenient loops can be for doing repetitive tasks!

Exercise: building a number guessing game

Ok, so the time has come for us to try working out how to build a simple game. Along the way I'll start introducing you to the idea of "thinking like a programmer." This is quite hard to come to terms to, but once you start to get it, you will find that the rest comes more easily.

Let's revisit my product description from earlier:

A number guessing game, where the program stores a number between 1 and 100 and then you have 10 guesses to get it right.

To start thinking like a programmer, you need to break this down into statements of what the program needs to do to succeed.

  1. Program needs to store a random number, 1-100.
  2. Program needs to give the user 10 guesses to get this right.
  3. The user needs to know whether they have got it right or not.

So how do we then take these and turn them into code? Let's go through them one by one.

Program needs to store a random number, 1-100.

This is how the program determines what the right answer is, in each game. This really ought to happen at the start of the game, before the guesses happen, so let's write this first. JavaScript has a built-in function that generates a random number between 0 and 1: Math.random().

  1. Wrap the following in a console.log() statement so we can see what it's doing.
    2. console.log(Math.random());
  2. We need to make it generate a number between 1 and 100. Let's multiply it by something to make the random number bigger.
    3. console.log(Math.random() * 100);
  3. This gives us a random number between 0-99: the random number generated doesn't include 100. We need 1-100
    4. console.log((Math.random() * 99) + 1);
  4. But this number is a decimal, plus it might give us slightly more than 100. We want whole numbers! Fortunately JavaScript has a built-in function called Math.floor(), which rounds its input down to the nearest whole number. How do we use this?
    5. console.log(Math.floor(Math.random() * 99) + 1);
  5. Let's refresh the browser with the console open to test it a few times.
  6. We need to store this in a variable, rather than output it to the console. Update the line like so:
    7. var randomNumber = Math.floor(Math.random() * 99) + 1

Program needs to give the user 10 guesses to get this right

This sounds like a job for a for loop, right? What have we just been talking about?

  1. Let's add an empty for loop below our previous line of code
    2. for() {
  
}
  2. Now we need to work out what the starting condition, exit condition and iterator are. We want to start at guess 1, stop providing guesses when the guess count reaches 10, and increase the guess count by 1 each time.
    3. for(i = 1; i <= 10 ; i++) {
  
}
  3. So next, what do we need to do inside the loop? Well, we ought to think about how to let our user take a guess. What have we used in the past to allow the user the enter something?
    4. for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);
}

The user needs to know whether they have got it right or not

  1. Now we should check whether the guess is correct. What structure can we use to do this?
    2. for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if() {

  } else {

  }
}
  2. What condition do we put in here?
    3. for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if(userGuess = randomNumber) {

  } else {

  }
}
  3. Let's alert the user to tell them whether they got it right or not. How can we do this?
    4. for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if(userGuess === randomNumber) {
    alert("Congratulations. You got it right!");
  } else {
    alert("wrong");
  }
}

Advanced additions

First of all, the game would be a lot fairer if we could tell the user whether each guess is too high or too low.

for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if(userGuess === randomNumber) {
    alert("Congratulations. You got it right!");
  } else {
    alert("wrong");
    if(userGuess < randomNumber) {
      alert("Your guess is too low!");
    } else if(userGuess > randomNumber) {
      alert("Your guess is too high!");
    }
  }
}

Also, the guesses should stop if the user guesses the correct number before the 10th guess.

for(i = 1; i <= 10 ; i++) {
  var userGuess = prompt("Enter guess " + i);

  if(userGuess === randomNumber) {
    alert("Congratulations. You got it right!");
    break;
  } else {
    alert("wrong");
    if(userGuess < randomNumber) {
      alert("Your guess is too low!");
    } else if(userGuess > randomNumber) {
      alert("Your guess is too high!");
    }
  }
}

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.