Formation JavaScript

Plan de la formation

Introduction
Syntaxe
Types de base
- Constantes
- La superclasse Object
- Chaînes de caractères
- Nombres
- Dates
- Tableaux
- Expressions régulières
Structures de contrôle
- Opérateurs
- Tests
- Boucles
Affichage de messages
Manipulation de documents
Eléments de formulaires
- Champ texte
- Checkbox
- Bouton radio
- Liste déroulante
A savoir
Références

Introduction

Originellement développé par Brendan Eich. Nom du projet : Mocha
Apparu en septembre 1995 sous le nom LiveScript dans Netscape Navigator 2.0b
Rebaptisé JavaScript en décembre 1995 à l'occasion d'une annonce conjointe Sun / Netscape
Intégré à Internet Explorer 3.0 sous le nom JScript en août 1996
Standardisé en juin 1997 sous le nom ECMAScript (ECMA-262 ou ISO/IEC16262)
Langage interprété par le navigateur
Langage à objets, basé sur des prototypes (l'héritage est obtenu par clonage d'objets)
Typage faible et dynamique
Interagit avec l'environnement hôte : le navigateur et le document

Syntaxe

Constructions similaires au C, avec des règles similaires à celles de Java
Inclure un script dans une page
- Depuis un fichier externe
<script type="text/javascript" src="URI">
- Directement dans la page
<html>
<head>
  <title>Exemple</title>
  <script type="text/javascript"> // <![CDATA[
    var unNombre = 12;
    var unTexte = "Hello World";
    // ]]>
  </script>
</head>
<body>
(...)
- Dans un élément de la page
<body onload="javascript: { alert('Chargement terminé.'); }">

Mots réservés

break      case         catch       continue
default    delete       do          else
finally    for          function    if
in         instanceof   new         return
switch     this         throw       try
typeof     var          void        while
with

Mots réservés pour usage ultérieur (en prévision de JavaScript 2.0)

abstract   enum         int         short
boolean    export       interface   static
byte       extends      long        super
char       final        native      synchronized
class      float        package     throws
const      goto         private     transient
debugger   implements   protected   volatile
double     import       public

Commentaires
- Tout ce qui est écrit entre /* et */
- Tout ce qui est écrit entre // et la fin de la ligne
Identifiants (variables, fonctions)
- Case-sensitive
- Doivent commencer par une lettre (majuscule ou minuscule), underscore ( _ ) ou dollar ( $ )
- Sont composés de lettres, chiffres et underscore
- Ont une visibilité limitée au bloc { } qui les contient (ou, à défaut, limitée au document)
Déclarations
- Déclaration de variables : explicite avec le mot-clé var, ou implicite lors de la première valorisation
- Déclaration de fonctions : explicite avec le mot-clé function

Note
- Le point-virgule sépare deux instructions, mais on peut éventuellement l'oublier en fin de ligne ou avant une accolade fermante (l'interpréteur l'ajoute alors automatiquement).

Types de base

Constantes
- null de type object
- undefined de type undefined
- NaN et Infinity de type number
- true et false de type boolean
Objets
- Déclaration
// Instanciation d'un objet
var unObjet = new Object();
- Propriétés
  - constructor : retourne le constructeur de l'objet.
  - prototype : propriété permettant d'ajouter des éléments à l'objet.
- Méthodes
  - toString() : retourne une chaîne représentant l'objet.
  - valueOf() : retourne un type simple représentant l'objet. Implicitement utilisée lors de l'appel à l'objet.
  - watch(nom de propriété, fonction) : assigne un EventHandler à une propriété de l'objet. A chaque changement de la valeur de la propriété, la fonction est appelée avec trois paramètres : nom de la propriété, ancienne valeur, nouvelle valeur.
  - unwatch(nom de propriété) : désactive l'EventHandler associé à la propriété désignée.
- Fonctions
  - typeof(objet) : renvoie le type de la valeur de l'objet (undefined, string, number, boolean ou object).

Types de base - Chaînes

Chaînes de caractères
- Déclaration
// Instanciation de chaînes
var uneChaine = new String("une chaîne");
var uneAutreChaine = "une autre chaîne";
var troisiemeChaine = 'une "autre" chaîne';

