JavaScript Basics

JavaScript Basics Quiz

Welcome to the exciting world of JavaScript – the programming language that brings websites to life! From the moment you click a button, see an animated menu, or watch content update without refreshing the page, you're witnessing JavaScript in action. Originally created in just 10 days by Brendan Eich in 1995, JavaScript has evolved from a simple scripting language into one of the most powerful and versatile programming languages in the world. Today, it powers everything from interactive web pages and mobile apps to server-side applications and even desktop software.

What makes JavaScript truly special is its accessibility and immediate visual feedback. Unlike many programming languages that require complex setup processes, you can start writing JavaScript right in your web browser and see results instantly. Whether you're adding interactivity to a webpage, validating form inputs, creating dynamic content, or building complex web applications, JavaScript provides the tools to transform static HTML and CSS into engaging, responsive user experiences. Understanding JavaScript fundamentals – from variables and functions to events and DOM manipulation – opens the door to modern web development and countless career opportunities.

Ready to test your knowledge of JavaScript essentials? This quiz will challenge your understanding of core concepts including syntax, data types, control structures, and basic programming principles. Whether you're just starting your coding journey or refreshing your skills, let's see how well you've mastered the building blocks of this incredible language!

JavaScript Basics: Complete Study Guide

Table of Contents

1. Introduction to JavaScript
2. Getting Started
3. Variables and Data Types
4. Operators
5. Control Structures
6. Functions
7. Objects and Arrays
8. DOM Manipulation
9. Events
10. Error Handling
11. Best Practices
12. Practice Exercises

---

Introduction to JavaScript

What is JavaScript? 🚀

JavaScript is a high-level, interpreted programming language that makes web pages interactive and dynamic. Originally created for web browsers, it's now used for:

• Frontend Development (React, Vue, Angular)
• Backend Development (Node.js)
• Mobile Apps (React Native, Ionic)
• Desktop Applications (Electron)
• Game Development

Key Characteristics

Feature	Description
Dynamic Typing	Variables don't need explicit type declarations
Interpreted	No compilation step required
Event-Driven	Responds to user interactions
Object-Oriented	Supports objects and classes
Functional	Functions are first-class citizens

---

Getting Started

1. Setting Up Your Environment

Option 1: Browser Console

// Open browser (Chrome/Firefox)
// Press F12 → Console tab
console.log("Hello, JavaScript!");

Option 2: HTML File

<!DOCTYPE html>
<html>
<head>
    <title>My First JavaScript</title>
</head>
<body>
    <h1>JavaScript Basics</h1>
    
    <script>
        // Your JavaScript code here
        alert("Welcome to JavaScript!");
    </script>
</body>
</html>

Option 3: External JavaScript File

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>External JS</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

// script.js
console.log("External JavaScript is working!");

2. Your First JavaScript Program

// This is a comment
console.log("Hello, World!"); // Output to console
alert("Welcome!"); // Show popup
document.write("Text on webpage"); // Write to document

---

Variables and Data Types

Variable Declaration

JavaScript has three ways to declare variables:

// var - function-scoped (older way)
var name = "John";

// let - block-scoped (preferred for changeable values)
let age = 25;

// const - block-scoped, cannot be reassigned (preferred for constants)
const PI = 3.14159;

📊 Data Types

1. Primitive Types

// Number
let integer = 42;
let decimal = 3.14;
let negative = -10;

// String
let singleQuotes = 'Hello';
let doubleQuotes = "World";
let templateLiteral = `Hello ${name}!`; // String interpolation

// Boolean
let isActive = true;
let isComplete = false;

// Undefined
let undefinedVar;
console.log(undefinedVar); // undefined

// Null
let emptyValue = null;

// Symbol (ES6)
let symbol = Symbol('id');

2. Non-Primitive Types

// Object
let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

// Array
let colors = ["red", "green", "blue"];
let numbers = [1, 2, 3, 4, 5];

// Function
function greet() {
    return "Hello!";
}

Type Checking

