Blog ENI : Toute la veille numérique !
💥 Un livre PAPIER acheté
= La version EN LIGNE offerte pendant 1 an !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. Angular et Node.js
  3. JavaScript
Extrait - Angular et Node.js Développement web full stack avec MEAN
Extraits du livre
Angular et Node.js Développement web full stack avec MEAN Revenir à la page d'achat du livre

JavaScript

Pourquoi JavaScript ?

JavaScript a été développé en 1995 par Brendan Eich alors qu’il travaillait pour Netscape Communications Corporation. À l’époque, les navigateurs web étaient encore très limités en termes de fonctionnalités et il était difficile pour les développeurs de créer des expériences interactives en ligne. JavaScript a été conçu pour remédier à ce problème en fournissant aux développeurs un moyen d’ajouter des fonctionnalités interactives à leurs sites web sans avoir à les reconstruire complètement. Initialement appelé Mocha, le langage a été renommé JavaScript en raison de la popularité du langage Java à l’époque.

Au fil des ans, JavaScript a continué à évoluer et à se développer pour prendre en charge un large éventail d’applications. De nombreuses bibliothèques et de multiples frameworks ont été créés pour faciliter le développement d’applications en utilisant JavaScript, notamment jQuery, AngularJS et React. De plus, JavaScript a été adopté pour les applications côté client, les applications de bureau et les applications mobiles, ce qui en fait l’un des langages de programmation...

ECMAScript 6

ECMAScript 6 (également connu sous le nom de ES6 ou ES2015) est la dernière version majeure d’ECMAScript, qui est un standard de script pour les applications web. ES6 a été publié en juin 2015 et est devenu un élément clé de la création d’applications web.

ES6 apporte des fonctionnalités qui améliorent considérablement la productivité et la qualité du code. Parmi celles-ci figurent les fonctions fléchées, qui permettent d’écrire des fonctions anonymes plus facilement et de manière plus concise. Les classes dans ES6 permettent une programmation orientée objet plus claire et plus lisible, tout en facilitant la création de nouvelles instances.

ES6 introduit également des modules, ce qui permet de diviser le code en parties plus petites et plus facilement gérables et d’importer du code d’autres fichiers pour une utilisation dans le code en cours d’exécution. Les template literals ajoutent une nouvelle syntaxe pour la concaténation de chaînes de caractères, ce qui rend le code plus facile à lire et à maintenir. Les collections telles que Map et Set fournissent de nouvelles structures de données pour stocker des informations de manière plus efficace et plus structurée.

De plus, ES6 apporte des améliorations...

Comment programmer en JavaScript ?

Vous pouvez effectuer des actions en JavaScript :

  • Soit directement dans votre navigateur via les outils de développement (accessibles en utilisant la touche [F12] de votre clavier).

  • Soit depuis un site qui permet d’écrire dans une console du code JavaScript à des fins de test et d’apprentissage, comme le site https://jsconsole.com/.

La première solution est parfaite pour corriger votre application ou votre site web et pour voir si aucun problème n’est bloquant pour un utilisateur.

Pour commencer le développement en JavaScript, il vous faut une base de site web en HTML. Vous pouvez vous servir du code HTML suivant :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script>  
console.log("mon premier message dans la console"); 
//permet d'afficher un message dans la console 
</script> 
</head> 
<body> 
</body> 
</html> 

Le code précédent est un code basique d’implémentation d’un script en JavaScript entre les balises sémantiques <script> et </script>. Le but de ce code est de permettre d’écrire un message dans la console de votre navigateur. Vous pouvez le récupérer et le mettre directement dans un fichier index.html et l’exécuter.

Le texte précédé...

Rappel des bases

1. Les variables

En JavaScript, les variables peuvent être de plusieurs types, tels que les types primitifs (chaînes de caractères, nombres, booléens, null et undefined) et les types complexes (objets, tableaux, fonctions, etc.). Le type de la variable est déterminé dynamiquement lors de l’exécution du code, ce qui signifie que le même nom de variable peut être utilisé pour stocker différents types de données à différents moments.

Il existe trois mots-clés pour déclarer une variable en JavaScript :  var,  let et  const :

  • var, le mot-clé le plus ancien, est utilisé pour déclarer une variable globale ou locale. Cependant, son utilisation est souvent déconseillée en faveur de let et de const.

  • let est utilisé pour déclarer une variable dont la valeur peut être modifiée.

  • const est utilisé pour déclarer une variable dont la valeur ne peut pas être modifiée.

JavaScript est un langage à typage dynamique, ce qui signifie que vous n’avez pas besoin de spécifier le type de données lors de la déclaration d’une variable. Sa valeur peut être changée à tout moment en utilisant l’opérateur d’assignation =.

