1.1 What is JavaScript

Example 1: Print a beginner message

This first program prints a message in the browser console.

// console.log() shows information in the browser console.
// This is useful when learning and debugging code.
console.log("Hello JavaScript beginner!");

Hello JavaScript beginner!

Explanation: The text inside quotes is a string. JavaScript sends that string to the console.

Example 2: Change page text

This example changes text on the web page using JavaScript.

// document.querySelector() finds the first element that matches the selector.
// Here it finds the element with id="message".
const messageBox = document.querySelector("#message");

// textContent changes the visible text inside that element.
messageBox.textContent = "JavaScript changed this text!";

JavaScript changed this text!

Explanation: JavaScript can find an HTML element and update what the user sees without reloading the page.

Example 3: React to a button click

This example runs code only when the user clicks a button.

// Find the button by its id.
const button = document.querySelector("#learnBtn");

// Find the output area by its id.
const output = document.querySelector("#output");

// addEventListener() waits for an event, such as a click.
button.addEventListener("click", function () {
  // This line runs after the button is clicked.
  output.textContent = "Button clicked! JavaScript is interactive.";
});

Button clicked! JavaScript is interactive.

Explanation: JavaScript is event-driven in the browser, meaning it can respond to user actions like clicks, typing, and form submissions.

1.2 History of JavaScript

Example 1: Old-style browser message

Early JavaScript was often used for simple messages and small page actions.

// alert() opens a popup message in the browser.
// It was common in older beginner examples.
alert("Welcome to my web page!");

A popup appears: Welcome to my web page!

Explanation: Early JavaScript often focused on small browser interactions like alerts, buttons, and form checks.

Example 2: Modern console practice

Modern beginners usually practice safely in the console first.

// Store a year in a variable.
const createdYear = 1995;

// Print a sentence using the variable.
console.log("JavaScript first appeared in " + createdYear + ".");

JavaScript first appeared in 1995.

Explanation: Variables let us store information and reuse it in messages or calculations.

Example 3: Modern template literal

Modern JavaScript gives cleaner ways to build strings.

// Template literals use backticks.
// ${} places a variable directly inside the text.
const language = "JavaScript";
const use = "interactive websites";
console.log(`${language} is used for ${use}.`);

JavaScript is used for interactive websites.

Explanation: Template literals are easier to read than joining many strings with plus signs.

1.3 ECMAScript Standards

Example 1: Using let and const

ES6 introduced block-scoped variables using let and const.

// const is used when the value should not be reassigned.
const courseName = "JavaScript";

// let is used when the value may change later.
let lessonNumber = 1;

console.log(courseName);
console.log(lessonNumber);

JavaScript
1

Explanation: Modern JavaScript usually prefers const first and let when a variable needs to change.

Example 2: Arrow function

Arrow functions are a modern shorter way to write functions.

// This arrow function receives a name.
// It returns a greeting message.
const greet = (name) => {
  return `Hello, ${name}!`;
};

console.log(greet("Majid"));

Hello, Majid!

Explanation: Arrow functions are common in modern JavaScript, especially in React and array methods.

Example 3: Array includes

Modern JavaScript added helpful methods like includes().

// Create a list of skills.
const skills = ["HTML", "CSS", "JavaScript"];

// includes() checks whether a value exists in the array.
console.log(skills.includes("JavaScript"));
console.log(skills.includes("Python"));

true
false

Explanation: ECMAScript updates add useful features that make code shorter and clearer.

1.4 JavaScript Engines

Example 1: Engine runs expressions

The engine evaluates expressions and returns results.

// The JavaScript engine calculates this expression.
const total = 10 + 5 * 2;

// Multiplication happens before addition.
console.log(total);

20

Explanation: The engine follows JavaScript rules, including operator precedence.

Example 2: Engine reads functions

The engine stores functions and runs them when called.

// Define a function named add.
function add(a, b) {
  // Return the sum of the two numbers.
  return a + b;
}

// Call the function and print the result.
console.log(add(7, 3));

10

Explanation: The engine does not run the inside of the function until the function is called.

Example 3: Engine handles errors

When code has a problem, the engine reports an error.

// try lets us test code that may fail.
try {
  // This variable was never created.
  console.log(notCreatedYet);
} catch (error) {
  // If an error happens, this message is printed.
  console.log("Error found: variable does not exist");
}

Error found: variable does not exist

Explanation: JavaScript engines help developers find problems by giving error messages.

1.5 JavaScript Ecosystem

Example 1: Use a library idea

This code shows the idea of using reusable helper functions like libraries do.

