Writing first JavaScript program - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to print 'Hello, world!' to the console.

Javascript

console.[1]('Hello, world!');

Drag options to blanks, or click blank then click option'

Awrite

Bshow

Cprint

Dlog

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'print' instead of 'log' causes an error because 'print' is not a console method.

Using 'write' or 'show' are not valid console methods.

In JavaScript, console.log() is used to print messages to the console.

2fill in blank

medium

Complete the code to declare a variable named greeting with the value 'Hello'.

Javascript

let [1] = 'Hello';

Drag options to blanks, or click blank then click option'

Agreeting

Bmessage

Ctext

Dhello

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than 'greeting' does not meet the task requirement.

The variable name should be greeting as specified.

3fill in blank

hard

Fix the error in the code to correctly display the sum of 5 and 3.

Javascript

console.log(5 [1] 3);

Drag options to blanks, or click blank then click option'

A+

B-

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-' subtracts numbers instead of adding.

Using '*' or '/' performs multiplication or division, not addition.

The plus sign + adds two numbers together in JavaScript.

4fill in blank

hard

Fill both blanks to create a function named greet that prints 'Hi!' when called.

Javascript

function [1]() {
  console.[2]('Hi!');
}

Drag options to blanks, or click blank then click option'

Agreet

Bhello

Clog

Dprint

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hello' as function name instead of 'greet'.

Using 'print' instead of 'log' causes an error.

The function name should be greet and console.log prints the message.

5fill in blank

hard

Fill both blanks to create an arrow function named sayHello that returns 'Hello!'.

Javascript

const [1] = () => {
  [2] 'Hello!';
};

Drag options to blanks, or click blank then click option'

AsayHello

Breturn

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'console.log' instead of 'return' does not return the value.

Adding extra characters after the string causes syntax errors.

The arrow function is named sayHello, uses return to send back the string, and no extra symbols after the string.

Practice

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

easy

A. It changes the background color of the page.

B. It creates a pop-up alert on the screen.

C. It stops the program from running.

D. It shows messages in the browser console.

Solution

1. Step 1: Understand the purpose of console.log()

   This function is used to display messages or values in the browser's console, which helps developers see output or debug.

2. Step 2: Compare with other options

   Options A, B, and D describe different actions that console.log() does not perform.

3. Final Answer:

   It shows messages in the browser console. -> Option D

4. Quick Check:

   console.log() shows messages [OK]

Hint: Remember: console.log prints messages to the console [OK]

Common Mistakes:

• Thinking console.log creates alerts
• Confusing console.log with styling commands
• Assuming console.log stops the program

2. Which of the following is the correct syntax to print "Hello, World!" in JavaScript?

easy

A. print("Hello, World!");

B. console.log("Hello, World!");

C. echo "Hello, World!";

D. System.out.println("Hello, World!");

Solution

1. Step 1: Identify JavaScript syntax for output

   JavaScript uses console.log() to print messages to the console.

2. Step 2: Check other options for language mismatch

   A is Python style, B is Java style, C is PHP style, so they are incorrect for JavaScript.

3. Final Answer:

   console.log("Hello, World!"); -> Option B

4. Quick Check:

   JavaScript output uses console.log() [OK]

Hint: Use console.log() to print messages in JavaScript [OK]

Common Mistakes:

• Using print() instead of console.log()
• Confusing JavaScript with other languages
• Missing parentheses or semicolon

3. What will be the output of the following code?

console.log('Hi');
console.log('There');

medium

A. Hi
There

B. Hi There

C. Hi\nThere

D. HiThere

Solution

1. Step 1: Understand console.log behavior

   Each console.log() prints its message on a new line in the console.

2. Step 2: Analyze the output lines

   The first prints "Hi", then the second prints "There" on the next line, so output is two lines: "Hi" then "There".

3. Final Answer:

   Hi There -> Option A

4. Quick Check:

   console.log prints each message on a new line [OK]

Hint: Each console.log prints on a new line automatically [OK]

Common Mistakes:

• Thinking console.log joins messages on one line
• Confusing \n as literal text instead of newline
• Ignoring line breaks between calls

4. Find the error in this JavaScript code:

console.log('Hello World')

medium

A. console.log is misspelled

B. Incorrect quotes used

C. No error, code is correct

D. Missing semicolon at the end

Solution

1. Step 1: Check syntax correctness

   The code uses correct function name, quotes, and parentheses.

2. Step 2: Consider JavaScript semicolon rules

   Semicolons are optional at the end of statements in JavaScript, so missing semicolon is not an error.

3. Final Answer:

   No error, code is correct -> Option C

4. Quick Check:

   JavaScript allows optional semicolons [OK]

Hint: Semicolons are optional but recommended; no error here [OK]

Common Mistakes:

• Thinking missing semicolon causes error
• Confusing quote types as error
• Assuming console.log is misspelled

5. You want to write a JavaScript program that prints your name and age on separate lines. Which code will do this correctly?

hard

A. console.log('Name: John'); console.log('Age: 25');

B. console.log('Name: John\nAge: 25');

C. console.log('Name: John' + 'Age: 25');

D. console.log('Name: John Age: 25');

Solution

1. Step 1: Understand printing on separate lines

   Using two console.log() calls prints each message on its own line.

2. Step 2: Check other options for line breaks

   console.log('Name: John\nAge: 25'); uses \n which creates a newline in the output; console.log('Name: John' + 'Age: 25'); joins to 'Name: JohnAge: 25' on one line; console.log('Name: John Age: 25'); prints all on one line.

3. Final Answer:

   console.log('Name: John'); console.log('Age: 25'); -> Option A

4. Quick Check:

   Separate console.log calls print on separate lines [OK]

Hint: Use separate console.log() for each line [OK]

Common Mistakes:

• Using + without spaces causing joined text
• Thinking \n creates a newline (prints literal \n)
• Printing all info in one console.log without breaks