Try   HackMD

Les bases de la programmation en Javascript

Travailler avec Javascript et la programmation orientée objet

© Julien Noyer - All rights reserved for educational purposes only


Introduction

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.

Utiliser la balise script

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 type="text/javascript"> alert("Hello World!"); </script>

Définition des éléments

  • <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 JavaScript

Importer un fichier JS

Le 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.

<!DOCTYPE html> <html> <head> <meta charset=”utf-8” /> <title>Bonjour le monde</title> </head> <body> <h1>Hello World!</h1> <script src="js/script.js"></script> </body> </html>

Définition des éléments

  • src=“…” : attribut permettant de spécifier l’adresse du script

L’importation du fichier .js ce fait avant le balise </body> car il doit s’exécuter une fois la page chargée

Définition d'une variable

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.

Stocker une variable dans la mémoire vive (RAM)

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.

// Création d’une variable qui stock une réponse let leNom = prompt(“Quel est ton nom ?); // La réponse est affichée dans la console console.log("Bonjour " + leNom);

Définition des éléments

  • // : 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 texte
  • console.log() : Commande permettant d’afficher le résultat dans l’outil de développement
  • “Bonjour” + leNom : Concaténation d’une string et d’une variables

Les variables primitives

Pour réaliser un code, JavaScript dispose de trois types de variables de base (dit type primitive) : String, Number et Boolean.

let string = “Julien Noyer“; let integer = 1638; let float = 2.345; let boolean = true;

Définition des éléments

  • string : Variable de type texte ayant pour valeur une chaîne de caractères, la valeur est écrite entre guillemets
  • integer : Variable de type entier ayant pour valeur un ou plusieurs chiffres entiers, la valeur est écrite sans guillemets
  • float : Variable de type nombre flottant ayant pour valeur un ou plusieurs chiffres avec virgule, la valeur est écrite sans guillemets
  • boolean : Variable représentant une réponse vraie ou fausse les valeurs sont true ou false

Manipuler les données en Javascript

Savoir travailler avec des informations

Les opéateurs élémentaires en Javascript

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 10
  • number++; : La variable number vaut maintenant 11
  • number–; : La variable number vaut maintenant 10
  • let addition = 5 + 5; : La variable addition vaut 10
  • let soustraction = 15 - 5; : La variable soustraction vaut 10
  • let multiplication = 5 * 5; : La variable multiplication vaut 25
  • let division = 10 / 5; : La variable division vaut 2
  • let modulo = 23 % 5; : La variable modulo vaut 3 (reste d’une division)
  • let x = 10; : La variable x vaut 10
  • let y = 15; : La variable y vaut 15
  • x += 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 en Javascript

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.

let userName = "Julien Noyer"; let myArray = ["Some text", 2391, false, userName]; // Afficher les éléments du tableau console.log(myArray[0]); // Affiche "Some text" console.log(myArray[1]); // Affiche 2391 console.log(myArray[2]); // Affiche false console.log(myArray[3]); // Affiche "Julien Noyer" // Connaître la taille d’un tableau console.log(myArray.length); // Affiche 4

Définition des éléments

  • […] : Les items - ou index - d’un tableau sont écrits entre crochets et séparés par une virgule
  • myArray[…] : 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 valeur
  • length : Propriété d’un tableau permettant d’en connaitre la taille

Manipuler les données d'un tableau en Javascript

Comme 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.

let users = ["Frédérique", "Pascal", "Matthieu", "Julien"]; let newUser = prompt("Quel est ton prénom ?"); users.push(newUser); console.log(users); let removed = users.splice(1, 2, "Jacques", "Paul"); console.log(removed); console.log(users);

Définition des éléments

  • push() : Fonction permettant d’ajouter des données dans un tableau
  • splice() : Fonction permettant de supprimer une entrée depuis l’index d’un tableau et de la remplacer ou non par une autre

Programmer en Javascript

Coomprendre l'utilisation des fonctions

Effectuer un calcule simple

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().

let currentYear = 2015; // Trois questions sont posées à l’utilisateur let firstName = prompt("Quel est ton prénom ?"); let lastName = prompt("Quel est ton nom ?"); let age = prompt("Quel est ton âge ?"); // Calcul de la date de naissance de l’utilisateur let birthYear = currentYear - parseInt(age); console.log("Bonjour " + firstName + " " + lastName + ", ton année de naissance est : " + birthYear);