console.log(typeof 42);          // "number"
console.log(typeof "Hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (known quirk)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"
console.log(typeof function(){}); // "function"

---

Operators

1. Arithmetic Operators

let a = 10, b = 3;

console.log(a + b);  // 13 (Addition)
console.log(a - b);  // 7  (Subtraction)
console.log(a * b);  // 30 (Multiplication)
console.log(a / b);  // 3.333... (Division)
console.log(a % b);  // 1  (Modulus/Remainder)
console.log(a ** b); // 1000 (Exponentiation)

// Increment/Decrement
let count = 5;
count++;    // count = 6 (post-increment)
++count;    // count = 7 (pre-increment)
count--;    // count = 6 (post-decrement)
--count;    // count = 5 (pre-decrement)

2. Assignment Operators

let x = 10;

x += 5;  // x = x + 5  → x = 15
x -= 3;  // x = x - 3  → x = 12
x *= 2;  // x = x * 2  → x = 24
x /= 4;  // x = x / 4  → x = 6
x %= 4;  // x = x % 4  → x = 2

3. Comparison Operators

let num1 = 5, num2 = "5";

// Equality (type coercion)
console.log(num1 == num2);   // true
console.log(num1 != num2);   // false

// Strict equality (no type coercion)
console.log(num1 === num2);  // false
console.log(num1 !== num2);  // true

// Relational
console.log(10 > 5);   // true
console.log(10 < 5);   // false
console.log(10 >= 10); // true
console.log(10 <= 5);  // false

4. Logical Operators

let isLoggedIn = true;
let hasPermission = false;

// AND (&&) - both conditions must be true
console.log(isLoggedIn && hasPermission); // false

// OR (||) - at least one condition must be true
console.log(isLoggedIn || hasPermission); // true

// NOT (!) - inverts the boolean value
console.log(!isLoggedIn); // false
console.log(!hasPermission); // true

---

Control Structures

1. Conditional Statements

if...else Statement

let score = 85;

if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else if (score >= 70) {
    console.log("Grade: C");
} else if (score >= 60) {
    console.log("Grade: D");
} else {
    console.log("Grade: F");
}

Ternary Operator

let age = 18;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

// Nested ternary (use sparingly)
let weather = "sunny";
let activity = weather === "sunny" ? "Go to beach" : 
               weather === "rainy" ? "Stay inside" : "Go for a walk";

switch Statement

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Start of work week");
        break;
    case "Tuesday":
    case "Wednesday":
    case "Thursday":
        console.log("Midweek");
        break;
    case "Friday":
        console.log("TGIF!");
        break;
    case "Saturday":
    case "Sunday":
        console.log("Weekend!");
        break;
    default:
        console.log("Invalid day");
}

2. Loops

for Loop

// Basic for loop
for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
}

// for...in loop (for object properties)
let person = {name: "John", age: 30, city: "NYC"};
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// for...of loop (for iterable values)
let fruits = ["apple", "banana", "orange"];
for (let fruit of fruits) {
    console.log(fruit);
}

while Loop

let count = 0;
while (count < 3) {
    console.log(`Count: ${count}`);
    count++;
}

do...while Loop

let num = 0;
do {
    console.log(`Number: ${num}`);
    num++;
} while (num < 3);

Loop Control

for (let i = 0; i < 10; i++) {
    if (i === 3) {
        continue; // Skip iteration when i is 3
    }
    if (i === 7) {
        break; // Exit loop when i is 7
    }
    console.log(i); // Prints: 0, 1, 2, 4, 5, 6
}

---

Functions

1. Function Declaration

// Function declaration
function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

2. Function Expression

// Function expression
const greet = function(name) {
    return `Hello, ${name}!`;
};

console.log(greet("Bob")); // "Hello, Bob!"

3. Arrow Functions (ES6)

// Arrow function
const greet = (name) => {
    return `Hello, ${name}!`;
};

// Shorter syntax for single expressions
const greet2 = name => `Hello, ${name}!`;

// Multiple parameters
const add = (a, b) => a + b;

// No parameters
const sayHello = () => "Hello!";

console.log(add(5, 3)); // 8

4. Function Parameters

// Default parameters
function greet(name = "Guest") {
    return `Hello, ${name}!`;
}

console.log(greet());        // "Hello, Guest!"
console.log(greet("John"));  // "Hello, John!"

// Rest parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

5. Scope

let globalVar = "I'm global";

function outerFunction() {
    let outerVar = "I'm in outer function";
    
    function innerFunction() {
        let innerVar = "I'm in inner function";
        console.log(globalVar); // Accessible
        console.log(outerVar);  // Accessible
        console.log(innerVar);  // Accessible
    }
    
    innerFunction();
    // console.log(innerVar); // Error: not accessible
}

outerFunction();