📚 JavaScript Full Course Notes

Brief Overview
This note covers JavaScript and was created from the JavaScript Tutorial Full Course -
Beginner to Pro YouTube video. The 1336‑minute video provides a complete journey from
JavaScript fundamentals to advanced topics, covering web integration, OOP, async/await,
backend API calls, and practical projects such as an e‑commerce site, games, and utilities.

Key Points
Starts with JavaScript fundamentals and progresses to modern features.
Offers real‑world projects, including an e‑commerce site and interactive games.
Includes 250+ coding exercises for hands‑on practice.
Covers backend API calls, async programming, and basic testing.

🖥️ Course Introduction
Course Overview
This course teaches JavaScript from a beginner to a professional level.
The main goal is to build complex, interactive websites.
Projects
Main Project: A multi-page, interactive e-commerce website similar to
[Link].
Features include adding products to a cart, creating an order, and
tracking the order.
Smaller Projects:
Rock Paper Scissors game
To-do list
Calculator
Prerequisites
No prior coding or technical experience is required.
The course covers all necessary concepts from the basics up.
Learning Path
1. JavaScript Basics: Start from the ground up, learning fundamental concepts.
 2. Integration: Learn how to use JavaScript with HTML and CSS.
3. Advanced Features: Progress to topics like:
Object-Oriented Programming (OOP)
Backend callbacks
Promises
Async/Await
4. Practice: Over 250 exercises are provided to reinforce learning.

🚀 Getting Started with JavaScript

What is JavaScript?
JavaScript is a technology used to create interactive websites. It allows websites to
respond to user actions, such as clicking a button.

The Three Core Web Technologies

Websites are built using a combination of three technologies:
Technology Purpose Description
HTML Content Creates the structure and
content of a website, like
buttons, text, and images.
CSS Appearance Styles the website, making it
look visually appealing.
JavaScript Interactivity Makes the website dynamic
and responsive to user
actions (e.g., adding an item
to a cart).

Setting Up Your Environment

1. Install a Web Browser: A web browser is essential for viewing the websites you
create.
Google Chrome is the recommended browser for web development.
To install, search for "Google Chrome" in your default browser (like
Microsoft Edge or Safari) and follow the installation instructions.
2. Open the Developer Console: The console is a tool within the browser that allows
you to write and run JavaScript code directly.
Navigate to [Link]/js-basics.
 Right-click on a blank area of the webpage.
Click Inspect.
Select the Console tab.
You can change the console's position (e.g., to the bottom or side) using
the three dots menu.

💻 Your First JavaScript Code

Giving Instructions to the Computer
The core idea of JavaScript is giving instructions to a computer, which it then
follows. These instructions are called code.
When the computer follows these instructions, it is called running the code.
Basic Terminology
Code: The instructions given to a computer.
Running the code: The process of a computer following the instructions in the
code.
Programming Language: The language used to write code (e.g., JavaScript,
Python, Java).
Syntax: The set of rules that must be followed when writing code in a specific
programming language. This is similar to grammar in human languages, but
syntax rules must be followed exactly. A failure to do so results in a syntax
error.

First Examples in the Console

1. Creating a Popup (alert): The alert() command creates a popup box with a
specified message.

alert('hello');

This code creates a popup displaying the text "hello".

2. Performing Math: JavaScript can be used as a calculator.

2 + 2; // Result is 4
10 - 3; // Result is 7
 The computer calculates the result and displays it in the console.
3. Modifying a Webpage (innerHTML): One of the most powerful features of
JavaScript is its ability to change the content of a webpage.

[Link] = 'hello';

This code replaces the entire content of the webpage with the text
"hello".
Case sensitivity is crucial in JavaScript; innerHTML must be written
with the correct capitalization.
Understanding Syntax
Syntax refers to the rules of a programming language. Unlike grammar in human
languages, syntax must be followed precisely for the computer to understand the
code.
For example, alert('hello'); uses specific syntax:
The text between the single quotes ('hello') is the message that will
appear. Changing this text changes the popup's content.
The brackets () and semicolon ; are part of the required syntax. Their
specific roles will be explained later in the course.

🔢 Numbers and Math

