Scribd
Upload
14 views77 pages

Complete Javascript + Web Development Mastery Course: From Zero To Beyond Mastery

The document outlines a comprehensive JavaScript and web development course designed to take learners from beginner to mastery. It covers foundational knowledge, JavaScript fundamentals, advanced concepts, browser interactions, and includes practical projects and assessments. Each phase contains chapters that detail specific topics, exercises, and best practices for effective learning.

Uploaded by

Saravanan K G
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views77 pages

Complete Javascript + Web Development Mastery Course: From Zero To Beyond Mastery

The document outlines a comprehensive JavaScript and web development course designed to take learners from beginner to mastery. It covers foundational knowledge, JavaScript fundamentals, advanced concepts, browser interactions, and includes practical projects and assessments. Each phase contains chapters that detail specific topics, exercises, and best practices for effective learning.

Uploaded by

Saravanan K G
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 77

Complete JavaScript + Web

Development Mastery Course


From Zero to Beyond Mastery
Welcome to the most comprehensive JavaScript course ever created! This course will
take you from knowing absolutely nothing about computers to becoming a
JavaScript master who can build amazing websites and web applications.

Table of Contents
Phase 1: Foundation Knowledge (Chapters 1-3)

1. What is a Computer and the Internet?


2. Introduction to Web Pages (HTML & CSS Basics)
3. What is JavaScript and Why Do We Need It?

Phase 2: JavaScript Fundamentals (Chapters 4-12)

1. Setting Up Your Development Environment


2. Your First JavaScript Code
3. Variables and Data Storage
4. Data Types - Understanding Different Kinds of Information
5. Operators - Making JavaScript Do Math and Logic
6. Control Flow - Making Decisions in Code
7. Functions - Creating Reusable Code Blocks
8. Arrays - Storing Lists of Information
9. Objects - Organizing Related Information

Phase 3: Advanced JavaScript Concepts (Chapters 13-20)

1. Scope and Closures - Understanding Where Variables Live


2. Hoisting - How JavaScript Reads Your Code
3. The this Keyword - Understanding Context
4. Prototypes and Inheritance - How Objects Share Properties
5. ES6+ Modern JavaScript Features
6. Error Handling - Dealing with Problems
7. Asynchronous JavaScript - Handling Time and Waiting
8. Modules - Organizing Your Code
Phase 4: JavaScript in the Browser (Chapters 21-27)

1. The Document Object Model (DOM)


2. Selecting and Manipulating Elements
3. Events - Making Your Website Interactive
4. Forms - Getting User Input
5. Timing Functions and Animations
6. Browser Storage - Remembering User Data
7. Best Practices for Web Development

Phase 5: Master Level Projects and Assessment (Chapters 28-30)

1. Building Real Applications


2. Advanced Techniques and Performance
3. Final Assessment and Next Steps

Phase 1: Foundation Knowledge


Chapter 1: What is a Computer and the Internet?

What is a Computer?

A computer is like a very smart calculator that can follow instructions. Just like how
you might follow a recipe to bake cookies, a computer follows instructions called
"code" to do things.

Key Parts of a Computer: - Screen (Monitor): Where you see things - Keyboard:
Where you type - Mouse: How you point and click - Brain (CPU): The part that
thinks and follows instructions - Memory (RAM): Where the computer remembers
things temporarily - Storage (Hard Drive): Where the computer saves things
permanently

What is the Internet?

The Internet is like a giant library where computers can talk to each other and share
information. When you visit a website, your computer is asking another computer
(called a "server") to send you a web page.

Think of it like this: - You want to read a book (website) - You ask the librarian
(server) for the book - The librarian finds the book and gives it to you - You can now
read the book on your computer
What is a Web Browser?

A web browser is a special program that helps you look at websites. It's like a window
that shows you web pages. Common browsers include: - Chrome - Firefox - Safari -
Edge

Practice Exercise 1.1: Open your web browser and visit at least 3 different websites.
Notice how each one looks different but they all work in your browser.

Chapter 2: Introduction to Web Pages (HTML & CSS Basics)

What Makes a Web Page?

Every web page is made of three main parts: 1. HTML - The structure (like the
skeleton of a house) 2. CSS - The style (like the paint and decorations) 3. JavaScript
- The behavior (like the lights and doors that work)

HTML - The Structure

HTML stands for "HyperText Markup Language." It's like the blueprint for a web
page. It tells the browser what parts go where.

Basic HTML Example:

html
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is my first paragraph.</p>
<button>Click Me!</button>
</body>
</html>

CSS - The Style

CSS stands for "Cascading Style Sheets." It makes web pages look pretty by
controlling colors, sizes, and positions.

Basic CSS Example:


css
h1 {
color: blue;
font-size: 24px;
}

p {
color: green;
}

button {
background-color: yellow;
padding: 10px;
}

How HTML and CSS Work Together

HTML creates the parts, and CSS makes them look good. But neither one can make
the page interactive - that's where JavaScript comes in!

Practice Exercise 2.1: Create a simple HTML file with a heading, a paragraph, and a
button. Don't worry about making it work yet - we'll learn that with JavaScript!

Chapter 3: What is JavaScript and Why Do We Need It?

What is JavaScript?

JavaScript is a programming language that makes web pages interactive. It's what
makes buttons work, forms submit, and websites respond to what you do.

JavaScript is NOT Java! They're completely different languages that just happen to
have similar names.

Why Do We Need JavaScript?

Without JavaScript, websites would be like books - you could read them, but you
couldn't interact with them. JavaScript lets you: - Click buttons and have things
happen - Fill out forms and submit them - Play games - Chat with friends - Watch
videos - And much more!
A Brief History of JavaScript

• 1995: JavaScript was created by Brendan Eich in just 10 days


• 1997: JavaScript became an official standard
• 2000s: JavaScript became more popular with websites like Gmail
• 2010s: JavaScript started being used for mobile apps and even server programs
• Today: JavaScript is one of the most popular programming languages in the
world

JavaScript vs Other Programming Languages

• Python: Great for beginners, often used for science and data
• Java: Used for big business applications
• C++: Used for video games and system programming
• JavaScript: The only language that runs in web browsers by default

Practice Exercise 3.1: Think of 5 websites you use regularly. For each one, write
down 3 things that happen when you click or interact with the page. All of those
interactions are powered by JavaScript!

Phase 2: JavaScript Fundamentals


Chapter 4: Setting Up Your Development Environment

What is a Development Environment?

A development environment is like a workshop where you build things. For


JavaScript, you need: 1. A text editor to write code 2. A web browser to test your code
3. Developer tools to debug your code

Text Editors for Beginners

Recommended editors: - Visual Studio Code (VS Code): Free, powerful, and
beginner-friendly - Sublime Text: Fast and simple - Atom: Easy to use with lots of
plugins

Setting up VS Code: 1. Download VS Code from code.visualstudio.com 2. Install


these helpful extensions: - Live Server - Prettier - ES7+ React/Redux/React-Native
snippets
Browser Developer Tools

Every browser has built-in developer tools. To open them: - Chrome/Edge: Press
F12 or Ctrl+Shift+I - Firefox: Press F12 or Ctrl+Shift+I - Safari: Press Cmd+Option+I

The Console Tab: This is where you can type JavaScript code and see it run
immediately!

Your First JavaScript Setup

1. Create a new folder called "JavaScript-Learning"


2. Create a file called "index.html"
3. Create a file called "script.js"
4. Open VS Code and open your folder

Basic HTML Template:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning JavaScript</title>
</head>
<body>
<h1>My JavaScript Learning Journey</h1>

<script src="script.js"></script>
</body>
</html>

Practice Exercise 4.1: Set up your development environment and create your first
HTML file. Open it in your browser and make sure you can see the heading.

Practice Exercise 4.2: Open your browser's developer tools and find the Console
tab. Type 2 + 2 and press Enter. You just ran your first JavaScript code!

Chapter 5: Your First JavaScript Code

Writing Your First JavaScript

Let's start with the most traditional first program: "Hello, World!"
In your script.js file:

javascript
console.log("Hello, World!");

What does this do? - console.log() is a function that displays text in the browser's
console - The text inside the parentheses and quotes is what gets displayed

Understanding the Console

The console is like a communication channel between your code and you. It's where:
- Your program can show you messages - You can see error messages - You can test
small pieces of code

Comments in JavaScript

Comments are notes you write in your code that don't run. They help you remember
what your code does.

javascript
// This is a single-line comment
console.log("Hello, World!"); // This comment is at the end of a line

