Javascript

I don't have much direct use for javascript, but given its popularity and status as the de-facto web language it is necessary learning for all students of the internet.

• on javascript versions

  • JS has been around since the 90s where it was introduce with a typical versioning scheme starting at 1.0. Some transpilers such as parenscript reference this versioning scheme (*js-target-version* is "1.3")

    The most significant change in JavaScript 1.3 was compliance with ECMA-262 and Unicode by removing inconsistencies between JavaScript 1.2 and the new ECMA standard (which was published in June 1997). Additional features of version 1.2, at the time not specified by ECMA-262 were kept in the JavaScript language

  • ECMA took over in the late 90s and it became ES1-ES6, but now it seems there is a yearly cadence and they should use a simple integer??
  • ES5 seems to be the minimum for web browsers - 2009 version
  • ES6 is generally supported by all versions - 2015 version
  • AFTER 2015, went to a yearly release cadence (JS 2016 - JS 2025)
  • as of 2025 we are on the 16th Edition of ECMAScript
• ECMAScript® 2026 Language Specification (latest draft)
• tc39/test262: Official ECMAScript Conformance Test Suite

• version detection is a waste of time in JS

  • instead, use feature detection
  • Implementing feature detection - Learn web development | MDN
  • John Resig: Future-Proofing Javascript Libraries
  • Checking Javascript Version (Why It Makes No Sense)

  function supports_canvas() {
    return !!document.createElement("canvas").getContext;
  }
  
  if (supports_canvas()) {
    // Create and draw on canvas elements
  }
  

  The double NOT in the above example (!!) is a way to force a return value to become a "proper" boolean value, rather than a Truthy/Falsy value that may skew the results.

  • see also Window: matchMedia() method - Web APIs | MDN

  if (window.matchMedia("(width <= 480px)").matches) {
    // run JavaScript in here.
  }
  

  • @supports - CSS | MDN
  • we always want to avoid this stuff (just upgrade your browser silly) Polyfill - Glossary | MDN
  • Feature Detection in JavaScript | Medium

  if (typeof fetch === "function") {
    fetch("/data.json")
      .then(res => res.json())
      .then(data => {
        console.log("Fetched data:", data);
      });
  }
  
  // check for web share API
  if (typeof navigator.share === "function") {
    navigator.share({
      title: "Web Feature Example",
      text: "This device supports sharing",
      url: window.location.href
    });
  }
  
  // using the ?. operator
  const penSupported =
    (navigator?.maxTouchPoints ?? 0) > 0 &&
    ("PointerEvent" in window);
  if (penSupported) {
    console.log("Device supports pointer input.");
  }
  
  // check color-scheme
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  if (prefersDark) {
    document.documentElement.classList.add("dark-theme");
  }
  
  // check hover input
  const hasHover = window.matchMedia("(hover: hover)").matches;
  if (hasHover) {
    document.body.classList.add("hover-supported");
  }