if (troisiemeChaine == "une \"autre\" chaîne") {
alert('Les deux chaînes sont égales :\n' + troisiemeChaine);
}
- Caractères spéciaux
\ Caractère d'échappement
\t Tabulation
\n Retour à la ligne
\' Quote
\" Guillemet
\\ Backslash
- Attributs et méthodes
var uneChaine = new String("Une chaîne ; bla bla");

// Retourne la longueur de la chaîne
uneChaine.length;

// Retourne le caractère à la position 0 (premier caractère de la chaîne)
uneChaine.charAt(0);

// Retourne la concaténation des deux chaines (on peut passer plusieurs paramètres, et pas uniquement des chaînes)
uneChaine.concat(" bla");

// Retourne le rang du premier caractère, dans la chaîne étudiée, de la première occurrence de la chaîne recherchée. Retourne -1 si la chaîne recherchée n'est pas dans la chaîne étudiée.
uneChaine.indexOf("a");

// Retourne le rang du premier caractère, dans la chaine étudiée, de la dernière occurrence de la chaîne recherchée. Retourne -1 si la chaîne recherchée n'est pas dans la chaîne étudiée.
uneChaine.lastIndexOf("a");

// Retourne la chaîne étudiée en remplaçant les occurences de l'expression regulière par la chaine de remplacement
uneChaine.replace(new RegExp("bla", "g"), "remplacement");

// Retourne un tableau de chaînes contenant chaque segment présent dans la chaîne et qui y est délimité par le séparateur passé en paramètre
uneChaine.split(";");

// Retourne la sous-chaîne qui commence au caractère d'index 4 et qui a pour longueur 6. La longueur est optionnelle.
uneChaine.substr(4, 6);

// Retourne la sous-chaîne qui commence au caractère d'index 4 et qui se termine au caractère d'index 6. L'index de fin est otpionnel.
uneChaine.substring(4, 6);

// Retourne la chaîne convertie en minuscules
uneChaine.toLowerCase();

// Retourne la chaîne convertie en majuscules
uneChaine.toUpperCase();
- Fonctions
  - escape(chaîne) : retourne une copie de la chaîne de caractère où tous les caractères spéciaux sont remplacés par une séquence hexadécimale.
  - unescape(chaîne) : retourne une copie de la chaîne de caractère où toutes les séquences hexadécimale sont remplacées par le caractère correspondant.
  - encodeURI(chaîne) : retourne une copie de la chaîne de caractère où tous les caractères spéciaux sont remplacés par une séquence hexadécimale UTF-8.
  - decodeURI(chaîne) : retourne une copie de la chaîne de caractère où toutes les séquences hexadécimale UTF-8 sont remplacées par le caractère correspondant.
var valeurDuCookie = escape('Caractères spéciaux ?');
var autreValeur = encodeURI('Caractères spéciaux ?');

Types de base - Nombres

Nombres
- Double précision, codés sur 64 bits. Standard IEEE 754
- Déclaration
// Déclarations de nombres
var unNombre = new Number(12);
var unAutreNombre = 37.5;
var troisiemeNombre = 5.3e6; // 5 300 000
var quatriemeNombre = 2E-4; // 0,0002
var valeurOctale = 032; // 26
var valeurHexadecimale = 0x36; // 54
- Constantes
  - Number.MIN_VALUE : plus petite valeur positive codée par un Number. Toute valeur positive inférieure est considérée égale à 0.
  - Number.MAX_VALUE : plus grande valeur positive codée par un Number. Toute valeur supérieure est considérée égale à Infinity.
  - Number.POSITIVE_INFINITY : égal à Infinity
  - Number.NEGATIVE_INFINITY : égal à -Infinity
  - Number.NaN : équivalent à NaN. Toute valeur numérique (y compris NaN) est considérée différente de NaN.
- Méthodes
  - toFixed(nombre) : retourne une chaîne représentant le nombre avec nombre décimales.
  - toPrecision(nombre) : retourne une chaîne représentant le nombre avec nombre chiffres significatifs.
  - toString(base) : surcharge de la méthode toString() de Object. Retourne la représentation du nombre dans la base spécifiée.
var valeurHexa = new Number(65140).toString(16);
var flottant = 140.123456;

alert("Avec deux décimales : " + flottant.toFixed(2));
alert("Avec six chiffres significatifs : " + flottant.toPrecision(6));
- Opérateurs
var a = new Number(50);
var b = 8;
var resultat = null