/*
This is a multi-line comment
You can write multiple lines here
Very useful for longer explanations
*/

Basic JavaScript Syntax Rules

1. Case Sensitive: console.log is different from Console.Log


2. Semicolons: End statements with semicolons (;)
3. Quotes: Use quotes around text (" or ')
4. Parentheses: Functions need parentheses ()
5. Brackets: Use {} to group code together

Different Ways to Run JavaScript

1. In the Console:
javascript
console.log("This runs in the console");

2. Alert Boxes:

javascript
alert("This shows a popup message");

3. Writing to the Web Page:

javascript
document.write("This writes directly to the page");

4. Changing HTML Content:

javascript
document.getElementById("demo").innerHTML = "This changes HTML content";

Practice Exercise 5.1: Hello Messages

Create a script that displays three different messages: 1. One in the console 2. One
in an alert box 3. One written to the page

Practice Exercise 5.2: Personal Introduction

Write a script that introduces you with your name, age, and favorite color using
console.log.

Practice Exercise 5.3: Comment Practice

Take your introduction script and add comments explaining what each line does.

Mini-Quiz 5.1

1. What does console.log() do?


2. What are the two types of comments in JavaScript?
3. True or False: console.log and Console.Log are the same thing.
4. What character do you use to end a statement in JavaScript?
Chapter 6: Variables and Data Storage

What are Variables?

Variables are like boxes where you can store information. You can put things in the
box, look at what's in the box, and even change what's in the box.

Think of variables like: - A labeled box where you store toys - A parking space with
a number - A locker at school with your name on it

Creating Variables in JavaScript

There are three ways to create variables:

1. var (the old way):

javascript
var myName = "Alex";
var myAge = 25;

2. let (the new way for changeable variables):

javascript
let myName = "Alex";
let myAge = 25;

3. const (for variables that never change):

javascript
const myBirthday = "January 1st";
const pi = 3.14159;

Variable Naming Rules

Rules you MUST follow: - Must start with a letter, underscore (_), or dollar sign ($) -
Cannot start with a number - Cannot contain spaces - Cannot use reserved words
(like if, for, function)

Good variable names:

javascript
let firstName = "John";
let age = 25;
let isStudent = true;
let totalScore = 100;

Bad variable names:

javascript
let 1name = "John"; // Can't start with number
let first name = "John"; // Can't have spaces
let if = "John"; // Can't use reserved words

Variable Naming Best Practices

Use camelCase: Start with lowercase, capitalize each new word

javascript
let myFavoriteColor = "blue";
let numberOfPets = 3;
let isLoggedIn = true;

Use descriptive names:

javascript
// Good
let userEmail = "[email protected]";
let shoppingCartTotal = 29.99;

// Bad
let x = "[email protected]";
let y = 29.99;

Changing Variable Values

javascript
let score = 0;
console.log(score); // Shows: 0

score = 10;
console.log(score); // Shows: 10

score = score + 5;
console.log(score); // Shows: 15
The Difference Between let, var, and const

let - Use for variables that can change:

javascript
let temperature = 72;
temperature = 75; // This is okay

const - Use for variables that never change:

javascript
const myName = "Alex";
myName = "Bob"; // This will cause an error!

var - The old way (avoid using):

javascript
var oldVariable = "I'm old-fashioned";

Understanding Assignment

The = sign in programming doesn't mean "equals" like in math. It means "assign" or
"store."

javascript
let x = 5; // "Store the value 5 in variable x"
x = x + 1; // "Add 1 to x and store the result back in x"

Practice Exercise 6.1: Variable Creation

Create variables for: 1. Your first name 2. Your age 3. Your favorite number 4.
Whether you like pizza (true or false)

Practice Exercise 6.2: Variable Changes

1. Create a variable called points and set it to 0


2. Add 10 points to it
3. Add 5 more points
4. Display the final value in the console
Practice Exercise 6.3: Personal Profile

Create a program that stores and displays: - Your name (use const because it won't
change) - Your age (use let because it changes every year) - Your grade in school
(use let) - Your favorite subject (use const)

Mini-Quiz 6.1

1. What's the difference between let and const?


2. Can you change the value of a const variable?
3. What naming convention does JavaScript use for variables?
4. True or False: Variable names can start with a number.

Chapter 7: Data Types - Understanding Different Kinds of


Information

What are Data Types?

Data types are different categories of information, like how we have different types
of containers for different things: - A glass for water - A bowl for soup - A plate for
food

JavaScript has several data types for different kinds of information.

Primitive Data Types

1. Numbers Numbers are used for counting, math, and measurements.

javascript
let age = 25;
let price = 19.99;
let temperature = -5;
let bigNumber = 1000000;

Special number values:

javascript
let infinity = Infinity;
let notANumber = NaN; // "Not a Number"

2. Strings Strings are text - letters, words, sentences, or any characters.


javascript
let name = "Alice";
let message = 'Hello, world!';
let empty = "";
let mixedText = "I am 25 years old";

String quotes: - Use double quotes: "Hello" - Use single quotes: 'Hello' - Use
template literals: `Hello`

3. Booleans Booleans are true or false values - like yes/no or on/off.

javascript
let isRaining = true;
let isSchoolDay = false;
let hasHomework = true;

4. Undefined Undefined means a variable has been created but no value has been
assigned.

javascript
let something;
console.log(something); // Shows: undefined

5. Null Null means "intentionally empty" or "no value."

javascript
let data = null; // Intentionally empty

Checking Data Types

Use typeof to see what type of data you have:

javascript
console.log(typeof 42); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"

Working with Numbers

JavaScript can do math with numbers:


javascript
let a = 10;
let 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)

Working with Strings

You can combine strings and do other operations:

javascript
let firstName = "John";
let lastName = "Doe";

// Combining strings (concatenation)


let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"

// String length
console.log(fullName.length); // 8

// Making uppercase/lowercase
console.log(fullName.toUpperCase()); // "JOHN DOE"
console.log(fullName.toLowerCase()); // "john doe"

Template Literals (Modern String Method)

