Fiche Javascript : Les Objets

Objet de la fiche

État de la fiche Validé


Plan de la fiche :

Avant propos

Le JavaScript possède des objets natifs, comme String, Array, date etc, mais permet aussi de créer de nouveaux objets, avec leurs propres méthodes et propriétés.

Voici une liste non exhaustive d'objets natifs javascript dont nous allons détailler l'utilisation.

  • String : pour les manipulations de chaînes de caractères.
  • Array : pour créer des tableaux. Par ses méthodes il permet d'ajouter, lire, trier supprimer des éléments d'un tableau.
  • Date : pour créer, manipuler tout ce qui concerne les dates et la gestion du temps.
  • Math : contient toutes les fonctions mathématiques courantes et permet de manipuler les nombres.
  • RegExp : pour utiliser et manipuler des modèles expressions régulières,pour manipuler des chaînes de caractères ou des tableaux.
  • Boolean : pour manipuler les valeurs de type booléennes.

Notions d'objet


Idée objet


L'idée est de regrouper dans un composant
  • les caractéristiques qui concernent une entité :
    - structure de données,
    - ensemble d’attributs,
    - variables avec nom, type, valeur. Ce que l'on désigne par Propriétés de l'objet.
  • les opérations liées à cette entité
    ensemble de fonctions ou  méthodes.

Représentation d'un objet


  • Un objet est connu par son nom qui l'identifie comme un objet unique
  • Il se compose d'attributs ou propriétés qui sont les caractéristiques décrivant l'objet
  • Il possède des méthodes qui sont les actions qui vont permettre à l'objet de "vivre" vis à vis de son environnement.

État d'un objet :

  • Ensemble des valeurs des attributs de l’objet à un instant donné,
  • L’état d’un objet change pendant sa vie.

Regroupement d'objets et regroupement de 'classe'


Soit n objets :
  • même structures de données (attributs)
  • même comportement (méthodes)


Pour des objets de même famille, il n'est pas nécessaire de créer un objet spécifique pour chaque objet. Il suffit de créer un objet parent (dont les attributs sont déclarés comme variables), et des instances (objets se référant à la structure d'un parent(1)) et possédant individuellement leur propre valeurs d'attributs. Cette technique est aussi appelée regroupement en classes.


Regroupement de classe

Les objets sont regroupés dans une 'classe',

Une classe est une abstraction décrivant les propriétés communes des objets qui en sont des instances,

Une classe décrit une infinité d’instances,

Un objet instancier sait toujours de quelle classe il fait partie.

Instanciation d'objets(1)
Création de l’objet
- appel du constructeur adapté avec des paramètres ou non.

allocation mémoire,

Vie de l'objet :
- réception et traitement d'informations
- envoi d'informations vers d’autres objets

Mort de l’objet
- appel du destructeur

Note(1) : Instanciation

C'est fabriquer un exemplaire d'un élément à partir d'un modèle qui lui sert de référence.

Accesseurs de propriétés (Accéder à un objet)

Ces syntaxes permettent de fournir un accès aux propriétés d'un objet en utilisant une notation avec un point ou une notation avec des crochets

  • objet.propriété
  • objet["propriété"]

Les objets en javascript

On vient de voir rapidement à quoi peut resembler un objet. Nous allons maintenant détailler son utilisation en javascript.


Objet string et manipulation des chaînes


Avant propos

Il ne faut pas confondre les variables de type object  et les autres types de variables, dits "scalaires". En ce qui concerne ce chapitre, il ne faut pas confondre la variable objet string et la variable chaîne de type string

s1 = "toto"; //crée une nouvelle valeur chaîne littérale
s2 = new String("toto"); //crée un nouvel objet String
Il est possible d'appeler n'importe quelle méthode de l'objet String sur une valeur chaîne littérale : JavaScript convertit automatiquement la chaîne littérale en un objet String temporaire, appelle la méthode puis détruit l'objet String temporaire. Vous pouvez également utiliser la propriété String.length avec une chaîne littérale.

Il est conseillé d'utiliser les chaînes littérales à moins que vous ayez spécifiquement besoin d'utiliser un objet String, parce que ceux-ci peuvent avoir un comportement contre-intuitif. Par exemple :

s1 = "2 + 2"; // crée une valeur chaîne littérale
s2 = new String("2 + 2"); // crée un objet String
eval(s1); // renvoie le nombre 4
eval(s2); // renvoie la chaîne "2 + 2"

Généralités

L'objet String (chaîne) est un objet de base du langage javscript qui contient un certain nombre de propriétés et de méthodes permettant la manipulation de chaînes de caractères.

L'objet string a une seule propriété : la propriété length qui permet de retourner la longueur d'une chaîne de caractères. Cette propriété est très utile car lorsque l'on traite une chaîne de caractères on aime généralement savoir à quel moment s'arrêter.

La syntaxe de la propriété length est la suivante :
x = "la_chaine".length;

