jeudi 4 août 2022

Javascript

Des bouts de code de javascript qui m'ont été parfois utiles

Table générale

• Cheat sheet
• Bouts de code
• Champs de bits

Cheat sheet

Source

Table

• Bases
• Loops
• If Else
• Variables
• Data types
• Strings
• Events
• Math
• Dates
• Arrays
• Global functions
• Regular expressions
• Errors
• Json
• Promises

Bases

On page script

<script type="text/javascript">  ...  </script>

Include external JS file

<script src="filename.js"></script>

Delay - 1 second timeout

setTimeout(function () { }, 1000);

Functions

function addNumbers(a, b) {
	return a + b; 
}
x = addNumbers(1, 2);

Edit DOM element

document.getElementById("elementID").innerHTML = "Hello World!";

Output

console.log(a);     // write to the browser console
document.write(a);  // write to the HTML
alert(a);           // an alert box
confirm("Really?"); // yes/no dialog, returns true/false depending on user click
prompt("Your age?","0"); // input dialog. Second argument is the initial value

Comments

/* Multi line
comment */
// One line comment

Loops

For Loop

for (var i = 0; i < 10; i++) {
document.write(i + ": " + i*3 + "\<br /\>");
}

var sum = 0;
for (var i = 0; i < a.length; i++) {
sum + = a[i];
}               // parsing an array

html = "";
for (var i of custOrder) {
html += "\<li\>" + i + "\</li\>";
}

While Loop

var i = 1;        // initialize
while (i < 100) { // enters the cycle if statement is true
i *= 2;           // increment to avoid infinite loop
document.write(i + ", "); // output
}

Do While Loop

var i = 1;   // initialize
do {         // enters cycle at least once
i *= 2;      // increment to avoid infinite loop
document.write(i + ", "); // output
} while (i < 100)         // repeats cycle if statement is true at the end

Break

for (var i = 0; i < 10; i++) {
if (i == 5) { break; }    // stops and exits the cycle
document.write(i + ", "); // last output number is 4
}

Continue

for (var i = 0; i < 10; i++) {
if (i == 5) { continue; } // skips the rest of the cycle
document.write(i + ", "); // skips 5
}

If Else

if ((age >= 14) && (age < 19)) { // logical condition
status = "Eligible.";            // executed if condition is true
} else {                         // else block is optional
status = "Not eligible.";        // executed if condition is false
}

Switch Statement

switch (new Date().getDay()) {  // input is current day
case 6:                         // if (day == 6)
	text = "Saturday";          
	break;
case 0:                         // if (day == 0)
	text = "Sunday";
	break;
default:                        // else...
	text = "Whatever";
} 

Variables

var a;                          // variable
var b = "init";                 // string
var c = "Hi" + " " + "Joe";     // = "Hi Joe"
var d = 1 + 2 + "3";            // = "33"
var e = [2,3,5,8];              // array
var f = false;                  // boolean
var g = /()/;                   // RegEx
var h = function(){};           // function object
const PI = 3.14;                // constant
var a = 1, b = 2, c = a + b;    // one line
let z = 'zzz';                  // block scope local variable

Strict mode

"use strict";   // Use strict mode to write secure code
x = 1;          // Throws an error because variable is not declared

Values

false, true                     // boolean
18, 3.14, 0b10011, 0xF6, NaN    // number
"flower", 'John'                // string
undefined, null , Infinity      // special

Operators

a = b + c - d;      // addition, substraction
a = b * (c / d);    // multiplication, division
x = 100 % 48;       // modulo. 100 / 48 remainder = 4
a++; b--;           // postfix increment and decrement

Bitwise operators

Arithmetic

a * (b + c)         // grouping
person.age          // member
person[age]         // member
!(a == b)           // logical not
a != b              // not equal
typeof a            // type (number, object, function...)
x << 2  x >> 3      // minary shifting
a = b               // assignment
a == b              // equals
a != b              // unequal
a === b             // strict equal
a !== b             // strict unequal
a < b   a > b       // less and greater than
a <= b  a >= b      // less or equal, greater or eq
a += b              // a = a + b (works with - * %...)
a && b              // logical and
a || b              // logical or

Data types

var age = 18;                           // number 
var name = "Jane";                      // string
var name = {first:"Jane", last:"Doe"};  // object
var truth = false;                      // boolean
var sheets = ["HTML","CSS","JS"];       // array
var a; typeof a;                        // undefined
var a = null;                           // value null

