Learn JavaScript Online

JavaScript browser runtime

JavaScript event loop, window object, browser runtime, and animation

Learn the JavaScript browser runtime with lessons on the window object, window sizes and scrolling, event loop, microtasks, macrotasks, popups, postMessage, clickjacking, and JavaScript animations.

Browser runtime and event loop lessons

  1. Browser environment and window object

    Understand the browser runtime, global window object, DOM entry points, BOM APIs, and JavaScript execution context.

    Outcome: Recognize how JavaScript code runs inside the browser environment.

    • JavaScript window object
    • browser JavaScript
    • browser runtime
    Study Browser environment, specs

  2. Window sizes and scrolling

    Read viewport dimensions, scroll positions, and use scrollTo, scrollBy, and scrollIntoView.

    Outcome: Handle viewport and scroll behavior with browser APIs.

    • window size JavaScript
    • JavaScript scroll
    • scrollIntoView
    Study Window sizes and scrolling

  3. Event loop, microtasks, and macrotasks

    Study the event loop, task queues, microtasks, macrotasks, rendering timing, and asynchronous browser execution.

    Outcome: Predict async execution order across promises, timers, rendering, and browser events.

    • JavaScript event loop
    • microtasks JavaScript
    • macrotasks JavaScript
    Study Event loop: microtasks and macrotasks

  4. Popups and window methods

    Use window.open, popup references, opener relationships, popup blocking rules, and browser window controls.

    Outcome: Understand when popup windows work and how they communicate with opener pages.

    • window.open JavaScript
    • JavaScript popup
    • popup window JavaScript
    Study Popups and window methods

  5. Cross-window communication

    Work with iframes, same-origin policy, window.frames, window.parent, sandbox, and postMessage.

    Outcome: Communicate between frames and windows without violating browser origin rules.

    • postMessage JavaScript
    • iframe JavaScript
    • cross window communication
    Study Cross-window communication

  6. Clickjacking protection

    Learn how clickjacking works, why frames can be dangerous, and how frame protection reduces UI attacks.

    Outcome: Recognize browser frame security risks that affect JavaScript applications.

    • clickjacking JavaScript
    • iframe security
    • browser security JavaScript
    Study The clickjacking attack

  7. JavaScript animations

    Build JavaScript animations with timing functions, requestAnimationFrame, progress values, and rendering loops.

    Outcome: Create animation loops that cooperate with browser rendering.

    • JavaScript animations
    • requestAnimationFrame
    • animation JavaScript
    Study JavaScript animations