On peut passer directement la chaîne de caractères comme objet, en délimitant la chaîne par des apostrophes et en plaçant le tout entre parenthèses.
var LgString = ('chaine de caracteres').length;

La méthode traditionnelle consistant à appliquer une propriété à une variable de type string fonctionne bien évidemment aussi.
var Machaine= 'Hello bonjour';
var LgString = Machaine.length
 

Création / Instanciation


Création  par Instanciation (méthode constructeur)

var Machaine = new String();

Création  par initiateur d'objet (méthode littérale)


Les méthodes

Les méthodes de l'objet string permettent de récupérer une portion d'une chaîne de caractère, ou bien de la modifier.

Chaîne de test sur laquelle nous allons appuyer les exemples :

var MaString = 'je suis le petit TRAIN qui roule';


Méthode description Tests
Chaine.anchor("nom_a_donner"); Transforme le texte Chaine en ancrage HTML.  
Chaine.big() Augmente la taille de la police.
Chaine.blink() Transforme la chaîne en texte clignotant.
Ne fonctionne pas sur tous les navigateurs.
Chaine.bold() Met le texte en gras (balise <B>).
Chaine.charAt(position) Retourne le caractère situé à la position donnée en paramètre.
Attention le premier caractère est à l'index 0.
Chaine.charCodeAt(position)
Renvoie le code Unicode du caractère situé à la position donnée en paramètre
Chaine.concat(chaîne1, chaîne2[, ...]) Permet de concaténer les chaînes passées en paramètre, c'est-à-dire de les joindre bout à bout.
Chaine.fixed() Transforme la Chaine en caractères de police fixe (balise <TT>)
Chaine.fontcolor(couleur) Modifie la couleur du texte (admet comme argument la couleur en hexadécimal ou en valeur littérale)
Chaine.fontsize(Size) Modifie la taille de la police, en affectant une valeur numérique passée en paramètre.
Chaine.italics() Transforme le texte en italique (balise <I>)
Chaine.fromCharCode(code1[, code2, ..]) Renvoie une chaîne de caractères composée de caractères correspondant au(x) code(s) Unicode donné(s) en paramètre.
Chaine.indexOf(sous-chaîne, position) Retourne la position d'une sous chaîne (lettre ou groupe de lettres) dans une chaîne de caractère, en effectuant la recherche de gauche à droite, à partir de la position spécifiée en paramètre. Si la sous chaîne n'est pas trouvée, retourne -1
Chaine.lastIndexOf(sous-chaîne, position) La méthode est similaire à indexOf(), à la différence que la recherche se fait de droite à gauche :
Retourne la position d'une sous chaîne (lettre ou groupe de lettres) dans une chaîne de caractère, en effectuant la recherche de droite à gauche, à partir de la position spécifiée en paramètre. Si la sous chaîne n'est pas trouvée, retourne -1

Note1
Chaine.link(URL) Transforme le texte en hypertexte (balise <A href>)  
Chaine.small() Diminue la taille de la police
Chaine.strike() Transforme le texte en texte barré (balise <strike>)
Chaine.substr(position1, longueur) Retourne une sous chaîne commençant à l'index dont la position est donnée en argument et de la longueur donnée en paramètre.
Chaine.substring(position1, position2) Retourne la sous chaîne (lettre ou groupe de lettres) comprise entre les positions 1 et 2 données en paramètre.
Chaine.sup() Transforme le texte en exposant (balise <sup>).
Note1
Chaine.sub() Transforme le texte en indice (balise <sub>)
Note1
Chaine.toLowerCase() Convertit tous les caractères d'une chaîne en minuscule.
Chaine.toUpperCase() Convertit tous les caractères d'une chaîne en majuscule.
Chaine.valueOf() Renvoie la valeur de l'objet String.
Chaine.toSource() Renvoie le code source de création de l'objet.

Note1 : Ces exemples mêlent à la fois la chaîne de caractères (je suis le petit TRAIN qui roule) et la variable initialisée avec cette chaîne (MaString) et montrent l'imbrication d'opérations utilisée lors de la concaténation de chaînes dont l'une est elle même le résultat d'une opération de l'objet string.

Voici un autre exemple d'imbrication


Compléments Javascript

Ces propriétés bien que non liées à l'objet string, permettent aussi quelques manipulations sur les chaînes.


Fonctions Commentaires Test
.toString(base) Convertir un entier en chaîne
var a=10;
a.toString(10)
 
.parseInt(str,base)
Voir Note1
Convertit une chaîne en nombre entier dans la base définie  
.parseFloat(str) Convertit une chaîne en un nombre décimal  
.replace(ch1,ch2) Remplace dans la chaîne ch toutes les occurences de ch1 par ch2. Bonjour.replace()
document.write("Bonjour".replace(/o/g,"u"))
Bunjuur
document.write Replace("Bonjour","o","i")
Binjiur
 
.slice(déb,fin) Extrait une sous chaîne.
L'argument fin n'est pas à base zéro. S'il est négatif, il indique un décalage à partir de la fin. En cas d'omission, l'extraction continue jusqu'à la fin de la chaîne.
 
