JavaScript
JavaScript is a scripting language used to make interactive web pages. It is inserted into a web page using the script element, either directly into the HTML file or loaded from a file or remote server.
JavaScript interacts with the user by altering the Document Object Model. JavaScript receives input by attaching event listeners (functions) to elements e.g. listening to click events on a button.
The following script removes a button when it is clicked:
const button = document.getElementById("my-button"); function eventListener(){ button.parentElement.removeChild(button); } button.addEventListener("click", eventListener);
The interactive elements on this website use JavaScript to toggle CSS properties and modify html elements.
This site uses 5 scripts:
- htmlToggle.js - Inserts reset element and radio buttons into the second cell of each row of the table #html-table, unless the cell has the .ignore class. Applies .hide, .highlighted CSS classes to the elements specified in the first cell on click. Displays #reset-button element when at least one element is modified. If <body> or <html> are hidden the script will reset after one second.
- themeToggle.js - Inserts a checkbox that toggles the dark theme class on <body>. Styled by CSS. Stores the current theme in localStorage. The initial value is decided by the OS theme if it is not set in localStorage. Updates when the OS theme is changed. If the checkbox is focused by keyboard, a CSS class is added that adds a border to the CSS-inserted image to show focus. On browsers that do not allow for checking keyboard focus (the :focus-visible selector), any click on the button shows the border (:focus). The localStorage theme value expires after an hour passes without the website open. I would have used sessionStorage to discard the value after the user closes the browser, but sessionStorage creates a new session when a tab is opened, instead of keeping one session for the entire browser, so I faked the 'delete on session end' functionality with a time limit for the entire browser. When the moon images are first inserted, the script checks if clicking an image clicks the checkbox. If it does not, it adds an event listener that clicks the checkbox instead. This fixes an Internet Explorer bug where clicking images inside label elements does not click the label's associated form element.
- CSSToggle.js - Adds an event listener to the #CSSToggle element to add/remove the CSS element on click.
- addMDNLinks.js - Links element names in the html page to the Mozilla HTML elements reference. The target is specified using the mdn-link-target-container class with the data-mdn-link-selector="tr td:first-child" attribute. The scripts cannot simply check every cell in the table for html element names, because there is no way to check if a word exists in the HTML reference website. Security restrictions on HTTP requests to foreign websites prevent JavaScript from checking if the link returns a 404 error, so the first cell of each row selector is needed.
- showOriginal.js - If the "View original version" popup exists, inserts a minimize button, toggles the .minimized class, stores the minimization state in localStorage and minimized the popup immediately on load if it was minimized on the previous page. Replaces the "Load" link with a button that inserts an iframe and displays the semi-transparent backdrop that hides the rest of the page. If the user presses ESC inside or outside the iframe, or clicks outside the iframe, it is removed and the backdrop is hidden. If iframe loses focus, it is refocused (necessary for good keyboard accessibility). If somehow the button is clicked when an iframe already exists, nothing happens.
- core-js - A polyfill library that implements many standard JavaScript features. A polyfill is JavaScript that implements JS features for browsers that do not support them. Not directly imported from a script tag. Necessary parts of core-js are detected at build time and merged into the other scripts. Common code is stored in "shared.js" to avoid duplicated code.
- dom4 - Polyfill library similar to core-js that implements Document Object Model functions and properties. Fixes implementation errors and missing DOM functions in older browsers. This file is directly imported from a public CDN (Content Distribution Network) service instead of being stored with the other scripts (this is a common way of importing libraries).