Template literals use backticks (`) and allow you to insert variables easily:

javascript
let name = "Sarah";
let age = 16;

// Old way
let message1 = "Hi, I'm " + name + " and I'm " + age + " years old.";

// New way (template literals)


let message2 = `Hi, I'm ${name} and I'm ${age} years old.`;

console.log(message2); // "Hi, I'm Sarah and I'm 16 years old."


Type Conversion

Sometimes you need to change data from one type to another:

Converting to Number:

javascript
let stringNumber = "25";
let realNumber = Number(stringNumber);
console.log(realNumber + 5); // 30

Converting to String:

javascript
let number = 42;
let text = String(number);
console.log(text + " is my favorite number"); // "42 is my favorite number"

Converting to Boolean:

javascript
let zero = 0;
let empty = "";
let something = "hello";

console.log(Boolean(zero)); // false
console.log(Boolean(empty)); // false
console.log(Boolean(something)); // true

Common Type Conversion Mistakes

javascript
// This might surprise you!
console.log("5" + 3); // "53" (string concatenation)
console.log("5" - 3); // 2 (number subtraction)
console.log("5" * 3); // 15 (number multiplication)

Practice Exercise 7.1: Data Type Explorer

Create variables of each data type and use typeof to check them: 1. A number 2. A
string 3. A boolean 4. An undefined variable 5. A null variable
Practice Exercise 7.2: Calculator

Create a simple calculator that: 1. Stores two numbers in variables 2. Performs


addition, subtraction, multiplication, and division 3. Displays the results

Practice Exercise 7.3: Mad Libs

Create a Mad Libs game using template literals: 1. Create variables for a name,
adjective, noun, and verb 2. Use template literals to create a funny sentence 3.
Display the result

Practice Exercise 7.4: Type Conversion Practice

1. Create a string that contains a number


2. Convert it to a real number
3. Do math with it
4. Convert the result back to a string

Mini-Quiz 7.1

1. What are the 5 primitive data types in JavaScript?


2. What's the difference between null and undefined?
3. What operator do you use to check a variable's type?
4. What happens when you add a string and a number?

Chapter 8: Operators - Making JavaScript Do Math and Logic

What are Operators?

Operators are symbols that tell JavaScript to perform specific operations. They're
like the buttons on a calculator or the action words in a sentence.

Types of operators: - Arithmetic (math) - Assignment (storing values) -


Comparison (comparing values) - Logical (true/false logic) - String operators

Arithmetic Operators

These operators do math:

javascript
let a = 10;
let 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 (remainder/modulo)
console.log(a ** b); // 1000 (exponentiation - a to the power of b)

The Modulo Operator (%)

The modulo operator gives you the remainder after division:

javascript
console.log(10 % 3); // 1 (10 ÷ 3 = 3 remainder 1)
console.log(15 % 4); // 3 (15 ÷ 4 = 3 remainder 3)
console.log(20 % 5); // 0 (20 ÷ 5 = 4 remainder 0)

// Useful for checking if a number is even or odd


let number = 7;
if (number % 2 === 0) {
console.log("Even");
} else {
console.log("Odd");
}

Assignment Operators

These operators assign values to variables:

javascript
let x = 10; // Basic assignment

// Compound assignment operators


x += 5; // Same as: x = x + 5 (x becomes 15)
x -= 3; // Same as: x = x - 3 (x becomes 12)
x *= 2; // Same as: x = x * 2 (x becomes 24)
x /= 4; // Same as: x = x / 4 (x becomes 6)
x %= 3; // Same as: x = x % 3 (x becomes 0)

Increment and Decrement Operators

Special operators for adding or subtracting 1:


javascript
let count = 5;

count++; // Increment (add 1) - count becomes 6


count--; // Decrement (subtract 1) - count becomes 5

// Pre-increment vs Post-increment
let a = 5;
let b = ++a; // Pre-increment: a becomes 6, then b gets 6
console.log(a, b); // 6, 6

let c = 5;
let d = c++; // Post-increment: d gets 5, then c becomes 6
console.log(c, d); // 6, 5

Comparison Operators

These operators compare values and return true or false:

javascript
let a = 10;
let b = 5;

console.log(a > b); // true (greater than)


console.log(a < b); // false (less than)
console.log(a >= b); // true (greater than or equal)
console.log(a <= b); // false (less than or equal)
console.log(a == b); // false (equal value)
console.log(a != b); // true (not equal value)
console.log(a === b); // false (strictly equal)
console.log(a !== b); // true (strictly not equal)

Equality: == vs ===

Double equals (==) - Loose equality:

javascript
console.log(5 == "5"); // true (converts string to number)
console.log(true == 1); // true (converts boolean to number)
console.log(null == undefined); // true

Triple equals (===) - Strict equality:


javascript
console.log(5 === "5"); // false (different types)
console.log(true === 1); // false (different types)
console.log(null === undefined); // false

Best Practice: Always use === and !== unless you specifically need type conversion.

Logical Operators

These operators work with true/false values:

javascript
let isRaining = true;
let hasUmbrella = false;

// AND operator (&&) - both conditions must be true


console.log(isRaining && hasUmbrella); // false

// OR operator (||) - at least one condition must be true


console.log(isRaining || hasUmbrella); // true

// NOT operator (!) - flips true/false


console.log(!isRaining); // false
console.log(!hasUmbrella); // true

Logical Operators with Non-Boolean Values

JavaScript treats some values as "truthy" and others as "falsy":

Falsy values: - false - 0 - "" (empty string) - null - undefined - NaN

Everything else is truthy:

javascript
console.log(Boolean("hello")); // true
console.log(Boolean(42)); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true

console.log(Boolean("")); // false
console.log(Boolean(0)); // false
String Operators

The + operator can combine strings:

javascript
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"

// You can also use += with strings


let message = "Hello";
message += " World";
console.log(message); // "Hello World"

Operator Precedence

JavaScript follows rules about which operators to do first:

javascript
let result = 5 + 3 * 2; // Multiplication first: 5 + 6 = 11
console.log(result); // 11

// Use parentheses to change order


let result2 = (5 + 3) * 2; // Parentheses first: 8 * 2 = 16
console.log(result2); // 16

Common precedence order (highest to lowest): 1. Parentheses () 2.


Exponentiation ** 3. Multiplication *, Division /, Modulo % 4. Addition +, Subtraction
- 5. Comparison <, >, <=, >= 6. Equality ==, ===, !=, !== 7. Logical AND && 8. Logical OR
|| 9. Assignment =, +=, -=, etc.

Practice Exercise 8.1: Math Calculator

Create a calculator that: 1. Stores two numbers 2. Performs all arithmetic operations
3. Displays the results with descriptive messages

Practice Exercise 8.2: Comparison Practice

Create variables for your age and your friend's age, then compare them using all
comparison operators.
Practice Exercise 8.3: Logical Thinking

Create a program that checks if it's a good day to go to the beach: - It's sunny (true/
false) - Temperature is above 75°F - It's not raining - Use logical operators to
determine if it's a good beach day

Practice Exercise 8.4: Even or Odd Checker

Create a program that checks if a number is even or odd using the modulo operator.

Practice Exercise 8.5: Grade Calculator

Create a program that: 1. Stores test scores for 3 tests 2. Calculates the average 3.
Determines if the student passed (average >= 70)

Mini-Quiz 8.1

1. What does the modulo operator (%) do?


2. What's the difference between == and ===?
3. What are the three logical operators in JavaScript?
4. Which operation happens first: 5 + 3 * 2?
5. Name three falsy values in JavaScript.

Chapter 9: Control Flow - Making Decisions in Code

What is Control Flow?

Control flow is how your program makes decisions and chooses what to do next. It's
like following a recipe that has different steps depending on what ingredients you
have.

Think of it like: - If it's raining, take an umbrella - If you're hungry, eat something - If
you finished your homework, you can play games

The if Statement

The if statement lets your program make decisions:

javascript
let temperature = 75;
if (temperature > 70) {
console.log("It's a nice day!");
}

How it works: 1. JavaScript checks if the condition is true 2. If true, it runs the code
inside the {} 3. If false, it skips that code

The if-else Statement

Sometimes you want to do one thing if the condition is true, and something else if
it's false:

javascript
let age = 16;

if (age >= 18) {


console.log("You can vote!");
} else {
console.log("You're too young to vote yet.");
}

The else if Statement

For multiple conditions:

javascript
let grade = 85;

if (grade >= 90) {


console.log("A - Excellent!");
} else if (grade >= 80) {
console.log("B - Good job!");
} else if (grade >= 70) {
console.log("C - Passing");
} else if (grade >= 60) {
console.log("D - Below average");
} else {
console.log("F - Failing");
}

Nested if Statements

You can put if statements inside other if statements:


javascript
let weather = "sunny";
let temperature = 75;

if (weather === "sunny") {


if (temperature > 70) {
console.log("Perfect day for the beach!");
} else {
console.log("Sunny but too cold for the beach.");
}
} else {
console.log("Not a beach day.");
}

The switch Statement

When you have many possible values to check:

javascript
let day = "Monday";

switch (day) {
case "Monday":
console.log("Start of the work week");
break;
case "Tuesday":
console.log("Tuesday blues");
break;
case "Wednesday":
console.log("Hump day!");
break;
case "Thursday":
console.log("Almost Friday");
break;
case "Friday":
console.log("TGIF!");
break;
case "Saturday":
case "Sunday":
console.log("Weekend!");
break;
default:
console.log("Not a valid day");
}

Important: Don't forget the break statements! Without them, the code keeps
running through all the cases.
The Ternary Operator (Conditional Operator)

A shortcut for simple if-else statements:

javascript
let age = 20;

// Long way
let status;
if (age >= 18) {
status = "adult";
} else {
status = "minor";
}

// Short way (ternary operator)


let status = age >= 18 ? "adult" : "minor";

Syntax: condition ? valueIfTrue : valueIfFalse

Combining Conditions

You can combine multiple conditions using logical operators:

javascript
let age = 25;
let hasLicense = true;
let hasInsurance = true;

// Multiple conditions with AND


if (age >= 18 && hasLicense && hasInsurance) {
console.log("You can drive!");
} else {
console.log("You cannot drive yet.");
}

// Multiple conditions with OR


let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
console.log("No school today!");
} else {
console.log("Time for school.");
}
Loops - Repeating Actions

What are Loops? Loops let you repeat code multiple times without writing it over
and over. It's like telling someone "do this 10 times" instead of saying "do this" 10
separate times.

The for Loop

Use when you know how many times to repeat:

javascript
// Count from 1 to 5
for (let i = 1; i <= 5; i++) {
console.log("Count: " + i);
}

// Output:
// Count: 1
// Count: 2
// Count: 3
// Count: 4
// Count: 5

How it works: 1. let i = 1 - Start with i = 1 2. i <= 5 - Keep going while i is 5 or less
3. i++ - Add 1 to i after each loop

The while Loop

Use when you don't know exactly how many times to repeat:

javascript
let count = 1;

while (count <= 5) {


console.log("Count: " + count);
count++; // Don't forget to increment!
}

Be careful! If you forget to increment, you'll create an infinite loop!

The do-while Loop

Runs at least once, then checks the condition:


javascript
let userInput;

do {
userInput = prompt("Enter 'quit' to exit:");
console.log("You entered: " + userInput);
} while (userInput !== "quit");

Breaking Out of Loops

Use break to exit a loop early:

javascript
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // Exit the loop when i equals 5
}
console.log(i);
}
// Output: 1, 2, 3, 4

Skipping Loop Iterations

Use continue to skip the rest of the current iteration:

javascript
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue; // Skip when i equals 3
}
console.log(i);
}
// Output: 1, 2, 4, 5

Nested Loops

Loops inside other loops:

javascript
for (let row = 1; row <= 3; row++) {
for (let col = 1; col <= 3; col++) {
console.log(`Row ${row}, Column ${col}`);
}
}

Common Loop Patterns

1. Counting up:

javascript
for (let i = 0; i < 10; i++) {
console.log(i);
}

2. Counting down:

javascript
for (let i = 10; i > 0; i--) {
console.log(i);
}

3. Counting by twos:

javascript
for (let i = 0; i <= 10; i += 2) {
console.log(i); // 0, 2, 4, 6, 8, 10
}

Practice Exercise 9.1: Grade Classifier

Create a program that: 1. Takes a numerical grade 2. Classifies it as A, B, C, D, or F 3.


Provides encouraging messages

Practice Exercise 9.2: Number Guessing Game

Create a simple number guessing game: 1. Pick a secret number between 1 and 10 2.
Ask the user to guess 3. Tell them if their guess is too high, too low, or correct 4. Use
a loop to let them keep guessing

Practice Exercise 9.3: Multiplication Table

Create a program that prints the multiplication table for a given number:
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
... and so on

Practice Exercise 9.4: FizzBuzz

Create the classic FizzBuzz program: 1. Count from 1 to 100 2. If the number is
divisible by 3, print "Fizz" 3. If divisible by 5, print "Buzz" 4. If divisible by both 3 and
5, print "FizzBuzz" 5. Otherwise, print the number

Practice Exercise 9.5: Password Validator

Create a password validator that checks if a password: 1. Is at least 8 characters long


2. Contains at least one uppercase letter 3. Contains at least one lowercase letter 4.
Contains at least one number

Mini-Quiz 9.1

1. What's the difference between if and switch statements?


2. What happens if you forget a break in a switch statement?
3. What's the difference between while and do-while loops?
4. What does the continue statement do in a loop?
5. How do you exit a loop early?

Chapter 10: Functions - Creating Reusable Code Blocks

What are Functions?

Functions are like recipes - they're a set of instructions that you can use over and
over again. Instead of writing the same code multiple times, you create a function
once and then "call" it whenever you need it.

Think of functions like: - A recipe you can follow to make cookies - A machine that
takes inputs and gives outputs - A magic spell that does something when you say its
name

Creating Your First Function

Function Declaration:
javascript
function sayHello() {
console.log("Hello, World!");
}

// To use the function, you "call" it


sayHello(); // Output: Hello, World!

Functions with Parameters

Parameters are like ingredients you give to a recipe:

javascript
function greet(name) {
console.log("Hello, " + name + "!");
}

greet("Alice"); // Output: Hello, Alice!


greet("Bob"); // Output: Hello, Bob!

Multiple Parameters

Functions can take multiple inputs:

javascript
function introduce(name, age, city) {
console.log(`Hi, I'm ${name}. I'm ${age} years old and I live in ${city}.`);
}

introduce("Sarah", 16, "New York");


// Output: Hi, I'm Sarah. I'm 16 years old and I live in New York.

Return Values

Functions can give back results:

javascript
function add(a, b) {
return a + b;
}

let result = add(5, 3);


console.log(result); // 8
// You can use the return value directly
console.log(add(10, 20)); // 30

Function Expressions

Another way to create functions:

javascript
const multiply = function(a, b) {
return a * b;
};

console.log(multiply(4, 5)); // 20

Arrow Functions (ES6)

A shorter way to write functions:

javascript
// Traditional function
function square(x) {
return x * x;
}

// Arrow function
const square = (x) => {
return x * x;
};

// Even shorter arrow function (for single expressions)


const square = x => x * x;

console.log(square(4)); // 16

Default Parameters

You can give parameters default values:

javascript
function greet(name = "Friend") {
console.log("Hello, " + name + "!");
}
greet("Alice"); // Hello, Alice!
greet(); // Hello, Friend!

Local vs Global Scope

Variables inside functions are "local" - they only exist inside the function:

javascript
let globalVar = "I'm global";

function myFunction() {
let localVar = "I'm local";
console.log(globalVar); // Can access global variables
console.log(localVar); // Can access local variables
}

myFunction();
console.log(globalVar); // Works fine
console.log(localVar); // Error! localVar doesn't exist here

Function Hoisting

Function declarations are "hoisted" - you can call them before they're defined:

javascript
sayHi(); // This works!

function sayHi() {
console.log("Hi there!");
}

But function expressions are NOT hoisted:

javascript
sayBye(); // This causes an error!

const sayBye = function() {


console.log("Goodbye!");
};

Functions Calling Other Functions

Functions can call other functions:


javascript
function formatName(firstName, lastName) {
return firstName + " " + lastName;
}

function createGreeting(firstName, lastName) {


let fullName = formatName(firstName, lastName);
return "Welcome, " + fullName + "!";
}

console.log(createGreeting("John", "Doe")); // Welcome, John Doe!

Recursive Functions

Functions that call themselves:

javascript
function countdown(n) {
if (n <= 0) {
console.log("Blast off!");
return;
}

console.log(n);
countdown(n - 1); // Function calls itself
}

countdown(5); // 5, 4, 3, 2, 1, Blast off!

Anonymous Functions

Functions without names, often used for short operations:

javascript
// Using an anonymous function with setTimeout
setTimeout(function() {
console.log("This runs after 2 seconds");
}, 2000);

// Arrow function version


setTimeout(() => {
console.log("This also runs after 2 seconds");
}, 2000);
Common Function Patterns

1. Calculator Functions:

javascript
function calculate(operation, a, b) {
switch(operation) {
case "add":
return a + b;
case "subtract":
return a - b;
case "multiply":
return a * b;
case "divide":
return a / b;
default:
return "Invalid operation";
}
}

console.log(calculate("add", 10, 5)); // 15

2. Validation Functions:

javascript
function isValidEmail(email) {
return email.includes("@") && email.includes(".");
}

function isValidAge(age) {
return age >= 0 && age <= 120;
}

console.log(isValidEmail("[email protected]")); // true
console.log(isValidAge(25)); // true

3. Utility Functions:

javascript
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

function randomNumber(min, max) {


return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(capitalize("hello")); // Hello
console.log(randomNumber(1, 10)); // Random number between 1 and 10

Best Practices for Functions

1. Use descriptive names: calculateTax() not calc()


2. Keep functions small: One function should do one thing
3. Use parameters instead of global variables
4. Return values instead of printing inside functions
5. Add comments for complex functions

Practice Exercise 10.1: Basic Functions

Create functions for: 1. Converting Celsius to Fahrenheit 2. Calculating the area of a


rectangle 3. Checking if a number is even or odd 4. Finding the maximum of two
numbers

Practice Exercise 10.2: Personal Information

Create functions that: 1. Format a full name (first + last) 2. Calculate age from birth
year 3. Create a profile summary using the other functions

Practice Exercise 10.3: Math Library

Create a mini math library with functions for: 1. Addition, subtraction,


multiplication, division 2. Finding the square and square root 3. Calculating
percentage 4. Converting between different units

Practice Exercise 10.4: String Utilities

Create utility functions for: 1. Counting words in a sentence 2. Reversing a string 3.


Checking if a string is a palindrome 4. Removing spaces from a string

Practice Exercise 10.5: Game Functions

Create functions for a simple game: 1. Generate a random number 2. Check if a guess
is correct 3. Keep track of attempts 4. Display game status

Mini-Quiz 10.1

1. What's the difference between parameters and arguments?


2. What does it mean for a function to "return" a value?
3. What's the difference between function declarations and function expressions?
4. What is function hoisting?
5. What's the scope of a variable declared inside a function?

Chapter 11: Arrays - Storing Lists of Information

What are Arrays?

Arrays are like containers that can hold multiple pieces of information in order.
Think of them as: - A shopping list with multiple items - A playlist with multiple
songs - A box with multiple toys, each in a numbered slot

Creating Arrays

Array Literal (most common way):

javascript
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
let mixed = ["hello", 42, true, "world"];
let empty = [];

Array Constructor:

javascript
let colors = new Array("red", "green", "blue");
let scores = new Array(5); // Creates array with 5 empty slots

Accessing Array Elements

Arrays use index numbers starting from 0:

javascript
let fruits = ["apple", "banana", "orange"];

console.log(fruits[0]); // "apple" (first item)


console.log(fruits[1]); // "banana" (second item)
console.log(fruits[2]); // "orange" (third item)
console.log(fruits[3]); // undefined (doesn't exist)
Array Length

Find out how many items are in an array:

javascript
let fruits = ["apple", "banana", "orange"];
console.log(fruits.length); // 3

Changing Array Elements

You can change items in an array:

javascript
let fruits = ["apple", "banana", "orange"];
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "orange"]

Adding Elements to Arrays

Adding to the end:

javascript
let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

// Add multiple items


fruits.push("grape", "kiwi");
console.log(fruits); // ["apple", "banana", "orange", "grape", "kiwi"]

Adding to the beginning:

javascript
let fruits = ["banana", "orange"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "banana", "orange"]

Removing Elements from Arrays

Removing from the end:


javascript
let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
console.log(lastFruit); // "orange"
console.log(fruits); // ["apple", "banana"]

Removing from the beginning:

javascript
let fruits = ["apple", "banana", "orange"];
let firstFruit = fruits.shift();
console.log(firstFruit); // "apple"
console.log(fruits); // ["banana", "orange"]

Finding Elements in Arrays

Finding the index of an element:

javascript
let fruits = ["apple", "banana", "orange"];
console.log(fruits.indexOf("banana")); // 1
console.log(fruits.indexOf("grape")); // -1 (not found)

Checking if an element exists:

javascript
let fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false

Looping Through Arrays

Using a for loop:

javascript
let fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {


console.log(fruits[i]);
}

Using a for...of loop:


javascript
let fruits = ["apple", "banana", "orange"];

for (let fruit of fruits) {


console.log(fruit);
}

Using forEach method:

javascript
let fruits = ["apple", "banana", "orange"];

fruits.forEach(function(fruit, index) {
console.log(index + ": " + fruit);
});

// Arrow function version


fruits.forEach((fruit, index) => {
console.log(index + ": " + fruit);
});

Array Methods

Joining array elements into a string:

javascript
let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.join(", ");
console.log(fruitString); // "apple, banana, orange"

Splitting a string into an array:

javascript
let sentence = "Hello world from JavaScript";
let words = sentence.split(" ");
console.log(words); // ["Hello", "world", "from", "JavaScript"]

Reversing an array:

javascript
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1]
Sorting an array:

javascript
let fruits = ["banana", "apple", "orange"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "orange"]

// Sorting numbers (need a compare function)


let numbers = [10, 5, 20, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 20]

Slicing Arrays

Get a portion of an array without changing the original:

javascript
let fruits = ["apple", "banana", "orange", "grape", "kiwi"];
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ["banana", "orange"]
console.log(fruits); // Original array unchanged

Splicing Arrays

Remove/add elements at any position:

javascript
let fruits = ["apple", "banana", "orange"];

// Remove 1 element at index 1


let removed = fruits.splice(1, 1);
console.log(removed); // ["banana"]
console.log(fruits); // ["apple", "orange"]

// Add elements at index 1


fruits.splice(1, 0, "grape", "kiwi");
console.log(fruits); // ["apple", "grape", "kiwi", "orange"]

Combining Arrays

Using concat:

javascript
let fruits = ["apple", "banana"];
let vegetables = ["carrot", "broccoli"];
let food = fruits.concat(vegetables);
console.log(food); // ["apple", "banana", "carrot", "broccoli"]

Using spread operator:

javascript
let fruits = ["apple", "banana"];
let vegetables = ["carrot", "broccoli"];
let food = [...fruits, ...vegetables];
console.log(food); // ["apple", "banana", "carrot", "broccoli"]

Multi-dimensional Arrays

Arrays can contain other arrays:

javascript
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

console.log(matrix[0][1]); // 2 (first row, second column)


console.log(matrix[1][2]); // 6 (second row, third column)

Array Iteration Methods

map - Transform each element:

javascript
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

filter - Keep elements that meet a condition:

javascript
let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

find - Find first element that meets a condition:


javascript
let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 2

reduce - Reduce array to a single value:

javascript
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15

Common Array Patterns

1. Finding the maximum/minimum:

javascript
let numbers = [5, 2, 8, 1, 9];
let max = Math.max(...numbers);
let min = Math.min(...numbers);
console.log(max); // 9
console.log(min); // 1

2. Removing duplicates:

javascript
let numbers = [1, 2, 2, 3, 3, 3, 4];
let unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4]

3. Flattening arrays:

javascript
let nested = [[1, 2], [3, 4], [5, 6]];
let flat = nested.flat();
console.log(flat); // [1, 2, 3, 4, 5, 6]

Practice Exercise 11.1: Shopping List

Create a shopping list application: 1. Create an array for your shopping list 2. Add
items to the list 3. Remove items when "bought" 4. Display the current list 5. Check if
a specific item is on the list
Practice Exercise 11.2: Grade Book

Create a grade book system: 1. Store student grades in an array 2. Calculate the
average grade 3. Find the highest and lowest grades 4. Count how many students
passed (grade >= 70)

Practice Exercise 11.3: To-Do List

Create a to-do list manager: 1. Add tasks to the list 2. Mark tasks as complete 3.
Remove completed tasks 4. Display remaining tasks 5. Show statistics (total tasks,
completed, remaining)

Practice Exercise 11.4: Number Analysis

Create a program that analyzes an array of numbers: 1. Find even and odd numbers
2. Calculate sum and average 3. Find numbers greater than the average 4. Sort
numbers in ascending and descending order

Practice Exercise 11.5: Word Games

Create word game functions: 1. Find the longest word in an array 2. Count words
that start with a specific letter 3. Create rhyming pairs 4. Sort words alphabetically

Mini-Quiz 11.1

1. What index does the first element of an array have?


2. How do you add an element to the end of an array?
3. What's the difference between push() and unshift()?
4. How do you find the length of an array?
5. What does the indexOf() method return if the element is not found?

Chapter 12: Objects - Organizing Related Information

What are Objects?

Objects are like containers that hold related information together. Think of them as:
- A person's profile with name, age, and hobbies - A car with make, model, year, and
color - A book with title, author, pages, and genre

Unlike arrays that store items in order, objects store information in key-value pairs.
Creating Objects

Object Literal (most common way):

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25,
city: "New York"
};

Empty object:

javascript
let emptyObject = {};

Accessing Object Properties

Dot notation:

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

console.log(person.firstName); // "John"
console.log(person.age); // 25

Bracket notation:

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

console.log(person["firstName"]); // "John"
console.log(person["age"]); // 25

// Useful when property name is in a variable


let property = "firstName";
console.log(person[property]); // "John"

Adding and Changing Properties

javascript
let person = {
firstName: "John",
lastName: "Doe"
};

// Add new property


person.age = 25;
person["city"] = "New York";

// Change existing property


person.age = 26;

console.log(person); // {firstName: "John", lastName: "Doe", age: 26, city: "New York"}

Removing Properties

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25,
city: "New York"
};

delete person.city;
console.log(person); // {firstName: "John", lastName: "Doe", age: 25}

Objects with Methods

Objects can contain functions (called methods):

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25,

// Method to get full name


getFullName: function() {
return this.firstName + " " + this.lastName;
},

// Method to introduce
introduce: function() {
return "Hi, I'm " + this.getFullName() + " and I'm " + this.age + " years old.";
}
};

console.log(person.getFullName()); // "John Doe"


console.log(person.introduce()); // "Hi, I'm John Doe and I'm 25 years old."

The this Keyword

Inside an object method, this refers to the object itself:

javascript
let car = {
brand: "Toyota",
model: "Camry",
year: 2020,

getInfo: function() {
return this.brand + " " + this.model + " (" + this.year + ")";
}
};

console.log(car.getInfo()); // "Toyota Camry (2020)"

Object Constructor Functions

Create multiple similar objects:

javascript
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;

this.getFullName = function() {
return this.firstName + " " + this.lastName;
};
}

let person1 = new Person("John", "Doe", 25);


let person2 = new Person("Jane", "Smith", 30);
console.log(person1.getFullName()); // "John Doe"
console.log(person2.getFullName()); // "Jane Smith"

Object.keys(), Object.values(), Object.entries()

Get information about object properties:

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

console.log(Object.keys(person)); // ["firstName", "lastName", "age"]


console.log(Object.values(person)); // ["John", "Doe", 25]
console.log(Object.entries(person)); // [["firstName", "John"], ["lastName", "Doe"], ["a

Looping Through Objects

Using for...in loop:

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

for (let key in person) {


console.log(key + ": " + person[key]);
}
// Output:
// firstName: John
// lastName: Doe
// age: 25

Using Object.keys():

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

Object.keys(person).forEach(key => {
console.log(key + ": " + person[key]);
});

Nested Objects

Objects can contain other objects:

javascript
let person = {
firstName: "John",
lastName: "Doe",
address: {
street: "123 Main St",
city: "New York",
zipCode: "10001"
},
hobbies: ["reading", "swimming", "coding"]
};

console.log(person.address.city); // "New York"


console.log(person.hobbies[0]); // "reading"

Arrays of Objects

Very common pattern in web development:

javascript
let students = [
{
name: "Alice",
grade: 85,
subject: "Math"
},
{
name: "Bob",
grade: 92,
subject: "Science"
},
{
name: "Charlie",
grade: 78,
subject: "English"
}
];

// Find student with highest grade


let topStudent = students.reduce((top, student) =>
student.grade > top.grade ? student : top
);

console.log(topStudent.name); // "Bob"

Object Methods and Properties

Checking if property exists:

javascript
let person = {
firstName: "John",
lastName: "Doe"
};

console.log("firstName" in person); // true


console.log("age" in person); // false
console.log(person.hasOwnProperty("firstName")); // true

Copying objects:

javascript
let person = {
firstName: "John",
lastName: "Doe"
};

// Shallow copy
let copy1 = Object.assign({}, person);
let copy2 = {...person}; // Spread operator

// Both copies are independent of the original


copy1.firstName = "Jane";
console.log(person.firstName); // Still "John"

JSON (JavaScript Object Notation)

Convert objects to strings and back:

javascript
let person = {
firstName: "John",
lastName: "Doe",
age: 25
};

// Object to JSON string


let jsonString = JSON.stringify(person);
console.log(jsonString); // '{"firstName":"John","lastName":"Doe","age":25}'

// JSON string back to object


let parsedObject = JSON.parse(jsonString);
console.log(parsedObject.firstName); // "John"

Common Object Patterns

1. Configuration objects:

javascript
let gameConfig = {
playerName: "Player1",
difficulty: "medium",
soundEnabled: true,
controls: {
up: "W",
down: "S",
left: "A",
right: "D"
}
};

2. Data models:

javascript
let product = {
id: 1,
name: "Laptop",
price: 999.99,
inStock: true,
category: "Electronics",

getDisplayPrice: function() {
return "$" + this.price.toFixed(2);
}
};

3. API response objects:


javascript
let apiResponse = {
success: true,
data: {
users: [
{id: 1, name: "John"},
{id: 2, name: "Jane"}
]
},
message: "Users retrieved successfully"
};

Practice Exercise 12.1: Personal Profile

Create a personal profile object with: 1. Basic information (name, age, city) 2.
Hobbies array 3. Methods to introduce yourself 4. Method to add/remove hobbies

Practice Exercise 12.2: Library System

Create a library system with: 1. Book objects (title, author, pages, available) 2.
Methods to check out/return books 3. Search functionality 4. Display book
information

Practice Exercise 12.3: Shopping Cart

Create a shopping cart system: 1


Practice Exercise 12.3: Shopping Cart

Create a shopping cart system: 1. Product objects with properties (name, price,
quantity) 2. Methods to add/remove products 3. Calculate total price 4. Apply
discounts 5. Display cart contents

Practice Exercise 12.4: Student Management

Create a student management system: 1. Student objects with grades array 2.


Methods to add grades 3. Calculate GPA 4. Determine honor roll status 5. Generate
report cards

Practice Exercise 12.5: Recipe Book

Create a recipe book application: 1. Recipe objects with ingredients and instructions
2. Methods to scale recipes 3. Calculate cooking time 4. Search recipes by ingredient
5. Rate recipes

Mini-Quiz 12.1

1. What's the difference between dot notation and bracket notation?


2. What does the this keyword refer to inside an object method?
3. How do you check if a property exists in an object?
4. What's the difference between Object.keys() and Object.values()?
5. How do you create a copy of an object?

Phase 3: Advanced JavaScript Concepts


Chapter 13: Scope and Closures - Understanding Where Variables
Live

What is Scope?

Scope determines where variables can be accessed in your code. Think of it like
rooms in a house: - Some things are in your bedroom (local scope) - Some things are
in the living room (function scope) - Some things are available throughout the house
(global scope)

Global Scope

Variables declared outside any function are global:


javascript
let globalMessage = "I'm available everywhere!";

function showMessage() {
console.log(globalMessage); // Can access global variable
}

showMessage(); // "I'm available everywhere!"


console.log(globalMessage); // "I'm available everywhere!"

Function Scope

Variables declared inside a function are only available inside that function:

javascript
function myFunction() {
let localMessage = "I'm only available inside this function";
console.log(localMessage); // This works
}

myFunction(); // "I'm only available inside this function"


console.log(localMessage); // Error! localMessage is not defined

Block Scope

Variables declared with let and const inside blocks {} are block-scoped:

javascript
if (true) {
let blockVariable = "I'm in a block";
const anotherBlock = "Me too!";
var oldVariable = "I'm function-scoped";
}

console.log(blockVariable); // Error! Not accessible


console.log(anotherBlock); // Error! Not accessible
console.log(oldVariable); // This works (var is function-scoped)

Nested Scopes

Inner scopes can access outer scopes:

javascript
let outerVariable = "I'm outer";
function outerFunction() {
let middleVariable = "I'm middle";

function innerFunction() {
let innerVariable = "I'm inner";

console.log(outerVariable); // Can access outer


console.log(middleVariable); // Can access middle
console.log(innerVariable); // Can access inner
}

innerFunction();
}

outerFunction();

What are Closures?

A closure is when an inner function has access to variables from its outer function,
even after the outer function has finished running.

javascript
function createCounter() {
let count = 0;

return function() {
count++;
return count;
};
}

let counter = createCounter();


console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Practical Closure Examples

1. Private Variables:

javascript
function createBankAccount(initialBalance) {
let balance = initialBalance;

return {
deposit: function(amount) {
balance += amount;
return balance;
},
withdraw: function(amount) {
if (amount <= balance) {
balance -= amount;
return balance;
} else {
return "Insufficient funds";
}
},
getBalance: function() {
return balance;
}
};
}

let myAccount = createBankAccount(100);


console.log(myAccount.deposit(50)); // 150
console.log(myAccount.withdraw(30)); // 120
console.log(myAccount.getBalance()); // 120
// console.log(balance); // Error! balance is private

1. Function Factories:

javascript
function createMultiplier(multiplier) {
return function(number) {
return number * multiplier;
};
}

let double = createMultiplier(2);


let triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

Common Closure Pitfalls

The Loop Problem:

javascript
// Problem: All functions log 3
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // Logs 3, 3, 3
}, 100);
}

// Solution 1: Use let instead of var


for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i); // Logs 0, 1, 2
}, 100);
}

// Solution 2: Use closure


for (var i = 0; i < 3; i++) {
(function(index) {
setTimeout(function() {
console.log(index); // Logs 0, 1, 2
}, 100);
})(i);
}

Chapter 14: Hoisting - How JavaScript Reads Your Code

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope


during compilation. It's like JavaScript reads through your code first and notes all the
declarations before executing.

Function Hoisting

Function declarations are fully hoisted:

javascript
// This works because of hoisting
sayHello(); // "Hello!"

function sayHello() {
console.log("Hello!");
}

But function expressions are not:

javascript
// This causes an error
sayGoodbye(); // TypeError: sayGoodbye is not a function
var sayGoodbye = function() {
console.log("Goodbye!");
};

Variable Hoisting with var

Variables declared with var are hoisted but not initialized:

javascript
console.log(myVar); // undefined (not an error)
var myVar = 5;
console.log(myVar); // 5

// This is how JavaScript actually interprets it:


// var myVar; // Declaration is hoisted
// console.log(myVar); // undefined
// myVar = 5; // Assignment happens here

let and const Hoisting

let and const are hoisted but in a "temporal dead zone":

javascript
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 5;

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization


const myConst = 10;

Best Practices for Hoisting

1. Always declare variables at the top of their scope


2. Use let and const instead of var
3. Declare functions before using them
4. Be aware of hoisting behavior to avoid bugs

Chapter 15: The this Keyword - Understanding Context

What is this?

The this keyword refers to the object that is currently executing the code. It's like a
pronoun that changes meaning depending on the context.
Global Context

In the global scope, this refers to the global object:

javascript
console.log(this); // In browser: Window object

Object Method Context

In an object method, this refers to the object:

javascript
let person = {
name: "John",
greet: function() {
console.log("Hello, I'm " + this.name);
}
};

person.greet(); // "Hello, I'm John"

Function Context

In a regular function, this depends on how the function is called:

javascript
function showThis() {
console.log(this);
}

showThis(); // Global object (or undefined in strict mode)

let obj = {
method: showThis
};

obj.method(); // obj

Arrow Functions and this

Arrow functions don't have their own this - they inherit it from the enclosing scope:
javascript
let person = {
name: "John",
regularFunction: function() {
console.log("Regular:", this.name); // "John"

let arrowFunction = () => {


console.log("Arrow:", this.name); // "John"
};

arrowFunction();
}
};

person.regularFunction();

Binding this

You can explicitly set what this refers to:

javascript
let person1 = { name: "John" };
let person2 = { name: "Jane" };

function greet() {
console.log("Hello, " + this.name);
}

// call() - invoke immediately


greet.call(person1); // "Hello, John"
greet.call(person2); // "Hello, Jane"

// apply() - similar to call but takes array of arguments


greet.apply(person1); // "Hello, John"

// bind() - creates a new function with this bound


let greetJohn = greet.bind(person1);
greetJohn(); // "Hello, John"

Common this Pitfalls

Event Handlers:

javascript
let button = document.getElementById("myButton");
let obj = {
name: "MyObject",
handleClick: function() {
console.log(this.name); // undefined (this refers to button)
}
};

// Problem
button.addEventListener("click", obj.handleClick);

// Solution 1: Use bind


button.addEventListener("click", obj.handleClick.bind(obj));

// Solution 2: Use arrow function


button.addEventListener("click", () => {
console.log(obj.name); // "MyObject"
});

Chapter 16: Prototypes and Inheritance - How Objects Share


Properties

What are Prototypes?

Every object in JavaScript has a prototype - another object that it inherits properties
and methods from. It's like a template or blueprint that objects can share.

Understanding the Prototype Chain

When you try to access a property on an object, JavaScript looks: 1. On the object
itself 2. On the object's prototype 3. On the prototype's prototype 4. And so on, until
it finds the property or reaches the end

javascript
let animal = {
speak: function() {
console.log("Some generic animal sound");
}
};

let dog = Object.create(animal);


dog.breed = "Golden Retriever";
dog.speak(); // "Some generic animal sound" (inherited from animal)

console.log(dog.breed); // "Golden Retriever" (own property)


Constructor Functions and Prototypes

When you create a constructor function, it automatically gets a prototype:

javascript
function Person(name, age) {
this.name = name;
this.age = age;
}

// Add methods to the prototype


Person.prototype.greet = function() {
return "Hello, I'm " + this.name;
};

Person.prototype.getAge = function() {
return this.age;
};

let person1 = new Person("John", 30);


let person2 = new Person("Jane", 25);

console.log(person1.greet()); // "Hello, I'm John"


console.log(person2.greet()); // "Hello, I'm Jane"

ES6 Classes (Modern Syntax)

Classes provide a cleaner syntax for prototypes:

javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

greet() {
return "Hello, I'm " + this.name;
}

getAge() {
return this.age;
}
}

let person1 = new Person("John", 30);


console.log(person1.greet()); // "Hello, I'm John"
Inheritance with Classes

Classes can inherit from other classes:

javascript
class Animal {
constructor(name) {
this.name = name;
}

speak() {
return this.name + " makes a sound";
}
}

class Dog extends Animal {


constructor(name, breed) {
super(name); // Call parent constructor
this.breed = breed;
}

speak() {
return this.name + " barks";
}

getBreed() {
return this.breed;
}
}

let myDog = new Dog("Max", "Golden Retriever");


console.log(myDog.speak()); // "Max barks"
console.log(myDog.getBreed()); // "Golden Retriever"

Prototype Methods

Working with prototypes directly:

javascript
let person = {
name: "John",
age: 30
};

// Check if object has own property


console.log(person.hasOwnProperty("name")); // true
// Get prototype
console.log(Object.getPrototypeOf(person));

// Set prototype
let worker = Object.create(person);
worker.job = "Developer";

console.log(worker.name); // "John" (inherited)


console.log(worker.job); // "Developer" (own property)

Chapter 17: ES6+ Modern JavaScript Features

Let and Const

Modern variable declarations:

javascript
// Block scoped, can be reassigned
let name = "John";
name = "Jane"; // OK

// Block scoped, cannot be reassigned


const age = 30;
// age = 31; // Error!

// const with objects/arrays - content can change


const person = { name: "John" };
person.name = "Jane"; // OK - we're not reassigning person
person.age = 30; // OK - we're adding a property

Arrow Functions

Shorter function syntax:

javascript
// Traditional function
function add(a, b) {
return a + b;
}

// Arrow function
const add = (a, b) => a + b;

// Multiple lines
const greet = (name) => {
const message = "Hello, " + name;
return message;
};

// Single parameter (parentheses optional)


const square = x => x * x;

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

Template Literals

Better string formatting:

javascript
let name = "John";
let age = 30;

// Old way
let message = "Hello, my name is " + name + " and I'm " + age + " years old.";

// New way
let message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Multi-line strings
let multiline = `
This is a
multi-line
string
`;

// Expression in template literals


let mathResult = `2 + 2 = ${2 + 2}`;

Destructuring Assignment

Extract values from arrays and objects:

javascript
// Array destructuring
let colors = ["red", "green", "blue"];
let [first, second, third] = colors;
console.log(first); // "red"
console.log(second); // "green"

// Object destructuring
let person = { name: "John", age: 30, city: "New York" };
let { name, age, city } = person;
console.log(name); // "John"
console.log(age); // 30

// With different variable names


let { name: personName, age: personAge } = person;
console.log(personName); // "John"

// Default values
let { name, age, country = "USA" } = person;
console.log(country); // "USA"

Spread Operator

Expand arrays and objects:

javascript
// Array spread
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Object spread
let person = { name: "John", age: 30 };
let employee = { ...person, job: "Developer" };
console.log(employee); // { name: "John", age: 30, job: "Developer" }

// Function arguments
function sum(a, b, c) {
return a + b + c;
}

let numbers = [1, 2, 3];


console.log(sum(...numbers)); // 6

Rest Parameters

Collect multiple arguments into an array:

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

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15
// Rest with other parameters
function greet(greeting, ...names) {
return greeting + " " + names.join(" and ");
}

console.log(greet("Hello", "John", "Jane", "Bob")); // "Hello John and Jane and Bob"

Default Parameters

Default values for function parameters:

javascript
function greet(name = "World", greeting = "Hello") {
return `${greeting}, ${name}!`;
}

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


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

Enhanced Object Literals

Shorthand for object creation:

javascript
let name = "John";
let age = 30;

// Old way
let person = {
name: name,
age: age,
greet: function() {
return "Hello, I'm " + this.name;
}
};

// New way
let person = {
name, // Shorthand property
age,
greet() { // Shorthand method
return `Hello, I'm ${this.name}`;
}
};
Chapter 18: Error Handling - Dealing with Problems