.split(Séparateur) La fonction split() permet de scinder une chaîne de caractère et de retourner les résultats dans un tableau, grâce à une chaîne définie comme séparateur.
Exemple :
var str = "Comment allez vous aujoud'hui?";
var res = str.split(" ");
Le résultat donnera un tableau avec les éléments suivant : Comment, allez, vous, aujoud'hui?

Note1 : Si la base n'est pas définie ou paramétrée à 0, les règles suivantes définies par le javascript s'appliquent :

  • Si la chaine commence par "0x" or "0X", la base 16 (hexadecimale) est appliquée.
  • Si la chaine commence par "0", la base 8 (octale) est appliquée. Cette fonctionnalité n'est pas standard et certains moteurs javascript ne la supportent pas.
  • Si la chaine commence par toute autre valeur, la base 10 (decimale) est appliquée.

Dans tous les cas et du fait du caractère optionnel du paramètre base, et afin d'éviter tout risque d'erreur dans le résultat, il est fortement conseillé d'initialiser ce paramètre.


Objet Array (Tableaux)


Généralités

Un tableau permet de stocker des données auxquelles on  pourra accéder par la suite grâce à des  indices. Un tableau, en Javascript, est une variable pouvant contenir plusieurs données indépendantes, indexées par un numéro, appelé indice. L'indice d'un tableau est ainsi l'élément permettant d'accéder aux données qui y sont stockées.

Utilisation des indices

On peut imaginer un tableau simple comme un meuble composé d'une succession de tiroirs contenant chacun un document. Afin de s'y repérer chaque tiroir est repéré par un indice.

Deux types d'indices peuvent être utilisés

  • les indices de type numérique qui numérotent les tiroirs de 0 à n.
  • les indices de type chaîne de caractères qui attribut une référence à chaque tiroir : exemple janvier, février, mars ...  correspondant à la date des documents archivés.

Types de tableaux


Les tableaux monodimensionnels (ou unidimensionnels) sont des tableaux dont chaque case ne contient qu'une seule valeur.
Les tableaux multidimensionnels sont des tableaux contenant eux-mêmes d'autres tableaux.
Les tableaux associatifs sont des tableaux utilisant  des indices personnalisés pour indexer les valeurs du tableau. Un tableau associatif peut être mono ou multidimensionnel.

Création / Instanciation


Création  par Instanciation (méthode constructeur)

Imaginons que nous voulons créer un tableau dont le nom sera MesRDV . La variable MesRDV sera associée (instancier) à la structure d'un tableau (Array) et l'espace mémoire sera automatiquement allouée grâce à l'opérateur new. A la suite de cela la variable MesRDV possèdera les propriétés et les méthodes des tableaux et sera prête à être initialisée.

var MesRDV = new Array();

L'initialisation du tableau peut se faire en même temps que l'instanciation :

var MesRDV = new Array("Docteur","Sport","Visite","Réunion","Dentiste");

ou bien après l'instanciation de la manière suivante :

var MesRDV = new Array();

MesRDV[indice] = valeur;

-----initialisation---------

Création par initiateur d'objet (méthode littérale)

Pour un tableau classique:

var MesRDV = {"Docteur","Sport","Visite","Réunion","Dentiste"};

Pour des tableaux associatifs

var MesRDV  = {"Lundi" : "Docteur","Mardi" : "Sport","Mercredi" : "Visite"};

Les deux méthodes donnent les mêmes résultats, toutefois la méthode par instanciation est à privilégier car plus conforme à la philosophie objet de javascript.

Initialisation, lecture des éléments


Tableaux monodimensionnels


Tableau avec indice numérique Tableau associatif
Méthodes d'initialisation ou de modification
Méthode classique

var MesRDV = new Array();

MesRDV[0] = "Docteur";
MesRDV[1] = "Sport";
MesRDV[2] = "Visite";
MesRDV[3] = "Réunion";
MesRDV[4] = "Dentiste";
Méthode associative en notation tableau ( [ ] ).

var MesRDV = new Array();
MesRDV["Lundi"] = "Docteur";
MesRDV["Mardi"] = "Sport";
MesRDV["Mercredi"] = "Visite";
MesRDV["Jeudi"] = "Réunion";
MesRDV["Vendredi"] = "Dentiste";
Méthode associative en notation objet (.)

var MesRDV = new Array();
MesRDV.Lundi = "Docteur";
MesRDV.Mardi = "Sport";
MesRDV.Mercredi = "Visite";
MesRDV.Jeudi = "Réunion";
MesRDV.Vendredi = "Dentiste";
Méthodes de lecture des éléments
info = MesRDV[4]
info = MesRDV["Mercredi"]
info =MesRDV.Jeudi

Tableaux multidimensionnels


Tableau avec indice numérique Tableau associatif
Méthodes de création, initialisation
Méthode classique

var MesSports = new Array();

MesSports[0] = "Balles";
MesSports[1] = "Ballons";
MesSports[2] = "Raquettes";

