Why JavaScript is widely used - See It in Action

Why JavaScript is widely used

📖 Scenario: Imagine you want to build a simple webpage that shows why JavaScript is popular. You will create a small program that lists reasons why JavaScript is widely used.

🎯 Goal: Build a JavaScript program that stores reasons why JavaScript is widely used, then displays them one by one.

📋 What You'll Learn

Create an array called reasons with 3 exact reasons as strings

Create a variable called count and set it to 0

Use a for loop with variable i to go through reasons

Print each reason using console.log

💡 Why This Matters

🌍 Real World

JavaScript is used everywhere on the web to make websites interactive and dynamic.

💼 Career

Knowing how to work with arrays and loops in JavaScript is essential for web development jobs.

1

Create the reasons array

Create an array called reasons with these exact strings: 'Runs in browsers', 'Easy to learn', 'Large community'

Javascript

// Create the array called reasons with 3 strings
// Your code here

Hint

Use square brackets [] to create an array and separate strings with commas.

2

Add a counter variable

Create a variable called count and set it to 0

Javascript

const reasons = ['Runs in browsers', 'Easy to learn', 'Large community'];
// Create count variable and set to 0
// Your code here

Hint

Use let to create a variable that can change later.

3

Loop through the reasons

Use a for loop with variable i to go through reasons array

Javascript

const reasons = ['Runs in browsers', 'Easy to learn', 'Large community'];
let count = 0;
// Use for loop with i to go through reasons
// Your code here

Hint

Use reasons.length to get the number of items in the array.

4

Print each reason

Inside the for loop, use console.log to print each reason from reasons using i as the index

Javascript

const reasons = ['Runs in browsers', 'Easy to learn', 'Large community'];
let count = 0;
for (let i = 0; i < reasons.length; i++) {
    count++;
    // Print the reason at index i
    // Your code here
}

Hint

Use console.log(reasons[i]) to print each reason.

Practice

1. Why is JavaScript considered essential for making websites interactive?

easy

A. Because it styles the webpage with colors and fonts

B. Because it creates static HTML pages

C. Because it stores data permanently on the server

D. Because it runs in the browser and can change webpage content dynamically

Solution

1. Step 1: Understand JavaScript's role in browsers

   JavaScript runs inside web browsers and can change webpage content without reloading.

2. Step 2: Identify how interactivity is achieved

   By changing content dynamically, JavaScript makes websites interactive, unlike static HTML or CSS.

3. Final Answer:

   Because it runs in the browser and can change webpage content dynamically -> Option D

4. Quick Check:

   JavaScript = dynamic webpage content [OK]

Hint: JavaScript changes webpage content live in browser [OK]

Common Mistakes:

• Confusing JavaScript with CSS styling
• Thinking JavaScript only runs on servers
• Believing JavaScript creates static pages

2. Which of the following is the correct way to write a JavaScript function that alerts 'Hello'?

easy

A. function sayHello[] { alert('Hello'); }

B. def sayHello() { alert('Hello'); }

C. function sayHello() { alert('Hello'); }

D. func sayHello() alert('Hello')

Solution

1. Step 1: Recall JavaScript function syntax

   JavaScript functions start with the keyword 'function', followed by name and parentheses.

2. Step 2: Check each option's syntax

   function sayHello() { alert('Hello'); } uses correct syntax with parentheses and curly braces; others use wrong keywords or brackets.

3. Final Answer:

   function sayHello() { alert('Hello'); } -> Option C

4. Quick Check:

   JavaScript function syntax = function sayHello() { alert('Hello'); } [OK]

Hint: JavaScript functions use 'function' keyword and parentheses [OK]

Common Mistakes:

• Using Python or other language keywords
• Using square brackets instead of parentheses
• Omitting curly braces

3. What will be the output of this code?

console.log(typeof window);

medium

A. 'object'

B. ReferenceError

C. 'function'

D. 'undefined'

Solution

1. Step 1: Understand the 'window' object in browsers

   'window' is a global object representing the browser window and environment.

2. Step 2: Check the typeof operator result

   typeof window returns 'object' because window is an object in JavaScript.

3. Final Answer:

   'object' -> Option A

4. Quick Check:

   typeof window = 'object' [OK]

Hint: 'window' is a browser object, so typeof is 'object' [OK]

Common Mistakes:

• Thinking 'window' is undefined outside browsers
• Confusing 'object' with 'function'
• Expecting a ReferenceError

4. Find the error in this JavaScript code snippet:

let count = 0;
if (count = 5) {
  console.log('Count is five');
}

medium

A. Missing semicolon after let declaration

B. Using assignment '=' instead of comparison '==' or '===' in if condition

C. console.log syntax is incorrect

D. Variable 'count' is not declared

Solution

1. Step 1: Analyze the if condition

   The condition uses '=' which assigns 5 to count instead of comparing values.

2. Step 2: Identify correct comparison operator

   To compare, '==' or '===' should be used, not '=' which is assignment.

3. Final Answer:

   Using assignment '=' instead of comparison '==' or '===' in if condition -> Option B

4. Quick Check:

   Use '==' or '===' for comparison, not '=' [OK]

Hint: Use '==' or '===' for comparison, not '=' [OK]

Common Mistakes:

• Confusing assignment '=' with equality check
• Ignoring missing semicolons (optional in JS)
• Assuming console.log syntax is wrong

5. JavaScript can be used on both frontend and backend. Which technology allows JavaScript to run on the server side?

hard

A. Node.js

B. React

C. Angular

D. jQuery

Solution

1. Step 1: Identify frontend and backend roles

   Frontend runs in browsers; backend runs on servers handling data and logic.

2. Step 2: Recognize server-side JavaScript technology

   Node.js is a runtime that allows JavaScript to run on servers, unlike React, Angular, or jQuery which are frontend libraries/frameworks.

3. Final Answer:

   Node.js -> Option A

4. Quick Check:

   Server-side JavaScript = Node.js [OK]

Hint: Node.js runs JavaScript on servers, others are frontend tools [OK]

Common Mistakes:

• Confusing frontend frameworks with backend runtime
• Thinking jQuery runs on servers
• Assuming React or Angular run backend code