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.

Practice

1. What does the prompt() function do in JavaScript?

easy

A. It displays a message in the console.

B. It pauses the program without any input.

C. It creates a new HTML element.

D. It asks the user to enter some input as text.

Solution

1. Step 1: Understand the purpose of prompt()

   The prompt() function shows a dialog box that asks the user to type something.

2. Step 2: Identify the type of input it collects

   The input collected is always text (a string), even if the user types numbers.

3. Final Answer:

   It asks the user to enter some input as text. -> Option D

4. Quick Check:

   prompt() = asks user input [OK]

Hint: Remember prompt() always asks user for text input [OK]

Common Mistakes:

• Thinking prompt() shows output instead of input
• Assuming prompt() returns numbers automatically
• Confusing prompt() with console.log()

2. Which of the following is the correct syntax to ask the user for their name using prompt()?

easy

A. let name = prompt('Enter your name');

B. prompt = 'Enter your name';

C. let name = input('Enter your name');

D. console.prompt('Enter your name');

Solution

1. Step 1: Check the correct function name and usage

   The function to get input is prompt(), not input() or console.prompt().

2. Step 2: Assign the result to a variable

   We store the user's input in a variable using let name = prompt('Enter your name');.

3. Final Answer:

   let name = prompt('Enter your name'); -> Option A

4. Quick Check:

   Correct prompt syntax = let name = prompt('Enter your name'); [OK]

Hint: Use let variable = prompt('message') to get input [OK]

Common Mistakes:

• Using input() instead of prompt()
• Trying to assign prompt as a string
• Using console.prompt() which doesn't exist

3. What will be the output of this code if the user enters 25 in the prompt?

let age = prompt('Enter your age');
console.log(typeof age);

medium

A. "string"

B. "number"

C. "undefined"

D. "object"

Solution

1. Step 1: Understand the type returned by prompt()

   The prompt() function always returns a string, even if the user types a number.

2. Step 2: Check the output of typeof age

   Since age holds a string, typeof age will be "string".

3. Final Answer:

   "string" -> Option A

4. Quick Check:

   prompt() returns string type [OK]

Hint: prompt() always returns string type, not number [OK]

Common Mistakes:

• Assuming prompt returns a number automatically
• Confusing typeof output with input value
• Expecting undefined or object type

4. Identify the error in this code snippet:

let number = prompt('Enter a number');
let result = number + 10;
console.log(result);

medium

A. The prompt() function is missing parentheses.

B. The input from prompt() is a string, so adding 10 concatenates instead of sums.

C. The variable 'number' is not declared.

D. console.log() cannot print variables.

Solution

1. Step 1: Check the type of input from prompt()

   The prompt() returns a string, so number is a string.

2. Step 2: Understand the effect of adding a number to a string

   Adding 10 to a string causes string concatenation, not numeric addition.

3. Final Answer:

   The input from prompt() is a string, so adding 10 concatenates instead of sums. -> Option B

4. Quick Check:

   String + number = concatenation [OK]

Hint: Convert prompt input to number before adding [OK]

Common Mistakes:

• Thinking prompt input is a number by default
• Ignoring type conversion before arithmetic
• Believing console.log can't print variables

5. How can you correctly get a number from the user using prompt() and add 10 to it? Choose the correct code.

hard

A. let num = prompt('Enter number') + 10;

B. let num = parseInt(prompt); num + 10;

C. let num = Number(prompt('Enter number')) + 10;

D. let num = prompt('Enter number'); num = num + 10;

Solution

1. Step 1: Convert prompt input to a number

   Use Number() or parseInt() to convert the string input to a number.

2. Step 2: Add 10 to the converted number

   After conversion, adding 10 performs numeric addition correctly.

3. Final Answer:

   let num = Number(prompt('Enter number')) + 10; -> Option C

4. Quick Check:

   Convert input to number before adding [OK]

Hint: Wrap prompt() with Number() to convert input [OK]

Common Mistakes:

• Adding number directly to prompt() string
• Forgetting to call prompt() as a function
• Using parseInt without parentheses