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
Preview the application you'll build in this practice session.
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
Practice is a good thing.
0:06
It helps makes what you've
learned last longer.
0:07
It also you become a faster and
better developer.
0:10
So let's practice some basic JavaScript
to make sure your knowledge sticks.
0:13
This practice session covers working
with input, variables, numbers, math and
0:17
printing to a web page.
0:22
It's a great followup to the third
part of the JavaScript basics course.
0:23
If you haven't taken that yet and
find this practice session too difficult,
0:27
then go through the first three
parts of that course first.
0:30
I've added a link to the teacher's notes.
0:33
For this practice session,
0:36
I'm going to ask you to build
a small JavaScript application.
0:37
Let me show you the goal.
0:40
Your program should open an alert
dialog that introduces the program.
0:42
It then opens two prompt dialog
boxes asking for numbers.
0:46
After providing two numbers,
0:53
a message appears on the page
including an HTML headline.
0:55
And four lines of text showing
the results of basic calculations
0:58
performed on the two numbers.
1:02
It's pretty simple, but combines
several fundamental programming steps.
1:04
I've attached a work space to this video,
which includes some starter files and
1:08
instructions.
1:11
Open the work space, or
1:12
download the project files if you
want to use your own text editor.
1:13
You'll work with two files,
an HTML file and a JavaScript file.
1:17
I've also included a screenshot to
show you what the final page output
1:21
should look like.
1:24
Open the math.js file, and
1:25
you'll see ten lines of instructions,
listed as JavaScript comments.
1:28
Here's what you should do.
1:32
First, attach this file,
math.js, to the index.html file.
1:33
Next, add an alert to
announce the program.
1:38
Third, create a variable, and
1:41
use a prompt dialogue box to
capture input from the user.
1:42
Next, convert that value from
a string to a floating point number.
1:46
Input from a prompt dialog is
always returned as a string value,
1:51
even if the user types a number, like 6.
1:54
To accurately perform math,
1:57
you'll need to make sure you're
working with number values.
1:58
I've added links to the teacher's notes,
2:01
the documentation that
could help with this task.
2:03
I've also linked to a Treehouse
video if you need to review this.
2:06
Then repeat steps three and
four to capture another number.
2:09
Now, create a third variable.
2:14
And begin building out a message
that will be added to the page.
2:17
Since the program prints to the HTML page,
you can use HTML tags.
2:21
So add an <h1> tag that includes the two
numbers collected by the prompts.
2:25
For example, if the user typed 3 and 4,
2:30
you'll create a string
something like this.
2:32
<h1> Math with the numbers 3 and
4, closing </h1> tag.
2:35
You'll need to use string concatenation
to add the number values into the string.
2:40
And then, for the seventh step,
2:43
add a line to the message that
demonstrates addition of the two inputs.
2:46
For example, 3 + 4 = 7.
2:50
Because this program
prints to the web page,
2:52
we need to separate each
line of the output.
2:55
So add a line break tag, the <br> tag,
to the message variable.
2:57
Now, add three more lines to the message
variable demonstrating multiplication,
3:01
division, and subtraction.
3:04
Use the finish.png file to guide you.
3:06
Finally, you'll use the document.write
method to print the message to
3:08
the web page.
3:13
If you want to do some quick study
before tackling this practice session.
3:13
In the teacher's note, look for
3:17
links the videos that can help
you solve this challenge.
3:18
But if you're ready go for it,
program your solution, and
3:21
in the next video I'll show you mine.
3:24
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