Définition des éléments

  • parseInt() : Commande permettant de transformer une chaîne de caractères en chiffres

Ecrire une fonction Javascript

Les 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 helloWorld() { return "Hello World!"; } helloWorld(); // Affiche la string "Hello World!” function fullName(firstName, lastName) { return "Hello World " + firstName + " " + lastName; } fullName("Julien", "Noyer"); // Affiche la string "Hello World Julien Noyer"

Définition des éléments

  • function : le mot clés function permet de déclarer une fonction en Javascript
  • helloWorld() : Fonction sans paramètre
  • fullName(firstName, lastName) : Fonction avec paramètre, les paramètres sont ajoutés à l’appel de la fonction

Le mot-clé return permet de renvoyer les donnés récupérés par la fonction

La programmation orientée objet

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 en Javascript

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.

let julien = { firstName: "Julien", lastName: "Noyer", pays: "France", age: 36 } console.log(julien.firstName); // Affiche "Julien" console.log(julien.pays); // Affiche "France" console.log(julien.age); // Affiche 36 julien.pays = "Italie"; console.log(julien.pays); // Affiche maintenant "Italie"

Définition des éléments

  • {…} : Les propriétés de l’objet sont écrits entre accolades et séparées par une virgule
  • julien.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 valeur



Ajouter une fonction à un objet

Il 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.

let julien = { firstName: "Julien", lastName: "Noyer", pays: "France", age: 36 // Ajout d’une fonction qui calcule le nom complet fullName: function() { return this.firstName + " " + this.lastName; } } console.log(julien.fullName()); // Affiche "Julien Noyer"

Définition des éléments

  • fullName: function(){…} : Pour pouvoir accéder aux paramètres de l’objet il faut ajouter l’opérateur this avant des les appeler
  • julien.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èses

Créer un type d'objet (constructor)

La 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 (firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }; Users.prototype.fullName = function() { return this.firstName + " " + this.lastName; }; let julien = new Users("Julien", "Noyer"); let chuck = new Users("Chuck", "Norris"); console.log(julien.fullName()); // Affiche "Julien Noyer" console.log(chuck.fullName()); // Affiche "Chuck Norris"

Définition des éléments

  • 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’objet
  • Users.prototype: Pour ajouter une fonction à un objet ilfaut utilier la propriété prototype
  • new Users(…): La création d’une variable issue d’un objet se fait avec l’opérateur new
  • julien.fullName(): La fonction s’applique à tous les objets créés

Manipuler un Robot

Comprendre 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.

Les opérateurs d'affectation

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.

Définition des opérateurs d'affectation

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 comparaison

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.

let number = 15;

number == 15; // true
number == "15"; // true

number != 20; // true
number != "15"; // false
number != 15; // false

number === 15; // true
number === "15"; // false

number !== 15; // false
number !== "15"; // true

number > 15; // false
number < 16; // true

number >= 15; // true
number <= 16; // true

Définition des opérateurs de comparaison

  • == : 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

Les opérateurs logique

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.

let number1 = 10, number2 = 10, number3 = 5; number1 == 10 && number2 == 10; // Renvoi true number1 == 10 && number3 == 10; // Renvoi false number2 == 5 && number3 == 5; // Renvoi false number1 == 10 || number2 == 10; // Renvoi true number1 == 10 || number3 == 10; // Renvoi true number2 == 5 || number3 == 5; // Renvoi true console.log(!true); // Affiche false console.log(!false); // affiche true

Définition des opérateurs logiques

  • && : Est logique
  • || : Ou logique
  • ! : Inverser une valeur boolean

Les opérateurs logiques permettent de comparer des variables comme les opérateurs de comparaisons mais de façon logique


Affiner le comportement d'un robot

Comprendre les conditions

Les instructions if, else if et else

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.

let userChoice = prompt("Quelle couleur veux-tu traduire en anglais ?"); if (userChoice === "rouge") { console.log("Rouge se dit Red en anglais."); } else if (userChoice === "vert"){ console.log("Vert ce dit Green an anglais."); } } else { console.log("Je ne connais pas cette couleur..."); }

Définition des instructions

  • if(…){…} : L’instruction if vérifi la condition entre parenthèses
  • else if(…){…} : L’instruction else if permet de vérifier plusieurs conditions au sein d’une condition if
  • else{…} : L’instruction else permet de définir une réponse quand les conditions ne sont pas respectées

