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.
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 Then Else
1234567891011121314151617
if (condition) {
statement1;
} else {
statement2;
}
if (condition1) {
statement1;
} else if (condition2) {
statement2;
} else if (conditionN) {
statementN;
} else {
statementLast;
}
Switch
12345678910111213
switch (expression) {
case label1:
statements1;
break;
case label2:
statements2;
break;
// ...
default:
statementsDefault;
}
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;
}
function square(number) {
return number * number;
}
Expression Function
12345
const square = function (number) {
return number * number;
};
Function As Parameter
12345678910111213141516171819202122
// 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);
Recursive
123456789101112
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);
Anonymous Function Expression
123456
const square = function (number) {
return number * number;
};
const x = square(4); // x gets the value 16
IIEF - Immediately Invoked Expression Function
12345678910111213141516171819202122
// 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);
Rest Parameters
12345678910111213141516171819202122
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;
}
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
Custom Events
123456789101112
class MyEventTarget extends EventTarget {
constructor(mySecret) {
super();
this._secret = mySecret;
}
get secret() {
return this._secret;
}
}
Custom Events
1234567891011
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
Dispatch Events
1234567891011121314
// 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
Running Example
12345678910111213141516171819202122
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;
}
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.
// 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
}