What are Errors?

Errors are problems that occur when your code runs. They're like roadblocks that
stop your program from working properly.

Types of Errors

1. Syntax Errors - Code is written incorrectly


2. Runtime Errors - Code fails while running
3. Logical Errors - Code runs but produces wrong results

Try-Catch-Finally

Handle errors gracefully:

javascript
try {
// Code that might cause an error
let result = 10 / 0;
console.log(result);

// This will cause an error


let data = JSON.parse("invalid json");

} catch (error) {
// Handle the error
console.log("An error occurred:", error.message);

} finally {
// This always runs
console.log("Cleanup code here");
}

Different Types of Errors

javascript
// ReferenceError - using undefined variable
try {
console.log(undefinedVariable);
} catch (error) {
console.log("ReferenceError:", error.message);
}
// TypeError - wrong type operation
try {
let number = 5;
number.toUpperCase(); // Numbers don't have toUpperCase
} catch (error) {
console.log("TypeError:", error.message);
}

// SyntaxError - invalid syntax


try {
eval("let x = ;"); // Invalid syntax
} catch (error) {
console.log("SyntaxError:", error.message);
}

Throwing Custom Errors

Create your own errors:

javascript
function divide(a, b) {
if (b === 0) {
throw new Error("Division by zero is not allowed");
}
return a / b;
}

