Dirk Harriman Banner Image

 

Notes Javascript - Quick Reference

  • Quick Reference

    Flow control, Iteration, Functions, Errors, Events, Data Structures, Classes

  • Javascript Overview

    Language Details, Variables, Hoisting, Scope, Data Structures, Literals, Special Characters

  • Control Flow

    If Else, Switch, For Next, Do While, While Do, For In, For Of with Arrays, Break, Continue

  • Error Handling

    Throw Esception, Error Object, Custom Errors, DOMEsception, Try Catch

  • Functions

    Declaration, Function Expression, Scope, Recursion, Anonymous, Closures, Immediately Invoked Function Expression, Namespace, Nesting, Arguments, Parameters, Arrow Functions, Predefined Functions

  • Expressions & Operators

    Assignment, Destructuring, Evaluation & Nesting, Comparison, Arithmetic, Bitwise, Binary Switches, Bitwise Logical, Bitwise Shift, Logical Operators, Short-Circuit Evaluation, BigInt, String, Ternary, Comma, Unary, Relational, Spread Syntax, Short Circuiting

  • Numbers & Dates

    Number Object, Math Object, Date Object

  • Text Formatting

    String Literals, Extended Characters, EC Table, String Object, String Functions, Template Literals

  • Regular Expressions

    RE Methods, String RE Methods, Building REs, Character Classes, Groups & Backreferences, Sample Code

  • Collections - Indexed & Keyed

    Arrays, Array Methods, Multi-Dimensional Array, Keyed Collections, Map, WeakMap, Set, WeakSet

  • Keyed Collections

    Map Object, WeakMap Object, Set Object

  • Objects

    Objects vs. JSON, Creating, Enumerating Properties, Inheritance, Getters and Setters, Examples

  • Classes

    Declaration, Constructors, Private Fields, Getters and Setters, Static Properties, Inheritance, This and Super

  • Promises

    Defined and Illustrated, Usage, Chaining, Arrow Functions, Nesting, Examples

  • Iterators & Generators

    Iterators, Generators, Generator Functions, Examples

  • Meta Programming

    Proxy Object

  • Javascript Modules

    Structure, Importing, Exporting, Import Maps, Remapping Module Paths, Scoped Modules For Version Management, Applying, Difference Between Modules & Standard Scripts, Name Conflict Avoidance, Creating Module Object, Modules & Classes, Aggregating

  • Client-Side Web APIs

    Defined, Usage, DOM, DOM Manipulation, Shopping List App

  • Closures

    IIFE, Closure Examples

  • DOM

    Document Object Model, Create Element, Remote HTML Doc Frag, Dynamic HTML, Web Component, DOM Methods

  • JSON

    JavaScript Object Notation, Examples

  • AJAX & JSON &XML

    Using JSON to pass data between client and server, Standard JS, jQuery, XML, Parsing, CDATA, GET, POST, Parameters, JSON Response, XML Response

  • AJAX & JSON Samples

    Examples: Standard and jQuery examples of AJAX GET and POST using JSON and XML.

  • AJAX & XML Samples

    Examples: AJAX and XML, both Standard and jQuery

  • Forms, Events, Data & AJAX

    Event Target, Add Event Listener, Remove Event Listener, Dispatch Event, Event Types, Button Click, Focus, Mouse Event

  • Form Input

    Button, Text Box, Data List, Text Area, Drop Down Lists, List Boxes, Dual List Boxes, Check Boxes, Radio Buttons

  • Custom Controls

    Building, Custom Drop Down List, Masked Input, Custom Check Boxes

  • Built In Functions & Events

    DOM (Document Object Model), DOM Constructor, DOM Instance Properties, DOM Instance Methods, DOM Events, DOM Inheritance

  • Await & Async

    Asynchronous Functionality, Async

  • Client-Side Frameworks

    React, Ember, Vue, Svelte, Angular

  • Data Structures

    Dynamic & Weak Typing, Primatives, Null, Undefined, Boolean, Number, BigInt, String, Symbol, Objects, Dates, Indexed Collections, Keyed Collections, JSON, Type Coersion, Primative Coersion, Number Coersion

  • Equality Comparisons & Sameness

    Strict Equality, Loose Equality, Same-Value-Zero Equality, Comparing Equality Methods, Truthyness & Falsyness

  • Enumerability & Ownership Of Properties

    Enumerable Properties & Non-enumerable Properties, Traversing Object Properties

  • Inheritance & The Prototype Chain

    Inheriting Properties, Inheriting Methods, Constructors, Prototype Chains

  • Typed Arrays

    Typed Array Architecture, ArrayBuffer, Web APIs Using Typed Arrays

  • Concurrency Model & Event Loop

    The Event Loop, Runtime Concepts, Stack, Queue, Heap

  • Graphics

    Using Canvas, List of Methods, Examples

  • Music Tabs App

    Smart Tab Files with quantative chords that can be transposed into other keys by half steps. Simple parser to convert tabs in a specified format into a smart tab that can be transposed.

  • Social Media Threader App

    A threader app that breaks up text into pieces that can be uploaded to certain social media where character limit contraints are a foactor.


 

 

