💻

JavaScript Course Overview

Aug 18, 2025

Overview

This course teaches JavaScript from beginner to professional level, focusing on building interactive websites and projects. Key topics include JavaScript fundamentals, integration with HTML/CSS, advanced features like OOP and async programming, backend communication, and best coding practices.

Course Projects & Structure

  • You will build projects including Amazon.com clone, rock-paper-scissors game, to-do list, and calculator.
  • No prior coding experience is needed; concepts are introduced step by step.
  • The course includes over 250 exercises for practice.

JavaScript Basics

  • JavaScript makes websites interactive by following instructions called code.
  • Main programming languages for web: HTML (content), CSS (style), JavaScript (interaction).
  • Syntax rules (grammar) must be followed exactly, or errors occur.
  • Use browser console (Inspect > Console) to run and test JavaScript code (e.g., alert('hello');, 2 + 2).

Math & Operations

  • Supports addition (+), subtraction (-), multiplication (*), division (/).
  • Order of operations: multiplication/division before addition/subtraction, use brackets to group.
  • Calculate percentages by multiplying by decimal (e.g., 10% is * 0.1).
  • Best practice: handle money in cents as integers to avoid floating point inaccuracies.

Strings & Text

  • Strings represent text and are created with single, double, or backtick quotes.
  • Concatenation: combine text using + or template strings ${value}.
  • Escape characters: \', \", \n for special characters or line breaks.
  • Use typeof to check a value's type.

HTML & CSS Integration

  • Create HTML files with structure: <!DOCTYPE html>, <html>, <head>, <body>.
  • Use VS Code as a code editor, with Live Server for auto-refresh.
  • Add JavaScript via <script> tag (usually at end of <body>); run code when page loads or on button click (via onclick attribute).
  • Style specific HTML elements using classes and CSS selectors (e.g., .my-class { color: red; }).

Variables

  • Declare with let (modifiable), const (constant), or var (legacy).
  • Variables store values to be used or changed later.
  • Use camelCase for variable names by convention.

Booleans & If Statements

  • Booleans: true or false.
  • Use comparisons (>, <, ===, !==) to produce booleans.
  • Control code flow with if, else if, else.
  • Logical operators: && (and), || (or), ! (not).
  • Truthy/falsy: 0, '', null, undefined, NaN, false are falsy; others are truthy.

Functions

  • Functions group reusable code: function myFunction() { ... }
  • Return values with return; supply input parameters in parentheses.
  • Arrow functions (const x = () => {}) are a shorter syntax.

Objects & Arrays

  • Objects group related data: { property: value, ... }.
  • Access with dot or bracket notation (obj.prop or obj['prop']).
  • Arrays store ordered lists: [value1, value2], access by index (arr[0]).
  • Objects and arrays are reference types and can be mutated.

DOM Manipulation

  • Use document.querySelector to access HTML elements.
  • Modify with .innerHTML, .innerText, or properties.
  • Add event listeners with .addEventListener('event', function).
  • Classes can be changed with .classList.add/remove.

Advanced JavaScript Features

  • Comments: // for single-line, /* ... */ for multi-line.
  • Use console.log() for debugging output.
  • Modules: use export, import to organize code across multiple files and avoid naming conflicts.
  • Promises and async/await: handle asynchronous code and backend requests.
  • Fetch API: use fetch(url) to make HTTP requests and handle responses.

Testing & Best Practices

  • Manual testing is done by interacting with the site.
  • Automated testing uses code (e.g., Jasmine framework) to run checks on code behaviour.
  • Group tests into test suites and describe cases for clarity.
  • Use hooks (beforeEach, beforeAll) and mocks/spies to control test environments.

Object-Oriented Programming

  • Organize code into objects (OOP style) using classes.
  • Use properties, methods, constructors, private fields (with #), and inheritance (extends).
  • OOP helps model real-world concepts and supports code reuse and modularity.

Backend Integration & HTTP Requests

  • Backend is a server that manages website data; frontend is user interface/browser.
  • Javascript can send HTTP requests using fetch() (preferred) or XMLHttpRequest.
  • GET gets data, POST sends data, PUT updates, DELETE removes.
  • Use async/await for asynchronous requests; handle errors with try/catch.
  • URL parameters (e.g., ?param=value) let you pass data via URLs.

Key Terms & Definitions

  • Variable — named container for a value.
  • Function — reusable block of code.
  • Object — collection of related data and functions.
  • Array — ordered list of values.
  • Promise — object representing a value that may be available now, later, or never.
  • Callback — function passed to another function to run later.
  • Module — separate file or piece of code for organization.
  • Class — template for creating objects with shared structure and behaviour.
  • DOM — Document Object Model, API for interacting with webpage structure.
  • API — Application Programming Interface, set of endpoints for data exchange.

Action Items / Next Steps

  • Complete all practice exercises after each lesson.
  • Review and refactor your code using best practices and modules.
  • Use automated testing to check your code.
  • Explore backend technologies (Node.js, command line) for next steps.
  • Practice solving exercises and building your own mini-projects.

Full transcript