Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Les objets javascript

En javascript vous pouvez manipuler des variables comme des objets. L’idée est de programmer comme vous vivez au quotidien, c’est à dire en utilisant des objets. Si vous avez besoin de boire de l’eau, vous utiliserez un verre, de même, en javascript si vous voulez connaitre la date d’aujourd’hui, vous pouvez employer l’objet Date().

Contrairement à l’idée répandue, un langage objet n’est pas difficile à apprendre, au contraire il simplifie l’écriture du code et le rend plus intuitif.

Il existe deux types d’objets :

    • Les objets prédéfinis : ceux qui sont déjà créés et proposés par javascript, comme les objets Math, Date, Array..
    • Les objets utilisateurs : ceux que vous pouvez créer vous-même

Les propriétés

Tous les objets possèdent des caractéristiques. Pour une voiture, par exemple, il s’agit de la marque, de la couleurs, du nombre de portes…. Il en est de même pour les objets en javascript, par exemple l’objet prédéfini Math peut vous retourner la valeur de la constante PI (3.14..).

En résumé, les propriétés d’un objet représentent l’ensemble de ses caractéristiques, ils fournissent plus de précisions sur cet objet et permettent de mieux le définir.

Les méthodes

Un objet peut aussi effectuer des actions. Une voiture, par exemple, peut démarrer, freiner, allumer les feux…. Il en est de même pour les objets en javascript, si on reprend l’objet prédéfini Math, cet objet peut calculer le cosinus d’un angle, arrondir des nombres, choisir un nombre de façon aléatoire…

En résumé, les méthodes d’un objet concernent son fonctionnement et définissent toutes les actions que ce dernier peut effectuer.

Créer un objet en Javascript

Il existe déjà les objets prédéfinis, mais vous pouvez les vôtres. Dans ce cas, il existe deux méthodes :

 Utiliser l’objet Object

let monObjet = new Object();

 Utiliser un littéral objet, en utilisant les accolades {} . On parle aussi de notation json (javascript objet notation ).

let monObjet = {};

Créer des propriétés

Lorsque vous créer un objet, ce dernier ne possède pas de structure, il est vide et ne contient pas encore de propriétés. Pour en créer une, il existe trois méthodes :

 Utiliser la syntaxe pointé .

let monObjet = new Object();
monObjet.couleur = "rouge"; // avec le point : la propriété couleur est 'rouge';

 Utiliser la syntaxe crochets [] . Dans ce cas l’objet est traité comme un tableau associatif. L’objet est le tableau et la propriété est la clé sous forme de chaîne de caractère.

let monObjet = new Object();
monObjet['couleur'] = "rouge"; // avec les crochets : la propriété couleur est 'rouge';

L’avantage de cette méthode est d’accepter l’espace pour le nom de la propriété.

let monObjet = new Object();
monObjet['couleur primaire'] = "rouge"; // remarquez la présence de l'espace dans la propriété;

 

 Utiliser la syntaxe json {}. Dans ce cas, la valeur est associée à la propriété par les deux-points :

let monObjet = {couleur : 'rouge'};

C’est un cas particulier ou la création de la propriété se fait en même temps que la création de l’objet. Vous pouvez déclarer plusieurs propriétés en les séparant par des virgules ,

let monObjet = {couleur : 'rouge', hauteur: 170, largeur: 80};

Accéder aux propriétés

Si votre objet contient des propriétés, vous pouvez y accéder de deux façons

 Avec le point .

document.write(monObjet.couleur);

Affichage

rouge

En utilisant l’accesseur de propriété, c’est à dire les crochets [] . A noter que la propriété doit être utilisée comme une chaîne de caractères.

document.write(monObjet['couleur']);

Affichage

rouge

Créer des méthodes

Votre objet peut exécuter des actions, ces actions sont appelées méthodes. Une méthode n’est rien d’autre qu’une fonction associée à l’objet.

Pour créer une méthode, il existe trois façons :

 Utiliser la syntaxe pointé .

let monObjet = new Object();
monObjet.methode1 = function(){
    document.write("je fais une action");
}

 Utiliser la syntaxe crochets []

let monObjet = new Object();
monObjet['methode1'] = function(){
    document.write("je fais une action");
}

 Utiliser la syntaxe json {}. Dans ce cas, la fonction est associée à la méthode par les deux-points :

let monObjet = {
    methode1 : function(){
        document.write("je fais une action");
    }
};

C’est un cas particulier ou la création de la méthode se fait en même temps que la création de l’objet. Vous pouvez déclarer plusieurs méthodes en les séparant par des virgules ,

let monObjet = {
    methode1 : function(){
        document.write("je fais une action");
    } , // la virgule sépare les méthodes
    methode2 : function(){
        document.write("je fais une autre action");
    }
};

Appeler une méthode

Si votre objet contient des méthodes, vous pouvez accéder à une méthode en l’appelant par son nom suivi des parenthèses ().

monObjet.methode1(); // une méthode possède toujours des parenthèses

Affichage

je fais une action

Transmettre des paramètres à une méthode

Il faut d’abord déclarer les paramètres au moment de la création de la méthode ..

let monObjet = new Object();
monObjet.calcul = function(nb1,nb2){
    document.write(nb1*nb2);
}

puis faire passer les valeurs lorsqu’on appelle la méthode

monObjet.calcul(2,3); // une méthode possède toujours des parenthèses

Affichage

6

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
tutowebdesign

Créer un menu latéral animé

Créer un menu latéral animé Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript. Commençons

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.