resultat = a + b;
resultat = a - b;
resultat = a * b;
resultat = a / b;
resultat = a % b;
a += 3;
b++;
a--;
b *= 2;
a /= 2;
- Fonctions
  - parseInt(objet) : extrait un nombre (valeur entière) de la valeur de l'objet. Si la valeur de l'objet ne commence pas par un chiffre ou les signes + et -, retourne NaN.
  - parseInt(objet, base) : identique à parseInt mais dans une base pouvait aller de 2 à 36 (les lettres de l'alphabet représentant les chiffres manquants). Si la base est 0, les valeurs commençant par "0" seront considérées en octal, celles commençant par "0x" en hexadécimal et les autres en base 10.
  - parseFloat(objet) : extrait un nombre (à virgule flottante) de la valeur de l'objet en prenant le point comme séparateur de décimale. Si la chaîne ne commence pas par un chiffre, un point ou les signes + et -, retourne NaN.
  - isNaN(nombre) : est vrai si le nombre est NaN.
  - isFinite(nombre) : est vrai si le nombre est une valeur finie (ni NaN, ni Infinity).
var unNombre = new Number(50);

// Récupère une valeur flottante depuis une chaîne
unNombre = parseFloat("5.0");
unNombre = parseFloat("0.05");
unNombre = parseFloat("56,32");
unNombre = parseFloat("50");

// Récupère une valeur entière depuis une chaîne
unNombre = parseInt("0xF2");
unNombre = parseInt("5.0");
unNombre = parseInt("12ans");
unNombre = parseInt("a12");
unNombre = parseInt("50");

// Teste si la valeur est NaN
alert(isNaN(unNombre)); // 50 n'est pas NaN
alert(isNaN(unNombre / 0)); // Une division par zéro renvoie Infinity
alert(isNaN((unNombre - 50) / 0)); // Zéro divisé par zéro renvoie NaN
alert(isNaN(parseInt("cinq"))); // parseInt renvoie NaN si la chaîne ne commence pas par un chiffre ou les signes + et -
alert(parseInt("cinq") == NaN); // NaN != NaN

// Teste si la valeur est finie (ni NaN ni Infinity)
if (!isFinite(12 / (unNombre - 50))) {
alert("La valeur n'est pas finie.");
}
Math
- Propriétés
  - PI : retourne π.
  - E : retourne la constante d'Euler.
  - LN2 : retourne le logarithme népérien de 2.
  - LN10 : retourne le logarithme népérien de 10.
  - SQRT2 : retourne la racine carrée de 2.
var pi = Math.PI
var e = Math.E
- Méthodes
  - abs(nombre) : retourne la valeur absolue du nombre.
  - acos(nombre) : retourne l'arccosinus du nombre (radians).
  - asin(nombre) : retourne l'arcsinus du nombre (radians).
  - atan(nombre) : retourne l'arctangente du nombre (radians).
  - ceil(nombre) : retourne le plus petit entier supérieur ou égal au nombre.
  - cos(nombre) : retourne le cosinus du nombre (radians).
  - exp(nombre) : retourne l'exponentielle du nombre. e^nombre
  - floor(nombre) : retourne le plus grand entier inférieur ou égal au nombre.
  - log(nombre) : retourne le logarithme népérien du nombre.
  - max(nombre, nombre) : retourne le max des deux nombres.
  - min(nombre, nombre) : retourne le min des deux nombres.
  - pow(nombre x, nombre y) : retourne x^y.
  - random() : retourne un nombre pseudo-aléatoire compris entre 0 et 1.
  - round(nombre) : retourne l'entier le plus proche du nombre.
  - sin(nombre) : retourne le sinus du nombre (radians).
  - sqrt(nombre) : retourne la racine carrée du nombre.
  - tan(nombre) : retourne la tangente du nombre (radians).
var x = Math.random()

Types de base - Dates

Dates
- Déclaration
// Récupération de la date + heure locale
var aujourdHui = new Date();

// ATTENTION : Les mois sont numérotés de 0 à 11 !
var noel2006 = new Date(2006, 11, 25);
var joyeuxNoel = new Date(2006, 11, 24, 23, 59, 59, 999);

// Nombre de millisecondes depuis le 1er janvier 1970 0h 0min 0s UTC
var autreDate = new Date(3000);
- Méthodes
  - getDay() : retourne le jour de la semaine (entre 0 et 6, 0 étant Dimanche).
  - getDate() : retourne le jour du mois (entre 1 et 31).
  - getMonth() : retourne le mois (entre 0 et 11, 0 étant Janvier).
  - getFullYear() : retourne l'année sur quatre chiffres.
  - getHours(), getMinutes(), getSeconds(), getMilliseconds().
  - getTime() : retourne le nombre de millisecondes écoulées entre le 1er janvier 1970 0h 0min 0s UTC et la date représentée par l'objet.
  - getUTCDay() : retourne le jour de la semaine (entre 0 et 6, 0 étant Dimanche), en considérant la date UTC.
  - getUTCDate() : retourne le jour du mois (entre 1 et 31), en considérant la date UTC.
  - getUTCMonth() : retourne le mois (entre 0 et 11, 0 étant Janvier), en considérant la date UTC.
  - getUTCFullYear() : retourne l'année sur quatre chiffres, en considérant la date UTC.
  - getUTCHours(), getUTCMinutes(), getUTCSeconds(), getUTCMilliseconds().
  - setFullYear(nombre) : modifie l'année de la date représentée par l'objet.
  - setMonth(nombre) : modifie le mois.
  - setDate(nombre) : modifie le jour du mois.
  - setHours(nombre) : modifie l'heure.
  - setMinutes(nombre) : modifie les minutes.
  - setSeconds(nombre) : modifie les secondes.
  - setMilliseconds(nombre) : modifie les millisecondes.
  - setUTCFullYear ... setUTCMilliseconds : idem ci-dessus, en considérant la date UTC.
  - toUTCString() : retourne une chaine représentant la date + heure UTC.
  - toLocaleString() : retourne une chaine représentant la date + heure locale avec les conventions définies par le système.
  - toLocaleDateString() : retourne une chaine représentant la date locale avec les conventions définies par le système.
  - toLocaleTimeString() : retourne une chaine représentant l'heure locale avec les conventions définies par le système.
- Opérateurs
var noel = new Date(2005, 11, 25);
var jourDeLAn = new Date(2006, 0, 1);

// Nombre de millisecondes séparant Noël 2005 et le jour de l'an 2006
var difference = jourDeLAn - noel;
var differenceDate = new Date(difference);

Types de base

Tableaux
- Déclaration
// Déclaration d'un tableau de longueur 3 -- longueur max d'un tableau : 4 294 967 295
var exemple = new Array(3);

// Redimensionnement dynamique
exemple[14] = "Changement de longueur";

// Déclaration de tableaux
var nombresPremiers = new Array(2, 3, 5, 7, 11, 13, 17, 19);
var premierTirage = [ 1, 5, 13, 16, 21, 23, 26 ];

// Utilisation de la méthode split() des objets String
var chaineSecondTirage = "9-14-24-26-31-46-10";
var secondTirage = chaineSecondTirage.split('-');
- Propriétés et méthodes
// Nombre d'éléments d'un tableau
var nbElements = secondTirage.length;

// Concaténation de tableaux
var tousLesTirages = premierTirage.concat(secondTirage);

// Transformation en chaîne de caractères, avec un séparateur
var exportCSV = tousLesTirages.join(";");

// Tri sur la *valeur* des éléments du tableau
var ordre = tousLesTirages.sort();
- Utilisation dans une boucle
// Parcours d'un tableau par les indexes de ses éléments :
function parcoursParIndex(tableau) {
  for (index in tableau) {
    alert("Element " + index + " :: " + tableau[index]);
  }
}
// Parcours séquentiel d'un tableau :
function parcoursSequentiel(tableau) {
  for (var i = 0 ; i < tableau.length ; i++) {
    alert("Element " + i + " :: " + tableau[i]);
  }
}

Expressions régulières ("Expressions rationnelles")
- Déclaration
// Déclaration d'une RegExp
var contientUnEspace = new RegExp(" +");
var contientDesEspaces = new RegExp(" +", "g"); // g pour "global"
var estAlphabetique = new RegExp("[a-z]+", "gi"); // i pour "ignorecase"
var equivalent = /[a-z]+/gi;
- Méthodes
function compteLesEspaces(chaine) {
  var compteur = 0;
  // Une RegExp se "souvient" de sa dernière position dans une chaine donnée
  while (contientDesEspaces.exec(chaine) != null) compteur++;
  return compteur;
}
// Recherche de sous-chaines
alert(contientUnEspace.test("Cette chaîne contient des espaces.")));
alert(contientUnEspace.test("Cette_chaîne_ne_contient_aucun_espace.")));
alert(compteLesEspaces("Cette chaîne contient des espaces.")));
alert(estAlphabetique.exec("Cette chaîne contient des espaces.")));

