JavaScript Course Overview

Overview

This course is a comprehensive guide to JavaScript, taking you from the basics to advanced concepts through hands-on projects like Amazon, rock-paper-scissors, a to-do list, and a calculator. You’ll also integrate JavaScript with HTML, CSS, and back-end technologies, learning essential skills for real-world web development.

Course Introduction & Setup

• No prior coding experience required; course starts with JavaScript basics.
• By the end, you will build an Amazon-like website and smaller projects.
• Install Google Chrome and VS Code (Visual Studio Code) for web development.
• Use Live Server extension in VS Code to auto-refresh your browser.

JavaScript Fundamentals

• JavaScript adds interactivity to websites; HTML handles content and CSS styles appearance.
• Instructions to a computer are called code; code is written using programming languages (e.g., JavaScript, Python).
• Syntax are the rules you must follow when writing code; mistakes result in errors.
• Use the browser console to write and run JavaScript code interactively.

Numbers, Math & Order of Operations

• JavaScript can perform arithmetic: + (add), - (subtract), * (multiply), / (divide).
• The order of operations follows standard math rules: parentheses > multiply/divide > add/subtract.
• Calculating with decimals (floats) can result in inaccuracies; use integers (cents for money) and convert at the end.
• Use Math.round() to round numbers to the nearest integer.*

Strings & Text Manipulation

• Strings represent text and are surrounded by quotes (single '', double "", or backticks ``).
• Concatenation adds (joins) multiple strings together.
• Type coercion: adding a number to a string converts the number to a string.
• Template strings with backticks allow interpolation (directly insert values) and multi-line text.
• Escape characters (\n, ', ") allow for special characters in strings.

HTML & CSS Integration

• HTML defines structure (elements, attributes, classes); CSS sets styles (selectors, properties, values).
• Use <script> to add JavaScript to HTML, and the onclick attribute or addEventListener for interactivity.
• Comments are ignored by the browser (// in JS, <!-- --> in HTML, /* */ in CSS).
• Use console.log() to display output in the browser console.

Variables

• Variables store values for reuse; create with let (reassignable) or const (constant).
• Use camelCase for variable names; avoid reserved words and starting with numbers.
• You can reassign with = and use shortcuts like +=, ++.
• Use typeof to check a variable’s type.

Booleans & If Statements

• Booleans are true/false values; used for conditions.
• Comparison operators: <, >, <=, >=, === (equal), !== (not equal). Use === for strict equality.
• Logical operators: && (and), || (or), ! (not).
• If-else statements run code based on conditions; use else if for multiple branches.
• Truthy/falsy values: 0, "", null, undefined, NaN are falsy.

Functions

• Functions group reusable code; define with function keyword, call them by name().
• Parameters allow you to pass values to functions; return statements send values back.
• Functions can be stored in variables, passed as arguments, and used as callbacks.

Objects

• Objects group related data as key-value pairs (properties); access with dot or bracket notation.
• Methods are functions stored in objects.
• Objects are reference types; copying creates references, not duplicates.
• Use destructuring and shorthand notation for brevity.
• Use JSON and localStorage for storing data between page loads.

DOM Manipulation

• The Document Object Model (DOM) represents the webpage as objects you can modify with JS.
• Use document.querySelector to select elements, .innerHTML or .innerText to read/write content.
• Add event listeners for interactivity (click, keydown, etc.).
• Use classes to style and select elements specifically.

Arrays & Loops

• Arrays store lists of values; access with indexes (start at 0).
• Loop through arrays with for/while/forEach loops.
• Use the accumulator pattern to calculate totals or create new arrays.
• Array methods: push (add), splice (remove), filter, map.

Advanced JS: Functions, Callbacks, Arrow Functions

• Functions are first-class: can be saved, passed, and returned.
• Arrow functions (=>) provide a shorter syntax.
• Callbacks allow asynchronous and event-driven programming.
• Use addEventListener for events and modern JS features to avoid mixing JS and HTML.

Project Structure, Modules, and MVC

• Use modules (type="module", import/export) to organize code, avoid naming conflicts, and encapsulate logic.
• Use the MVC pattern: Model (data), View (UI), Controller (logic/event handling).

Asynchronous JS: Promises, Fetch, Async/Await

• Promises allow waiting for async tasks; .then() attaches next steps, .catch() handles errors.
• Fetch API replaces XMLHttpRequest for HTTP requests; returns promises.
• Use async functions and await to write asynchronous code that looks synchronous.
• Use try/catch for error handling in async code.

External Libraries, Testing, and OOP

• External libraries are pre-written code you can use (loaded via script/import).
• Jasmine is a popular testing framework for automated testing (describe, it, expect).
• Object-Oriented Programming (OOP): use classes to create structured, reusable objects with properties and methods.
• Classes can use constructors, inheritance (extends), private properties (#), and method overriding.
• Use URL parameters for passing data between pages.

Key Terms & Definitions

• Syntax — The set of rules for how code is written in a programming language.
• String — A sequence of characters, used for text.
• Variable — A named storage for a value.
• Boolean — A value that is either true or false.
• Array — An ordered list of values.
• Object — A collection of key-value pairs.
• Function — A reusable block of code.
• Callback — A function passed to another function for later execution.
• Promise — An object representing a future result of an asynchronous operation.
• Fetch — A modern API for making HTTP requests.
• Module — A file or unit of code encapsulated for reuse via import/export.
• Class — A blueprint for creating objects (OOP).
• MVC — Model-View-Controller, a way to organize code structure.

Action Items / Next Steps

• Complete provided exercises at the end of each lesson for practice.
• Apply learned concepts by building and expanding course projects.
• Explore further: Node.js for backend development, command line basics, and website deployment.
• Review and maintain code using testing frameworks and version control (git).