Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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