var MesRDV = new Array();
MesRDV[0] = "Docteur";
MesRDV[1] = MesSports;
MesRDV[2] = "Visite";
MesRDV[3] = "Réunion";
MesRDV[4] = "Dentiste";
Méthode associative en notation tableau ( [ ] ).

var MesSports = new Array();

MesSports["Tennis"] = "Balles";
MesSports["Foot"] = "Ballons";
MesSports["Squash"] = "Raquettes";

var MesRDV = new Array();
MesRDV["Lundi"] = "Docteur";
MesRDV["Mardi"] = MesSports;
MesRDV["Mercredi"] = "Visite";
MesRDV["Jeudi"] = "Réunion";
MesRDV["Vendredi"] = "Dentiste";
Méthode associative en notation objet (.)

var MesSports = new Array();

MesSports.Tennis = "Balles";
MesSports.Foot = "Ballons";
MesSports.Squash= "Raquettes";

var MesRDV = new Array();
MesRDV.Lundi = "Docteur";
MesRDV.Mardi = MesSports;
MesRDV.Mercredi = "Visite";
MesRDV.Jeudi = "Réunion";
MesRDV.Vendredi = "Dentiste";
Méthodes de lecture des éléments
info =MesRDV[1][2]
info =MesRDV["Mardi"]["Tennis"]
info =MesRDV.Mardi.Foot

Types de contenu d'un tableau

Un tableau peut contenir divers types de données dont quelques exemples sont décrits ci dessous.

Conditions initiales

test1 = new Array(), test = new Array();

Initialisation du tableau Détermination du Type avec l'opérateur typeof() Types
test.entier =10; typeof(test.entier); renvoie number number
test.virgule =5.3; typeof(test.virgule); renvoie number number
test.calcul =5+10; typeof(test.calcul); renvoie number
l'instruction info = test.calcul; initialise info avec 15
number
test.chaine1="bonjour" typeof(test.chaine1); renvoie string (chaîne) string
var txt1="hello";
test.chaine2=txt1;
typeof(test.chaine2); renvoie string (chaîne)
l'instruction info = test.chaine2; initialise info avec "hello"
string
var txt1="hello", txt2="bonjour"
test.chaine3=txt1+txt2;
typeof(test.chaine3); renvoie string (chaîne)
l'instruction info = test.chaine3; initialise info avec "hellobonjour"
string
test.UneFonction=function(nb1,nb2) {return (nb1 * nb2)}; typeof(test.UneFonction); renvoie function (fonction)
l'instruction info = test.UneFonction(10,5); initialise info avec la valeur 50
Note(1)
function
test.UnTableau = test1; typeof(test.UnTableau); renvoie object (objet)
l'instruction info = test.UnTableau; initialise info avec object
object


Note(1)

Remarques

Remarques générales

  • Si l'on tente d'accéder à un élément via des indices inexistants undefined  est renvoyé:
     info =MesRDV["Mardi"]["Boxe"] 

Remarques sur les opérateurs spéciaux

Pour illustrer le propos on se base sur le tableau MesRDV initialisé par la méthode associative
typeof Rappel : Cet opérateur détermine le type d'une variable.
typeof(MesRDV) renvoie object
typeof(MesRDV.Lundi) renvoie string.
typeof(MesRDV.Mardi.Foot) renvoient string.
in Rappel : Cet opérateur renvoie true si le nom d'une propriété ou l'indice d'un élément spécifiés se trouve dans l'objet spécifié.
"Lundi" in MesRDV; renvoie true   : "Lundi" est bien un indice valide de l'objet MesRDV.
"Dimanche" in MesRDV; renvoie false   : "Dimanche" n'est pas un indice valide de l'objet MesRDV.
"length" in MesRDV; renvoie true   : length (nb éléments du tableau) est un nom de propriété valide de l'objet MesRDV. Il s'agit du nom de la propriété et non pas de la propriété elle même, c'est pourquoi length est entre quotes.
Si le tableau MesRDV est initialisé par la méthode classique (indices numériques 0 à n) on écrira :

"0" in MesRDV qui renvoie true car 0 est un indice valide.
   

Remarques sur les indices des tableaux associatif

  • L'indice d'un tableau associatif comportant des espaces n'est pas un identifiant associatif valide. On peut toutefois utiliser de tels indices mais on ne pourra accéder ou initialiser le contenu correspondant de l'objet qu'avec la notation tableau (avec des crochets), et non une notation objet (avec des points).
    Exemple
test=new Array();
test."lundi 4 Aout"="500";
ne fonctionne pas
test=new Array();
test["lundi 4 Aout"]="500";
fonctionne

