Complete JavaScript Course — Lesson 1: Basics & Numbers Summary & Study Notes

🚀 Introduction

This course teaches how to build interactive websites using JavaScript, going from beginner to professional. By the end you'll build a multi-page project (an Amazon-like store) and smaller projects (rock-paper-scissors, to-do list, calculator). No prior coding experience is required.

🧩 Roles of Web Technologies

Websites are built with three main technologies: HTML, CSS, and JavaScript. HTML creates the page content (buttons, text, images). CSS styles the appearance. JavaScript makes the page interactive (e.g., add to cart, create orders, respond to clicks).

🛠️ Tools & Setup

You need a web browser for development — Google Chrome is recommended (Microsoft Edge on Windows or Safari on Mac also work). Use the browser DevTools console to run JavaScript interactively.

How to open the console: right-click on a blank area of the page → Inspect → Console tab. You can run JavaScript commands directly there.

👩‍💻 First JavaScript Commands

You can give instructions to the computer using JavaScript code. Examples you can type in the console:

• Popup: alert('hello'); — creates a browser popup.
• Math: $2 + 2$ or $10 - 3$ — the console evaluates and returns results.
• Modify page: document.body.innerHTML = 'hello'; — replaces page content with the string 'hello'.

These show the three core ideas: write code, run code, and see results.

📚 Terminology

• Code — the instructions you write for the computer.
• Run (or execute) the code — when the computer follows those instructions.
• Programming languages — different syntaxes for writing code (examples: JavaScript, Python, Java).

🔤 Syntax & Errors

Syntax is the set of rules for writing code in a language. JavaScript syntax must be followed exactly. Small mistakes (missing parentheses, quotes, or semicolons) cause syntax errors and the code won't run. Learn syntax gradually — you'll pick up the rules as you practice.

Example: alert('hello'); must have the parentheses and quotes; removing one bracket produces an error.

🔢 Numbers & Math in JavaScript

JavaScript can perform arithmetic just like normal math. Basic operations include addition, subtraction, multiplication, and division. Use the familiar symbols and try them in the console:

• Addition: $2 + 2$
• Subtraction: $10 - 3$
• Multiplication: $10 * 3$ (use the asterisk *)
• Division: $10 / 2$ (use the forward slash /)
• Decimals: $2.2 + 2.2$ results in $4.4$

You can chain operations: $2 + 2 + 2$ gives $6$.

⚖️ Operator Precedence (Order of Operations)

JavaScript follows standard math precedence rules (also called operator precedence): multiplication and division are performed before addition and subtraction. Operators with the same priority are evaluated left-to-right.

Example: $1 + 1 * 3$ evaluates as $1 + (1 * 3) = 4$, not $(1 + 1) * 3 = 6$.

Use parentheses to override precedence and control evaluation order, e.g., $(1 + 1) * 3$.

🧾 Practical Example — Cart Calculations

In the course project (an e-commerce cart), JavaScript calculates totals by adding product costs, shipping, and taxes. Example steps you can reproduce in the console:

• Compute product subtotal for two socks priced $10.90$ each plus one basketball priced $20.95$: $10.90 * 2 + 20.95$.
• Add shipping (e.g., $4.99$) to get the products + shipping total: $10.90 * 2 + 20.95 + 4.99$.

These mirror real-world tasks: reading values, performing arithmetic, and updating the page display.

✅ Tips & Best Practices

• Practice in the browser console — immediate feedback helps learning.
• Pay attention to case sensitivity (e.g., document.body.innerHTML must match exact capitalization).
• If something breaks, check the browser console and the first comment or video description for common fixes.
• Don’t worry about memorizing everything at once — the course provides the code and exercises to practice.

📈 Next Concepts to Learn

Upcoming lessons will cover variables, data types, functions, DOM manipulation, events, objects, arrays, callbacks, promises, and async/await. Each feature builds toward the final Amazon-style project.

✍️ Exercises (Practice Suggestions)

• Open the console and run: $2 + 2$, $10 - 3$, $10 * 3$, $10 / 2$, and $2.2 + 2.2$.
• Try alert('good job'); then document.body.innerHTML = 'hello'; to see popups and page changes.
• Recreate the cart subtotal example: $10.90 * 2 + 20.95$ and then add shipping $4.99$.

Practice these until you're comfortable reading results and understanding order of operations.