Running JavaScript in browser console - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Javascript

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

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

Awrite

Bprint

Cshow

Dlog

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.print or console.write which do not exist.

Trying to use alert instead of console.

Use console.log to print messages to the browser console.

2fill in blank

medium

Complete the code to declare a variable named 'count' with value 5 and log it.

Javascript

let count = [1];
console.log(count);

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

A5

B'5'

Cfive

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the number 5 inside quotes, making it a string.

Using an undefined variable name instead of a number.

Use the number 5 without quotes to assign a numeric value.

3fill in blank

hard

Fix the error in the code to correctly log the sum of 3 and 4.

Javascript

console.log(3 [1] 4);

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

A-

B+

C*

D/

Attempts:

3 left

💡 Hint

Common Mistakes

Using minus or other operators that do not add.

Leaving out the operator entirely.

The plus sign + adds two numbers together.

4fill in blank

hard

Fill both blanks to create an array of numbers and log its length.

Javascript

const numbers = [[1]];
console.log(numbers[2]);

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

A1, 2, 3

Blength

Csize

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using words like 'size' or 'count' which are not valid properties.

Not separating numbers with commas.

Arrays are created with comma-separated values inside brackets. Use .length to get the number of items.

5fill in blank

hard

Fill all three blanks to create an object with a name property and log the name.

Javascript

const person = { [1]: [2] };
console.log(person.[3]);

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

Aname

B'Alice'

Dage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different words for the property key and access.

Forgetting quotes around the string value.

Create an object with a property name set to 'Alice'. Access it with person.name.

Practice

1. What is the primary purpose of the browser console in JavaScript?

easy

A. To quickly run and test JavaScript code

B. To design website layouts

C. To write HTML code

D. To manage browser bookmarks

Solution

1. Step 1: Understand the browser console role

   The browser console is a tool inside web browsers used mainly for running and testing JavaScript code quickly. The other options relate to tasks like design, HTML, or bookmarks, which are not the console's main use.

2. Final Answer:

   To quickly run and test JavaScript code -> Option A

3. Quick Check:

   Console = run/test JS code [OK]

Hint: Console runs JavaScript code fast in browser [OK]

Common Mistakes:

• Confusing console with HTML editor
• Thinking console manages bookmarks
• Assuming console designs layouts

2. Which keyboard shortcut opens the browser console in most browsers?

easy

A. Ctrl + S

B. F12

C. Ctrl + P

D. Alt + F4

Solution

1. Step 1: Recall common browser shortcuts

   F12 is the standard shortcut to open developer tools, including the console, in most browsers. Ctrl + S saves files, Ctrl + P prints, and Alt + F4 closes windows, so they don't open the console.

2. Final Answer:

   F12 -> Option B

3. Quick Check:

   Open console = F12 [OK]

Hint: Press F12 to open console quickly [OK]

Common Mistakes:

• Using Ctrl + S thinking it opens console
• Confusing print shortcut Ctrl + P
• Mistaking Alt + F4 for console shortcut

3. What will be the output in the browser console after running this code?

console.log(2 + 3 * 4);

medium

A. 20

B. Undefined

C. 14

D. 24

Solution

1. Step 1: Apply operator precedence in JavaScript

   Multiplication (*) has higher priority than addition (+), so 3 * 4 = 12 is calculated first, then 2 + 12 = 14, which is the final result logged to the console.

2. Final Answer:

   14 -> Option C

3. Quick Check:

   2 + (3 * 4) = 14 [OK]

Hint: Multiply before add in expressions [OK]

Common Mistakes:

• Adding before multiplying
• Expecting string output
• Confusing output with undefined

4. You typed console.log('Hello World' in the browser console and got an error. What is the problem?

medium

A. Wrong quotes used

B. Missing semicolon

C. console.log is not a function

D. Missing closing parenthesis

Solution

1. Step 1: Check the syntax of the code

   The code has an opening parenthesis after console.log but no closing parenthesis at the end. JavaScript syntax rules require matching parentheses; quotes are correct, console.log is valid, and semicolon is optional.

2. Final Answer:

   Missing closing parenthesis -> Option D

3. Quick Check:

   Syntax error = missing ')' [OK]

Hint: Check matching parentheses in console code [OK]

Common Mistakes:

• Ignoring missing parenthesis error
• Blaming quotes instead of parentheses
• Thinking semicolon is mandatory here

5. You want to quickly check the value of variable z in the browser console after running this code:

let x = 10;
let y = 5;
let z = x + y;

Which command will show the value of z immediately?

medium

A. console.log(z);

B. print(z);

C. echo(z);

D. show(z);

Solution

1. Step 1: Recall how to display values in browser console

   console.log() is the standard JavaScript function to print values to the console. print(), echo(), and show() are not valid JavaScript functions in the browser console.

2. Final Answer:

   console.log(z); -> Option A

3. Quick Check:

   Show value = console.log() [OK]

Hint: Use console.log() to display values [OK]

Common Mistakes:

• Using print() instead of console.log()
• Trying echo() which is not JavaScript
• Assuming show() works in console