Modern JavaScript Study Guide for Beginners
A beginner-friendly course focused on modern JavaScript used in today's browsers.
Lesson 1: JavaScript Basics
JavaScript adds interactivity to web pages.
Code Example:
const message = "Hello JavaScript!";
[Link](message);
Line by Line:
1. const creates a constant variable.
2. message stores text.
3. [Link]() displays it in the browser console.
Practice Task:
Create a variable called greeting and print it.
Mini Quiz:
What does [Link]() do?
Lesson 2: Variables and Data Types
Variables store information.
Code Example:
let age = 18;
const name = "David";
const isStudent = true;
Line by Line:
1. let creates a variable that can change.
2. const creates a variable that cannot be reassigned.
3. Numbers, strings, and booleans are common data types.
Practice Task:
Create variables for your name, age, and favorite color.
Mini Quiz:
What is the difference between let and const?
Lesson 3: Strings and Numbers
Strings store text while numbers store numeric values.
Code Example:
const user = "David";
const score = 95;
[Link](`Hello ${user}, your score is ${score}`);
Line by Line:
1. user stores text.
2. score stores a number.
3. Template literals combine values inside a string.
Practice Task:
Display your name and age using a template literal.
Mini Quiz:
What symbol is used for template literals?
Lesson 4: Arrays and Array Methods
Arrays store multiple values.
Code Example:
const fruits = ["Apple", "Orange", "Mango"];
const upper = [Link](fruit => [Link]());
Line by Line:
1. An array is created.
2. map() loops through items.
3. toUpperCase() converts text to uppercase.
Practice Task:
Create an array of three hobbies and display them.
Mini Quiz:
What does map() return?
Lesson 5: Functions
Functions group reusable code.
Code Example:
const greet = name => {
return `Hello ${name}`;
};
[Link](greet("David"));
Line by Line:
1. Arrow function is created.
2. name is the parameter.
3. return sends back a value.
Practice Task:
Create a function that doubles a number.
Mini Quiz:
What keyword sends a value back from a function?
Lesson 6: Objects and Methods
Objects store related data.
Code Example:
const user = {
name: "David",
greet() {
return `Hi, I am ${[Link]}`;
}
};
Line by Line:
1. Object created with properties.
2. greet is a method.
3. [Link] accesses the object's name.
Practice Task:
Create an object representing a car.
Mini Quiz:
What is a method?
Lesson 7: Loops and Conditionals
Loops repeat code. Conditionals make decisions.
Code Example:
for (let i = 1; i <= 3; i++) {
[Link](i);
}
const age = 18;
if (age >= 18) {
[Link]("Adult");
}
Line by Line:
1. for loop repeats code.
2. if checks a condition.
3. Code runs only when condition is true.
Practice Task:
Print numbers 1 to 10.
Mini Quiz:
What does an if statement do?
Lesson 8: DOM and Event Handling
The DOM represents a web page. Events react to user actions.
Code Example:
const button = [Link]("button");
[Link]("click", () => {
alert("Button clicked!");
});
Line by Line:
1. querySelector finds an element.
2. addEventListener listens for clicks.
3. Arrow function runs when clicked.
Practice Task:
Create a button that changes page text when clicked.
Mini Quiz:
What does addEventListener do?
