Preview
Video Player
00:00
00:00
Introducing the Practice
3:26Preview the application you'll build in this practice session.
[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