Objects

var student = {             // object name
firstName:"Jane",           // list of properties and values
lastName:"Doe",
age:18,
height:170,
fullName : function() {     // object function
   return this.firstName + " " + this.lastName;
}
}; 
student.age = 19;           // setting value
student[age]++;             // incrementing
name = student.fullName();  // call object function

Strings

var abc = "abcdefghijklmnopqrstuvwxyz";
var esc = 'I don\'t \n know';   // \n new line
var len = abc.length;           // string length
abc.indexOf("lmno");            // find substring, -1 if doesn't contain 
abc.lastIndexOf("lmno");        // last occurance
abc.slice(3, 6);                // cuts out "def", negative values count from behind
abc.replace("abc","123");       // find and replace, takes regular expressions
abc.toUpperCase();              // convert to upper case
abc.toLowerCase();              // convert to lower case
abc.concat(" ", str2);          // abc + " " + str2
abc.charAt(2);                  // character at index: "c"
abc[2];                         // unsafe, abc[2] = "C" doesn't work
abc.charCodeAt(2);              // character code at index: "c" -> 99
abc.split(",");                 // splitting a string on commas gives an array
abc.split("");                  // splitting on characters
128.toString(16);               // number to hex(16), octal (8) or binary (2)

Events

<button onclick="myFunction();">
Click here
</button>

Mouse

onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup

Keyboard

onkeydown, onkeypress, onkeyup

Frame

onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload

Form

onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit

Drag

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

Clipboard

oncopy, oncut, onpaste

Media

onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting

Animation

animationend, animationiteration, animationstart

Miscellaneous

transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart

Math

var pi = 3.141;
pi.toFixed(0);          // returns 3
pi.toFixed(2);          // returns 3.14 - for working with money
pi.toPrecision(2)       // returns 3.1
pi.valueOf();           // returns number
Number(true);           // converts to number
Number(new Date())      // number of milliseconds since 1970
parseInt("3 months");   // returns the first number: 3
parseFloat("3.5 days"); // returns 3.5
Number.MAX_VALUE        // largest possible JS number
Number.MIN_VALUE        // smallest possible JS number
Number.NEGATIVE_INFINITY// -Infinity
Number.POSITIVE_INFINITY// Infinity

Math.

var pi = Math.PI;       // 3.141592653589793
Math.round(4.4);        // = 4 - rounded
Math.round(4.5);        // = 5
Math.pow(2,8);          // = 256 - 2 to the power of 8
Math.sqrt(49);          // = 7 - square root 
Math.abs(-3.14);        // = 3.14 - absolute, positive value
Math.ceil(3.14);        // = 4 - rounded up
Math.floor(3.99);       // = 3 - rounded down
Math.sin(0);            // = 0 - sine
Math.cos(Math.PI);      // OTHERS: tan,atan,asin,acos,
Math.min(0, 3, -2, 2);  // = -2 - the lowest value
Math.max(0, 3, -2, 2);  // = 3 - the highest value
Math.log(1);            // = 0 natural logarithm 
Math.exp(1);            // = 2.7182pow(E,x)
Math.random();          // random number between 0 and 1
Math.floor(Math.random() * 5) + 1;  // random integer, from 1 to 5

Constants like Math.PI:

E, PI, SQRT2, SQRT1_2, LN2, LN10, LOG2E, Log10E

Dates

Sun Aug 07 2022 05:37:43 GMT+0200 (heure d’été d’Europe centrale)

var d = new Date();

1659843463170 miliseconds passed since 1970

Number(d)

Date("2017-06-23");                 // date declaration
Date("2017");                       // is set to Jan 01
Date("2017-06-23T12:00:00-09:45");  // date - time YYYY-MM-DDTHH:MM:SSZ
Date("June 23 2017");               // long date format
Date("Jun 23 2017 07:45:00 GMT+0100 (Tokyo Time)"); // time zone

Get Times

var d = new Date();
a = d.getDay();     // getting the weekday
getDate();          // day as a number (1-31)
getDay();           // weekday as a number (0-6)
getFullYear();      // four digit year (yyyy)
getHours();         // hour (0-23)
getMilliseconds();  // milliseconds (0-999)
getMinutes();       // minutes (0-59)
getMonth();         // month (0-11)
getSeconds();       // seconds (0-59)
getTime();          // milliseconds since 1970