Il est important de prendre en compte la portée de la variable. Les variables déclarées à l’intérieur d’une fonction sont locales à cette fonction, tandis que les variables déclarées à l’extérieur d’une fonction sont globales et accessibles dans tout le code. Les variables globales doivent être utilisées avec prudence, car elles peuvent entraîner des conflits de noms et rendre le code difficile à comprendre et à maintenir.

2. Les boucles

Il est possible d’utiliser différentes boucles pour itérer sur des collections de données ou exécuter une action plusieurs fois. Les trois types de boucles les plus couramment utilisés en JavaScript sont les boucles for, while et do...while.

La boucle for est la plus courante. Elle permet de répéter une action un nombre fixe de fois en spécifiant une variable de compteur, une condition de sortie et une expression de mise...

Les méthodes avancées

1. Les promesses

Les promesses (promises) sont un concept clé de la programmation asynchrone en JavaScript. Elles ont été introduites dans la norme ES6.

Les promesses sont des objets qui représentent la finalisation ou l’échec d’une opération asynchrone. Une promesse peut être dans l’un des trois états suivants : en attente (pending), accompli (fulfilled) ou rejeté (rejected).

Lorsqu’une promesse est créée, elle est initialement dans l’état « en attente ». Si l’opération asynchrone réussit, la promesse passe à l’état « accompli » et renvoie une valeur. Si l’opération asynchrone échoue, la promesse passe à l’état « rejeté » et renvoie une erreur.

Lorsque vous créez une promesse, vous pouvez lui ajouter une ou plusieurs fonctions de rappel (callback) qui sont exécutées lorsque la promesse est accomplie ou rejetée. Ces fonctions de rappel sont ajoutées à la promesse en utilisant les méthodes .then() et .catch(). La méthode .then() est appelée lorsque la promesse est accomplie et reçoit la valeur renvoyée par la promesse en tant qu’argument. La méthode .catch() est appelée lorsque la promesse est rejetée et reçoit l’erreur renvoyée par la promesse en tant qu’argument. 

// Créer une promesse qui se résoudra après 1 seconde 
const maPromesse = new Promise((resolve, reject) => { 
  setTimeout(() => { 
    resolve('Promesse résolue !'); 
  }, 1000); 
}); 
 
// Ajouter une fonction de rappel pour la promesse 
maPromesse.then((resultat) => { 
  console.log(resultat); // Affiche 'Promesse résolue !' 
après une seconde 
}).catch((erreur) => { 
  console.error(erreur); 
}); 

Dans cet exemple, nous créons une promesse qui se résoudra après 1 seconde en utilisant la fonction setTimeout(). Nous ajoutons ensuite une fonction de rappel à la promesse en utilisant la méthode...

La programmation objet en JavaScript

1. Le principe de la programmation objet

La programmation orientée objet est une stratégie de développement qui s’appuie sur la notion d’objets pour structurer et organiser le code informatique. Cette approche vise à rendre le code plus intuitif et aligné sur la manière dont nous percevons et interagissons avec le monde réel. En encapsulant les données et les fonctionnalités qui les manipulent au sein de ces objets, elle permet aux développeurs de créer des programmes plus modulables et faciles à comprendre, en établissant des relations claires entre les différentes parties du code.

Au cœur de la programmation orientée objet se trouvent plusieurs concepts clés tels que l’encapsulation, l’héritage et le polymorphisme, qui contribuent à la flexibilité et à la réutilisabilité du code. Ces concepts clés jouent un rôle essentiel dans la structuration des programmes et la définition des interactions entre les objets.

2. Les factory functions

Les factory functions (ou fonctions fabriques) sont un concept de programmation utilisé en JavaScript pour créer des objets. Ces fonctions fabriquent (d’où leur nom) et retournent de nouveaux objets à chaque appel. Une factory function retourne un nouvel objet lorsqu’elle est invoquée avec l’opérateur new. Elle encapsule la logique de création d’un objet et peut effectuer des opérations supplémentaires...

Conclusion

Dans ce chapitre, nous avons exploré divers aspects de JavaScript, en commençant par expliquer pourquoi JavaScript est un langage de programmation populaire et largement utilisé. Nous avons ensuite examiné les fonctionnalités d’ES6 qui ont amélioré le langage et facilité le développement web. Nous avons abordé les bases de la programmation en JavaScript, en rappelant les concepts essentiels tels que les variables, les boucles, les tableaux, les objets, les types internes et le transtypage. Nous avons également exploré les structures de données couramment utilisées et les applications des expressions régulières.

Puis nous avons passé en revue les différentes structures de contrôle disponibles en JavaScript, telles que les structures conditionnelles, les structures switch et les structures itératives. Ces structures permettent de contrôler le flux d’exécution du programme en fonction de certaines conditions ou de répéter des blocs d’instructions.

Nous avons vu que les méthodes avancées de JavaScript offrent des fonctionnalités puissantes pour manipuler des tableaux, effectuer des opérations de filtrage, de réduction et de recherche de données.

Enfin, nous avons exploré la programmation orientée objet (POO). Nous avons...