Travailler avec Javascript et la programmation orientée objet
© Julien Noyer - All rights reserved for educational purposes only
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs avec l’utilisation (par exemple) de Node.js. C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés.
Comme avec le code CSS, il est possible d’intégrer du Javascript de différentes façons dans une page web. Pour améliorer les performances d’affichage de votre page, il est recommandé de placer le Javascript dans un fichier .js extérieur au document principal (comme pour les fichiers .Css). Les fichiers Javascript sont ensuite intégrés dans une balise let users = ["Frédérique", "Pascal", "Matthieu"];<script>…</script>
juste avant la balise </body>
.
<script>…</script>
: La propriété type=“…”
permet de spécifier la nature du script (option)alert()
: La commande alert() affiche une boîte de dialogue en JavaScriptLe Javascript est un language de programmation orienté objet, c’est-à-dire qu’il permet de créer des boîtes virtuelles qui contiennent différentes caractéristiques. Ces boîtes et leurs caractéristiques sont ensuite utilisées pour construire des programmes, comme des Legos. La particularité de Javascript est d’être activée une fois que le rendu de la page est terminé, c’est pourquoi le code Javascript doit être écrit à la fin du document.
src=“…”
: attribut permettant de spécifier l’adresse du scriptL’importation du fichier .js ce fait avant le balise
</body>
car il doit s’exécuter une fois la page chargée
Comme vu précédemment, le JavaScript utilise le principe des boîtes, que nous appellerons des variables, pour y associer des caractéristiques. Ces variables sont stockées dans la mémoire de l’ordinateur client, il est alors possible de les réutiliser, de les associer à des actions et bien plus encore. Les variables sont composées de deux éléments-clefs : le nom de la variable et la valeur de la variable.
Le Javascript s’exécutant une fois la page entièrement chargée, nous pouvons enregistrer les actions de l’utilisateur pour déclencher des scripts qui répondront à ses actions. Les scripts utiliseront donc la mémoire de l’ordinateur client pour enregistrer ces réponses et agir en conséquence.
//
: Commentaire JavaScript : //, /* */let
: Déclaration d’une variable : let, const, var (ES5)prompt()
: Commande permettant d’afficher un boîte de dialogue avec un champs de texteconsole.log()
: Commande permettant d’afficher le résultat dans l’outil de développement“Bonjour” + leNom
: Concaténation d’une string et d’une variablesPour réaliser un code, JavaScript dispose de trois types de variables de base (dit type primitive) : String, Number et Boolean.
string
: Variable de type texte ayant pour valeur une chaîne de caractères, la valeur est écrite entre guillemetsinteger
: Variable de type entier ayant pour valeur un ou plusieurs chiffres entiers, la valeur est écrite sans guillemetsfloat
: Variable de type nombre flottant ayant pour valeur un ou plusieurs chiffres avec virgule, la valeur est écrite sans guillemetsboolean
: Variable représentant une réponse vraie ou fausse les valeurs sont true ou falseSavoir travailler avec des informations
JavaScript possède différents types d’opérateurs qui permettent de réaliser des opérations plus ou moins complexes avec des variables. Le premier opérateur que nous avons utilisé et l’opérateur d’affectation qui permet de définir le contenu d’une variable et l’opérateur d’addition qui permet de concaténer des variables ou de les additionner.
let number = 10;
: La variable number vaut 10number++;
: La variable number vaut maintenant 11number–;
: La variable number vaut maintenant 10let addition = 5 + 5;
: La variable addition vaut 10let soustraction = 15 - 5;
: La variable soustraction vaut 10let multiplication = 5 * 5;
: La variable multiplication vaut 25let division = 10 / 5;
: La variable division vaut 2let modulo = 23 % 5;
: La variable modulo vaut 3 (reste d’une division)let x = 10;
: La variable x vaut 10let y = 15;
: La variable y vaut 15x += y;
: La variable x vaut maintenant 25 (x + y)y -= x;
: La variable y vaut maintenant -10 (y - x)let firstName = “Julien”;
: La variable firstName contient “Julien”let lastName = “Noyer”;
: La variable lastName contient “Noyer”let fullName = firstName + " " + lastName;
: La variable fullName contient “Julien Noyer”Les tableaux (array en anglais) sont des variables qui ont pour particularité de pouvoir recevoir plusieurs valeurs et de différents types. Pour reprendre le principe des boîtes, une variable de type array serait un conteneur pour plusieurs boîtes. Les tableaux sont très utiles car ils permettent d’inclure dans une seule variable plusieurs entrées contenant elles-même des variables.
[…]
: Les items - ou index - d’un tableau sont écrits entre crochets et séparés par une virgulemyArray[…]
: En language de programmation, la numérotation d’un tableau commence par la valeur zéro, pour afficher une valeur il faut mettre entre crochets le numéro de la valeurlength
: Propriété d’un tableau permettant d’en connaitre la tailleComme pour les autres variables, le contenu d’un tableau peut être modifié après sa déclaration. Pour ce faire, il faut utiliser la commande .push(…) pour ajouter une nouvelle entrée au tableau. Il est également possible de remplacer une entrée dans le tableau en utilisant la commande .splice(…). La gestion des tableaux représente un principe important dans la programmation orientée objet.
push()
: Fonction permettant d’ajouter des données dans un tableausplice()
: Fonction permettant de supprimer une entrée depuis l’index d’un tableau et de la remplacer ou non par une autreCoomprendre l'utilisation des fonctions
En effectuant des opérations simples, il est possible d’afficher un message personnalisé à l’utilisateur qui prendra en compte les paramètres qu’il aura renseignés dans la fenêtre prompt().
parseInt()
: Commande permettant de transformer une chaîne de caractères en chiffresLes fonctions font partie des briques fondamentales de JavaScript, une fonction est un ensemble d’instructions JavaScript effectuant une ou plusieurs tâches. Pour utiliser une fonction, il faut d’abord définir ces instructions avant de l’appeler avec ou sans paramètre. Les fonctions sont très utiles pour réaliser des instructions à plusieurs reprises sans avoir à les écrire plusieurs fois.
function
: le mot clés function permet de déclarer une fonction en JavascripthelloWorld()
: Fonction sans paramètrefullName(firstName, lastName)
: Fonction avec paramètre, les paramètres sont ajoutés à l’appel de la fonctionLe mot-clé
return
permet de renvoyer les donnés récupérés par la fonction
Créée en 1960 par Ole-Johan Dahl et Kristen Nygaard, la programmation orientée objet applique aux langages de programmation le principe des objets physiques tel qu’une voiture, un jouet ou-bien un immeuble. Comme dans le monde réel, un objet JavaScript possède des propriétés et des comportements qui définissent leur type.
Les objets JavaScript sont les variables les plus puissantes, ils combinent un ensemble de propriétés, comprenant noms et valeurs associées, et peuvent également contenir des fonctions entières. La structure dun objet est assez proche de celle d’un tableau, l’avantage d’un objet est qu’il permet de labelliser les valeurs qu’il contient.
{…}
: Les propriétés de l’objet sont écrits entre accolades et séparées par une virgulejulien.firstName
: L’appel des propriétés ce fait avec un point après le nom de l’objet suivit de la propriétéjulien.pays = “…”
: Pour modifier une propriété il suffi de l’appeler pour lui affecter une nouvelle valeurIl est possible d’ajouter directement une fonction en paramètre d’un objet pour, par exemple, définir automatiquement le nom complet d’un utilisateur. Pour cela, il suffit de passer en paramètre de l’objet, une fonction qui prendra en référence les paramètres de l’objet.
fullName: function(){…}
: Pour pouvoir accéder aux paramètres de l’objet il faut ajouter l’opérateur this avant des les appelerjulien.fullName()
: L’appel de la function() ce fait de la même façon qu’un paramètre d’objet classique mais suivi par les parenthèsesLa programmation orientée objet nous permet de créer nos propres types d’objets pour ensuite créer des objets par type. Un type d’objet s’écrit en UpperCamelCase et possède des propriétés et des fonctionnements qui sont automatiquement associés aux nouveaux objets. Il faut donc dans un premier temps définir le type d’objet, ses propriétés et ses fonctions pour ensuite créer des objets du type défini
function Users(){…}
: Un type d’objet - ou constructor - est une fonction qui prend en paramètres les propriétés du type d’objet, le mot-clé this. fait référence au type d’objetUsers.prototype
: Pour ajouter une fonction à un objet ilfaut utilier la propriété prototypenew Users(…)
: La création d’une variable issue d’un objet se fait avec l’opérateur newjulien.fullName()
: La fonction s’applique à tous les objets créésComprendre les conditons et la manupulation du DOM
Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l’une des technologies cœur du World Wide Web. Le langage JavaScript permet des page webs interactives, et à ce titre est une partie essentielle des application web. Une gande majorité des site web l’utilisent, et la majorité des navigateur web disposent d’un moteur JavaScript dédié pour l’interpréter, indépendament des considérations de sécurité qui peuvent se poser le cas échéant.
Un opérateur d’affectation permet de modifier la valeur d’une variable. L’opérateur que nous avons déjà utilisé et l’opérateur égale (=) qui permet de définir la valeur d’une variable mais il est possible de la modifier ensuite avec l’utilisation d’autres opérateurs.
Nom | Opérateur | Signification |
---|---|---|
Affectation | x = y | x <- y |
Affectation après addition | x += y | x <- x + y |
Affectation après soustraction | x -= y | x <- x - y |
Affectation après multiplication | x *= y | x <- x * y |
Affectation après division | x /= y | x <- x / y |
Affectation du reste | x %= y | x <- x % y |
Affectation après exponentiation | x **= y | x <- x ** y |
Affectation après décalage à gauche | x <<= y | x <- x << y |
Affectation après décalage à droite | x >>= y | x <- x >> y |
Affectation après décalage à droite non-signé | x >>>= y | x <- x >>> y |
Affectation après ET binaire | x &= y | x <- x & y |
Affectation après OU exclusif binaire | x ^= y | x <- x ^ y |
Affectation après OU binaire | x |= y | x <- x | y |
Retrouver la liste complète des opérateurs d’affectation sur le site de MDN
Les opérateurs de comparaisons permettent de vérifier la similitude ou non-similitude entre plusieurs valeurs. Ils sont utilisé pour effectuer des comparaisons au sein d’un programme pour réaliser des actions spécifiques.
==
: Egallité simple!=
: Inégallité simple===
: Egallité strict!==
: Inégallité strict< / >
: Inférieur / supérieur à<= / >=
: Inférieur / supérieur ou égal àRetrouver la liste complète des opérateurs de comparaison sur le site de MDN
Principalement utilisés sur des valeurs bollean, les opérateurs logiques permettent de comparer deux valeurs pour effectuer des opérations quand la logique est respectée (true) ou non (false). Certains opérateurs peuvent renvoyer des valeurs non boolean s’ils sont utilisés sur des variables de type number ou string.
&&
: Est logique||
: Ou logique!
: Inverser une valeur booleanLes opérateurs logiques permettent de comparer des variables comme les opérateurs de comparaisons mais de façon logique
Comprendre les conditions
La condition if exécute une commande si une condition vérifiée est vraie, il est suivi d’une condition else qui exécute une commande si la condition vérifiée est fausse. Il est possible de définir plusieurs conditions avec l’opérateur else if pour décliner les commande à effectuer.
if(…){…}
: L’instruction if vérifi la condition entre parenthèseselse if(…){…}
: L’instruction else if permet de vérifier plusieurs conditions au sein d’une condition ifelse{…}
: L’instruction else permet de définir une réponse quand les conditions ne sont pas respectéesLa condition if exécute une commande si une condition vérifiée est vraie, il est suivi d’une condition else qui exécute une commande si la condition vérifiée est fausse. Il est possible de définir plusieurs conditions avec l’instruction switch pour décliner les commande à effectuer.
switch(...)
: Inspecter la valeur de la variablecase "..."
: Définition des casbreak;
: Terminer le casdefault:
: Définir le cas par défautComprendre le fonctionnement des boucles
Une fois que le tableau contient plusieurs entrées, il est possible d’effectuer des actions sur toutes les entrées du tableau. Le principe en programmation est de ne jamais répéter une ligne de code, c’est pour cette raison qu’il faut créer des boucles sur les tableaux plutôt que de répéter le même code pour chaque entrée du tableau. Il existe deux types de boucle : while et for qui doivent respecter une orthographe stricte.
Pour lancer une boucle while(…) il faut initier une variable i valant zéro, la boucle se lit ensuite de la façon suivante : à chaque fois que i est inférieure au nombre d’entrée du tableau users, exécute une action et__ incrémente i de un__. La boucle while(…) s’arrête quand i n’est plus inférieur au nombre d’entrées du tableau, la boucle ci-dessus affichera dans la console chacun des prénoms et se stoppera.
Dans une boucle for(…), la variable i est initiée et incrémentée directement dans la boucle, l’action à faire est ensuite placée entre accolades. La boucle for(…) ce stop quand i n’est plus inférieur au nombre d'entrée du tableau.
La variable i est primordiale dans l’utilisation des deux boucles : il faut absolument incrémenter i à la fin de la boucle pour ne pas exécuter des boucles infinies. Car si i vaut toujours zéro, alors il ne sera jamais égale au nombre d’entrées du tableau.
Tout comme un tableau, il est possible d’effectuer une boucle sur un objet pour effectuer une opération similaire sur chaque propriété de l’objet. Javascript a prévu une boucle particulière pour les objets qui s’appelle for…in.
Le mot-clef prop permet de récupérer la propriété de l’objet et julien[prop] permet de récupérer la valeur de la propriété
Comprendre la modification du HTML en JavaScript
Le Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web1. Par le DOM, la composition d'un document HTML ou XML est représentée sous forme d'un jeu d'objets – lesquels peuvent représenter une fenêtre, une phrase ou un style, par exemple – reliés selon une structure en arbre1. À l'aide du DOM, un script peut modifier le document présent dans le navigateur en ajoutant ou en supprimant des nœuds de l'arbre1.
Javascript permet de manipuler le DOM (ou arbre du document HTML) pour réaliser des pages HTML dynamiques. Il existe différentes façons d’ajouter des balises HTML dont voici la version la plus simple.
La fonction write(…) permet d'ajouter une bbalise HTML après la balise de
<script>
.
Il est possible de modifier une balise déjà présente sur la page HTML en l’identifiant par son ID, sa class ou son type. Une fois sélectionnée, il est possible d’y ajouter du contenu ou du style.
C'est différentes méthodes permettent de sélectionner une balise selon sont type.
Lorsqu’elle est sélectionnée, il est possible de modifier le contenu d’une balise avec la propriété textContent
Pour modifier le contenu HTML de l abalise il faut utiliser la propriété innerHTML
La propriété classList permet d’ajouter ou de supprimer une class sur une balise HTML.
Une fois la propriété classList invoqué il est possible d'ajouter, de supprimer ou d'inverser des class
Comme pour la commande document.write, il existe une façon plus solide d’ajouter des balises dans une page HTML..
La méthode appendChild() permet de définir l'endroit où ajouter la balise HTML
Le style d’une balise peut être modifié en JavaScript grâce à la commande style.
Pour la bonne syntaxe des styles il est important de se référer au site de MDN
Index des liens vers les sujets traités dans ce document