1 – Introduction

Le langage javascript est un langage orienté objet, en plus il est doté de l’avantage de manipulation d’objets sans instanciation, et par suite vous pouvez manipuler tous ce qui apparaissent dans votre browser : fenêtres corps du document, boutons, zones de texte… comme etant des objets javascript. Nous n’allons pas ici traiter le coté POO du javascript proprement dit mais quelque exemple d’objets fondamentaux. Pour accéder aux propriétés d’un objet on utilise la syntaxe:

objet.propriété

2 – Objet Javascript prédéfinit

2.1 - L'objet window

Tous les composants d’une page web sont des objets y compris l’objet windows qui est leur parent, l’objet window est parfois appelé l’objet par excellence. Exemple pour écrire un texte on utilise la syntaxe :

window.document.write(‘bonjour’);

Propriétés et méthodes de l'objet window

Remarque

En Javascripte, ils existent de nombreux autres  objets  dotés de méthodes et de propriétés accessibles directement sans instanciation, on peut en citer :  String, Math, date, navigator, array...

Si on veut  à titre d'exemple examiner l'objet String, de nombreuses méthodes sont associées à ce dernier :

charAt ()   Retourne le caractère à l'index spécifié (position)

charCodeAt ()   Retourne l'Unicode du caractère à l'index spécifié

concat ()   Joint deux chaînes ou plus et renvoie une nouvelle chaîne jointe

endsWith ()   Vérifie si une chaîne se termine par des chaînes / caractères spécifiés

fromCharCode ()   Convertit les valeurs Unicode en caractères

includes ()   Vérifie si une chaîne contient la chaîne / les caractères spécifiés

indexOf ()   Renvoie la position de la première occurrence trouvée d'une valeur spécifiée dans une chaîne

lastIndexOf ()   Renvoie la position de la dernière occurrence trouvée d'une valeur spécifiée dans une chaîne

localeCompare ()   Compare deux chaînes dans les paramètres régionaux en cours

match ()   Recherche une chaîne pour une correspondance avec une expression régulière et renvoie les correspondances

repeat ()   Retourne une nouvelle chaîne avec un nombre spécifié de copies d'une chaîne existante

replace ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie une nouvelle chaîne dans laquelle les valeurs spécifiées sont remplacées

search ()   Recherche une chaîne pour une valeur spécifiée ou une expression régulière et renvoie la position de la correspondance

slice ()   Extrait une partie d'une chaîne et retourne une nouvelle chaîne

split ()   Divise une chaîne en un tableau de sous-chaînes

startsWith ()   Vérifie si une chaîne commence par des caractères spécifiés

substr ()   Extrait les caractères d'une chaîne, en commençant à une position de départ spécifiée, et à travers le nombre de caractères spécifié

substring ()   Extrait les caractères d'une chaîne, entre deux index spécifiés

toLocaleLowerCase ()   Convertit une chaîne en minuscules, en fonction des paramètres régionaux de l'hôte

toLocaleUpperCase ()   Convertit une chaîne en majuscules, en fonction des paramètres régionaux de l'hôte

toLowerCase ()   Convertit une chaîne en lettres minuscules

toString ()   Retourne la valeur d'un objet String

toUpperCase ()   Convertit une chaîne en majuscules

trim ()   Supprime les espaces des deux extrémités d'une chaîne

valueOf ()   Renvoie la valeur primitive d'un objet String

Nous n'allons pas pouvoir traiter toutes ces méthodes ici, mais amusons nous à faire un petit exemple simple pour la première charAt().Le lecteur curieux peux consulter ces méthodes en détails chacune avec un exemple bien expliqué  ici

Exemple

<script type="text/javascript">
var s = new String("bonjour");
alert("Le premier caractère de la chaine 'bonjour' est  " + s.charAt(0));
</script>

Ce qui affiche au navigateur :

3 - Prototypes orienté objet

JavaScript utilise des prototypes où de nombreux autres langages orientés objet utilisent des classes pour l'héritage.  Il est possible de simuler de nombreuses fonctionnalités basées sur des classes avec des prototypes en JavaScript.

3.1 - Fonctions en tant que constructeurs d'objets

On peut créer des objets dotés de paramètres et propriétés en déclarant de simples fonctions Javascript.

Exemple

<script type="text/javascript">
function mobile(marque,system){
this.marque=marque;
this.system=system;
}
</script>

Cet exemple permet de créer un objet nommé : mobile doté des deux paramètres : marque et system. Si on veut par exemple faire une instanciation pour créer un objet téléphone de marque  : Galaxy  dont le système est Android, il suffit d'ajouter le code :

var mymobile=new mobile("Galaxy","Android");
//affichage des résultats
alert("Mon mobile est  " + mymobile.marque + " Son system est  " + mymobile.system);

3.2 - Les classes  Javascript

Javascript  est doté de l'instruction class qui permet à l'utilisateur de créer ses propres classes, de faire l'instanciation pour créer des objets...

Syntax :

class nom_de_la_classe {
  constructor(paramètres) {
  }
}

Exemple

<script type="text/javascript">
class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}
</script>

Cet exemple permet de construire une classe nommée rectangle dotée d'un constructeur ayant deux paramètres hauteur et largeur. Pour faire une instanciation sur cette classe et créer un objet rectangle il suffit d'ajouter le code :

const R= new Rectangle(20, 12);
//affichage des résultats
alert("la hauteur du rectangle est : "+R.hauteur + " La largeur du rectangle est : "+ R.largeur);

Ce qui affiche après exécution :

Remarque

On peut aussi ajouter d'autres méthodes à la classes, par exemple une méthode qui calcul la surface, une autre qui calcul le périmètre...

<script type="text/javascript">

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
  surface(){
  return this.hauteur*this.largeur;
  }
  
  périmètre(){
  return 2*(this.hauteur + this.largeur);
}
}
const R= new Rectangle(8, 6);
//affichage des résultats
alert("la surface du rectangle est : "+R.surface() + " Le périmètre du rectangle est : "+ R.périmètre());
</script>

Younes Derfoufi
CRMEF OUJDA