Structures de contrôle

Opérateurs
- Comparaison
  - == : égalité des valeurs
  - === : égalité des valeurs et des types (Utiliser typeof() pour tester le type)
  - != : inégalité des valeurs
  - < : inférieur
  - > : supérieur
  - <= : inférieur ou égal
  - >= : supérieur ou égal
var douze = 12;
var chaineDouze = "12";
alert(douze == chaineDouze);
alert(douze === chaineDouze);
alert(typeof(chaineDouze) == "string");
- Logique
  - && : ET logique
  - || : OU logique
  - ! : NON logique

Tests
- (condition)?code:code
- if (condition) { code } else { code }
- switch (expression) { case valeur : code; default: code; }
Boucles
- do { code } while (condition)
- while (condition) { code }
- for (initialisation ; condition ; code) { code }
- for (variable in tableau) { code }
- Rappel
  - break sert à sortir d'une boucle
  - continue sert à passer à l'itération suivante de la boucle

Affichage de messages

Message simple

// Affiche un avertissement
alert('Une erreur s\'est produite.');

Message ok / annuler

// Demande une confirmation
confirm('Cette opération est irréversible.\nVoulez-vous continuer ?');

Message de saisie

// Demande une valeur
prompt('Quel est l\'âge du capitaine ?');
// Demande une valeur, en présentant une valeur par défaut
prompt('Quelle heure est-il ?', 'midi');