Setting part of a date

var d = new Date();
d.setDate(d.getDate() + 7); // adds a week to a date
setDate();          // day as a number (1-31)
setFullYear();      // year (optionally month and day)
setHours();         // hour (0-23)
setMilliseconds();  // milliseconds (0-999)
setMinutes();       // minutes (0-59)
setMonth();         // month (0-11)
setSeconds();       // seconds (0-59)
setTime();          // milliseconds since 1970)

Arrays

var dogs = ["Bulldog", "Beagle", "Labrador"]; 
var dogs = new Array("Bulldog", "Beagle", "Labrador");  // declaration
 
alert(dogs[1]);             // access value at index, first item being [0]
dogs[0] = "Bull Terier";    // change the first item
 
for (var i = 0; i < dogs.length; i++) {     // parsing with array.length
console.log(dogs[i]);
}

Methods

dogs.toString();                        // convert to string: results "Bulldog,Beagle,Labrador"
dogs.join(" * ");                       // join: "Bulldog * Beagle * Labrador"
dogs.pop();                             // remove last element
dogs.push("Chihuahua");                 // add new element to the end
dogs[dogs.length] = "Chihuahua";        // the same as push
dogs.shift();                           // remove first element
dogs.unshift("Chihuahua");              // add new element to the beginning
delete dogs[0];                         // change element to undefined (not recommended)
dogs.splice(2, 0, "Pug", "Boxer");      // add elements (where, how many to remove, element list)
var animals = dogs.concat(cats,birds);  // join two arrays (dogs followed by cats and birds)
dogs.slice(1,4);                        // elements from [1] to [4-1]
dogs.sort();                            // sort string alphabetically
dogs.reverse();                         // sort string in descending order
x.sort(function(a, b){return a - b});   // numeric sort
x.sort(function(a, b){return b - a});   // numeric descending sort
highest = x[0];                         // first item in sorted array is the lowest (or highest) value
x.sort(function(a, b){return 0.5 - Math.random()});     // random order sort

concat, copyWithin, every, fill, filter, find, findIndex, forEach, indexOf, isArray, join, lastIndexOf, map, pop, push, reduce, reduceRight, reverse, shift, slice, some, sort, splice, toString, unshift, valueOf

Global functions

eval();                     // executes a string as if it was script code
String(23);                 // return string from number
(23).toString();            // return string from number
Number("23");               // return number from string
decodeURI(enc);             // decode URI. Result: "my page.asp"
encodeURI(uri);             // encode URI. Result: "my%page.asp"
decodeURIComponent(enc);    // decode a URI component
encodeURIComponent(uri);    // encode a URI component
isFinite();                 // is variable a finite, legal number
isNaN();                    // is variable an illegal number
parseFloat();               // returns floating point number of string
parseInt();                 // parses a string and returns an integer

Regular expressions

var a = str.search(/CheatSheet/i);

Modifiers

Patterns

Errors

try {                           // block of code to try
undefinedFunction();
}
catch(err) {                    // block to handle errors
console.log(err.message);
}

Throw error

throw "My error message";    // throw a text

Input validation

var x = document.getElementById("mynum").value; // get input value
try { 
if(x == "")  throw "empty";                 // error cases
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x > 10)   throw "too high";
}
catch(err) {                                    // if there's an error
document.write("Input is " + err);          // output error
console.error(err);                         // write the error in console
}
finally {
document.write("</br />Done");              // executed regardless of the try / catch result
}

Error name values

Json

var str = '{"names":[' +                    // crate JSON object
'{"first":"Hakuna","lastN":"Matata" },' +
'{"first":"Jane","lastN":"Doe" },' +
'{"first":"Air","last":"Jordan" }]}';
obj = JSON.parse(str);                      // parse
document.write(obj.names[1].first);         // access

Send

var myObj = { "name":"Jane", "age":18, "city":"Chicago" };  // create object
var myJSON = JSON.stringify(myObj);                         // stringify
window.location = "demo.php?x=" + myJSON;                   // send to php

Storing and retrieving

myObj = { "name":"Jane", "age":18, "city":"Chicago" };
myJSON = JSON.stringify(myObj);                 // storing data
localStorage.setItem("testJSON", myJSON);   
text = localStorage.getItem("testJSON");        // retrieving data 
obj = JSON.parse(text);
document.write(obj.name);

