Preview
Video Player
00:00
00:00
The Solution
5:06See one possible way to program the solution to this practice challenge.
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