Manipulation de documents

Structure d'un document
- Chaque élément est un Node (texte, balise et son contenu, etc.)
- Chaque Node peut avoir des fils (balises incluses dans d'autres balises, par exemple)
<div id="identifiantUnique">

    Element de texte

    <span id="autreIdentifiant">

        Element de texte
    </span>
</div>

<script type="text/javascript"> // <![CDATA[
    (...)
  var identifiantUnique = document.getElementById('identifiantUnique');
  var autreIdentifiant = document.getElementById('autreIdentifiant');

  var nouveauTexte = document.createTextNode('Coucou');
  autreIdentifiant.replaceChild(nouveauTexte, autreIdentifiant.firstChild);

  var remplacement = document.createTextNode('On remplace le premier');
  identifiantUnique.replaceChild(remplacement, identifiantUnique.firstChild);

  remplacement = document.createTextNode('On remplace le second');
  identifiantUnique.replaceChild(remplacement, identifiantUnique.firstChild.nextSibling);
  // ]]>
</script>
Propriétés des Nodes
- parentNode : retourne le Node parent
- firstChild : retourne le premier Node fils
- lastChild : retourne le dernier Node fils
- previousSibling : retourne le Node qui le précède dans la liste des Nodes fils du parentNode
- nextSibling : retourne le Node qui le suit dans la liste des Nodes fils du parentNode
Méthodes des Nodes
- insertBefore(nouveau Node, ancien Node) : insère un Node avant le Node fils spécifié
- replaceChild(nouveau Node, ancien Node) : remplace un Node fils par le nouveau Node
- removeChild(Node fils) : supprime un Node fils
- appendChild(nouveau Node) : ajoute un Node à sa liste de fils
- hasChildNodes() : indique si un Node a des fils
Méthodes du Node "document"
- createElement(nom de balise) : retourne un Node correspondant à une balise
- createTextNode(texte) : retourne un Node de texte contenant le texte spécifié
- getElementById(id du Node) : retourne le Node dont l'attribut id est égal au paramètre

Elements de formulaires

Formulaire
- action : l'action du formulaire. On peut changer l'URL cible.
- submit() : envoie le formulaire.
- reset() : remet à zéro les champs du formulaire.

Champs cachés
- value : valeur du champ.

Champs texte
- value : valeur du champ.
- disabled : indique si le champ est désactivé.
- readOnly : indique si le champ est en lecture seule.
- focus() : active le champ pour la saisie.
- blur() : retire le focus du champ.
- select() : sélectionne le contenu du champ.

Cases à cocher et boutons radio
- checked : indique si l'élément est coché.
- value : valeur associée à l'élément.
- disabled : indique si l'élément est désactivée.
- focus() : active l'élément pour la saisie.
- blur() : retire le focus de l'élément.

<input type="text" id="inputText" value="" />
<input type="checkbox" id="inputCheck" onchange="javascript:{ document.getElementById('inputText').disabled = this.checked; }" />

// Pas d'événement onChange si on change la valeur nous-même
document.getElementById("inputCheck").checked = true;

Listes déroulantes
- options : tableau d'objets Option représentant les différentes valeurs de la liste.
- length : nombre d'options dans la liste d'options.
- selectedIndex : indice de l'option actuellement sélectionnée.
- disabled : indique si la liste est désactivée.
- focus() : active la liste pour la saisie.
- blur() : retire le focus de la liste.

<select id="inputSelect" onchange="javascript:{
    slctIndex = document.getElementById('slctIndex');
    slctIndex.replaceChild(document.createTextNode(this.selectedIndex), slctIndex.firstChild);
    slctValue = document.getElementById('slctValue');
    slctValue.replaceChild(document.createTextNode(this.options[this.selectedIndex].value), slctValue.firstChild);
    slctText = document.getElementById('slctText');
    slctText.replaceChild(document.createTextNode(this.options[this.selectedIndex].text), slctText.firstChild); }">
  <option value="1">Un</option>
  <option value="Deux">Deux</option>
  <option value="3.333">Trois</option>
