Cheatsheet Javascript
Les objets, leurs méthodes, leurs propriétés et plus en un seul coup d'oeil
Objet : String
  • length
  • charAt
  • charCodeAt
  • String.fromCharCode
  • indexOf
  • lastIndexOf
  • localeCompare
  • match
  • replace
  • search
  • slice
  • split
  • substring
  • substr
  • toLowerCase
  • toUpperCase
  • toLocaleLowerCase
  • toLocaleUpperCase
  • trim
Objet : Array
  • length
  • concat
  • indexOf
  • join
  • lastIndexOf
  • push
  • pop
  • reverse
  • shift
  • slice
  • sort
  • splice
  • unshift
Objet : RegExp
  • exec
  • test
Objet : Date
  • now
  • parse
  • toDateString
  • toTimeString
  • getDate
  • getDay
  • getFullYear
  • getHours
  • getMilliseconds
  • getMinutes
  • getMonth
  • getSeconds
  • getTime
  • getTimezoneOffset
  • getYear
  • setDate
  • setHours
  • setMilliseconds
  • setMinutes
  • setMonth
  • setSeconds
  • setYear
  • toLocaleTimeString
  • UTC
Objet : Number
  • toFixed
  • toExponential
  • toPrecision
Objet : Math
  • abs
  • acos
  • asin
  • atan
  • atan2
  • ceil
  • cos
  • exp
  • floor
  • log
  • max
  • min
  • pow
  • random
  • round
  • sin
  • sqrt
  • tan
  • Math.E
  • Math.LN2
  • Math.LN10
  • Math.LOG2E
  • Math.LOG10E
  • Math.PI
  • Math.SQRT1_2
  • Math.SQRT2
Mémento des regex Caractères à échapper : ! ^ $ ( ) [ ] { } ? + * . / \ |

^ Marque le début de la chaîne de caractères
$ Marque la fin de la chaîne de caractères
? Le caractère précédent apparait 0 ou 1 fois
+ Le caractère précédent apparait 1 ou plusieurs fois. Préférez +?
+? Le caractère précédent apparait 1 ou plusieurs fois, en non-greedy
* Le caractère précédent apparait 0, 1 ou plusieurs fois. Préférez *?
*? Le caractère précédent apparait 0, 1 ou plusieurs fois, en non-greedy
{n} Le caractère précédent est répété n fois
{n,m} Le caractère précédent est répété de n à m fois
{n,} Le caractère précédent est répété de n fois à l'infini
. Trouve un caractère quelconque
\d Trouve un caractère décimal (un chiffre)
\D Trouve un caractère qui n'est pas décimal (donc pas un chiffre)
\s Trouve un caractère blanc
\S Trouve un caractère qui n'est pas un caractère blanc
\w Trouve un caractère « de mot » : une lettre, accentuée ou non, ainsi que l'underscore
\W Trouve un caractère qui n'est pas un caractère « de mot »
[abc] Trouve le caractère a, b ou c
[^abc] Trouve un caractère différent de a, b, ou c
[a-z]
[0-9]
Trouve un caractère compris entre a et z (ou entre 0 et 9)
\n Trouve un retour à la ligne
\t Trouve une tabulation

Requêtes XMLHttpRequest
Envoi GET
var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax.php?param1=Valeur1&param2=Valeur2');
xhr.send(null); // Toujours null
Envoi POST
var xhr = new XMLHttpRequest();
xhr.open('POST', 'ajax.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('param1=Valeur1&param2=Valeur2');

Pour éviter les erreurs en tansmettant des données via GET, encodez-les avec encodeURIComponent

Gérer le retour
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alert(xhr.responseText);
    } else if(xhr.readyState === 4 && xhr.status !== 200) {
        alert('Une erreur est survenue : ' + xhr.statusText);
    }
};
Utilisation des dates
var date      = new Date();
var timestamp = date.getTime();
  1. getFullYear : renvoie l'année sur 4 chiffres ;
  2. getMonth : renvoie le mois (0 à 11) ;
  3. getDate : renvoie le jour du mois (1 à 31) ;
  4. getDay : renvoie le jour de la semaine (0 à 6, la semaine commence le dimanche) ;
  5. getHours : renvoie l'heure (0 à 23) ;
  6. getMinutes : renvoie les minutes (0 à 59) ;
  7. getSeconds : renvoie les secondes (0 à 59) ;
  8. getMilliseconds : renvoie les millisecondes (0 à 999).
La date du jour :
date.getDate() + "/" + (((date.getMonth() + 1) < 10) ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1)) + "/" + date.getFullYear()
Closures dans une boucle
var divs = document.getElementsByTagName('div');
					
for (var i=0, c=divs.length; i<c ;i++) {
    // Syntaxe de base
    (function(i) {
        divs[i].addEventListener("click", 
            function() { alert(i); }
        );
    })(i);
	
    // Syntaxe au sein d'un gestionnaire d'event
    divs[i].addEventListener("click", 
        (function(i) {
            return function() { alert(i); }
        })(i)
    );
}
L'opérateur ~ (tilde) avec indexOf
if (~"test".indexOf("es")) { alert('Trouvé'); }
Canvas 2D
var canvas  = document.getElementById('myCanvasId');
var context = canvas.getContent('2d');
API : XMLHttpRequest
  • onreadystatechange
  • readyState
  • response
  • responseText
  • responseType
  • responseXML
  • status
  • statusText
  • timeout
  • upload
  • withCredentials
  • abort
  • getAllResponseHeaders
  • getResponseHeader
  • open
  • overrideMimeType
  • send
  • setRequestHeader
API : Node
  • attributes
  • baseURI
  • childNodes
  • firstChild
  • lastChild
  • localName
  • namespaceURI
  • nextSibling
  • nodeName
  • nodeType
  • nodeValue
  • ownerDocument
  • parentNode
  • parentElement
  • prefix
  • previousSibling
  • textContent
  • appendChild
  • cloneNode
  • compareDocumentPosition
  • contains
  • hasChildNodes
  • insertBefore
  • isDefaultNamespace
  • isEqualNode
  • lookupPrefix
  • lookupNamespaceURI
  • normalize
  • removeChild
  • replaceChild
Objet: JSON
  • JSON.parse
  • JSON.stringify
Bloc de code isolé (IEF)
(function() {
// Code ici
})();
Objet: style Spécificités des styles CSS via Javascript :
floatCSS pour la propriété float
Jamais de tirets : marginLeft
Idem pour les préfixes :
MozTransfom ou webkitTransform