// A helper function is reusable code.
function formatPrice(amount) {
  // toFixed(2) keeps two decimal places.
  return "$" + amount.toFixed(2);
}

console.log(formatPrice(25));
console.log(formatPrice(9.5));

$25.00
$9.50

Explanation: Libraries are collections of reusable functions, components, or tools.

Example 2: Package-like object

This example groups related tools inside one object.

// This object acts like a tiny utility package.
const mathTools = {
  double(number) {
    return number * 2;
  },
  square(number) {
    return number * number;
  }
};

console.log(mathTools.double(6));
console.log(mathTools.square(6));

12
36

Explanation: JavaScript projects often organize helper tools into modules and packages.

1.6 Browser Support

Example 1: Check feature exists

This example checks whether localStorage is available.

// The "in" operator checks if a feature exists on an object.
if ("localStorage" in window) {
  console.log("localStorage is supported");
} else {
  console.log("localStorage is not supported");
}

localStorage is supported

Explanation: Feature checks help avoid errors in browsers that do not support something.

Example 2: Safe optional check

This example safely checks for a browser API before using it.

// navigator.clipboard may not be available in every situation.
if (navigator.clipboard) {
  console.log("Clipboard API may be available");
} else {
  console.log("Clipboard API is not available here");
}

Clipboard API may be available

Explanation: Good code checks support before using newer browser APIs.

1.7 JavaScript Applications

Example 1: Simple calculator app logic

This example shows application logic for calculating a total.

// Store item prices.
const book = 15;
const pen = 3;
const tax = 0.13;

// Calculate subtotal and total.
const subtotal = book + pen;
const total = subtotal + subtotal * tax;

console.log("Subtotal: $" + subtotal);
console.log("Total: $" + total.toFixed(2));

Subtotal: $18
Total: $20.34

Explanation: JavaScript is often used to calculate totals in shopping carts and business tools.

Example 2: Simple game logic

This example checks whether a player guessed the correct number.

// Secret number for the game.
const secretNumber = 7;

// Player guess.
const guess = 7;

// Compare the guess with the secret number.
if (guess === secretNumber) {
  console.log("You win!");
} else {
  console.log("Try again.");
}

You win!

Explanation: JavaScript can control game rules, scoring, levels, and user actions.

1.8 Modern JavaScript

Example 1: Destructuring

Destructuring takes values out of objects or arrays easily.

// Create a user object.
const user = { name: "Sara", level: "Beginner" };

// Take name and level from the object.
const { name, level } = user;

console.log(name);
console.log(level);

Sara
Beginner

Explanation: Destructuring makes code shorter when reading values from objects.

Example 2: Map array method

map() creates a new array by changing each item.

// Create numbers.
const numbers = [1, 2, 3];

// Double every number and store the new array.
const doubled = numbers.map((number) => number * 2);

console.log(doubled);

[2, 4, 6]

Explanation: Modern JavaScript uses array methods instead of writing many manual loops.

1.9 Career Paths

Example 1: Front-end task

A front-end developer often updates what users see on a page.

// Product data could come from a database or API.
const productName = "Math Course";
const price = 25;

// Build text for the user interface.
console.log(`Product: ${productName}`);
console.log(`Price: $${price}`);

Product: Math Course
Price: $25

Explanation: Front-end developers use JavaScript to display data and respond to users.

Example 2: Back-end style task

A back-end developer often prepares data for an app.

// Fake student data.
const students = ["Ali", "Sara", "Noah"];

// Create a response object like an API might send.
const response = {
  count: students.length,
  data: students
};

console.log(response.count);
console.log(response.data);

3
["Ali", "Sara", "Noah"]

Explanation: Back-end JavaScript with Node.js often prepares JSON data for websites and apps.

1.10 Learning Resources

Example 1: Create a learning checklist

This example stores learning steps in an array.

// A beginner JavaScript learning path.
const steps = [
  "Learn variables",
  "Practice functions",
  "Build small projects"
];

// Print each step with its number.
steps.forEach((step, index) => {
  console.log(`${index + 1}. ${step}`);
});

1. Learn variables
2. Practice functions
3. Build small projects

Explanation: A checklist helps beginners study in order and track progress.

Example 2: Practice every day

This example creates a simple study reminder.

// Store the number of practice minutes.
const minutesPerDay = 30;

// Make a reminder message.
const reminder = `Practice JavaScript for ${minutesPerDay} minutes today.`;

console.log(reminder);

Practice JavaScript for 30 minutes today.

Explanation: Small daily practice is better than trying to learn everything in one day.