try {
let result = divide(10, 0);
console.log(result);
} catch (error) {
console.log("Error:", error.message);
}

Custom Error Classes

Create specific error types:

javascript
class ValidationError extends Error {
constructor(message) {
super(message);
this.name = "ValidationError";
}
}
function validateAge(age) {
if (age < 0) {
throw new ValidationError("Age cannot be negative");
}
if (age > 150) {
throw new ValidationError("Age seems unrealistic");
}
return true;
}

try {
validateAge(-5);
} catch (error) {
if (error instanceof ValidationError) {
console.log("Validation failed:", error.message);
} else {
console.log("Unexpected error:", error.message);
}
}

Error Handling Best Practices

javascript
// 1. Handle specific errors differently
function processUserData(userData) {
try {
// Validate data
if (!userData.email) {
throw new ValidationError("Email is required");
}

// Process data
let processed = JSON.parse(userData.preferences);
return processed;

} catch (error) {
if (error instanceof ValidationError) {
// Handle validation errors
console.log("Validation Error:", error.message);
return null;
} else if (error instanceof SyntaxError) {
// Handle JSON parsing errors
console.log("Invalid JSON format");
return {};
} else {
// Handle unexpected errors
console.log("Unexpected error:", error.message);
throw error; // Re-throw if we can't handle it
}
}
}

