Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice If and Else If Statements in JavaScript!
You have completed Practice If and Else If Statements in JavaScript!
Preview
See the program you'll create in this practice.
Course
Related Practice
Related Videos
- Introducing Conditional Statements
- Comparison Operators
- Boolean Values
- Programming Multiple Outcomes
Mozilla Developer Network (MDN) Reference
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey everyone, Dave here.
0:04
Let's practice some
JavaScript programming.
0:06
This practice session covers
basic conditional statements.
0:08
It's a great follow up to the fourth
part of the JavaScript basics course.
0:12
If you haven't taken that yet and
find this practice session too difficult,
0:16
then go through the first
four parts of that course.
0:19
I've added a link in the teacher's notes.
0:22
For this practice session,
0:24
you'll start with an already
functioning JavaScript program.
0:25
In fact, this program was created
in an earlier practice session.
0:28
If you haven't done that one yet,
you can go through it first, and
0:32
then come back to this one.
0:34
See the teacher's notes below for
a link to that workshop.
0:36
Let's look at how
the program currently works.
0:39
It accepts two numbers as input,
then does some simple math and
0:44
writes the results to the page.
0:48
But there are some things a user
could type in that would cause
0:50
this program to not work so well.
0:53
For example,
division by 0 is not allowed in math, but
0:55
a user could type 0 for the second number.
0:59
Or someone could type a word
instead of a number, or
1:02
even leave the prompt field empty.
1:05
Wow, now that really doesn't work.
1:09
NaN stands for not a number, and
it's the value you'll get when you try to
1:10
perform math using letters or
try to evaluate a string as a number.
1:15
So the program works some of the time but
not all of the time.
1:19
In this practice session,
1:23
I want you to add a conditional statement
to control the flow of the program.
1:24
And to deal with the two
situations I just showed you.
1:28
Here's how the completed
program should work.
1:31
If I type 0 for the second number, I
should get an alert dialog that says that
1:38
division by 0 isn't allowed,
and I should try again.
1:42
I'll reload the page and type
1:47
hello in the first prompt, and
leave the second prompt empty.
1:50
Now I'm told that one or
more of the entries aren't a number, and
1:57
I should try again.
1:59
Great, and
it still works if I type numbers.
2:01
Go ahead and
launch the workspace on this page.
2:06
There's a file named math.js and
one called instructions.txt.
2:08
The instructions file contains
the requirements for the project.
2:13
The first instruction asks you to
move your variable declarations to
2:17
the top of the file.
2:20
Now this isn't a strict
technical requirement for
2:22
the script to run,
it's more a professional best practice.
2:24
Programmers recommend moving variable
declarations to the top level of the code.
2:28
This way, you can immediately see
the variables used in the script.
2:32
You can declare them even
without adding a value to them.
2:35
Let me show you one example now and
you can do the rest.
2:38
At the top of this file,
I'll declare the first variable.
2:41
I could put the prompt here too,
but I won't.
2:46
I'll leave that for later in the program.
2:48
Now I'll also remove var from here.
2:51
You only use var once, when you first
create or declare the variable,
2:56
not when you change the value in it.
2:59
Okay, you can move the rest of
the variable declarations yourself.
3:02
Read the instructions.txt file for
3:06
the requirements on how
the conditional statement should work.
3:08
One thing you'll need to use
is the is not a number method.
3:11
This method checks to see if
a variable contains a value.
3:15
It looks like this.
3:18
You put the name of the variable you
want to test inside the parentheses.
3:23
It's a JavaScript function
that returns another value.
3:27
In this case,
it returns a boolean true or false value.
3:30
If the value in the variable is not
a number, it returns the value true.
3:34
Remember, boolean values are the key
to conditional statements.
3:39
I provided a couple of links below to
explain the is not a number method and
3:42
to remind you of what and
how boolean values work.
3:46
If you want to do some quick studying
before tackling this practice session,
3:49
in the teacher's notes, look for
3:53
links to videos that can help
you solve this challenge.
3:54
But if you're ready, go for it.
3:57
Program your solution, and
I'll show you mine in the next video.
3:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up