Remarques sur les tableaux multidimensionnels

  • Le tableau MesSports est un élément du tableau MesRDV. Dans la hiérarchie des déclarations le tableau MesSports doit être déclaré avant le tableau MesRDV sinon MesSports ne sera pas connu lors de l'initialisation de MesRDV.
  • Suivant la façon dont on réalise les indices des tableaux (et sachant que l'on peut indicer comme l'on veut) on peut imaginer n'importe quelle structure pour la lecture des données. Par exemple on pourrait imaginer info = MesRDV.Mardi[1] , ou MesRDV[3].foot.
  • Dans le tableau MesRDV à l'indice 1 ou "Mardi" on notera l'absence de "" pour MesSports car il s'agit d'un autre objet  (référence du tableau MesSports).

Propriétés

L'objet Array ne possède qu'une seule propriété : length 
MonTableau.length renvoi le nombre d'éléments contenus dans la table.
Cette propriété est principalement utilisée pour parcourir un tableau à l'aide d'une boucle :

Exemple : longueurTableau = MesRDV.length

Les boucles et les tableaux


La boucle for

Cette boucle est très utile pour parcourir les tableaux indicés numériquement

Tableaux monodimensionnels Tableaux multidimensionnels
var MesRDV = new Array();
MesRDV[0] = "Docteur";
MesRDV[1] = "Sport";
MesRDV[2] = "Visite";
MesRDV[3] = "Réunion";
MesRDV[4] = "Dentiste";
var MesSports = new Array();
MesSports[0] = "Balles";
MesSports[1] = "Ballons";
MesSports[2] = "Raquettes";

var MesRDV = new Array();
MesRDV[0] = "Docteur";
MesRDV[1] = MesSports;
MesRDV[2] = "Visite";
MesRDV[3] = "Réunion";
MesRDV[4] = "Dentiste";
Exemple 1

var info="";
for(var i=0; i< MesRDV.length; i++) {
  info = info + MesRDV[i] + "\n";
}
alert(info ); // affiche le résultat
Exemple 2

var info="";
for(var i=0; i< MesRDV.length; i++) {
  info = info + MesRDV[i] + "\n";
}
alert(info ); // affiche le résultat


Exemple 3(avec détails sous tableau)

var info="";
for(var i=0; i< MesRDV.length; i++) {
  if (i != 1) info = info + MesRDV[i] + "\n";
  else {
     for (var j=0; j < MesSports.length;j++) {
         info = info + "      " +  MesRDV[1][j] + "\n";
     }
   }
}
alert(info ); // affiche le résultat
Remarques sur les exemples précédents
 Exemple 2
Exemple 3

La boucle for ... in

Cette boucle permet de boucler à travers tous les éléments d'un objet. Pour un objet Array chaque itération de boucle renvoie l'indice de l'élément.

Pour illustrer les exemples reprenons le tableau associatif multidimensionnel MesRDV défini ci-dessous.

var MesSports = new Array();
MesSports.Tennis = "Balles";
MesSports.Foot = "Ballons";
MesSports.Squash= "Raquettes";

var MesRDV = new Array();
MesRDV.Lundi = "Docteur";
MesRDV.Mardi = MesSports;
MesRDV.Mercredi = "Visite";
MesRDV.Jeudi = "Réunion";
MesRDV.Vendredi = "Dentiste";

L'exemple suivant renvoie un indice à chaque itération

var info="";
for (_Indices in MesRDV){
 info = info + _Indices + "\n";
}
alert(info ); // affiche le résultat

Cet indice récupéré à chaque itération nous permet de récupérer la valeur associée à l'indice.

var info="";
for (_Indices in MesRDV){
 info = info + MesRDV[_Indices] + "\n";
}
alert(info ); // affiche le résultat

On constate que le contenu relatif à l'indice Mardi n'est pas disponible, pourtant il existe c'est l'objet MesSports que nous allons récupérer lorsque l'indice de MesRDV sera égal à Mardi.


var info="";
for (IndA in MesRDV){
    if (IndA == "Mardi") {
        for (IndB in MesSports){
            info = info + "    " + MesSports[IndB] + "\n";
        }
    }
   else info = info + MesRDV[IndA] + "\n";
}
alert(info ); // affiche le résultat


Méthodes de l'objet Array

L'objet Array (tableau) est un objet qui contient un certain nombre de propriétés et de méthodes permettant la manipulation des divers éléments du tableau.

Pour illustrer les exemples reprenons le tableau associatif multidimensionnel MesRDV défini ci-dessous.

var MesSports = new Array();
MesSports[0] = "Balles";
MesSports[1] = "Ballons";
MesSports[2] = "Raquettes";

var MesRDV = new Array();
MesRDV[0] = "Docteur";
MesRDV[1] = MesSports;
MesRDV[2] = "Visite";
MesRDV[3] = "Réunion";
MesRDV[4] = "Dentiste";

Méthodes Commentaires Tests
concat(tab1, tab2[, tab3, ...]) Cette méthode permet de concaténer plusieurs tableaux, c'est-à-dire de créer un tableau à partir des différents tableaux passés en paramètre.  
 Tableau.join() Renvoie une chaîne de caractères contenant tous les éléments du tableau. Attend comme paramètre un ou plusieurs signes de séparation par lequel/lesquels les éléments du tableau doivent être séparés dans la chaîne de caractères résultante.