// 2. Graceful degradation
function getDataFromAPI() {
try {
// Simulate API call
throw new Error("Network error");
} catch (error) {
console.log("API failed, using cached data");
return { cached: true, data: [] };
}
}

Chapter 19: Asynchronous JavaScript - Handling Time and Waiting

What is Asynchronous Programming?

Asynchronous programming allows your code to do other things while waiting for
slow operations (like loading data from the internet) to complete.

Think of it like: - Ordering food at a restaurant (you don't wait in the kitchen) -
Washing clothes (you don't stand and watch the machine) - Downloading files (you
can use your computer while it downloads)

setTimeout and setInterval

Basic timing functions:

javascript
// setTimeout - run code after a delay
setTimeout(() => {
console.log("This runs after 2 seconds");
}, 2000);

// setInterval - run code repeatedly


let counter = 0;
let interval = setInterval(() => {
counter++;
console.log("Counter:", counter);

if (counter >= 5) {
clearInterval(interval); // Stop the interval
}
}, 1000);
Callbacks

Functions that are called when an operation completes:

javascript
function fetchData(callback) {
setTimeout(() => {
let data = { id: 1, name: "John" };
callback(data);
}, 1000);
}

fetchData((data) => {
console.log("Received data:", data);
});

Callback Hell

The problem with nested callbacks:

javascript
// This gets messy quickly (callback hell)
getData((data) => {
processData(data, (processedData) => {
saveData(processedData, (result) => {
sendNotification(result, (notification) => {
console.log("All done!");
});
});
});
});

Promises

A better way to handle asynchronous operations:

javascript
// Creating a promise
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
let success = Math.random() > 0.5;

if (success) {
resolve({ id: 1, name: "John" });
} else {
reject(new Error("Failed to fetch data"));
}
}, 1000);
});
}

