MVC 4 Web Application Tutoriel – Première partie – Etape 2- Introduction à Javascript .

On ne peut y échapper, Javascript est partout! Il n’y a guère de pages Internet qui n’y font pas appel. Nous allons donc découvrir rapidement ce qu’est Javascript et montrer quelques exemple illustrant comment s’en servir. De la même manière que pour CSS, apprendre Javascript n’est pas le but de ce tutorial, cette introduction sera plus un survol qu’un approfondissement. Si je réussi à vous mettre le pied à l’étrier, cet article aura atteint son but.

S’il n’y avait qu’un seul concept à retenir de cette rapide introduction à Javascript, il tiendrait dans cette phrase: “Javascript est un langage de script coté client, autrement dit le code est interprété/exécuté par le NAVIGATEUR”.

Aucun besoin de serveur et d’internet, donc, pour pouvoir utiliser une application écrite avec Javascript, en théorie. En pratique, il y a de fortes chances que le code fasse appel à des ressources externes, mais cela ne change rien au fait que le code soit exécuté par le navigateur lorsqu’il charge la page, et que l’exécution stoppe lorsque la page est refermée.

Votre script peut effectuer de nombreuses tâches différentes:

  • Manipuler le DOM (Document Object Model) et ses éléments.
  • Réagir à des évènements, comme un clic sur un bouton, ouverture de page …
  • Lire le contenu de variables globales liées au navigateur.

Nous allons créer un simple script faisant tout cela, étape par étape.

Tout d’abord, ouvrons dans Visual Studio le fichier HTML de l’étape précédente, et ajoutons une balise SCRIPT:

Pour commencer, nous allons tester le fonctionnement de Javascript dans notre navigateur, en utilisant la fonction alert:

Après avoir sauvé le fichier, lors de l’ouverture de la page dans votre navigateur, une fenêtre d’alerte similaire à une messagebox, affiche le fameux “Hello World”. Si ce n’est pas le cas, vérifiez dans les paramètres de votre navigateur que Javascript est bien autorisé. L’aspect de cette fenêtre sera différent selon le navigateur, preuve, s’il en était besoin, que c’est lui qui exécute le code.

Hello World, c’est bien, mais on peut faire un peu mieux, non ? Si on tachait d’afficher la date d’aujourd’hui dans notre fenêtre, par exemple:

 

C’est bien beau, ça, mais j’affiche systématiquement la date au format US. Ne serait-il pas possible de détecter la langue utilisée par le navigateur, pour adapter le format de la date? Oui, c’est possible, mais il faut utiliser une petite astuce, tous les navigateurs n’implémentant pas cette fonction de la même manière:

Bien, c’est déjà pas mal pour un début avec Javascript! Nous avons utilisé des fonctions du langage pour trouver la date du jour, l’afficher de manière plus compréhensible que le format par défaut (Je vous laisse le soin de modifier le code pour afficher le format “brut” de la fonction Date()), et adapter le format à la langue de l’utilisateur.

Mais pour l’instant, nous avons choisi la solution de facilité en utilisant alert() pour afficher le résultat dans notre page. Qu’en est-il de la réaction sur des évènements, et la manipulation du DOM par Javascript pour afficher dans notre page elle-même, plutôt que dans une fenêtre externe?

Commençons donc par modifier notre code de manière à n’afficher la date du jour que lorsque l’utilisateur le demande. Toujours en Javascript, nous allons créer un bouton dans la page, puis déclencher la fonction alert() lorsque l’utilisateur clique ce bouton.

Comme vous pouvez le voir, j’ai ajouté un deuxième script plutôt que de trop modifier le premier. Comme je n’utilise, pour l’instant, aucune fonction en dehors de celles du langage, toutes mes variables sont globales à la page. Cela ne pose donc aucune difficulté d’utiliser la variable formattedDate du premier script dans le second.

Voici l’état actuel de la page en entier:

Le code du 2ème script crée un nouvel élément bouton, lui affecte 2 attributs, le type, et l’action à effectuer sur l’évènement “OnClick”, ajoute un contenu texte à l’élément, puis ajoute le nouvel élément ainsi créé au corps de la page. Si vous affichez avec votre navigateur le source de la page, vous verrez qu’il n’y a pas de bouton, alors qu’il est sous vos yeux! Pour voir le code généré, selon votre navigateur, appuyez sur F12 (outils de développement), pour voir dans la console le code html résultat de l’exécution de Javascript.

Nous savons maintenant créer dynamiquement un nouvel élément HTML, et réagir sur un évènement, mais nous utilisons toujours la solution de facilité alert(). Voyons comment montrer cette date dans le corps de la page, plutôt que dans une fenêtre “pop-up”. Commençons par transformer le premier script en une fonction:

Ensuite, créons une seconde fonction, pour ajouter notre date au contenu de l’élément “firstParagraph”

Maintenant il nous reste à modifier l’attribut onclick de notre bouton:

Cliquer sur le bouton ajoute la date au bas de notre paragraphe au lieu d’ouvrir une nouvelle fenêtre, exactement comme souhaité. Vous avez sans doute noté au passage que créer et utiliser une fonction Javascript est plutôt simple.

Voici le code complet de la page après ces dernières modifications:

Le code n’est pas parfait, puisque l’on ajoute la date à chaque clic sur le bouton. Il faudrait tester le contenu du paragraphe avant d’y ajouter la date. Excellent exercice pour vous! Mettez votre solution en commentaire.

Avant de vous quitter en terminant cette 2ème étape, je veux vous montrer un outil très pratique pour tester et mettre au point interactivement votre code JavaScript:

Tutorial Part One – Step Two

 

This work is licensed under a Creative Commons license.
Publié dans ASP.NET MVC 4.0, Tutoriel Tagués avec :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Lettre d’information

Recherche sur le Site

Recherche personnalisée