Ne fonctionne pas avec les tableaux associatifs
 Tableau.pop() Cette méthode supprime le dernier élément du tableau, retourne sa valeur et affecte la dimension du tableau. Voir note(1).
Tableau.push(valeur1[, valeur2, ...]) Ajoute un ou plusieurs éléments à la fin d'un tableau. Attend comme paramètre un ou plusieurs éléments à ajouter. Renvoie  dans les dernières versions de JavaScript la taille du tableau.  
Tableau.reverse() Cette méthode inverse l'ordre des éléments du tableau.
Tableau.shift() Cette méthode supprime le premier élément du tableau..  
Tableau.slice(index1,index2) Extrait une partie d'un tableau. Attend comme paramètres le numéro d'index du premier et du dernier élément à extraire. Le numéro d'index pour le dernier élément peut également être une valeur négative. Ce qui signifie à peu près "l'élément n° tant en partant de la fin", où là aussi on commence à compter à partir de 0. Une valeur de -1 signifie donc l'avant dernier élément.
La méthode renvoie les éléments extraits sous forme de nouveau tableau.
Ne fonctionne pas avec les tableaux associatifs
 
Tableau.splice(ind,nb,el1,el2..) Ajoute un ou plusieurs nouveaux éléments dans un tableau et cela à un certain endroit choisi. Écrase en le faisant des éléments existants. Attend les paramètres suivants:
1. index départ = numéro d'index dans le tableau auquel le ou les nouveaux éléments doivent être insérés.
2. nombre = nombre d'éléments à insérer.
3.[4...] élément[s] = nouveaux éléments.
Le troisième et les paramètres suivants sont facultatifs. En ne mentionnant que les deux premiers paramètres des éléments vides seront insérés.
Ne fonctionne pas avec les tableaux associatifs
 
Tableau.sort() Voir Note1 Cette méthode permet de trier les éléments d'un tableau.
Tableau.toString() Cette méthode renvoie la chaîne de caractères correspond à l'instruction qui a permis de créer l'objet Array.
Tableau.unshift(el1,el2,..) Insère au début d'un tableau un ou plusieurs nouveaux éléments. Attend comme paramètre les éléments à insérer. Retourne le nouveau nombre d'éléments du tableau.
Tableau.valueOf() Cette méthode retourne  la valeur de l'objet Array auquel elle fait référence.

Note(1) : Array.sort() accepte un paramètre optionnel sous forme d'une fonction de référence qui peut permettre toutes sortes de critères de tri.

Exemple 1 [25, 8, 7, 41].sort(function(a,b){return a - b}) donnera comme résultat [7, 8, 25, 41]
Exemple 2 [25, 8, 7, 41].sort(function(a,b){return b - a}) donnera comme résultat [41, 25, 8, 7]
Exemple 3 [25, 8, 7, 41].sort(function() {return 0.5 - Math.random()}) donnera comme résultat un tableau avec les valeurs rangées en ordre aléatoire [41,25,7,8] ou [8,25,7,41] ou ...

Suppression des éléments d'un tableau avec l'opérateur delete

Pour supprimer un élément d'un tableau on utilise l'opérateur delete.

Rappel

L'opérateur delete permet de supprime un objet, la propriété d'un objet ou un élément de tableau à un indice donné.

 

Méthodes Commentaires Tests
delete MesRDV; Suppression du tableau  
delete MesRDV.visite; Suppression de l'élément dont le contenu est "visite"  
delete MesRDV[indice] Suppression de l'élément correspondant à un indice du tableau.  
  • Lorsque vous supprimez un élément d'un tableau, la longueur du tableau n'est pas affectée. À titre d'exemple, si vous supprimez a[3], a[4] reste a[4] et a[3] n'est pas défini (devient undefined).
  • Lorsque l'opérateur delete supprime un élément d'un tableau, cet élément n'est plus dans le tableau. Dans l'exemple suivant, arbres[3] est supprimé avec delete :
    arbres = new Array("séquoia", "laurier", "cèdre", "chêne", "érable");
    delete arbres[3];
    if (3 in arbres) {
    // ceci n'est pas exécuté
    }
  • Si vous voulez qu'un élément de tableau existe mais qu'il ait une valeur indéfinie, utilisez le mot-clé undefined à la place de l'opérateur delete. Dans l'exemple suivant, arbres[3] se voit affecter la valeur undefined mais l'élément existe toujours :
    arbres = new Array("séquoia", "laurier", "cèdre", "chêne", "érable");
    arbres[3] = undefined;
    if (3 in arbres) {
    // ceci est exécuté
    }

Objet Date


Syntaxe générale

Le principe est de créer une variable basée sur la structure de l'objet Date. Lors de cette création la réservation en mémoire et l'initialisation sont effectuées automatiquement. Cela s'appelle aussi créer une Instance de l'objet Date.

var MaDate = new Date();  La variable MaDate est initialisée avec la valeur de la date courante du système au format UTC : 

