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 JavaScript Math Methods!
You have completed Practice JavaScript Math Methods!
Preview
See one possible way to program the solution to this practice challenge.
More Practice
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
How did it go?
0:00
Were you able to complete the program?
0:01
If not, no worries.
0:03
You can watch my solution,
compared to what you wrote, and
0:04
then try to recreate it yourself.
0:06
In step one is to link
the JavaScript file to the webpage.
0:09
The script tag is how you do that.
0:12
Just add the source attribute and
provide the path to the file.
0:14
The JavaScript file is
in a folder named js,
0:17
which is at the same level
as the index.html file.
0:20
So the path leads into that folder and
into the file math.js.
0:23
So the path is js/math.js.
0:27
Step two, I add an alert dialogue
box to announce the program.
0:34
In step three, we create a variable and
0:37
use the prompt dialogue to
collect input from the user.
0:40
The name of the variable, num1, indicates
that I'm storing the first number.
0:43
Because input from a prompt method
is always returned as a string,
0:47
I need to convert it to a number value.
0:51
If I didn't, weird things could
happen when I tried to perform math.
0:53
For example, if I added the string
value 3 to a string value 4,
0:56
I'd get 34, not seven,
1:01
because the browser would just combine
the strings instead of adding the numbers.
1:03
Now JavaScript provides
two methods to help here.
1:08
Parse sent and parseFloat.
1:10
I'll use parseFloat, because this will let
users type in, what are called floating
1:13
point numbers, also known as decimal
numbers, like 3.14 or 9.999.
1:17
Notice that I simply store the result,
1:22
a parseFloat right back
into the num1 variable.
1:24
In other words, I'm just replacing
the string value with its numeric version.
1:27
Also, I don't use the var keyword again,
1:32
you just use it one time when you
create or declare the variable.
1:34
Now, I repeat steps 3 and 4 to collect the
second input and convert it to a number.
1:38
Step six, uses basic string concatenation.
1:46
I can use HTML tags like the h1 tag here,
1:51
because we're gonna output
this string to the web page.
1:54
The + symbol lets me combine strings
with variables to create a new string.
1:58
Notice that I add a variable names, but
none quote marks to create the final tag.
2:03
Step seven through nine, ask you to
build up the rest of the message, but
2:07
I'm gonna jump directly to step ten.
2:11
Because it's a good idea to test any
program you write as early as possible.
2:13
Nothing's more frustrating than writing
100 lines of code, testing it, and
2:17
seeing that the program's broken
somewhere in that 100 lines, but where?
2:22
I'll add the document.write line, here.
2:27
This will write the contents of
the message variable to the document.
2:32
I'll save the file and preview it.
2:35
There is an alert and two prompts,
and the opening h1 tag, excellent.
2:39
Now it's time to add to the message and
do some math.
2:45
I can use the += operator
to add additional strings
2:51
to the end of the message variable.
2:55
Again, I'll test it.
3:00
Save, preview, 5,
3:01
10, something's not right.
3:06
5+10 is not 510, it's 15.
3:09
JavaScript uses the + symbol,
both to combine strings and
3:14
to compute numeric values.
3:17
In this case,
because we're creating a string,
3:20
the browser thinks it needs to convert
those numeric values back to strings, and
3:22
simply combine them one with the other.
3:27
Fortunately, we can use parentheses to
tell the browser the order of operations.
3:30
The parentheses tells
the browser to do this first.
3:40
In other words, do the math first,
and then add the results to a string.
3:44
All right, let's test this again by
saving, previewing, 5, 10, perfect.
3:48
Now I'll add an HTML line break,
just to separate each line of the output.
3:56
The rest of the program is very
similar to steps seven and eight,
4:03
just swap in different math operators,
multiplication, division and subtraction.
4:06
All right, one last test.
4:20
Great, now, you may notice that things
get a little weird if you don't type in
4:28
numbers JavaScript provides
some helper functions for
4:32
dealing with this, including something
called a conditional statement.
4:42
We have another practice session that
lets you practice working with them.
4:45
See the teachers notes below for
a link to that practice session.
4:49
I hope you're able to complete
this practice successfully.
4:56
If note, why not start over and
4:59
try to write the program
without looking at my version.
5:01
Have fun with JavaScript,
and I'll see you again soon.
5:03
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