Basic input concepts (prompt overview) in Javascript - Step-by-Step Execution

Concept Flow - Basic input concepts (prompt overview)

Start Program

↓

Show prompt to user

↓

User types input

↓

Store input in variable

↓

Use input in program

↓

End Program

The program shows a prompt, waits for user input, saves it, then uses it.

Execution Sample

Javascript

let name = prompt('What is your name?');
console.log('Hello, ' + name + '!');

This code asks the user for their name and then greets them.

Execution Table

Step	Action	Input/Output	Variable State
1	Show prompt 'What is your name?'	Prompt displayed	name = undefined
2	User types input	User types 'Alice'	name = undefined
3	Store input in variable	Input 'Alice' stored	name = 'Alice'
4	Output greeting	Console logs 'Hello, Alice!'	name = 'Alice'
5	Program ends	No further action	name = 'Alice'

💡 Program ends after greeting the user.

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
name	undefined	undefined	'Alice'	'Alice'

Key Moments - 2 Insights

Why is the variable 'name' undefined before user input?

Before the user types anything, the prompt function has not returned a value, so 'name' is not set yet (see execution_table step 1 and 2).

What happens if the user clicks cancel or enters nothing?

The prompt returns null or an empty string, so 'name' will be null or '', which affects how the greeting appears (not shown in this trace but important to consider).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' after step 3?

A undefined

B 'Alice'

C null

D '' (empty string)

💡 Hint

Check the 'Variable State' column at step 3 in the execution_table.

At which step does the program display the prompt to the user?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the 'Action' column in the execution_table for when the prompt appears.

If the user enters 'Bob' instead of 'Alice', how does the variable tracker change?

A The 'name' variable changes to 'Bob' after step 3

B The 'name' variable remains undefined

C The 'name' variable becomes null

D The 'name' variable becomes an empty string

💡 Hint

The variable tracker shows the value assigned after user input is stored (step 3).

Concept Snapshot

Basic input in JavaScript uses prompt() to ask the user a question.
The input is saved in a variable.
You can then use this variable in your program.
If the user cancels, prompt returns null.
Always check or handle user input carefully.

Full Transcript

This visual trace shows how JavaScript's prompt function works step-by-step. First, the program shows a prompt asking the user a question. Then the user types their answer, which is stored in a variable. Finally, the program uses that input, for example, to greet the user. The variable starts undefined and gets the user's input after they type it. If the user cancels or enters nothing, the variable can be null or empty string, which should be handled in real programs.