1 00:00:00,320 --> 00:00:01,130 How did it go? 2 00:00:01,130 --> 00:00:03,040 Were you able to complete the program? 3 00:00:03,040 --> 00:00:04,450 If not, no worries. 4 00:00:04,450 --> 00:00:06,970 You can watch my solution, compared to what you wrote, and 5 00:00:06,970 --> 00:00:09,240 then try to recreate it yourself. 6 00:00:09,240 --> 00:00:12,530 In step one is to link the JavaScript file to the webpage. 7 00:00:12,530 --> 00:00:14,160 The script tag is how you do that. 8 00:00:14,160 --> 00:00:17,700 Just add the source attribute and provide the path to the file. 9 00:00:17,700 --> 00:00:20,140 The JavaScript file is in a folder named js, 10 00:00:20,140 --> 00:00:23,530 which is at the same level as the index.html file. 11 00:00:23,530 --> 00:00:27,830 So the path leads into that folder and into the file math.js. 12 00:00:27,830 --> 00:00:31,105 So the path is js/math.js. 13 00:00:34,210 --> 00:00:37,930 Step two, I add an alert dialogue box to announce the program. 14 00:00:37,930 --> 00:00:40,040 In step three, we create a variable and 15 00:00:40,040 --> 00:00:43,410 use the prompt dialogue to collect input from the user. 16 00:00:43,410 --> 00:00:47,680 The name of the variable, num1, indicates that I'm storing the first number. 17 00:00:47,680 --> 00:00:51,310 Because input from a prompt method is always returned as a string, 18 00:00:51,310 --> 00:00:53,710 I need to convert it to a number value. 19 00:00:53,710 --> 00:00:56,760 If I didn't, weird things could happen when I tried to perform math. 20 00:00:56,760 --> 00:01:01,210 For example, if I added the string value 3 to a string value 4, 21 00:01:01,210 --> 00:01:03,590 I'd get 34, not seven, 22 00:01:03,590 --> 00:01:08,260 because the browser would just combine the strings instead of adding the numbers. 23 00:01:08,260 --> 00:01:10,970 Now JavaScript provides two methods to help here. 24 00:01:10,970 --> 00:01:13,020 Parse sent and parseFloat. 25 00:01:13,020 --> 00:01:17,845 I'll use parseFloat, because this will let users type in, what are called floating 26 00:01:17,845 --> 00:01:22,350 point numbers, also known as decimal numbers, like 3.14 or 9.999. 27 00:01:22,350 --> 00:01:24,462 Notice that I simply store the result, 28 00:01:24,462 --> 00:01:27,800 a parseFloat right back into the num1 variable. 29 00:01:27,800 --> 00:01:32,080 In other words, I'm just replacing the string value with its numeric version. 30 00:01:32,080 --> 00:01:34,285 Also, I don't use the var keyword again, 31 00:01:34,285 --> 00:01:37,605 you just use it one time when you create or declare the variable. 32 00:01:38,730 --> 00:01:43,480 Now, I repeat steps 3 and 4 to collect the second input and convert it to a number. 33 00:01:46,310 --> 00:01:49,340 Step six, uses basic string concatenation. 34 00:01:51,630 --> 00:01:54,126 I can use HTML tags like the h1 tag here, 35 00:01:54,126 --> 00:01:57,670 because we're gonna output this string to the web page. 36 00:01:58,750 --> 00:02:03,220 The + symbol lets me combine strings with variables to create a new string. 37 00:02:03,220 --> 00:02:07,826 Notice that I add a variable names, but none quote marks to create the final tag. 38 00:02:07,826 --> 00:02:11,310 Step seven through nine, ask you to build up the rest of the message, but 39 00:02:11,310 --> 00:02:13,700 I'm gonna jump directly to step ten. 40 00:02:13,700 --> 00:02:17,910 Because it's a good idea to test any program you write as early as possible. 41 00:02:17,910 --> 00:02:22,060 Nothing's more frustrating than writing 100 lines of code, testing it, and 42 00:02:22,060 --> 00:02:27,610 seeing that the program's broken somewhere in that 100 lines, but where? 43 00:02:27,610 --> 00:02:31,040 I'll add the document.write line, here. 44 00:02:32,070 --> 00:02:35,260 This will write the contents of the message variable to the document. 45 00:02:35,260 --> 00:02:36,840 I'll save the file and preview it. 46 00:02:39,220 --> 00:02:44,430 There is an alert and two prompts, and the opening h1 tag, excellent. 47 00:02:45,920 --> 00:02:48,486 Now it's time to add to the message and do some math. 48 00:02:51,474 --> 00:02:55,984 I can use the += operator to add additional strings 49 00:02:55,984 --> 00:02:59,070 to the end of the message variable. 50 00:03:00,120 --> 00:03:01,545 Again, I'll test it. 51 00:03:01,545 --> 00:03:06,197 Save, preview, 5, 52 00:03:06,197 --> 00:03:09,915 10, something's not right. 53 00:03:09,915 --> 00:03:14,397 5+10 is not 510, it's 15. 54 00:03:14,397 --> 00:03:17,873 JavaScript uses the + symbol, both to combine strings and 55 00:03:17,873 --> 00:03:20,000 to compute numeric values. 56 00:03:20,000 --> 00:03:22,680 In this case, because we're creating a string, 57 00:03:22,680 --> 00:03:27,110 the browser thinks it needs to convert those numeric values back to strings, and 58 00:03:27,110 --> 00:03:29,000 simply combine them one with the other. 59 00:03:30,510 --> 00:03:34,909 Fortunately, we can use parentheses to tell the browser the order of operations. 60 00:03:40,650 --> 00:03:44,030 The parentheses tells the browser to do this first. 61 00:03:44,030 --> 00:03:48,250 In other words, do the math first, and then add the results to a string. 62 00:03:48,250 --> 00:03:55,670 All right, let's test this again by saving, previewing, 5, 10, perfect. 63 00:03:56,730 --> 00:04:01,220 Now I'll add an HTML line break, just to separate each line of the output. 64 00:04:03,610 --> 00:04:06,796 The rest of the program is very similar to steps seven and eight, 65 00:04:06,796 --> 00:04:11,180 just swap in different math operators, multiplication, division and subtraction. 66 00:04:20,230 --> 00:04:22,000 All right, one last test. 67 00:04:28,580 --> 00:04:32,703 Great, now, you may notice that things get a little weird if you don't type in 68 00:04:32,703 --> 00:04:42,106 numbers JavaScript provides some helper functions for 69 00:04:42,106 --> 00:04:45,840 dealing with this, including something called a conditional statement. 70 00:04:45,840 --> 00:04:49,410 We have another practice session that lets you practice working with them. 71 00:04:49,410 --> 00:04:52,550 See the teachers notes below for a link to that practice session. 72 00:04:56,590 --> 00:04:59,490 I hope you're able to complete this practice successfully. 73 00:04:59,490 --> 00:05:01,010 If note, why not start over and 74 00:05:01,010 --> 00:05:03,830 try to write the program without looking at my version. 75 00:05:03,830 --> 00:05:05,910 Have fun with JavaScript, and I'll see you again soon.