- Introducing Strings 6:43
- Transform and Manipulate Strings 6:04
- Introducing Strings Review 5 questions
- Capture Input 4:05
- Combine Strings 8:28
- Combine and Manipulate Strings 3 objectives
- Template Literals 5:19
- Display the Value of a String on a Page 7:55
- Variables and Strings Challenge 2:57
- Variables and Strings Challenge Solution 5:32
- Combine Strings and Template Literals Review 6 questions
- Write a Template Literal 1 objective
Preview
Video Player
00:00
00:00
Capture Input
4:05Every application that you interact with provides ways for its users to give it information. Learn how to use 'prompt()' to capture dynamic input from your site users.
Earlier you learn techniques for
0:00
outputting information that
you provided the program.
0:02
For example, an
0:05
alert dialog and printing a message to
the JavaScript console with console.log.
0:06
So far, it's been just you manually
feeding the program input,
0:10
which isn't all too useful.
0:14
Just about every application that
you interact with provides ways for
0:16
it to user to give it information.
0:19
For example, sign up for an account,
log in, create a profile, and so on.
0:21
You can capture dynamic input from your
site users in a number of different ways.
0:26
For instance, when a user fills out a form
field, you can capture what they type.
0:30
Browsers also provide a simple way
of capturing input with JavaScript,
0:34
let's see how it works.
0:37
All right,
it's time to learn a new command.
0:39
This time, open the prompt.js
file inside your js folder and
0:42
update the script tag in index.html so
that it points to prompt.js.
0:47
The prompt command gives you a way to
collect information from a site user.
0:56
For example, you can ask a question and
get a response.
1:01
In your prompt.js file,
start by typing prompt,
1:03
immediately followed by a set
of parentheses and a semicolon.
1:07
Notice again the parentheses, which now
you know means that this is a method.
1:12
In fact, from now on, we can refer to
these types of commands, including
1:16
console.log and alert, as methods,
which is what they're commonly called.
1:20
You use the prompt method
to ask a question or
1:25
prompt the user to input some text.
1:27
Like the alert method,
you provided a message as a string.
1:30
For example, what is your name?
1:33
I'll save the file.
1:38
When I refresh the browser,
1:40
notice how prompt displays
a dialog box with the question.
1:42
Much like the alert method,
only this time,
1:46
there's a text field where a user
can type something into it.
1:48
I'll type Guil and click OK.
1:52
But what happens to the text I just typed?
1:55
As it turns out, the browser
captures the user's response and
1:58
gives it back to the program.
2:02
In programming speak,
we say that prompt returns a value.
2:04
Knowing that, we can store that return
value variable, in other words,
2:08
we can capture the user's
input to use in our program.
2:12
For example,
declare a const variable named name and
2:16
assign it the prompt method.
2:21
And now there are a couple of ways to see
what get stored in this new variable.
2:23
First, we can use an alert.
2:28
Back in the browser, I'll refresh the page
then type Guil into the dialog box.
2:34
When I click OK, notice how Guil
appears in the alert dialog.
2:40
The prompt method gives you back the
user's response, or the text they entered.
2:45
So notice how a variable is
really useful in this case.
2:50
By storing the name in a variable,
2:54
each person who visits this webpage gets
a different response, customized to them.
2:56
You can also use console.log to
write the variable to the console.
3:01
I'll change alert to console.log.
3:05
And while your site users probably
won't look at the console,
3:11
it's still a great place for you, the
programmer to send messages to yourself.
3:15
You can use it to look into
your program at any point.
3:20
Here we're using the console to see what's
inside the name variable at this point
3:24
in the program.
3:29
And we've been doing a lot of that so
far in this course.
3:30
For example, earlier we used the console
to debug errors in our code.
3:32
And we've also used it to check string and
number values stored in variables.
3:36
So as you learned,
the prompt method provides a quick and
3:41
easy way to capture user input.
3:44
So it's a useful feature for learning.
3:46
And later, you'll learn how to
use information captured with
3:48
prompt in a program.
3:51
Although you might see prompt dialog
boxes used on the web, in reality,
3:52
you'd capture input
using fields in a form.
3:56
I'm not gonna cover that in this course,
but
3:59
you'll learn how to capture input
with forms in a later course.
4:01