A partir de cette instance  on va pouvoir utiliser les différentes méthodes disponibles pour cet objet et son contenu.

var info = MaDate.Attribut();

Création et initialisation d'un objet-date


Méthodes Commentaires Tests
MaDate = new Date() Cette syntaxe permet de stocker la date et l'heure actuelle.
MaDate=new Date()
MaDate =new Date("mois  jour , année heures:minutes:secondes") Cette syntaxe permet d'obtenir et de stocker une date et une heure définies par des paramètres (chaîne de caractère) suivant scrupuleusement la notation ci-dessous.
Dans cette chaîne de caractères, mois est le nom du mois en anglais. La ligne suivante initialise une date au 25 Décembre 2008.
MaDate = new Date("December 25, 2008 20:30:50")
MaDate =new Date(année, mois, jour) Cette syntaxe permet d'obtenir et de stocker une date et une heure définies par des  paramètres sous forme de trois entiers séparés par des virgules.
mois=numéro du mois choisi + 1. Les mois sont numérotés de 0 à 11.
Les paramètres omis sont mis à zéro par défaut. La ligne suivante initialise une date au 04 juillet 2007.
MaDate= new Date(2007, 06, 04)
MaDate =new Date(année, mois, jour, heures, minutes, secondes[, millisecondes]) Cette syntaxe permet d'obtenir et de stocker une date et une heure définies par des paramètres sous forme de six entiers séparés par des virgules.
mois=numéro du mois choisi + 1. Les mois sont numérotés de 0 à 11.
Les paramètres omis sont mis à zéro par défaut. La ligne suivante initialise une date au 20 octobre 2003 à 15h 30mn 20s
MaDate= new Date(2003, 09, 20,15,30,20)

Les méthodes


Lecture de données


