☰ JavascriptBoutsDeCodes
 

Bouts de codes javascript

Le point-virgule

Vous pouvez écrire en javascript sans utiliser le point-virgule sauf:

padding-margin

onload, window, document, documentElement, body, viewport

have been loaded and rendered.*

Utilisation de && et de || comme raccourcis

&& pour exécuter une fonction seulement seulement si une condition est vraie

Au lieu de

if(condition){
    dosomething();
}

vous pouvez écrire

condition && dosomething();

|| pour donner une valeur par défaut à une variable

a = a || 'default value';

Remplir un tableau avec une même valeur

Array(10).fill('-'); crée un tableau de 10 éléments initialisés chacun à '-'

Vérifier si un mot est un mot réservé

function isReservedKeyword(wordToCheck) {
  var reservedWord = false;
  if (/^[a-z]+$/.test(wordToCheck)) {
    try {
      eval('var ' + wordToCheck + ' = 1');
    } catch (error) {
      reservedWord = true;
    }
  }
  return reservedWord;
}

base et utf-8

Code conseillé

function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

function b64DecodeUnicode(str) {
  return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

Usage:

b64EncodeUnicode('✓ à la mode 🔑'); // "4pyTIMOgIGxhIG1vZGUg8J+UkQ=="
b64DecodeUnicode('4pyTIMOgIGxhIG1vZGUg8J+UkQ=='); // "✓ à la mode 🔑"

En utilisant escape et unescape

escape et unescape sont dépréciés, bien qu'ils fonctionnent toujours dans tous les navigateurs modernes.

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

Usage:

utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGUg8J+UkQ=="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode 🔑"

Ces fonctions sont entièrement cohérentes avec les fonctions php base64_encode et base64_decode.

Notez que le CodePoint du caractère 🔑 utilisé ci-dessus est 128273, au-delà de 65535.

Remplacement parfait de atob et btoa

Encode une chaine en base64 (btoa):

function b2a(a) {
  var c, d, e, f, g, h, i, j, o, b = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", k = 0, l = 0, m = "", n = [];
  if (!a) return a;
  do c = a.charCodeAt(k++), d = a.charCodeAt(k++), e = a.charCodeAt(k++), j = c << 16 | d << 8 | e, 
  f = 63 & j >> 18, g = 63 & j >> 12, h = 63 & j >> 6, i = 63 & j, n[l++] = b.charAt(f) + b.charAt(g) + b.charAt(h) + b.charAt(i); while (k < a.length);
  return m = n.join(""), o = a.length % 3, (o ? m.slice(0, o - 3) :m) + "===".slice(o || 3);
}

Décode une base64 en chaine (atob)

function a2b(a) {
  var b, c, d, e = {}, f = 0, g = 0, h = "", i = String.fromCharCode, j = a.length;
  for (b = 0; 64 > b; b++) e["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/".charAt(b)] = b;
  for (c = 0; j > c; c++) for (b = e[a.charAt(c)], f = (f << 6) + b, g += 6; g >= 8; ) ((d = 255 & f >>> (g -= 8)) || j - 2 > c) && (h += i(d));
  return h;
}

Ces fonctions, tout comme atob et btoa, ne gèrent pas correctement l'utf8.

Convertir les em en px

Mettre ce DIV quelque part dans votre code html:

<div id="div" style="height:0;width:0;outline:none;border:none;padding:none;margin:none;"></div>

Mettre cette fonction dans le javascript, elle retournera le nombre de px dans un em

function getValue(id){
  var div = document.getElementById(id);
  div.style.height = 1em;
  return div.offsetHeight;
}

Décoder les scripts js encodés avec eval

Ouvrir une ardoise javascript, passe le script packé et remplacer eval par console.log, ou alert, ou document.write.

Si le script contient des caractères spéciaux, par exemple <p>, convertir les caractères spéciaux en entités html (escape Html ci-dessous) afin de rendre le script visible, ou le mettre dans un textarea.value

function escapeHtml(text) {
  return text
      .replace(/&/g, "&amp;amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
}

Générér un string aléatoire composé de L digits

function randomdigits(L) {
  var ar = [];
  for (var i = 0; i < L; i++) ar.push(Math.floor(Math.random() *  10));
  return ar.join('');
}

Noms de variable dynamiques

var type = 'article';
window[type+'_count'] = 1000;
alert(article_count);

Trouver l'extension d'un fichier

return filename.split('.').pop();

Forcer le line-wrap partout dans une textarea même sans espaces

Simplement en css : textarea { word-break: break-all; }

Array sort et unique

NewData = myData.sort().filter(function(el,i,a){if(i==a.indexOf(el))return 1;return 0})

Déterminer si une chaîne est base64 encodée

var base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;

base64regex.test("SomeStringObviouslyNotBase64Encoded...");             // FALSE
base64regex.test("U29tZVN0cmluZ09idmlvdXNseU5vdEJhc2U2NEVuY29kZWQ=");   // TRUE

Générer une chaîne aléatoire de caractères

function randomString (strLength, charSet) {
  var result = [];
  strLength = strLength || 5;
  charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  while (strLength--) {
    result.push(charSet.charAt(Math.floor(Math.random() * charSet.length)));
  }
  return result.join('');
}

Générer un entier aléatoire compris entre min et max (inclus)

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Encoder de l'UTF8 en javascript et le décoder en php

En javascript utiliser la fonction:

function b64EncodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

En php décoder avec la fonction base64_decode

textContent au lieu de innerHTML

Le fonctionnement de textContent est le même qu'innerHTML excepté le fait que seul le texte est récupéré, et non les balises. C'est pratique pour récupérer du contenu sans le balisage.

Quand on assigne une valeur à du textContent, les balises sont considérées comme du texte et elle sont écrites telles quelles, en texte.
Ainsi, element.textContent="Un <b>essai" affichera "Un <b>essai" et rien ne sera mis en gras.

var, let, const

Retourner des objects pour chainer des functions

function Person(name) {
  this.name = name;
  
  this.sayName = function() {
    console.log("Hello my name is: ", this.name);
    return this;
  };
  
  this.changeName = function(name) {
    this.name = name;
    return this;
  };
}

var person = new Person("John");
person.sayName().changeName("Timmy").sayName();

Shuffle un Array

Avec l'algorithme de Fisher-Yates

function shuffle(arr) {
  var i,
    j,
    temp;
  for (i = arr.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;  
};

Vider un array

La manière usuelle est:

var list = [1, 2, 3, 4];
list = [];

Il y a une manière plus rapide:

var list = [1, 2, 3, 4];
list.lenght = 0;

La première manière assigne une nouvelle référence à la variable, les autres références ne sont pas affectées. La deuxième manière supprime tout ce que le array contient, et affecte donc aussi les autres références.

var foo = [1,2,3];
var bar = [1,2,3];
var foo2 = foo;
var bar2 = bar;
foo = [];
bar.length = 0;
console.log(foo, bar, foo2, bar2); // [] [] [1, 2, 3] []

Convertir rapidement et simplement un string en nombre

La manière la plus rapide et la plus simple pour convertir un string en nombre est est d'utiliser l'opérateur +

var x = '1';
var y = +x; // Nombre 1

Vous pouvez aussi utiliser l'opérateur -

L'opérateur !! pour obtenir true ou false

Exemples:

!!"" // false
!!0 // false
!!null // false
!!undefined // false
!!NaN // false

!!"hello" // true
!!1 // true
!!{} // true
!![] // true

Différence entre onchange et oninput

La différence est que l'événement oninput se produit immédiatement après que la valeur d'un élément à changé au travers l'interface utilisateur, alors que onchange se produit à la perte du focus, après que le contenu de l'élément a changé.

Exécuter du code quand le document est chargé

document.addEventListener('DOMContentLoaded', function() {
  //.. code à exécuter ..
}, false);

La méthode la plus sure est encore de placer le code javascript juste avant le </head>

Parser une url

Pour une url:
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash"; parser.protocol; // => "http:"
parser.host; // => "example.com:3000"
parser.hostname; // => "example.com" parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.hash; // => "#hash" parser.search; // => "?search=test"
Pour l'url courante:
window.location.hostname par exemple
Pour les éléments "a" du document: document.links[i].protocol par exemple

Element remove

Element.prototype.remove = function() {
  this.parentElement.removeChild(this);
}

NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  for(var i = 0, len = this.length; i < len; i++) {
    if(this[i] && this[i].parentElement) {
      this[i].parentElement.removeChild(this[i]);
    }
  }
}

Vous pouvez alors retirer un élément comme ceci:
document.getElementById("my-element").remove();
ou
document.getElementsByClassName("my-elements").remove();

Change un caractère dans une chaîne - setCharAt()

String.prototype.setCharAt = function(index,chr) {
  if(index > this.length-1) return str;
  return this.substr(0,index) + chr + this.substr(index+1);
}

Référencier "this" dans <a href

<a href="javascript:foo(this);">MyLink</a> ne fonctionne pas comme prévu, this retournera l'object window (contexte global).

Il faudra utiliser quelque chose comme <a href="#" onclick="foo(this)">MyLink</a>.

Il est encore mieux d'attacher l'événement onclick au lien en javascript.

Affectation conditionnelle, opérateur conditionnel ternaire

Exemple: var statut = (age <= 18) ? "adulte" : "mineur"; retournera adulte ou mineur selon que (age >= 18) est vrai ou faux

Dans les regex, ne confondez pas \1 avec $1

Ne confondez pas \1 avec $1.
\1 est utilisé à l'intérieur d'une regex,
alors que $1 est utilisé à l'extérieur de la regex après une correspondance.

Tester si une variable javascript existe

Utiliser la fonction typeof
if(typeof(maVariable)=='undefined')

Variable locale ou globale

Une variable locale est définie en la précédant de var
var x = 2;

Nombre d'occurences d'un caractère dans une chaîne

Par exemple, nombre de " dans chaine:
nbre = chaine.length - chaine.replace(/"/g , '').length;

Focus sur un champ en ouverture de page.

Après le formulaire, placer

<script>document.getElementById('champ').focus();</script>

Fonction pour rendre cliquables les liens d'un div

<script>
function FaireLiens(id) {
  document.getElementById(id).innerHTML = document.getElementById(id).innerHTML.replace(/(https?:\/\/[\w\.\/+,%#?=&-;]+)/g ,'<a href="$1">$1</a>');
}
</script>

Equivalent de foreach en javascript

foreach n'existe pas en javascript, mais on peut utiliser for (var ... in ...)

Par exemple:

var fruits =["pomme" , "poire" , raisin"];
for (var i in fruits) {alert(fruits[i]);}

ce qui évite de passer par par des count et autres length.

C'est particulièrement utile quand les indices ne sont pas des nombres successifs.

Noms de variable dynamiques

Il suffit d'utiliser window[nomdevariable]. Par exemple:

num = 1;
window['id' + num] = 25;
alert(id1);

affichera 25. On peut aussi bien évidemment créer de la sorte des noms de fonction dynamiques.

Chargement en javascript d'un fichier

function load(fichier) {
  //Chargera fichier à condition que le fichier soit sur le même serveur 
  //Certains navigateurs (chrome et autres) refusent le protocole file:///
  var request;
  if (window.XMLHttpRequest) { // Firefox
    request = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE
    request = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    return; // Non supporte
  }
  request.open('GET', fichier, false); // synchrone
  request.send(null);
  return request.responseText;
}

Chrome ne supporte pas le protocole file:/// dans une requête ajax, sauf à le lancer avec le paramètre --allow-file-access-from-files

Modifier un style à la volée, en javascript

function setStyle(cssText) {
  //Ajoute une feuille de style contenant cssText, utile par exemple pour modifier une class sans boucler dans la page
  var sheet = document.createElement('style');
  sheet.type = 'text/css';
  /* Optional */ window.customSheet = sheet;
  (document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
  return (setStyle = function(cssText, node) {
    if(!node || node.parentNode !== sheet)
      return sheet.appendChild(document.createTextNode(cssText));
    node.nodeValue = cssText;
    return node;
  })(cssText);
};