Expressions régulières

// variable enrourée de {{ }} 
// double pour éviter de capturer if(){} et autre accolades simples 
var formule = 'ma formule avec une {{variable}} et autre chose'; 
var mavariable = '12'; 
// remplace une variable par sa valeur avant un eval 
var moneval = formule.replace(/{{(.*?)}}/g, mavariable) ; 
console.log(moneval); // ma formule avec une 12 et autre chose 
// 'habille' la variable pour la trouver dans un objet avant un eval 
var moneval = formule.replace(/{{(.*?)}}/g, 'montableau[\'$1\']') ; 
// ma formule avec une montableau['variable'] et autre chose' 
console.log(moneval); 

Notepad ++ ajouter apostrophes aux variables PHP
mavariable[param] -> mavariable[« param »]

recherche \[([a-zA-Z0-9_]*)\]
remplace \["\1"\]

Construction en ligne d’expressions régulières, REGEX avec explications et aides https://regex101.com/#javascript

Notes javascript

Rappel, pour tester du javascript ICI

Javascript boucles

// for ( initialisation variables ; condition à tester ; à exécuter à chaque passage
// on peut omettre une section, mais il faut les ; 
for (i = 0, len = cars.length, text = ""; i < len; i++) {
    text += cars[i] + "<br>";
}
// on peut omettre une section, mais il faut les ; 
// ex 
var i=0;
for (; i < len; ) { i++;}

//**************************************************
// for sur les propriétés d'un objet ou d'un array
var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

// attention aucune garanties sur l'ordre, notamment d'un navigateur à l'autre

//**********************************************
while (i < 10) {
    text += "The number is " + i;
    i++;
}

//**********************************************
myArray.forEach(function(item, index) {
    console.log(item, index);
});

Javascript table

Article

var arrayLignes = document.getElementById("monTableau").rows;
var longueur = arrayLignes.length;
var i=2 // 2eme ligne
var arrayColonnes = arrayLignes[i].cells;
var j=3;
var cellule=arrayColonnes[j];
cellule.style.backgroundColor = "red";  // change la couleur de la 3eme celulle de la 2eme ligne

rowIndex
sectionRowIndex
// numéro de ligne 0 en bas nbligne-1 en haut

var nouvelleLigne = document.getElementById("monBody").insertRow(-1); // insère une ligne en bas du tableau

// clique sur une cellule récupère le col_num et row_num et modifie le contenu
$(document).ready(function(){
    $("#client_table td").click(function() {     
 
        var col_num = parseInt( $(this).index() ) ;
        var row_num = parseInt( $(this).parent().index() + 1);    
 
        $("#result").html( "Row_num =" + row_num + "  ,  Rolumn_num ="+ col_num );   
		
		document.getElementById("client_table").rows[row_num].cells[col_num].innerHTML='yyyy';
    });
});

Javascript sélection modification de contenu

Sélectionner un objet

<div id="message" class="maclass"&amp;gt; contenu du div</div>
var monobjet= document.getElementById('message');
var monobjet= document.getElementByClassName('maclass');
var monobjet= document.querySelector('message');
var monobjet= $('#message');  // jquery
var monobjet= $('.maclass');  // jquery

var myElements = document.querySelectorAll(".bar"); // plusieurs

monobjet.innerHTML='test123'; 
document.getElementById('message').innerHTML='test123'; 
$('#message').html('test123');
$(monobjet).html('test123');

insertAdjacentHTML()  inserre un contenu, avant ou après, dans un DIV par exemple

<script>
  var log = document.getElementById('message');
  message.insertAdjacentHTML('beforeend',   'message ajouté à la fin du contenu');
  message.insertAdjacentHTML('afterBegin',  'message ajouté au début du contenu');
  message.insertAdjacentHTML('beforeBegin', 'message ajouté avant le DIV (ou objet)');
  message.insertAdjacentHTML('afterEnd',    'message ajouté après le DIV (ou objet)');
</script>

infos ICI

querySelector innerHTML et textContent

document.querySelector('#message').innerHTML='test123';
document.querySelector('#message').textContent='test123';
// en jquery
$('#monchamps').html('32132');
$('#monchamps').text('32132');
$('#monchamps').append('32132'); // pour ajouter

Javascript array

var voiture = ['Saab', 'Volvo', 'BMW'];   
var cars = new Array('Saab', 'Volvo', 'BMW'); // même chose syntaxe trop lourde
//plus lisible pour les longues listes
var voiture = [
    'Saab',
    'Volvo',
    'BMW'
];

voiture[0] // contient Saab

var mesvoiture[1] = voiture; // on peut tout stocker dans une ligne de tableau, un autre tableau, un objet, une fonction ...
var mesvoiture[3] = ['Saab','Peugeot', 'Fiat'] ; // un tableau stocké dans un tableau

typeof voiture;             // returns object  et pas array  utiliser plutôt :
Array.isArray(voiture);     // true  
var camion = [];   // -> création du tableau camion vide

