Tutoriel pour apprendre la programmation en JavaScript


précédentsommairesuivant

XV. TP 15 : jQuery, Node.js et frameworks

Objectifs :

  • Comprendre les bases d'usage de la bibliothèque jQuery
  • Découvrir Node.js et l'installation de modules avec npm
  • Découvrir la création d'une Single Page App avec Augular et React

XV-A. Convertir un composant jQuery en JavaScript/DOM pur

Pour une introduction à la bibliothèque jQuery, consulter les slides du TP.

Références :

XV-A-1. Exercice 1 : convertir un composant accordéon

  • Tester et analyser le jsfiddle d'exemple
  • Forker ce jsfiddle, puis le modifier pour qu'il ne contienne plus de jQuery :

    • Fonction associée au clic sur un seul menu
    • … puis sur chaque menu (à l'aide d'une boucle)
    • Cacher les éléments .content
    • Afficher l'élément .content du .menu qui a été cliqué

Solution : jsfiddle

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez

XV-A-2. Exercice 2 : convertir un autre composant (au choix)

Exemples de composants :

codepen

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez

jsfiddle

 
Cacher/Afficher le codeSélectionnez
 
Cacher/Afficher le codeSélectionnez

XV-B. Node.js et npm

XV-B-1. Introduction

En début d'année, nous avons vu qu'il existait différents types d'interpréteurs JavaScript.

Exemples :

  • la console de Chrome permet d'exécuter des instructions JavaScript de manière interactive ;
  • un fichier JavaScript intégré dans une page web est exécuté dès l'ouverture de cette page dans un navigateur.

Il existe un autre moyen d'exécuter du code JavaScript : Node.js.

Node.js est un logiciel basé sur le moteur d'exécution intégré dans Google Chrome : V8. Il est constitué de deux commandes exécutables depuis le « terminal » (la console du système d'exploitation) : node et npm.

La commande node permet d'exécuter du code JavaScript, alors que npm permet de télécharger puis installer des modules (appelés packages) de manière locale (dans le dossier en cours) ou globale (=> modules accessibles depuis n'importe quel dossier).

Node.js est couramment utilisé pour développer des serveurs web (aussi appelé back-end, dans le cas de développement d'applications client-serveur telles que les applications web), mais permet aussi la réalisation de scripts ayant accès à toutes les fonctions du système d'exploitation : système de fichiers, accès illimité aux ressources de n'importe quel réseau (dont le web), etc.

npm est couramment utilisé pour installer les dépendances, c'est-à-dire les modules nécessaires par un programme JavaScript qui sera exécuté par Node.js.

À noter que la plupart des frameworks front-end actuels recommandent l'usage de la commande npm pour les télécharger sur votre machine, ainsi que vous installer les éventuels bibliothèques, composants et autres extensions dont votre application aura besoin.

XV-B-2. Installer et tester Node.js sur sa machine

Après avoir ouvert le terminal, taper node pour exécuter la version interactive de Node.js.

Pour lancer le « terminal » :

  • sous Windows, appuyer sur la touche « Windows », taper « cmd » puis presser ENTRÉE.
  • sous Mac, presser Cmd-Espace, taper « term » puis presser ENTRÉE.

Si la commande node n'est pas trouvée par le système, il faudra installer Node.js depuis son site officiel, puis rouvrir le terminal avant de poursuivre la manipulation.

Une fois Node.js lancé, vous pouvez taper des instructions, comme dans la console de Chrome Dev Tools.

Par exemple : tapez 1+1; pour voir le nombre 2 s'afficher en retour.

Pour quitter l'interpréteur Node.js, pressez Ctrl-C.

XV-B-3. Exécuter un fichier .js avec Node.js

Nous allons d'abord créer un fichier test.js très simple, en tapant la commande suivante dans le terminal :

 
Sélectionnez
1.
echo "console.log('bonjour');" >test.js

Sous Windows, vous aurez peut-être besoin de retirer les guillemets.

Ensuite, pour exécuter ce fichier, il suffit alors de taper la commande suivante depuis le terminal :

 
Sélectionnez
1.
node test.js

Vous devriez alors voir s'afficher la ligne suivante :

bonjour

À noter que les symboles tels que window, document, alert() et getElementById() ne sont pas définis par Node.js, car ils sont seulement fournis lorsqu'un programme JavaScript s'exécute depuis un navigateur Web !


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Adrien Joly. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.