// Using a promise
fetchData()
.then((data) => {
console.log("Success:", data);
})
.catch((error) => {
console.log("Error:", error.message);
});

Chaining Promises

Link multiple asynchronous operations:

javascript
function fetchUser(id) {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id: id, name: "John" });
}, 1000);
});
}

function fetchUserPosts(userId) {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ id: 1, title: "Post 1", userId: userId },
{ id: 2, title: "Post 2", userId: userId }
]);
}, 1000);
});
}

// Promise chain
fetchUser(1)
.then((user) => {
console.log("User:", user);
return fetchUserPosts(user.id);
})
.then((posts) => {
console.log("Posts:", posts);
})
.catch((error) => {
console.log("Error:", error.message);
});

Async/Await

Modern, cleaner syntax for promises:

javascript
async function getUserData() {
try {
let user = await fetchUser(1);
console.log("User:", user);

let posts = await fetchUserPosts(user.id);


console.log("Posts:", posts);

} catch (error) {
console.log("Error:", error.message);
}
}

getUserData();

Promise.all and Promise.race

Handle multiple promises:

javascript
// Promise.all - wait for all promises to complete
async function loadAllData() {
try {
let [user, posts, comments] = await Promise.all([
fetchUser(1),
fetchUserPosts(1),
fetchComments(1)
]);

console.log("All data loaded:", { user, posts, comments });

} catch (error) {
console.log("One of the requests failed:", error.message);
}
}

