Why Basic input concepts (prompt overview) in Javascript? - Purpose & Use Cases

The Big Idea

What if your program could actually listen and respond to you like a friend?

The Scenario

Imagine you want to ask your friend their favorite color by sending a message and waiting for their reply. Doing this by writing a program without input concepts is like guessing their favorite color without asking--it just doesn't work well.

The Problem

Without a way to get input, your program can't interact with users. You'd have to change the code every time you want a different answer, which is slow and frustrating. It's like writing a letter, sending it, and waiting days for a reply instead of just talking.

The Solution

Using basic input concepts like prompt() in JavaScript lets your program ask questions and get answers instantly. This makes your program flexible and interactive, just like having a real conversation.

Before vs After

✗ Before

let favoriteColor = 'blue';
console.log('Your favorite color is ' + favoriteColor);

✓ After

let favoriteColor = prompt('What is your favorite color?');
console.log(`Your favorite color is ${favoriteColor}`);

What It Enables

It enables your program to talk with people and change what it does based on their answers.

Real Life Example

Think about a website asking for your name to greet you personally. Without input, it would just say 'Hello!' to everyone. With input, it can say 'Hello, Alice!' or 'Hello, Bob!' making it friendly and personal.

Key Takeaways

Input lets programs ask questions and get answers.

Without input, programs are fixed and can't adapt.

Using input makes programs interactive and user-friendly.

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