Antoine Derouin - Initiation à la programmation avec JavaScript et jQuery

Introduction

Durant cette série de TP, vous allez écrire et utiliser des programmes en langage Javascript/JQuery.

Le langage Javascript sert à écrire des programmes permettant de décrire comment une page web réagit aux actions de l'internaute.

Ainsi, en Javascript on peut écrire : lorsque l'internaute modifie le contenu d'un champ de saisie, il faut exécuter les actions suivantes ... .

Cela peut consister par exemple à mettre à jour le montant d'un panier lorsque l'internaute rajoute des articles.

Observation et modification d'un programme

Les programmes écrits en javascript permettent de donner un comportement particuliers aux éléments d'une page web.

Par exemple, lorsqu'on clique sur ces mots, il se passe quelque chose ...

Page web

Avec un éditeur de texte (Notepad++, Brackets, Fraise, Sublime Text ...) ouvrez le fichier index.html pour voir le texte html permettant de créer cette page web.

Complétez le titre principal de la page en lui ajoutant votre nom. Vérifiez que la page web a bien été modifiée.

Repérez la balise contenant le texte "ces mots" cité précédement.

A votre avis, qu'est-ce qui permet au programme de repérer ce texte ?

avec l'id #exemple1

Dans le texte html, repérez les balises script.

Une balise script permet d'associer un programme javascript à la page web.

Programme

Avec votre éditeur de texte, ouvrez le fichier progExemple1.js.

Observez ce programme, notez qu'il comporte des commentaires qui expliquent son fonctionnement.

Repérez l'instruction qui permet de détecter qu'on clique sur le texte "ces mots" cité précédement.

$('#exemple1').click(gestionClicExemple1) ;

Voyez quel gestionnaire d'événement est exécuté lors d'un clic sur ce texte.

injectionDeTexte() ;
extractionEtRecopieDeValeur() ;

Modifiez le texte affiché dans la fenêtre ouverte par l'instruction alert.

Testez le fonctionnement de cette nouvelle version du programme.

Modifiez la page web et éventuellement le programme pour que la fenêtre d'alerte s'affiche lorsqu'on double-clique sur le titre "Programme".

Complétez le programme pour qu'une alerte apparaisse lorsqu'on clique sur ce paragraphe ...

Vous devrez modifier la fonction principale et créer une nouvelle fonction.

Injection dans la page

Cherchez dans le fichier html la balise décrivant le paragraphe qui suit.

#lieuInjection1

Je suis le paragraphe que vous cherchez

Complétez le programme pour qu'il affiche "Bonjour" dans ce paragraphe lorsqu'on survole le titre "Injection dans la page"

Saurez-vous faire en sorte que ce paragraphe soit remplacé par "Bravo !" lorsqu'on clique dessus ?

Récupération d'une valeur

Affichez les outils de développement de votre navigateur (avec F12 ou ctrl + Maj + i).

Notez que l'une des fonctions affiche la valeur 3 dans la console javascript.

Repérez la fonction en question.

function extractionEtRecopieDeValeur()

Dans cette fonction, qu'est-ce que laValeur ?

Une déclaration de variable

D'où vient la valeur stockée dans laValeur ?

Elle vient de l'id #val1

Complétez le programme pour que cette valeur soit injectée dans la zone nommée "destination".

Ce paragraphe contient la valeur 3.

Quelle valeur ?

La valeur !

Calcul

Faites en sorte que la fonction principale déclenche l'exécution de la fonction calcul.

La fonction calcul effectue une opération mathématique.

Où est stocké le résultat de cette opération ?

Dans la variable "resultat"

Complétez cette fonction pour qu'elle affiche son résultat dans la console.

Faites en sorte que le résultat de l'opération s'affiche dans la zone suivante.

Le résultat du calcul vaut :

Exercice de synthèse

Allez dans cette page pour réaliser l'exercice de synthèse.