Le switch, un alternative au if, else if et else

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’instruction switch pour décliner les commande à effectuer.

let userChoice = prompt("Quelle couleur veux-tu traduire en anglais ?"); switch (userChoice) { case "rouge": console.log("Rouge se dit Red en anglais."); break; case "vert": console.log("Rouge se dit Red en anglais."); break; case "bleu": console.log("Rouge se dit Red en anglais."); break; default: console.log("Je ne connais pas cette couleur..."); break; }

Définition des instructions

  • switch(...) : Inspecter la valeur de la variable
  • case "..." : Définition des cas
  • break; : Terminer le cas
  • default: : Définir le cas par défaut

Faire réfléchir un robot

Comprendre le fonctionnement des boucles

Les tableaux et les 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.

Boucle while()

let users = ["Frédérique", "Pascal", "Matthieu"]; // Initialisation de la boucle let i = 0; // Lancement de la boucle while while (i < users.length) { console.log(users[i]); i++; }

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.

Boucle for()

let users = ["Frédérique", "Pascal", "Matthieu"]; // Lancement de la boucle for for (var i = 0; i < users.length; i++) { console.log(users[i]); }

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.

Les objets et les boucles

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 forin.

let julien = { firstName: "Julien", lastName: "Noyer", age: 36 }; for (var prop in julien) { console.log(prop + " = " + julien[prop]); } // Affiche dans la console : // firstName = Julien // lastName = Noyer // age = 36

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é


Manipulation du DOM

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.

Ajouter du HTML en JavaScript

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.

<html> <head> <title>Titre de la page</title> </head> <body> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
document.write("<p>Une balise de texte en JavaScript</p>");

Résultat

<html> <head> <title>Titre de la page</title> </head> <body> <script type=”text/javascript” src=”js/script.js”></script> <p>Une balise de texte en JavaScript</p> </body> </html>

La fonction write() permet d'ajouter une bbalise HTML après la balise de <script>.

Sélectionner une balise du DOM

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.

<html> <head> <title>Titre de la page</title> </head> <body> <h1 id=”title” class=”hello”>Titre principal</h1> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
let title = document.getElementById('title'); let hello = document.getElementsByClassName('hello'); let mainTitle = document.getElementsByTagName('h1'); let tag = document.querySelector('h1'); let tags = document.querySelectorAll('h1');

C'est différentes méthodes permettent de sélectionner une balise selon sont type.

Modifier le texte d'une balise

Lorsqu’elle est sélectionnée, il est possible de modifier le contenu d’une balise avec la propriété textContent

<html> <head> <title>Titre de la page</title> </head> <body> <section id="mySection">Ceci est un <span>exemple de</span> texte</div> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
let text = document.getElementById("mySection").textContent; document.getElementById("mySection").textContent = "Un autre texte";

Résultat

<html> <head> <title>Titre de la page</title> </head> <body> <section id="mySection">"Un autre texte</div> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>

Pour modifier le contenu HTML de l abalise il faut utiliser la propriété innerHTML

Manipuler les class d'une balise

La propriété classList permet d’ajouter ou de supprimer une class sur une balise HTML.

<html> <head> <title>Titre de la page</title> </head> <body> <section id="mySection" class="sectionClass"></div> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
let element = document.getElementById("mySection").textContent; element.classList.remove("sectionClass"); element.classList.add("visible"); element.classList.toggle("visible");

Une fois la propriété classList invoqué il est possible d'ajouter, de supprimer ou d'inverser des class

Ajouter un enfant dans le DOM

Comme pour la commande document.write, il existe une façon plus solide d’ajouter des balises dans une page HTML..

<html> <head> <title>Titre de la page</title> </head> <body> <header></header> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
let title = document.createElement("h1"); title.textContent = "Hello World!"; document.querySelector('header').appendChild(title);

La méthode appendChild() permet de définir l'endroit où ajouter la balise HTML

Modifier le style d'un balise

Le style d’une balise peut être modifié en JavaScript grâce à la commande style.

<html> <head> <title>Titre de la page</title> </head> <body> <p id=myPara>Un texte sans style CSS</p> <script type=”text/javascript” src=”js/script.js”></script> </body> </html>
let paraTag = document.getElementById(“monID”); paraTag.style.color = "red"; // Le texte sera de couleur rouge

Pour la bonne syntaxe des styles il est important de se référer au site de MDN


Ressources

Index des liens vers les sujets traités dans ce document