Preview
Video Player
00:00
00:00
The Solution
3:07Follow along to see how to program the solution to this practice session.
How did it go,
were you able to complete the program?
0:00
If not, no worries,
you can watch my solutions,
0:03
compare it to what you wrote and
then try to recreate it yourself.
0:05
Now step one is to link
the JavaScript file to the webpage,
0:09
that's the index.html file.
0:12
The script tag is how you do it.
0:15
Just add a source attribute
followed by the path to the file.
0:17
Because the JavaScript file is in
the same folder as the index.html file,
0:22
the path is just practice.js.
0:27
For step two, I created a new
variable using the var keyword.
0:30
The name of the variable
describes what I'm asking for
0:36
in the prompt dialog box, a firstName.
0:39
The prompt method is built into browsers.
0:42
it takes a string as a question and
0:45
returns a string value that
gets stored into the variable.
0:47
Step three is the same.
0:54
Just create a new variable and
ask a different question.
0:56
Step four,
also requires a new variable and
1:01
it introduces two skills using
the toUpperCase string function to convert
1:04
a string to all uppercase characters and
combining string values together.
1:09
Combining several strings to create
a single value is called concatenation.
1:14
I start by typing the variable name,
adding a dot, and
1:19
using the toUpperCase method to convert
that string to uppercase characters.
1:23
Remember, JavaScript
methods are case sensitive.
1:29
In addition, don't forget to add
the parentheses to call the method.
1:32
The plus symbol lets you
combine two strings into one.
1:36
In this case, since I'm combining
a first name with a last,
1:40
I'll insert a space character to
make sure the results look right.
1:44
For step five, I'm asking the browser
to return the length property
1:49
of the string value inside
the completeName variable.
1:54
You can use .length to retrieve the total
number of characters in the string.
1:58
Finally, I'll use the alert
method to pop open a dialog box.
2:03
I'll be combining a bunch of strings here,
so
2:10
it can get a little confusing
with all the plus symbols.
2:12
You'll also notice that my final
message includes double quotes.
2:17
So I need to use this forward slash,
it's called an escape character and
2:21
it tells the browser to treat
the following character,
2:25
this double quote here as nothing special.
2:28
Without the escape character,
the browser would think this quote mark
2:31
is the end of the string and
not simply a character inside the string.
2:35
Basically, the program would spit
out an error and wouldn't run.
2:39
Okay, let's see how it works.
2:42
I'll save my files and
click the preview button.
2:44
Input Input.
2:49
And alert.
2:54
The message is correct.
2:55
All right, I hope you were
able to complete this practice
2:57
session successfully.
2:59
If not, why not start over and
3:01
try to write the program
without looking at my version.
3:02
Have fun with JavaScript and
I'll see you again soon.
3:05