1
00:00:00,000 --> 00:00:04,433
[MUSIC]

2
00:00:04,433 --> 00:00:06,310
Hey everyone, Dave here.

3
00:00:06,310 --> 00:00:07,730
Practice is a good thing.

4
00:00:07,730 --> 00:00:10,180
It helps makes what you've
learned last longer.

5
00:00:10,180 --> 00:00:13,110
It also you become a faster and
better developer.

6
00:00:13,110 --> 00:00:17,210
So let's practice some basic JavaScript
to make sure your knowledge sticks.

7
00:00:17,210 --> 00:00:22,200
This practice session covers working
with input, variables, numbers, math and

8
00:00:22,200 --> 00:00:23,680
printing to a web page.

9
00:00:23,680 --> 00:00:27,390
It's a great followup to the third
part of the JavaScript basics course.

10
00:00:27,390 --> 00:00:30,950
If you haven't taken that yet and
find this practice session too difficult,

11
00:00:30,950 --> 00:00:33,910
then go through the first three
parts of that course first.

12
00:00:33,910 --> 00:00:36,230
I've added a link to the teacher's notes.

13
00:00:36,230 --> 00:00:37,310
For this practice session,

14
00:00:37,310 --> 00:00:40,810
I'm going to ask you to build
a small JavaScript application.

15
00:00:40,810 --> 00:00:42,590
Let me show you the goal.

16
00:00:42,590 --> 00:00:46,960
Your program should open an alert
dialog that introduces the program.

17
00:00:46,960 --> 00:00:50,212
It then opens two prompt dialog
boxes asking for numbers.

18
00:00:53,453 --> 00:00:55,044
After providing two numbers,

19
00:00:55,044 --> 00:00:58,520
a message appears on the page
including an HTML headline.

20
00:00:58,520 --> 00:01:02,270
And four lines of text showing
the results of basic calculations

21
00:01:02,270 --> 00:01:04,050
performed on the two numbers.

22
00:01:04,050 --> 00:01:08,120
It's pretty simple, but combines
several fundamental programming steps.

23
00:01:08,120 --> 00:01:11,600
I've attached a work space to this video,
which includes some starter files and

24
00:01:11,600 --> 00:01:12,856
instructions.

25
00:01:12,856 --> 00:01:13,850
Open the work space, or

26
00:01:13,850 --> 00:01:17,020
download the project files if you
want to use your own text editor.

27
00:01:17,020 --> 00:01:21,080
You'll work with two files,
an HTML file and a JavaScript file.

28
00:01:21,080 --> 00:01:24,750
I've also included a screenshot to
show you what the final page output

29
00:01:24,750 --> 00:01:25,448
should look like.

30
00:01:25,448 --> 00:01:28,140
Open the math.js file, and

31
00:01:28,140 --> 00:01:32,820
you'll see ten lines of instructions,
listed as JavaScript comments.

32
00:01:32,820 --> 00:01:33,910
Here's what you should do.

33
00:01:33,910 --> 00:01:38,880
First, attach this file,
math.js, to the index.html file.

34
00:01:38,880 --> 00:01:41,630
Next, add an alert to
announce the program.

35
00:01:41,630 --> 00:01:42,970
Third, create a variable, and

36
00:01:42,970 --> 00:01:46,750
use a prompt dialogue box to
capture input from the user.

37
00:01:46,750 --> 00:01:51,100
Next, convert that value from
a string to a floating point number.

38
00:01:51,100 --> 00:01:54,940
Input from a prompt dialog is
always returned as a string value,

39
00:01:54,940 --> 00:01:57,240
even if the user types a number, like 6.

40
00:01:57,240 --> 00:01:58,860
To accurately perform math,

41
00:01:58,860 --> 00:02:01,760
you'll need to make sure you're
working with number values.

42
00:02:01,760 --> 00:02:03,350
I've added links to the teacher's notes,

43
00:02:03,350 --> 00:02:06,050
the documentation that
could help with this task.

44
00:02:06,050 --> 00:02:09,000
I've also linked to a Treehouse
video if you need to review this.

45
00:02:09,000 --> 00:02:12,631
Then repeat steps three and
four to capture another number.

46
00:02:14,909 --> 00:02:17,792
Now, create a third variable.

47
00:02:17,792 --> 00:02:21,630
And begin building out a message
that will be added to the page.

48
00:02:21,630 --> 00:02:25,880
Since the program prints to the HTML page,
you can use HTML tags.

49
00:02:25,880 --> 00:02:30,170
So add an <h1> tag that includes the two
numbers collected by the prompts.

50
00:02:30,170 --> 00:02:32,300
For example, if the user typed 3 and 4,

51
00:02:32,300 --> 00:02:35,720
you'll create a string
something like this.

52
00:02:35,720 --> 00:02:40,090
<h1> Math with the numbers 3 and
4, closing </h1> tag.

53
00:02:40,090 --> 00:02:43,910
You'll need to use string concatenation
to add the number values into the string.

54
00:02:43,910 --> 00:02:46,270
And then, for the seventh step,

55
00:02:46,270 --> 00:02:50,010
add a line to the message that
demonstrates addition of the two inputs.

56
00:02:50,010 --> 00:02:52,720
For example, 3 + 4 = 7.

57
00:02:52,720 --> 00:02:55,000
Because this program
prints to the web page,

58
00:02:55,000 --> 00:02:57,470
we need to separate each
line of the output.

59
00:02:57,470 --> 00:03:01,000
So add a line break tag, the <br> tag,
to the message variable.

60
00:03:01,000 --> 00:03:04,830
Now, add three more lines to the message
variable demonstrating multiplication,

61
00:03:04,830 --> 00:03:06,068
division, and subtraction.

62
00:03:06,068 --> 00:03:08,851
Use the finish.png file to guide you.

63
00:03:08,851 --> 00:03:13,137
Finally, you'll use the document.write
method to print the message to

64
00:03:13,137 --> 00:03:13,974
the web page.

65
00:03:13,974 --> 00:03:17,359
If you want to do some quick study
before tackling this practice session.

66
00:03:17,359 --> 00:03:18,901
In the teacher's note, look for

67
00:03:18,901 --> 00:03:21,556
links the videos that can help
you solve this challenge.

68
00:03:21,556 --> 00:03:24,362
But if you're ready go for it,
program your solution, and

69
00:03:24,362 --> 00:03:26,170
in the next video I'll show you mine.