Selection


let x = document.querySelector(selctorString); let x = document.querySelectorAll(selctorStr); let x = document.getElementById(IdStr); let x = document.getElementByTagName(TagStr); let x = document.getElementByClassName(ClassString);


 
 

Flow Control


if (condition) { statement1; } else { statement2; } if (condition1) { statement1; } else if (condition2) { statement2; } else if (conditionN) { statementN; } else { statementLast; }

switch (expression) { case label1: statements1; break; case label2: statements2; break; // ... default: statementsDefault; }

for (initialization; condition; afterthought) { // STATEMENT } for (let x=0; x<10; x++) { // STATEMENT } // SCRIPT 1 for (let x=0, y=1; x<10, y<9; x++, y++) { // STATEMENT } // SCRIPT 2 for (let x=0, y=10; x<10, y>0; x++, y--) { // STATEMENT } // SCRIPT 3 for (let x=0; x<10; x=x+2) { // STATEMENT } // SCRIPT 4 for (let x=1; x<10; x=x+2) { // STATEMENT } // SCRIPT 5 for (let x=0; x<100; x=x+10) { // STATEMENT }

Run Script 1   Run Script 2   Run Script 3   Run Script 4   Run Script 5  
 

 

do { // STATEMENT } while (condition);

while (condition) { // STATEMENT }

for (variable in object) { // STATEMENT } const obj = { a: 1, b: 2, c: 3 }; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); } // Logs: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"

for (variable of object) { // STATEMENT } const arr = [3, 5, 7]; arr.foo = "hello"; // FOR IN LOOPS OVER INDEXES for (const i in arr) { console.log(i); } // "0" "1" "2" "foo" // FOR OF LOOPS OVER VALUES for (const i of arr) { console.log(i); } // Logs: 3 5 7 function runScript6() { let result = document.getElementById("results2"); let resultStr = ""; let arr = [3,5,7]; arr.foo = "hello"; resultStr += "arr.length :"+ arr.length +"<br/>"; resultStr += "For In:<br/>"; for (const i in arr) { resultStr += "i: "+ i +"<br/>"; } resultStr += "<br/>For Of:<br/>"; for (const i of arr) { resultStr += "i: "+ i +"<br/>"; } result.innerHTML = resultStr; } function runScript7() { let result = document.getElementById("results2"); let resultStr = ""; const obj = { age: 51, id: 2324, fname: "Duke", lname: "Silver" }; for (const [key, val] of Object.entries(obj)) { resultStr += "key: "+ key +", val: "+ val +"<br/>"; } result.innerHTML = resultStr; }

Run Script 6   Run Script 7
 

 

 

Functions


function square(number) { return number * number; }

const square = function (number) { return number * number; };

// FUNCTION TAKES TWO PARAMETERS - A FUNCTION f, AND AN ARRAY a. function map(f, a) { const result = new Array(a.length); // BUILD A RESULT ARRAY THE SAME SIZE AS THE INPUT ARRAY for (let i = 0; i < a.length; i++) { // LOOP THROUGH INPUT ARRAY a result[i] = f(a[i]); // ASSIGN THE RESULT OF A FUNCTION CALL TO f TO RESULT ARRAY } return result; // REURN THE RESULT ARRAY } // CREATE A FUNCTION f, TO PASSED INTO THE ABOVE FUNCTION const f = function (x) { return x * x * x; }; // CREATE AN ARRAY TO BE PASSED INTO THE ABOVE FUNCTION const numbers = [0, 1, 2, 5, 10]; // MAKE FUNCTION CALL TO ABOVE FUNCTION USING THE FUNCTION f AND THE ARRAY numbers const cube = map(f, numbers); console.log(cube);

function loop(x) { // "x >= 5" IS THE EXIT CONDITION (EQUIVALENT TO "!(x < 10)") if (x >= 5) { return; } // DO STUFF loop(x + 1); // THE RECURSIVE CALL // WHERE THE CODE GOES AFTER EXIT CONDITION IS MET AND return IS CALLED } loop(0);

const square = function (number) { return number * number; }; const x = square(4); // x gets the value 16

// ANONYMOUS FUNCTION (function () { // CODE HERE }); // IIEF - Immediately Invoked Expression Function (function () { // CODE HERE })(); // IIEF - Arrow Function (() => { // CODE HERE })(); // IIEF - Async Function (async () => { // CODE HERE })();

(function(window, jQuery){ var foo = 'Hello'; var bar = 'World!'; function baz(){ return foo + ' ' + bar; }; // IN THIS CONTEXT, 'window' REFERS TO THE PARAMETER window.baz = baz; })(window, jQuery); // PASS IN A REFERENCE TO THE GLOBAL WINDOW OBJECT AND THE JQUERY OBJECT (function(w, doc, $){ console.log(w === window); //Returns 'true' })(window, document, jQuery); (function (w, $) { var Element = ""; var RowLimit = 25; var AddElement = function () { Element = "Initialized"; }; var ShowElement = function() { return "Row Limit: "+ RowLimit +'\n'+ "Element: "+ Element; }; var ClearElement = function() { Element = ""; }; w.AddElement = AddElement; w.ShowElement = ShowElement; })(window, jQuery); (function (w, $) { var Element = ""; var RowLimit = 22; var AddElement = function () { Element = "Initialized"; }; var ShowElement = function() { return "Row Limit: "+ RowLimit +'\n'+ "Element: "+ Element; }; var Clearlement = function() { Element = ""; }; w.AddEl = AddElement; // RENAMED FOR OUTSIDE API w.ShowEl = ShowElement; // RENAMED FOR OUTSIDE API })(window, jQuery);

function multiply(multiplier, ...theArgs) { return theArgs.map((x) => multiplier * x); } const arr = multiply(2, 1, 2, 3); console.log(arr); // [2, 4, 6] function runScript8() { let result = document.getElementById("results3"); let resultStr = ""; function multiply(multiplier, ...theArgs) { return theArgs.map((x) => multiplier * x); } const arr = multiply(3, 1, 2, 3, 4); for (let i=0; i<arr.length; i++) { resultStr += "arr["+ i +"] = "+ arr[i] +"<br/>"; } result.innerHTML = resultStr; }

Run Script 8
 

 

() => expression param => expression (param) => expression (param1, paramN) => expression () => { statements } param => { statements } (param1, paramN) => { statements }


 
 

Error Handling


openMyFile(); try { writeMyFile(theData); // THIS MAY THROW AN ERROR } catch (e) { handleError(e); // IF AN ERROR OCCURRED, HANDLE IT } finally { closeMyFile(); // ALWAYS CLOSE THE RESOURCE }


 
 

Events


class MyEventTarget extends EventTarget { constructor(mySecret) { super(); this._secret = mySecret; } get secret() { return this._secret; } }

let myEventTarget = new MyEventTarget(5); let value = myEventTarget.secret; // === 5 myEventTarget.addEventListener("foo", (e) => { myEventTarget._secret = e.detail; }); let event = new CustomEvent("foo", { detail: 7 }); myEventTarget.dispatchEvent(event); let newValue = myEventTarget.secret; // === 7

// CREATE CUSTOM EVENTS const catFound = new CustomEvent("animalfound", { detail: { name: "cat", }, }); const dogFound = new CustomEvent("animalfound", { detail: { name: "dog", }, }); // ADD AN APPROPRIATE EVENT LISTENER obj.addEventListener("animalfound", (e) => console.log(e.detail.name)); // DISPATCH THE EVENTS obj.dispatchEvent(catFound); obj.dispatchEvent(dogFound); // "cat" and "dog" logged in the console

function runScript9() { let result = document.getElementById("results4"); let resultStr = ""; let obj = document.getElementById("btn9"); // CREATE CUSTOM EVENTS const catFound = new CustomEvent("animalfound", { detail: { name: "cat", },}); const dogFound = new CustomEvent("animalfound", { detail: { name: "dog", },}); // ADD AN APPROPRIATE EVENT LISTENER obj.addEventListener("animalfound", (e) => { console.log("Event Occured"); resultStr += e.detail.name +"
"; }); // DISPATCH THE EVENTS obj.dispatchEvent(catFound); obj.dispatchEvent(dogFound); result.innerHTML = resultStr; }

Run Script 9
 

 

window.addEventListener("DOMContentLoaded", (event) => { // CODE HERE });

window.addEventListener("DOMContentLoaded", (event) => { const btn1Script2 = document.getElementById("btn1Script2"); if (btn1Script2) { btn1Script2.addEventListener("click", function() { alert("Button btn1Script2 Clicked"); },false); } else { console.log("Does not exist yet"); } });


 
 

Object, JSON


Objects in Javascript look a lot like JSON, but they are not the same. Objects are a programming construct that are similar to classes. JSON is a way of packaging data to be sent over TCP/IP.

function runScript10() { let result = document.getElementById("results5"); let resultStr = "Guitars<br/>"; let ElectricGuitar = function(make, model, year, num_strings, num_pickups, pickup_type, num_frets, finish, price) { this.make = make; this.model = model; this.year = year; this.num_strings = num_strings; this.num_pickups = num_pickups; this.pickup_type = pickup_type; this.num_frets = num_frets; this.finish = finish; this.price = price; } ElectricGuitar.prototype.showGuitar = function() { let gtrStr = ""; gtrStr += this.year +" "+ this.make +" "+ this.model +" "+ this.num_strings +" string guitar, with a "+ this.finish +" finish. Price: "+ formatCurrency(this.price) +"<br/>"; return gtrStr; } let guitar_01 = new ElectricGuitar("Fender", "Telecaster", 1962, 6, 2, "Single Coil", 22, "Satin Mustard", 1523.99); let guitar_02 = new ElectricGuitar("Rickenbacker", "360", 1968, 12, 2, "Single Coil", 22, "Fireglow", 1824.99); let guitar_03 = new ElectricGuitar("Epiphone", "Les Paul", 1992, 6, 2, "Humbucker", 22, "Flat Black", 1100.99); let guitar_04 = new ElectricGuitar("Eastwood", "Side Jack Baritone", 2018, 6, 2, "Humbucker", 22, "Aqua Blue", 749.99); let quiver = [guitar_01, guitar_02, guitar_03, guitar_04]; for (let i=0; i<quiver.length; i++) { resultStr += quiver[i].showGuitar(); } result.innerHTML = resultStr; } function formatCurrency(num) { num = num.toString().replace(/\$|\,/g, ''); if (isNaN(num)) { num = "0"; } sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 + 0.50000000001); cents = num % 100; num = Math.floor(num / 100).toString(); if (cents < 10) { cents = "0" + cents; } for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) { num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); } return (((sign) ? '' : '-') + '$' + num + '.' + cents); }

Run Script 10
 

 

// OBJECT - NOTE THE LACK OF PARENTHESIS AROUND color OR numberOfDrawers let chest_obj = { color: "red", numberOfDrawers: 4 } // JSON let chest_json = { "color":"red", "numberOfDrawers":4 }


 
 

Classes


class MyClass { // CONSTRUCTOR constructor() { // CONSTRUCTOR BODY } // INSTANCE FIELD myField = "foo"; // INSTANCE METHOD myMethod() { // myMethod body } // STATIC FIELD static myStaticField = "bar"; // STATIC METHOD static myStaticMethod() { // myStaticMethod body } // STATIC BLOCK static { // STATIC INITIALIZATION CODE } // Fields, methods, static fields, and static methods all have // "private" forms #myPrivateField = "bar"; } class Color { constructor(r, g, b) { // ASSIGN THE RGB VALUES AS A PROPERTY OF 'this'. this.values = [r, g, b]; } getRed() {return this.values[0];} getGreen() {return this.values[1];} getBlue() {return this.values[2];} setRed(value) {this.values[0] = value;} setGreen(value) {this.values[1] = value;} setBlue(value) {this.values[2] = value;} getHexColor() { let hexRed = ""; let hexGreen = ""; let hexBlue = ""; hexRed = this.values[0].toString(16); if (hexRed.length == 1) {hexRed += "0";} hexGreen += this.values[1].toString(16); if (hexGreen.length == 1) {hexGreen += "0";} hexBlue += this.values[2].toString(16); if (hexBlue.length == 1) {hexBlue += "0";} return hexRed + hexGreen + hexBlue; } setHexWhole(hexWhole) { // BREAK STRING INTO TWO CHARACTER PIECES const hexRedString = hexWhole.substring(0, 2); const hexGreenString = hexWhole.substring(2, 4); const hexBlueString = hexWhole.substring(4, 6); // CONVERT THE HEXADECIMAL STRING TO A NUMBER. this.values[0] = parseInt(hexRedString, 16); this.values[1] = parseInt(hexGreenString, 16); this.values[2] = parseInt(hexBlueString, 16); } }

function runScript11(){ let divResult = document.getElementById("results1"); let myColor = new Color(255,55,25); divResult.innerHTML = "Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); myColor.setRed(12); myColor.setGreen(20); myColor.setBlue(100); divResult.innerHTML += "<br/><b>Change Colors:</b>"; divResult.innerHTML += "<br/>Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); myColor.setHex("FF","09","CD"); divResult.innerHTML += "<br/><b>Set With Hex:</b>"; divResult.innerHTML += "<br/>Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); myColor.setHexWhole("AABD25"); divResult.innerHTML += "<br/><b>Set With Whole Hex:</b>"; divResult.innerHTML += "<br/>Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); }

Run Script 11
 

 

class ColorWeb { #values constructor(r, g, b) { // Assign the RGB values as a property of `this`. this.#values = [r, g, b]; } getRed() {return this.#values[0];} getGreen() {return this.#values[1];} getBlue() {return this.#values[2];} setRed(value) { if (value < 0 || value > 255) { alert("Invalid Red Value - RangeError"); throw new RangeError("Invalid R value"); } this.#values[0] = value; } setGreen(value) { if (value < 0 || value > 255) { alert("Invalid Green Value - RangeError"); throw new RangeError("Invalid G value"); } this.#values[0] = value; } setBlue(value) { if (value < 0 || value > 255) { alert("Invalid Blue Value - RangeError"); throw new RangeError("Invalid B value"); } this.#values[0] = value; } getHexColor() { let hexRed = ""; let hexGreen = ""; let hexBlue = ""; hexRed = this.#values[0].toString(16); if (hexRed.length == 1) {hexRed = "0" + hexRed;} hexGreen += this.#values[1].toString(16); if (hexGreen.length == 1) {hexGreen = "0" + hexGreen;} hexBlue += this.#values[2].toString(16); if (hexBlue.length == 1) {hexBlue = "0" + hexBlue;} return hexRed + hexGreen + hexBlue; } setHex(hexRed,hexGreen,hexBlue) { // CONVERT THE HEXADECIMAL NUMBER TO A STRING. const hexRedString = hexRed.toString(); const hexGreenString = hexGreen.toString(); const hexBlueString = hexBlue.toString(); // CONVERT THE HEXADECIMAL STRING TO A NUMBER. this.#values[0] = parseInt(hexRedString, 16); this.#values[1] = parseInt(hexGreenString, 16); this.#values[2] = parseInt(hexBlueString, 16); } setHexWhole(hexWhole) { // BREAK STRING INTO TWO CHARACTER PIECES const hexRedString = hexWhole.substring(0, 2); const hexGreenString = hexWhole.substring(2, 4); const hexBlueString = hexWhole.substring(4, 6); // CONVERT THE HEXADECIMAL STRING TO A NUMBER. this.#values[0] = parseInt(hexRedString, 16); this.#values[1] = parseInt(hexGreenString, 16); this.#values[2] = parseInt(hexBlueString, 16); } toString() { return this.#values.join(", "); } } function runScript12(){ let divResult = document.getElementById("results12"); let myColor = new ColorWeb(255,55,25); divResult.innerHTML += "<br/><b>Set With Valid Numbers:</b>"; divResult.innerHTML += "<br/>Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); divResult.innerHTML += "<br/><b>Set With An Invalid Number:</b>"; myColor.setRed(12); myColor.setGreen(256); // INVALID NUMBER, THROWS A RangeError EXCEPTION myColor.setBlue(100); divResult.innerHTML += "<br/>Red Value: "+ myColor.getRed(); divResult.innerHTML += "<br/>Green Value: "+ myColor.getGreen(); divResult.innerHTML += "<br/>Blue Value: "+ myColor.getBlue(); divResult.innerHTML += "<br/>"+ myColor.getHexColor(); }

Run Script 12
 

 

 
 

Regular Expressions


Run Script 12
 

 

 
 

Arrays, Sets & Maps



 
 

AJAX, XML & JSON