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
| Propriété ou méthode | Description |
| document | permet d’accéder à tous les objets |
| status | affiche un message dans la barre d’état |
| name | le nom de la fenêtre actuelle |
| window | fenêtre actuelle |
| Home() | permet d’atteindre la page d’accueil |
| Alert() | affiche un message sur une boite |
| Prompt() | affichage d’une boite qui contrôle la saisi clavier |
| Close() | ferme la fenêtre |
| Open() | ouvre une fenêtre pop-up |
| Blur() | cache la fenêtre |
| resizeBy() | permet de modifier les dimensions de la fenêtre |
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>