Javascript: If, Else and User Input

Now we know how to store values in variables, it's probably worth learning about how to get user input and store it in variables, and also how we can do certain things if variables are certain values.

User Input

Firstly, user input. There are a lot of ways to take input from the user on the web – ranging from textboxes to pop-up boxes, and in this lesson we are just going to use a very simple command to get input from the user (which isn't really used very much in the web these days, but it's good for while we're learning).
The function we are going to use is called 'prompt', and it does exactly what it sounds like. When we call the function, we simply pass it a string, and it will present the user with the string we entered and a textbox to enter a value in. The prompt function returns whatever value the user has inputted (we'll learn more about returning values later on when we learn about functions, but basically it just means that if we treat the function as a value, it will give us the value that it's been told to return (in the case of the 'prompt' function, it will give us what the user has entered if we treat the function like a regular value)).
So let's just prompt the user for their name, and store it in a variable called 'name':

var name = prompt('What is your name?');

If you want to check if this works, we could simply alert the name after we get it. If you want to quickly test this, I've put the code in a JSFiddle frame below.



Remember that we could also prepend values to this if we wanted, by simply sticking two strings together using the '+' operator:

var name = prompt('What is your name?');
alert('Hi, ' + name + '. Welcome to my awesome website!');

If and Else Statements

So now we know how to get input from our user – let's introduce the extremely important concept of 'if statements' to check what the user has typed in. For now, we're just going to be checking if two values are exactly equal – but we can check for other conditions (greater than, less than etc) also, but that's for a later lessons.
So whenever we want to start a chain of comparison, we write the keyword 'if'. We then specify whatever we want our condition to be in some regular brackets (we'll learn how to formulate conditions in just a sec), and then we specify the code we want to be executed if the condition is true in curly brackets. So at the moment we have a concept that looks something like this:

if(ConditionGoesHere)
{
	//Code to execute if condition is true goes here.
}

Just as a quick sidenote, the "//" I've put in is what's called a comment. It doesn't make a difference to the actual Javascript code when it's ran and is just to help explain pieces of code and leave little notes (this is especially useful if your working in a team – you can find plenty of advantages of commenting code with a simply Google search). The comment has to go after, and on the same line as the "//" though – if you want to do multi-line comments, you start the comment with "/*" and end it with "*/". Like so:

if(ConditionGoesHere)
{
	/*
	Notice how this comment takes up
	multiple lines?
	*/
}

But anyway, let's get back to what we were doing!
The most simple way to formulate a condition for our if statement is to have the value we want to compare to something, then a comparison operator (so in our simple example, we'll want the "is equal to" operator) and then the value we want to compare the first value to. The only comparison operator we will use in this tutorial, is the "is equal to" operator, which is expressed with two equals signs next to each other ('==').
To trigger the code inside the if statement, our condition must be true. This either means that we used a comparison operator such as "==", or we've got a function which returns a value (if you put a function in there that returns true, then the code inside the if statement will execute).

So as a most basic example, let's compare the 5 to 2 (rather pointless as 5 will never equal 2, but nevertheless it's an OK example):

if(5==2)
{
	//Do stuff here if 5==2 (which it never will)
}

Now we can create simply if statements, let's go ahead and get back the code we had earlier – and check if the user's name is a certain value:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	//Do something special here.
}

So in the above case, the user's name is Joe. We might want to display a special 'alert' box if this is the case:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	alert('Wow, cool – my name is Joe too!');
}

And it's as simple as that! If we run that code, it should all work as we intended!
But what if we wanted to do something else if the user's name matched another case?
Well we could simply write another if statement under this one, but that isn't the best way to do things:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	alert('Wow, cool – my name is Joe too!');
}
if(name=='Fred') //If the name is 'Fred'
{
	alert('Fred is a pretty generic name...');
}

The above code is reasonably inefficient (it's going to check if the user's name is 'Fred', even if their name has already been matched as 'Joe), and there is a better way to accomplish what it's trying to do. It's called 'else if'.
It allows us to link this if statement, with our previous one – therefore wiping out the inefficiency problem that we had! All we have to do is write 'else' after the ending curly bracket of the last if statement, and then we simply write 'if' and then follow the same format we used for the first 'if'. So in our example:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	alert('Wow, cool – my name is Joe too!');
}
else if(name=='Fred') //If the name is 'Fred'
{
	alert('Fred is a pretty generic name...');
}

The code is now much more efficient!
Note that we can add as many 'else if's as we like (as long as we have an initial 'if' to start the chain off of course), so let's add a few more cases:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	alert('Wow, cool – my name is Joe too!');
}
else if(name=='Fred') //If the name is 'Fred'
{
	alert('Fred is a pretty generic name...');
}
else if(name=='John') //If the name is 'John'
{
	alert('Alright, John?');
}
else if(name=='George') //If the name is 'George'
{
	alert('George is a pretty decent name.');
}

So now we can make all of these comparisons, however there might be one other core thing that we want to accomplish in all this comparison – something that executes if none of the conditions are met. We do this by simply writing 'else' after the last 'else if' (or just after the initial 'if' if you don't have any 'else if's in the chain) and then specifying the code that will get executed if none of the conditions are met in curly brackets, for example:

var name = prompt('What is your name?');
if(name=='Joe') //If the name is 'Joe'
{
	alert('Wow, cool – my name is Joe too!');
}
else if(name=='Fred') //If the name is 'Fred'
{
	alert('Fred is a pretty generic name...');
}
else if(name=='John') //If the name is 'John'
{
	alert('Alright, John?');
}
else if(name=='George') //If the name is 'George'
{
	alert('George is a pretty decent name.');
}
else
{
	alert('I have no opinion on your name.');
}

And now we have our fully functional name checker code (and hopefully now know how to get basic input from the user, and how to use if statements and basic conditions to compare two values)!
To test it out, you can either put this code into the script.js file inside your project folder that we setup in previous lessons (and then open up index.html), or use the simple JSFiddle below.




Back to Javascript