Méthodes Commentaires Tests
Lecture des données relatives à la valeur de Madate = new Date()
MaDate.getDate() Donne le numéro du jour du mois.
info = MaDate.getDate();
MaDate.getDay() Donne le numéro du jour de la semaine.
Attention 0 correspond au dimanche et 6 correspond au samedi.
info = MaDate.getDay();
MaDate.getMonth() Donne le numéro du mois moins 1.
Attention 0 correspond au mois de Janvier et 11 au mois de Décembre.
info = MaDate.getMonth();
MaDate.getFullYear() Donne l'année sur 4 chiffres.
info = MaDate.getFullYear();
MaDate.getYear() Donne théoriquement l'année sur 2 chiffres.
suivant les navigateurs 2 ou 4 chiffres)
info = MaDate.getYear();
MaDate.getHours() Donne l'heure du jour( heure légale)
info = MaDate.getHours();
MaDate.getMinutes() Donne le nombre de minutes dans l'heure de la date.
info = MaDate.getMinutes();
MaDate.getSeconds() Donne le nombre de secondes dans l'heure de la date.
info = MaDate.getSeconds();
MaDate.getMilliseconds() Donne le nombre de millisecondes de la date.
info = MaDate.getMilliseconds();
MaDate.getTime() Donne la date en millisecondes écoulées depuis le 1er janvier 1970.
info = MaDate.getTime();
MaDate.getTimezoneOffset() Donne la valeur du décalage horaire entre le poste du visiteur et l'heure du méridien de Greenwich en minutes.
info = MaDate.getTimezoneOffset();
MaDate.toGMTString() Donne la date sous forme d'une chaîne de caractères au format à l'heure GMT (Format international, à l'heure du méridien de Greenwich).
info = MaDate.ToGMTString();
MaDate.toLocaleString() Donne la date sous forme d'une chaîne de caractères au format local, défini dans les préférences du panneau de configuration du poste du visiteur.
info = MaDate.toLocaleString();

Modification des données


MaDate.setDate(x) Modifie le numéro du jour du mois.
var MaDate = new Date;
MaDate.setDate(10);
alert(MaDate.toLocaleString());
Testez Jour :
MaDate.setMonth(x) Modifie le numéro du mois.
Attention 0 correspond au mois de Janvier et 11 au mois de Décembre.
var MaDate = new Date;
MaDate.setMonth(5);
alert(MaDate.toLocaleString());
Testez Mois :
MaDate.setFullYear(année) Modifie l'année sur 4 chiffres.
var MaDate = new Date;
MaDate.setFullYear(2008);
alert(MaDate.toLocaleString());
Testez Année :
MaDate.setYear(année) Identique à .setFullYear(année)
var MaDate = new Date;
MaDate.setYear(2008);
alert(MaDate.toLocaleString());
Testez Année :
MaDate.setHours() Modifie l'heure du jour( heure légale)
MaDate.setHours() = x;
 
MaDate.setMinutes(x) Modifie le nombre de minutes dans l'heure de la date.
var MaDate = new Date;
MaDate.setMinutes(30);
alert(MaDate.toLocaleString());
Testez Mois :
MaDate.setSeconds(x) Modifie le nombre de secondes dans l'heure de la date.  
MaDate.setMilliseconds(xxxx) Modifie le nombre de millisecondes de la date.  
MaDate.setTime(xxxxxxx) Modifie la date en millisecondes écoulées depuis le 1er janvier 1970.
var MaDate = new Date;
MaDate.setMinutes(30);
alert(MaDate.toLocaleString());
Testez Mois :

Exemple


Voici un tout petit exemple d'horloge digitale qui utilise l'objet Date et des méthodes de l'objet window.



L'objet math

Syntaxe générale

Les méthodes et propriétés de l'objet Math permettent de manipuler des nombres et les fonctions mathématiques courantes.

Syntaxe : Math.méthode ou Math.propriété : il est nécessaire d'utiliser le préfixe Math car il s'agit de méthodes et propriétés statiques. Cet objet n'a donc pas à être instancié pour être utilisé.

Les propriétés

Propriétés Descriptions Valeurs
(arrondies 3 décimales)
Math.EValeur d'Euler (logarithme)
Math.LN10Logarithme népérien de 10
Math.LN2Logarithme népérien de 2
Math.LOG10EValeur base 10 du logarithme
Math.LOG2EValeur base 2 du logarithme
Math.PIValeur de pi
Math.SQRT1_2Racine carrée de 0.5
Math.SQRT2Racine carrée de 2

Les méthodes

Méthodes Descriptions Exemples
Trigonométrie
Math.cos(n)Cosinus de n (n en radians)
Math.sin(n)Sinus de n (n en radians)
Math.tan(n)Tangente de n (n en radians)
Math.acos(n)Arc cosinus en radians de n (n dans l'intervalle [-1;1])
Math.asin(n)Arc sinus en radians de n (n dans l'intervalle [-1;1])
Math.atan(n)Arc tangente en radians de n (n dans l'intervalle [-1;1])
Math.atan2(n)Angle de n des coordonnées polaires correspondant aux coordonnées cartésiennes (n dans l'intervalle [-1;1])
Logarithmes et exponentielle
Math.exp(n)Exponentiel de n
Math.log(n)Logarithme de n
Math.pow(n,exposant)Exposant (où n est la base de la puissance)
Math
Math.ceil(n)Plus petit entier plus grand ou égal à n ( partie entière)Math.ceil(-10.7)
=>
Math.floor(n)Plus grand entier plus petit ou égal à n ( partie entière)Math.floor(-10.7)
=>
Math.max(n1,n2)Plus grand de deux nombres (ici n1 ou n2)
Math.min(n1,n2)Plus petit de deux nombres (ici n1 ou n2)
Math.abs(n)Valeur absolue de nMath.abs(-10)
=>
Math.random()Nombre aléatoire entre 0 et 1Math.random()
=>
Math.round(n)Arrondi de n
Math.sqrt(n)Racine carré de nMath.sqrt(64)
=>

Fonctions hors objet Math mais liées aux nombres

isNaN(x)

var x="toto"; var res = isNaN(x) Renvoie true si x n'est pas un nombre, false sinon.

isFinite(x)

Renvoie true si x est un nombre que javascript peut traiter, false dans le cas contraire.

parseInt(str)

Convertit la chaîne de caractères str en nombre entier. Renvoie Not aNumber si la conversion échoue.

parseFloat(str)

Convertit la chaîne de caractères str en nombre décimal. Renvoie NaN (Not aNumber) si la conversion échoue.


Objet Boolean

Valeur primitives

Normalement les booléens sont des valeurs primitives créees à partir d'expressions littérales :

Comparaisons et Conditions

En JavaScript Boolean represente une des deux valeurs : true ou false.
La valeur booleenne d'une expression est un aspect fondamental de JavaScript dans le cadre des comparaisons et des conditions.

La fonction Boolean()

On peut utiliser la fonction Boolean()pour savoir si une expression (ou une variable) est vrai( true) ou fausse(false).

Avec une expression

Avec une chaine ou une valeur réelle

Toute expression (excepté zéro) est true. Toute chaine (non vide) est true.
  • Boolean(10) retounera true.
  • Boolean(-10) retounera true.
  • Boolean(10.15) retounera true.
  • Boolean(10+10.15-10) retounera true.
  • Boolean("bonjour") retounera true.
  • Boolean("false") retounera true.
  • Boolean(0) retounera false.
  • Boolean(-0) retounera false.
  • Boolean("") retounera false.
  • Si x n'est pas défini Boolean(x) retounera false.
  • Si x est égal à null Boolean(x) retounera false.
  • Si x est égal à null Boolean(x) retounera false.
  • Si x n'est pas un nombre(NAN) Boolean(x) retounera false.
  • Si x est true ou false Boolean(x) retounera false.

L'objet Boolean

L'objet Boolean est un objet permettant de représenter une valeur booléenne.

Evitez d'utiliser cette possibilité. Cela ralentit les temps d'exécution, alourdit le code et peut produire quelques résultats innatendus. Personnellement je n'est pas ecore compris l'utilité de cet objet.


Application au projet de site web



Respectons la propriété intellectuelle