Preview
Video Player
00:00
00:00
The Solution
4:24See how to create the four functions in this practice session.
How did it go?
0:00
If you didn't get it to work,
you can watch my solution,
0:01
compare it to what you wrote, and
then try to recreate it yourself.
0:04
Also, keep in mind there
are often different ways to solve
0:07
a programming challenge.
0:10
Your solution may be different than
mine and still work, that's fine.
0:11
Okay, first I'll use the script
tag to attach this JavaScript file
0:15
to the index.html file.
0:19
Because the geometry.js file
is inside a JavaScript folder,
0:23
js, the complete path from the index to
the JavaScript file is js/geometry.js.
0:28
Okay, next I'll create a function.
0:35
I use the function keyword followed
by the name of the function,
0:39
a pair of parentheses,
and then some braces.
0:43
I'll name this areaRectangle.
0:47
You probably used a different name,
and that's fine.
0:49
As long as the name clearly indicates what
the function does, you're doing well.
0:51
Okay, this function needs two
parameters to capture the width and
0:55
height values that are passed to
it when the function's called.
0:59
Parameters go inside the parentheses.
1:02
And the programming for
the function goes inside the braces.
1:11
The area is just the width times
the height, so I'll use a simple return
1:15
statement, That returns
the result of this calculation.
1:19
Calculating the volume of
a box is pretty much the same.
1:26
It just requires a third parameter,
the length.
1:30
Now, calculating the area of a circle
requires a bit more JavaScript.
1:36
But I'll start with the basic
function structure first.
1:41
This function will only take one argument,
the radius of the circle.
1:44
Now, to calculate the area of the circle,
1:49
we need to do some more complex
math using the value of pi.
1:52
Fortunately, the JavaScript math object
includes the value of pi built into it.
1:56
Math.PI, then to calculate the area, we
multiple this by the square of the radius.
2:00
To calculate the square of a value,
you can use the Math.pow method.
2:08
Pow stands for power, and it lets you
raise the value to a given power.
2:14
In this case,
I want to square the radius or
2:18
raise the radius value
to the second power.
2:21
The pow method takes the value
that you wish to raise,
2:24
here it's the radius, and
the value that you wanna raise it to.
2:27
In this case, I wanna square the radius,
so I use 2 for this value.
2:31
Now, calculating the volume
of a sphere is similar.
2:35
You need to use pi and
you also need to use pow.
2:38
But this time you'll raise
it to the third power.
2:40
Notice that I wrapped the 4
divided 3 inside parentheses.
2:44
This helps group that
mathematical statement and
2:48
makes it clear to me that I'm looking
at four-thirds here, or 4 divided by 3.
2:50
Now, this is related to
the order of operations,
2:55
something you may remember
from a math class.
2:57
I've added a link to the teacher's notes
for more information on the order of
2:59
operations, if you're
interested in learning more.
3:02
Okay, finally,
I just need to call each function.
3:05
Remember to call a function, you use the
function's name and a set of parentheses.
3:08
Inside the parentheses,
I include the arguments, or values,
3:15
that I want to pass to the function.
3:18
In this case, I'm calling
the areaRectangle function, and
3:21
passing the width and
the height of the rectangle.
3:24
But I also want to print this to the
console, so I use the console.log method.
3:27
Now, do you notice something here?
3:38
I'm actually calling two functions.
3:40
The first function, areaRectangle,
3:42
returns a value that's passed to
the second function, the log method.
3:44
Now, this is really a common
thing in JavaScript, so
3:49
get used to seeing code like this.
3:51
Now, the last three lines
are pretty much the same.
3:53
You're just calling different
functions with different arguments.
3:56
I'll save this file and
preview it in a browser.
3:59
And then I'll open the dev tools,
And check out the console.
4:07
There it is.
4:13
I hope you were able to complete
this practice successfully.
4:14
If not, why not start over and
4:17
try to write the program
without looking at my version?
4:18
Have fun with JavaScript,
and I'll see you again soon.
4:21