Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Capturing Visitor Input3:41 with Dave McFarland
Learn how to capture data from your visitors and store it in a variable.
prompt() captures visitor input from a dialog box. You can store that input in a variable like this:
var answer = prompt('What color is the moon?');
Chrome Console Keyboard Shortcuts
- Windows: Ctrl + Shift + J
- Mac: Cmd + Option + J
Firefox Console Keyboard Shortcuts
- Windows: Ctrl + Shift + K
- Mac: Cmd + Option + K
Internet Explorer Console Keyboard Shortcuts
- F12 key
Safari Console Keyboard Shortcuts
- Cmd + Option + C
In the last stage, you learned a few techniques for sending messages to
a visitor, a popup alert dialogue writing directly to the webpage with
document.write, and sending hidden messages in the console with console.log.
But we can also capture input from our site visitors in a number of
For example, when a visitor to our site fills out a form,
we can capture what he or she types.
Browsers also provide a simple command for capturing input.
Let's see how it works.
You can follow along by opening the workspace for this video.
Click the Launch Workspace button to open it.
Open the script.js file.
As you learned in the last stage,
In the workspace, you'll see there's also an index.html file.
This is a webpage and
it already includes the script tags that link to the script.js file.
the script.js file runs.
It's time to learn a new command.
The prompt command lets you ask a question and get a response.
It looks like this.
You use this command to ask a question.
So like the alert command, you need to provide a message.
Does this look familiar?
It's a string.
A series of characters inside of quote marks.
Let's save this file and preview this work space in our browser.
Okay, there's the prompt dialogue, cool.
So I can type my name and press the okay button.
But what happens to the response I just typed?
As it turns out,
the browser captures the user's response and gives it back to the program.
In programming speak, we say that this command returns a value.
We can store a returned value in a variable.
In other words, we can capture user input to use in our program like this.
Don't forget to add the semicolon at the end of the line.
Let's see what we've got.
Well there are a couple of ways to see what we've placed in this variable.
First we could use an alert.
I'm gonna save this and preview it.
Cool, so whatever I type in the prompt dialogue box appears in
the alert dialogue.
[SOUND] Let's break this code down step by step.
First, var visitorName creates a new empty box.
A new variable named, visitor name.
Second, the prompt opens a dialogue box that the visitor fills out.
Third, the equal sign puts the return value,
whatever was typed by the visitor, into the new variable.
And fourth, the alert command looks inside that variable and
displays its value in a pop-up alert box.
In this example you can start to see why variables are useful.
Each person who visits this page, will get a different response customized to them.
You could also use console.log to write the variable to the console.
I'll change the alert to console.log.
While visitors to your site won't be looking at the console it's a great
place for you, the programmer to send messages to yourself.
I'm gonna save this file and preview it.
You can use the console to look into your program at any point.
Remember we did that in the last stage when we used the console to
debug a broken program.
Here we are using the console to see what's inside the variable visitor name
at this point in the program.
You need to sign up for Treehouse in order to download course files.Sign up