Running JavaScript in browser console - Mini Project: Build & Apply

Running JavaScript in Browser Console

📖 Scenario: You want to quickly test some JavaScript code in your web browser without creating a file. The browser console lets you type and run JavaScript commands directly on any webpage.

🎯 Goal: You will learn how to open the browser console, create a simple variable, write a small function, and print output to the console.

📋 What You'll Learn

Open the browser console using keyboard shortcuts

Create a variable called greeting with the value 'Hello, world!'

Create a function called sayHello that returns the greeting variable

Use console.log to print the result of calling sayHello()

💡 Why This Matters

🌍 Real World

Developers often use the browser console to quickly test code snippets or debug web pages without creating files.

💼 Career

Knowing how to use the browser console is essential for web developers and testers to inspect and interact with live web pages.

1

Open the browser console and create a variable

Open your browser console. Then create a variable called greeting and set it to the string 'Hello, world!'.

Javascript

// Your code here
// Create a variable called greeting and set it to 'Hello, world!'

Hint

Use const greeting = 'Hello, world!'; to create the variable.

2

Create a function that returns the greeting

Create a function called sayHello that returns the variable greeting.

Javascript

const greeting = 'Hello, world!';

// Your code here
// Create a function sayHello that returns greeting

Hint

Define the function with function sayHello() { return greeting; }.

3

Print the greeting using console.log

Use console.log to print the result of calling sayHello().

Javascript

const greeting = 'Hello, world!';

function sayHello() {
    return greeting;
}

// Your code here
// Print the result of sayHello() using console.log

Hint

Use console.log(sayHello()); to print the greeting.

4

Run all code together in the browser console

Copy all the code below and paste it into your browser console. Then press Enter to run it and see the output.

Code:
const greeting = 'Hello, world!';
function sayHello() {
return greeting;
}
console.log(sayHello());

Javascript

const greeting = 'Hello, world!';

function sayHello() {
    return greeting;
}

console.log(sayHello());

// Paste all code into the browser console and run

Hint

Open the browser console (F12 or Ctrl+Shift+I), paste all code, and press Enter.

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