</select>

selectedIndex :
options[selectedIndex].value :
options[selectedIndex].text :

Options de listes déroulantes
- text : texte apparaissant dans la liste déroulante.
- value : valeur associée à l'option.
- index : indice de l'option dans la liste.
- disabled : indique si l'option est désactivée.
- selected : indique si l'option est sélectionnée.
- defaultSelected : indique si l'option est sélectionnée par défaut (à l'ouverture de la page).

Autres choses à savoir

void(expression) : évalue l'expression (en général, un appel de fonction) sans retourner de valeur (renvoie undefined).
eval(chaîne) : exécute le contenu de la chaîne comme si c'était du JavaScript.
Les traitements de données (dates, nombres) devraient être faits côté serveur
- par souci de sécurité (tout est accessible et manipulable dans le document)
- par souci de flexibilité (le mélange heure d'été / timezone non paramétrable / heure UTC est source d'erreurs)
- par souci de précision (l'unique type numérique du JavaScript n'est pas assez précis)

var nombre = new Number(0.055).toFixed(2);
nombre = new Number(0.045).toFixed(2);

Les méthodes set() des objets Date répercutent les débordements.
Le mot-clé this peut être utilisé dans un événement d'une balise pour désigner cette balise.
La méthode recommandée pour remplir un élément de document dont on ignore le contenu est la suivante :

var element = document.getElementById("id_element");
// Vidage éventuel de l'élément considéré
while (element.firstChild != null) { element.removeChild(element.firstChild); }
// Remplissage
element.appendChild(document.createTextNode("Nouveau contenu"));

Erreurs courantes
- "element has no properties" : un élément ne peut être appelé que s'il est défini dans la page au moment de l'appel.
- "1 + 2 == 12" : ne pas oublier parseInt() et parseFloat().
- "3 ^ 2 == 1" : ne pas oublier Math.pow(). L'opérateur ^ correspond au OU EXCLUSIF binaire.
- parseFloat('5,45') != 5.45 : ne pas oublier que le seul séparateur de décimale reconnu est le point.
- if(uneExpression == NaN) (...) : retourne toujours false, il faut utiliser isNaN() ou isFinite().
- "uneDate.getMonth() == 1" != janvier : les mois sont numérotés de 0 à 11.
- uneDate.setMonth(12) : correspond à janvier de l'année suivante.

Formation Javascript

Plan de la formation

Introduction

Syntaxe

Types de base

Types de base - Chaînes

Types de base - Nombres

Types de base - Dates

Types de base

Structures de contrôle

Affichage de messages

Manipulation de documents

Elements de formulaires

Autres choses à savoir

Références