Basic Math Operations
JavaScript supports standard mathematical operations.
Operator Description Example Result
+ Addition 2 + 2 4
- Subtraction 10 − 3 7
* Multiplication 10 × 3 30
/ Division 10/2 5
Math can be performed with more than two numbers (e.g., 2 + 2 + 2).
JavaScript also handles decimal numbers (e.g., 2.2 + 2.2 gives 4.4`).
Order of Operations (Operator Precedence)
JavaScript follows the standard mathematical order of operations.
1. Brackets (): Calculations inside brackets are always performed first.
2. Multiplication (*) and Division (/): Performed before addition and subtraction. If
both are present, they are calculated from left to right.
3. Addition (+) and Subtraction (-): Performed last. If both are present, they are
calculated from left to right.
Example without brackets: 1 + 1 × 3 results in 4 because 1 × 3 is calculated
first.
Example with brackets: (1 + 1) ∗ 3 results in 6 because (1 + 1) is calculated
first.
Numbers in Programming
Integers: Whole numbers (e.g., 2, 3, 4).
Floating-Point Numbers (Floats): Decimal numbers (e.g., 2.2, 2.5).

The Floating-Point Inaccuracy Problem

Computers can sometimes have trouble accurately representing floating-point
numbers due to how they store numbers in binary (zeros and ones).
This can lead to small inaccuracies, for example, 0.1 + 0.2 might result in a number
very close to 0.3 but not exactly 0.3.
Best Practice for Money: To avoid these inaccuracies when dealing with money,
perform all calculations in cents (using integers) and then convert the final result
back to dollars by dividing by 100.
Example: (2095 + 799)/100 instead of 20.95 + 7.99.
Rounding Numbers
To round a number to the nearest integer, use the [Link]() method.
[Link](2.2) results in 2.
[Link](2.8) results in 3.
Note: Math must be capitalized.
To round money calculations correctly to the nearest cent:
1. Perform the calculation in cents.
2. Use [Link]() on the result in cents.
3. Convert the rounded result back to dollars by dividing by 100.
Example: [Link](289.4) / 100 would round to 2.89.
Finding Code with Google 🕵️‍♂️
A key skill in coding is learning to find solutions and code snippets on your own
using a search engine like Google.
 How to search: Search for what you are trying to do. For example, "JavaScript how
to round a number".
You don't need to understand everything in the search results. Look for familiar
pieces of code and adapt them for your use.

📝 Text and Strings

What is a String?
A string is a sequence of characters that represents text in JavaScript.

Strings are created by wrapping text in quotes.

Example: 'hello' is a string.
Creating Strings
There are three ways to create a string:
1. Single Quotes: const myString = 'hello';
This is the recommended default method as it's often easier to type and
read.
2. Double Quotes: const myString = "hello";
This is useful when the string itself contains a single quote, like "I'm
learning".
3. Backticks (Template Strings): const myString = \hello`;`
These offer special features and are useful for more complex strings.
String Operations
Concatenation: Adding strings together to combine them into a larger string.
'some' + ' ' + 'text' results in 'some text'.
Type Coercion: If you add a string and a number, JavaScript automatically
converts the number to a string and concatenates them.
'hello' + 3 results in 'hello3'.
Order of Operations with Strings: Brackets can be used to ensure mathematical
calculations are done before concatenation.
'$' + (20.95 + 7.99) calculates the sum first.
Escape Characters
An escape character is a special character that allows you to include special characters
within a string. It starts with a backslash (\).
 \': Creates a single quote that is treated as text. Example: 'I\'m learning'.
\": Creates a double quote that is treated as text.
\n: Creates a new line (newline character).
Template Strings (Backticks)
Template strings, created with backticks (`), have two powerful features:
1. Interpolation: Allows you to insert values (like variables or calculations) directly
into a string using the ${...} syntax.
This is a cleaner alternative to concatenation.
Example:

const name = 'world';

const greeting = `Hello, ${name}!`; // Results in 'Hello, world!'

2. Multi-line Strings: Allows you to create strings that span multiple lines just by
pressing Enter.
Example:

const multiLine = `This is

a multi-line
string.`;

Checking the Type of a Value

The typeof operator tells you the data type of a value.
typeof 2 returns 'number'.
typeof 'hello' returns 'string'.

📄 HTML, CSS, & JavaScript Together

Code Editor: VS Code
A code editor is software that helps you write and organize code.
Visual Studio Code (VS Code) is the most popular code editor for web
development. It should be installed to follow along with the projects.
Review of HTML
HTML (HyperText Markup Language) gives instructions to a computer to create the
content of a webpage, such as buttons and paragraphs.

Elements: The building blocks of a webpage (e.g., a button, a paragraph).

Tags: Used to create elements. An element usually has an opening tag (e.g.,
).
) and a closing tag (e.g.,
Nesting: Placing an element inside another element.
HTML Structure: A standard structure for all HTML files.
: Tells the browser to use a modern version of HTML.
: The root element that contains the entire webpage.
: Contains meta-information about the page (not visible), like the title
and styles.
: Contains all the visible content of the page.