// Promise.race - use the first promise that completes


async function loadFastestData() {
try {
let result = await Promise.race([
fetchFromServer1(),
fetchFromServer2(),
fetchFromServer3()
]);

console.log("Fastest result:", result);

} catch (error) {
console.log("All servers failed:", error.message);
}
}

Practical Async Examples

javascript
// Simulating API calls
function simulateAPICall(url, delay = 1000) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.1) { // 90% success rate
resolve({ url, data: `Data from ${url}` });
} else {
reject(new Error(`Failed to fetch ${url}`));
}
}, delay);
});
}

// Using async/await with error handling


async function loadPageData() {
try {
console.log("Loading page data...");

let header = await simulateAPICall("/api/header");


console.log("Header loaded:", header.data);

let content = await simulateAPICall("/api/content");


console.log("Content loaded:", content.data);

let footer = await simulateAPICall("/api/footer");


console.log("Footer loaded:", footer.data);

console.log("Page fully loaded!");

} catch (error) {
console.log("Failed to load page:", error.message);
}
}

loadPageData();

Chapter 20: Modules - Organizing Your Code

What are Modules?

Modules are separate files that contain related code. They help you organize your
code into smaller, manageable pieces.

Think of modules like: - Different departments in a company - Different tools in a


toolbox - Different chapters in a book

ES6 Module Syntax

Export and import code between files:

math.js (module file):

javascript
// Named exports
export function add(a, b) {
return a + b;
}

export function subtract(a, b) {


return a - b;
}

export const PI = 3.14159;

// Default export
export default function multiply(a, b) {
return a * b;
}

main.js (using the module):

javascript
// Import specific functions
import { add, subtract, PI } from './math.js';

// Import default export


import multiply from './math.js';

// Import everything
import * as math from './math.js';

console.log(add(5, 3)); // 8
console.log(subtract(10, 4)); // 6
console.log(PI); // 3.14159
console.log(multiply(2, 4)); // 8

Different Export Patterns

javascript
// Pattern 1: Export as you declare
export function greet(name) {
return `Hello, ${name}!`;
}

export const message = "Welcome!";

// Pattern 2: Export at the end


function calculateTax(amount, rate) {
return amount * rate;
}

function formatCurrency(amount) {
return `$${amount.toFixed(2)}`;
}

export { calculateTax, formatCurrency };

// Pattern 3: Export with different names


function internalFunction() {
return "Internal";
}

export { internalFunction as publicFunction };

Module Patterns

Common ways to organize modules:

utilities.js - Utility functions:

javascript
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}

export function randomId() {


return Math.random().toString(36).substr(2, 9);
}

export function debounce(func, delay) {


let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}

config.js - Configuration:

javascript
export const API_URL = 'https://api.example.com';
export const MAX_RETRIES = 3;
export const TIMEOUT = 5000;

export const themes = {


light: {
background: '#ffffff',
text: '#000000'
},
dark: {
background: '#000000',
text: '#ffffff'
}
};

user.js - User-related functions:

javascript
import { API_URL } from './config.js';

export class User {


constructor(name, email) {
this.name = name;
this.email = email;
}

async save() {
// Save user to API
let response = await fetch(`${API_URL}/users`, {
method: 'POST',
body: JSON.stringify(this)
});
return response.json();
}
}

export function validateEmail(email) {


return email.includes('@');
}

Phase 4: JavaScript in the Browser


Chapter 21: The Document Object Model (DOM)

What is the DOM?

The DOM (Document Object Model) is how JavaScript sees and interacts with web
pages. It's like a family tree of all the HTML elements on a page.

Think of the DOM as: - A map of your house showing all the rooms - An organization
chart showing all employees - A family tree showing all relatives

The DOM Tree Structure

```html

Welcome
This is a paragraph

Another paragraph

You might also like