Promises

function sum (a, b) {
return Promise(function (resolve, reject) { 
 setTimeout(function () {         // send the response after 1 second
   if (typeof a !== "number" || typeof b !== "number") {  // testing input types
	 return reject(new TypeError("Inputs must be numbers"));
   }
   resolve(a + b);
 }, 1000);
});
}
var myPromise = sum(10, 5);
myPromsise.then(function (result) {
document.write(" 10 + 5: ", result);
return sum(null, "foo");         // Invalid data and return another promise
}).then(function () {            // Won't be called because of the error
// The catch handler is called instead, after another second
}).catch(function (err) { 
console.error(err);              // => Please provide two numbers to sum.
});

States

pending, fulfilled, rejected

Properties

Promise.length, Promise.prototype

Methods

Promise.all(iterable), Promise.race(iterable), Promise.reject(reason), Promise.resolve(value)

Bouts de code

Somme des éléments d'un tableau

console.log([1, 2, 3, 4].reduce((sum, e) => sum + e));

Cf. Array.prototype.reduce() que j'ai encore «réduite» en n'utilisant pas de valeur initiale.

Somme cumulative

let a = [1, 2, 3, 4];
let b = [a[0]];
for(let i=1; i<a.length; i++) b.push(b[i - 1] + a[i]);
console.log(b); // Array(4) [ 1, 3, 6, 10 ]

Champs de bits

En C on peut dédier une structure à une suite de champs de bits qui permet soit de compacter l'information soit pour qu'elle corresponde à une représentation fixe (mot d'état de communication). Il m'a semblé qu'aucun objet de js ne correspond à cette situation et j'ai voulu en implémenter un.

function BitsFields()
{
	this.format = undefined;
	this.stuff = function(data) // data is an array of short numbers
	{
		let stuffed = BigInt(data[0]);
		for(let n=1; n<this.format.length; n++)
		{
			stuffed <<= BigInt(this.format[n]);
			stuffed |= BigInt(data[n]);
		}
		return stuffed;
	}
	this.unstuff = function(v)
	{
		let data = [];
		for(let n=this.format.length-1; n>=0; n--)
		{
			data.unshift(v & ((1n << BigInt(this.format[n])) -1n));
			v >>= BigInt(this.format[n]);
		}
		return data;
	}
}

La fonction BitsFields() est un constructeur d'objet de type champ de bits. On crée une instance avec :

let bf = new BitsFields();

Pour que cette instance devienne opérationnelle il faut définir le champ format qui donne les longueurs en bits des différents nombres (ou mots) qui composent l'objet. On fera par exemple :

bf.format = [8, 1, 8, 1, 16];

On a dans cet exemple deux données qui tiennent sur un octet (8 bits) suivies chacune d'un bit (par exemple true, false) et pour finir un champ sur deux octets (16 bits).

On peut alors produire un nombre (en js ils sont tous de 64 bits, dont 51 forment la mantisse), par exemple :

let v = bf.stuff([45, 1, 100, 0, 2358]);

Dans ce nombre v sont fourrés les cinq nombres 45, 1, 100, 0, 2358. La représentation en binaire de v est :

0010110110110010000000100100110110
└─ 45 ─┘↑└─ 100 ┘↑└──── 2358 ────┘
        1        0

On y voit que v est composé de cinq champs binaires de longueurs respectives 8, 1, 8, 1, 16 bits.

Admettons qu'on l'empile dans une pile. Lorsqu'on va le dépiler on voudrait récupérer nos cinq nombres. On fera :

let a = bf.unstuff(v);

On aura alors a == [45, 1, 100, 0, 2358].

Remarques importantes

• Pour des raisons de dépassement de capacité j'ai utilisé dans mes fonctions des BigInt et à la fin de unstuff je suis revenu à Number. Je ne suis pas sûr qu'il ne peut pas y avoir de mauvaises surprises.
• Je ne contrôle pas que les deux tableaux data et format ont la même longueur. Je suppose que l'utilisateur sait ce qu'il fait. Sinon je ne sais pas ce qui se passe.

Fichiers joints bitsf.js et test_bitsf.html, ce dernier donne un exemple d'utilisation du constructeur BitsFields.