// ne pas utiliser si on veut un tableau -> voir objets
var person = {firstName:'John', lastName:'Doe', age:46};   // un peu comme un tableau, mais un objet -> les propriétés tableau ne s'y appliquent pas
voiture['marque']='peugeot'' //  voiture est devenu un objet -> ne pas faire

/********************************************************/
var x = voiture.length;            // x -> 3 

var voiture_tri = voiture.sort();  // une copie de voiture triée par ordre alpha
voiture.push('Renault');           // ajoute à la fin du tableau et retourne la longeur du tableau
unshift()                          // idem début du tableau
var tt=voiture.pop();              // enlève le dernier élément du tableau  et le met dans tt
var tt=voiture.shift();            // idem premier element

voiture.splice(2, 0, 'Fiat', 'Citroen');  // se positionne en 2 dans voiture, enlève 0 élement et insère Fiat, Citroen

var a = voiture.indexOf('Volvo');      // 1  voiture[1] = 'Volvo' permet de tester si une valeur est dans un tableau -1 si pas trouvé
var a = voiture.lastIndexOf('Volvo');  // comme indexOf mais parcours le tableau en partant de la fin

/***********************************************************/
// parcourir le tableau
var index;
for (index = 0; index < voiture.length; index++) {
    console.log(voiture[index]);
} 

// la même chose
function aff(item, index){ console.log(item);}
voiture.forEach(aff);


// parcour tout le tableau applique une fonction et retourne le résultat dans un tableau
var v2 = voiture.map(
            function(valeur, index){return valeur + 'tt';}
         );   //v2 -> ["Saabtt", "Volvott", "BMWtt"]

// idem mais retourne une seule valeur
var v2 = voiture.reduce(
            function(total, valeur){return total + '--' + valeur;}  // total est le return du calcul précedent
         );   //v2 -> "Saab--Volvo--BMW"
reduceRight() ; // la même chose mais parcour le tableau de droie à gauche

voiture.reverse();  //['Saab', 'Volvo', 'BMW']  -- > ['BMW', 'Volvo', 'Saab'];

/************************************************************/
var voiture_txt = voiture.join();  //  -> "Saab,Volvo,BMW"  toutes les valeur du tableau dans une chaîne

var vehicule = voiture.concat(camion);    // faire un tableu avec deux

// recherche le premier sur critère (saute les valeurs vides)
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
var adult = ages.find(checkAdult);  // retourne 18 : la première réponse true de la fonction checkAdult
var adult ages.findIndex(checkAdult); // même chose mais retourne l'index : 2

les array sont aussi des objets -> voir les possibilité des object

liens

w3schools

Javascript pivot table TCD tableaux croisés dynamique

http://orbjs.net/

 

pivottable-js    examples  github

webpivottable  deux versions dont une payante environ 1500€  utilise Node.js sur le serveur

http://webix.com/  pivot + autres aplli js à tester  une version free d’autres payantes

pivot.js  pas un TCD, mais plutôt présentation des données avec regroupement

 

http://www.jbpivot.org/#  A voir aussi

 

http://gumption.org/2004/pivot_table/test_page.html   vieux truc simple efficace à fouiller

 

http://ukman.github.io/   simple à etudier

Javacript règles

* Pour un code plus clair et plus facile à maintenir.
* Déclaration des variables en début de fonction
* Déclaration des fonctions juste avant de les utiliser
* = espace avant et après comme (+,-,/,*)
* Ne pas utiliser  » préférer ‘ (réserver le » pour PHP, et donc règle inverse en PHP)
* espace après une virgule, pas avant
* Fonction, pas d’espace devant { }ou devant ()  function(par1, par2){ code } OK  function (par1,par2) { code } pas bon<
* Dans tous les autres cas ( est précédé d’un espace
* Toujours mettre ; à la fin de la ligne, même si cela fonctionne sans 
* Ligne trop longue -> à éviter : pb de lisibilité. Si pas autre solution, \ pour découper en plusieurs lignes (attention, pas d’espace après\)

* ‘use strict’; dès que possible pour être obligé de bien gérer les variables et faire remonter des erreurs invisibles autrement, accessoirement le code est plus rapide

function() {
  'use strict';

  // un monde plus sûr

}

Javascript liens intéressants

* Livre en ligne en anglais, très bien fait et très complet
* Livre en anglais complet

* Plein de livres

Design patern
* Livre en anglais
* Petit tuto en ligne en français

Outils
* jslint émulateur en ligne très utile pour tester du code ou apprendre à mieux écrire du JS
* jsbin émulateur en ligne plus complet avec HTML et CSS
* codepen émulateur en ligne plus complet avec HTML et CSS et des tas de codes exemples
* Doc devtools Chrome outils de dev présents dans le navigateur
* Doc devtools Firefox
* Doc devtools Edge de Microsoft

vidéos
* Style écriture du code, excellant, en anglais
* Plein d’autres dont certaines incontournables, en anglais

Bibliothèques
* Des centaines de bibliothèques de code très bon