Si vous venez d'assister au cours magistral, passez à la section suivante.

JavaScript est un langage en pleine croissance.

Dans les pages suivantes on va voir à quoi il sert.

Aujourd’hui le JavaScript est utilisé sur presque toutes les pages du web.

Il permet de gérer les interactions, des plus simples (formulaires, onglets) aux plus complexes (Google Maps, Gmail, ...)

D'autres technologies client (comme le Flash) sont progressivement remplacées par le JavaScript.

Le JavaScript est un langage de programmation qui peut s’exécuter directement dans le navigateur (client).

Le HTML et le CSS sont aussi gérés dans le navigateur (client).

Le PHP, Java (Servlets) et SQL sont utilisés coté serveur.

Il est très important de distinguer ce qui se passe sur le client (navigateur) de ce qui se passe sur le serveur. Plus tard, on verra des allers-retours complexes entre les deux.

Les interactions client / serveur passent par internet et sont souvent lentes (300ms- 1500ms).

Exemple classique: la validation d'un formulaire.

L'utilisateur tape, appuie sur « envoyer » et doit attendre 1 à 2 secondes avant qu'une nouvelle page s'affiche lui indiquant une faute de frappe.

Le JavaScript s’exécute directement dans le navigateur.

Il peut modifier l'affichage très rapidement (quelques ms) sans passer par le réseau et sans recharger la page.

Exemple de formulaire:

Avec JavaScript l'erreur peut être affichée immédiatement, après avoir appuyé sur « envoyer », ou même au fur et à mesure que l'utilisateur tape.

Le javascript est inclus à partir du HTML avec la balise <script>.

Ce programme :

- Attend la fin du chargement du document : $(document).ready(...)

- Lorsque l'utilisateur clique sur le titre h1 :

$('h1').click(...)

- Le texte du paragraphe devient "Bonjour!":

$('p').text('Bonjour');

- La couleur de ce paragraphe devient rouge

$('p').css('color','red');

Le JavaScript est un langage de programmation ayant une « Syntaxe C ». Il ressemble au PHP et au Java.

Il n'y a pas de lien entre JavaScript et Java.

Comme en PHP, le type des variables est géré automatiquement: vous n'avez pas besoin de dire qu'une variable est un "int" ou un "String".

Comme en PHP et Java, la mémoire est gérée automatiquement. Vous n'avez pas besoin de désallouer (malloc=>free en C).

Guillemets simples et doubles comme en PHP.

Déclaration de fonction similaire au PHP.

On va utiliser JavaScript surtout pour interagir avec l'affichage dans le navigateur.

On veut, par exemple, dire au navigateur : "Affiche ce paragraphe en rouge", "Cache ce titre", "Ajoute une image après ce paragraphe".

On doit donc apprendre deux choses différentes:

1- le langage de programmation JavaScript

2 - comment communiquer avec le navigateur

On va donc passer beaucoup de temps à comprendre comment interagir avec le navigateur.

Le HTML peut-être vu comme un arbre.

Chaque noeud de l'arbre correspond à une balise. L'ordre des balises est important.

Le texte contenu dans chaque balise est représenté par un noeud « Text ». En général, on ne montrera pas sur les schémas les noeuds « Text ».

C'est très important d'avoir toujours en tête la correspondance HTML <=> arbre.

Le navigateur reçoit et analyse le HTML. Il crée des objets (au sens POO) correspondant à chaque balise, et organisés dans un arbre.

Dans cet exemple « i » est l'objet DOM correspondant à une image. « i » a de nombreuses propriétés, dont certaines correspondent aux attributs (id, style, src...):

i.id => « photo »

i.style => CSS associé

i.src => url de l'image

...

on peut lire et parfois modifier ces propriétés

Voici 3 types d'objets DOM importants:

- window : la fenêtre d'un document. S'il y a plusieurs onglets, chaque onglet a son window.

- document : à l'intérieur du window, contient l'arbre DOM issu du HTML.

- HTMLElement : la plupart des noeuds de l'arbre que nous manipulerons sont de type HTMLElement

jQuery est une bibliothèque JavaScript qui simplifie beaucoup la programmation en JavaScript.

Elle est très utilisée.

Elle n'est pas indispensable, mais nous allons l'utiliser dès le début de ces cours.

Nous verrons aussi, plus tard, comment manipuler le DOM sans jQuery.

On accède à jQuery avec « $ »

Commençons par un exemple simple !

Écrivez le fichier suivant exemple1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exemple1</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exemple1.js"></script>
	</head>
	<body>
		<h1>Ceci est un titre</h1>
		<p>bla bla bla</p>
	</body>
</html>

Écrivez le fichier suivant exemple1.js

alert("Le js est bien chargé");
$(document).ready(function()
{
	$('h1').click(function()
		{
			$('p').text('Bonjour!');
			$('p').css('color','red');
		});
});

alert("Le js est bien chargé");

$('p').text('Bonjour!');

Vérifiez que ça marche.

Dans la ligne suivante

$('p').css('color','red');

essayez d'autres propriétés CSS que 'color'. Par exemple: font-size, background-color, border,....

• Prenez le temps d'inspecter une page web (par exemple celle de ce cours).
• Passez la souris sur les balises dans l'inspecteur HTML (3).
• Cliquez sur les balises.
• Regardez le CSS (4) correspondant.
  

Remarque: Un élément peut avoir plusieurs blocs de style associés, avec des sélecteurs différents. Par exemple, pour le paragraphe

<p id="para1"> gdsfg sdfg </p>

On pourrait avoir

p {color: red;} 

mais on pourrait avoir (en même temps)

#para1 {background-color: green;}

En utilisant l'inspecteur, quel est le nom de la balise HTML qui contient le texte "XYZ" ci-dessous:

XYZ

En utilisant l'inspecteur, quel est la taille de la police de caractères (font-size) du texte "XYZ" ci-dessous:

XYZ

(enlevez les "alert()" que vous avez ajouté dans exemple1.js)

Ouvrez exemple1.html et inspectez le paragraphe avec l'Inspecteur.

Rechargez exemple1.html et observez comment le paragraphe change dans les outils de développement lorsque vous cliquez sur le titre.

Comme on l'a vu, les outils de dév. permettent de voir le HTML et le CSS dans une page web.

Les outils de dév. fournissent aussi une console JavaScript. Pour y accéder cliquez sur l'onglet "Console" (1). Vous verrez une invite de commande (2) ou vous pouvez taper du JavaScript.

Important:
Cette console doit toujours être ouverte quand vous développez en JavaScript.
C'est là que sont affichés les messages d'erreur. Si elle est fermée, vous ne comprendrez pas ce qui ne marche pas.

La console permet aussi de :

•  faire des essais
•  afficher des messages à partir de notre programme pour débugger

Essayez !

Tapez dans la console "1+1" puis appuyez sur entrée (vous devez vois s'afficher "2").

Tapez : alert("ca marche!");

Tapez :

$('p').text("J'aime le JavaScript");

Copier coller dans la console:

Sur certains Firefox, le message suivant s'affiche quand vous essayez de faire un copier coller vers la console:

Attention aux fraudes : faites attention lorsque vous collez des choses que vous ne comprenez pas. Cela pourrait permettre à des attaquants d’usurper votre identité ou de prendre le contrôle de votre ordinateur. Veuillez saisir « autoriser le collage » ci-dessous (pas besoin d’appuyer sur entrée) pour autoriser le collage.

Vous devez donc taper "autoriser le collage" (en toutes lettres) dans la console, avant de pouvoir faire un copier-coller pour la première fois.

Quand on tape une expression dans la console, la valeur de cette expression est affichée.

1+1 affiche 2

Souvent, on fait une action, et la valeur du résultat ne nous intéresse pas:

alert("bonjour")  affiche undefined : c'est parce-que la fonction alert() ne retourne rien.
Ce "undefined" ne nous intéresse pas, on peut l'ignorer.

console.log()

console.log() permet d'afficher dans la console.

Tapez dans la console: console.log("bonjour!");

Ce n'est pas très utile dans la console. Par contre, dans un programme JavaScript, c'est très utile pour débugger.

Dans exemple1.js ajoutez des console.log() partout:

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");
	$('h1').click(function()
		{
			console.log("L'utilisateur a cliqué sur h1");
			$('p').text('Bonjour!');
			$('p').css('color','red');
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Conclusion :

Dans cette partie on va rapidement se rafraîchir la mémoire.

Révisions: Arbre d'un document complet

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Exemple</title>
  </head>
  <body>
    <h1>Bonjour!</h1>
  </body>
</html>

Les balises <span> et <div> servent à regrouper du texte et des balises.
<span> est "inline" et <div> est "block" (on verra ces notions bientôt)
Pour simplifier:
<span> est utilisé lorsqu'on veut regrouper des petits bouts de texte (à l'intérieur d'une même ligne).
<div> est utilisé lorsqu'on veut regrouper de plus grands blocks, qui s'affichent sur plusieurs lignes.

Par exemple :

L'utilisateur <span class="utilisateur">Wang</span> est connecté depuis 3h.

<div id="presentation">
   <h2>Pingouins</h2>
   <p>Les pingouins cherchant leur nourriture dans les eaux maritimes et océaniques froides</p>
</div>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>exemple1</title>
        <style type="text/css">
            body
            {
               width: 500px;
            }
            .tel 
            {
                background-color: #ffa;
            }
            #photos
            {
                border: 1px solid black;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <XX1>Crème glacée</XX1>
        <XX2>La crème glacée, ou simplement la glace, est un <XX3 href="https://fr.wikipedia.org/wiki/Entremets">entremets</XX3> élaboré à partir de la crème, elle-même faite à partir de lait, de sucre, de fruits et d'arômes variés ; on y ajoute parfois des jaunes d'œufs.</XX2>
        <XX4>Contacts</XX4>
        <XX5>
            <XX6>Palais des glaces: <XX7 class="tel">01 45 67 89 01</XX7></XX6>
            <XX6>Café du centre:    <XX7 class="tel">01 54 32 10 98</XX7></XX6>
        </XX5>
        <XX8 id="photos">
            <XX4>Photos:</XX4>
            <XX2><XX9 src="glace.jpg" alt="glace"/><XX9 src="glace2.jpg" alt="glace"/></XX2>
        </XX8>
    </body>
</html>

Certains éléments HTML prennent au moins une ligne entière. On les appelle des éléments "block". Si vous mettez plusieurs éléments block d'affilé, ils seront  affichés sur des lignes différentes.

D'autres éléments HTML s'affichent à l'intérieur d'un ligne, de gauche à droite (inline), comme du texte.

Parmi les éléments suivants, lesquels prennent au moins toute une ligne (block) ?

HTML:

<p>
    La souris se trouve à la position 
    x=<AAA class="coord">123</AAA>, 
    y=<AAA class="coord">432</AAA>
</p>

Révision CSS 

<p>
  <span id="velo">Vélo</span>,
  <span id="voiture">Voiture</span>,
  <span id="avion">Avion</span>
</p>

Révision CSS 

<p>
  <span AAA="aliment">Chocolat</span>,
  <span AAA="vehicule">Vélo</span>,
  <span AAA="aliment">Fraise</span>,
  <span AAA="vehicule">Voiture</span>,
  <span AAA="vehicule">Avion</span>
  <span AAA="aliment">Poire</span>
</p>

.aliment
{
   color: red;
}

Révision CSS 

<h2>Ingrédients</h2>
<p>
  <span>Chocolat</span>, <span>Fraise</span>
</p>

Révision CSS 

<h2>Ingrédients</h2>
<p>
  <span>Chocolat</span>, <span AAA>Fraise</span>
</p>

Si vous venez d'assister au cours magistral, passez à la section suivante.

Dans cette partie, on va analyser en détail un exemple simple.

A travers cet exemple on va découvrir les notions essentielles de la programmation JavaScript et jQuery.

C'est l'exemple vu au début de la partie précédente.

Quand l'utilisateur clique sur le titre "Ceci est un titre", le paragraphe en dessous "bla bla bla" change de texte ("Bonjour!") et de couleur (rouge).

Commençons par la ligne

$('p').css('color','red');

C'est cette ligne qui change la couleur du paragraphe en rouge.

En JavaScript, on utilise souvent les « sélecteurs ».

Vous avez appris à utiliser les sélecteurs en CSS. Les sélecteurs permettent de désigner depuis le CSS des éléments HTML (des éléments dans l'arbre DOM). On va aussi les utiliser en JavaScript pour designer les éléments du DOM.

Le sélecteur le plus simple est le nom de la balise. Par exemple « p » désigne tous les paragraphes.

Le sélecteur « # » permet de designer un élément (unique) ayant un id donné: #para1 désigne l'élément qui a id="para1".

Le sélecteur « . » permet de designer les éléments ayant un « class » donné: .actu désigne tous les éléments ayant class="actu"

Voyons d'abord la première partie de la ligne:

$('p')

'p' est un sélecteur qui désigne tous les paragraphes. Ici, il n'y en a qu'un seul ("bla bla bla").

Le « $ » correspond à jQuery.

D'une manière générale $('xyz') permet de créer une liste jQuery d'éléments correspondant au sélecteur "xyz".

Dans l'exemple précédent la liste jQuery $('p') ne contentait qu'un seul élément.

Cet exemple est différent. Il y a plus d’éléments et on utilise un sélecteur "class":

$('.actu')

La liste générée contient deux éléments : le h1 et le premier paragraphe.

Cet exemple est simple (.actu). En pratique, le sélecteur peut être complexe et la liste peut contenir de très nombreux éléments.

Les listes jQuery sont un moyen très pratique pour faire des opérations sur les éléments DOM.

On va les utiliser très souvent.

La deuxième partie ".css('color','red')" est une fonction associée à la liste $('p')

$('p') est une liste jQuery ... qui est aussi un objet. .css() est une fonction associée à cet objet (en POO on dit aussi « méthode »).

Les listes jQuery fournissent de très nombreuses (>180) fonctions permettant de faire toutes sortes d'opérations. Ici on s’intéresse à .css()

Quand on écrit du HTML, on écrit en général le CSS dans un fichier séparé. Mais on peut aussi ajouter directement du CSS dans une balise avec l'attribut style:

<h1 style="font-size: 20px">exemple</h1>

La fonction .css permet de changer « style ».

Rappel:

un élément peut avoir plusieurs valeurs dans class, séparées par des espaces:

<p class="actu exemple autre-exemple">...</p>

jQuery fourni les fonctions .addClass() et .removeClass() pour ajouter et enlever des noms dans "class".

.hasClass() permet de voir si un nom se trouve dans les valeurs de class.

Pour des affichages complexes, il est préférable d'utiliser "class" que style/.css(). En utilisant class on écrit uniquement le CSS dans des fichiers CSS. C'est plus propre / lisible.

Voici deux autres fonctions, très utilisées, s'appliquant sur une liste jQuery et permettant de modifier le contenu de tous les éléments de cette liste.

.text() permet de modifier le texte contenu dans un élément. Tout ce que contenait cet élément est préalablement effacé.

.html() permet de modifier le HTML contenu dans un élément. Tout ce que contenait cet élément est préalablement effacé.

Passons maintenant à une autre ligne de l'exemple:

$('h1').click(...)

Rappelez-vous: dans cet exemple le paragraphe change de texte et de couleur quand l'utilisateur clique sur le titre.

Cette ligne se divise en trois:

- $('h1') : une liste jQuery contenant h1

- .click() : une fonction jQuery appelé sur la liste

- une_fonction_a_appeler : une fonction qu'il faudra appeler plus tard.

Important : remarquez que une_fonction_a_appeler n'est pas appelée toute de suite. Elle n'est appelée que plus tard, lorsque l'utilisateur clique avec la souris. On appelle cette fonction un « gestionnaire d'événement ».

En JS on a souvent besoin de réagir à des événements (comme un click).

Le navigateur génère de nombreux événements, souvent à la suite d'une action de l'utilisateur.

La programmation événementielle n'est pas facile a comprendre quand on a l'habitude de la programmation séquentielle.

En programmation événementielle, on n'a pas la main sur le déroulement du programme. On déclare quelles actions doivent être faites pour certains événements puis on rend la main.

Le système passe l'essentiel de son temps à attendre. Lorsqu'un événement arrive, il appelle une de nos fonctions, puis on rend à nouveau la main.

Cette manière de faire n'est pas toujours intuitive.

Reprenons sur un exemple concret.

Les lignes A,B,C sont exécutées, puis le programme se met en attente.

Ensuite, chaque fois que l'utilisateur clique sur un h1, la ligne D est exécutée.

L’erreur que font beaucoup de débutants, est de penser que l'ordre d’exécution est ABDC.

C'est une confusion sur ce que veut dire la ligne B. Celle-ci indique "Associer la fonction reagir_click à l'événement click sur les h1". La fonction reagir_click n'est appelée que plus tard, chaque fois que l'utilisateur clique.

Quand un événement survient, notre fonction est appelé. Elle reçoit deux informations importantes:

- "event" (en argument): un objet décrivant l’événement, avec des informations comme la position de la souris, le bouton de souris utilisé, la touche appuyée ... On peut omettre cet argument si on n'en a pas besoin.

- "this" : l'objet associé à cette fonction. C'est l'élément DOM sur lequel est survenu l'événement. Dans cet exemple c'est h1. Attention: "this" est un objet DOM. Pour l'utiliser plus facilement, on peut le transformer en liste jQuery : $(this)

Analysons maintenant « function(){...} »

Cette fonction est appelée quand l'utilisateur clique sur h1. Elle change le texte et la couleur du paragraphe.

Dans l'approche « habituelle » on déclare une fonction avec un nom ("une_fonction_a_appeler"). On fourni ce nom

en argument à la fonction click.

Très souvent cette fonction ne va être utilisée qu'une seule fois, et elle est assez courte.

Le JS permet de créer une fonction à n'importe quel endroit, sans lui donner de nom (fonction anonyme). Ici, la fonction est crée au même endroit où elle est passé en argument à click.

Cette approche rend le code beaucoup plus lisible en évitant des renvois et des noms superflus. On verra plus tard, qu'elle permet aussi de simplifier le partage de variables entre la fonction appelante et la fonction appelée.

Dans les pages suivantes vous allez écrire un petit programme permettant de cacher et montrer une image.

Écrivez exo-1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exo-1</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exo-1.js"></script>
	</head>
	<body>
		<p><input type="button" value="cacher"/></p>
		<p><img src="https://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
	</body>
</html>

Écrivez exo-1.js

$(document).ready(function()
{
     console.log("Le document est prêt");
});

Vérifiez que tout marche bien: Vérifiez que "Le document est prêt" est affiché dans la console

Listes jQuery.

La console affiche les deux paragraphes comme ceci:

Une liste jQuery est comme un tableau. Celle-ci contient deux éléments: 0: p et 1: p.

Dans la console, passez la souris (sans cliquer) sur les petits carrés désignés par les flèches rouges.

En vous inspirant des exemples vus précédemment, écrivez le code nécessaire pour afficher dans la console "Le bouton a été cliqué" quand l'utilisateur clique sur le bouton.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('input').click(function()
		{
			console.log("Le bouton a été cliqué.");
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

On veut cacher l'image quand l'utilisateur clique sur le bouton.

Il faut donc :

1) une liste jQuery avec l'image

2) Une fonction jQuery permettant de cacher un élément

Dans la documentation de jQuery

http://api.jquery.com/category/effects/

cherchez le nom de la fonction permettant de cacher un élément.

Attention, il y en a plusieurs, on veut la plus simple (sans effets spéciaux).

(on demande juste le nom de la fonction)

Ajoutez la ligne permettant de cacher l'image lorsqu'on clique sur le bouton.

Vérifiez que çà marche.

Indication / rappel : la syntaxe est : listejQuery.fonctionjQuery();
La listejQuery contient l'image
La fonctionjQuery cache l'image

Effets plus sophistiqués :

Dans la documentation, vous avez vu d'autres fonctions (.fadeOut() , .slideUp() ) permettant de cacher un élément.

Essayez ces fonctions à la place de .hide().

Explications:

.hide() ajoute simplement  style="display:none" à l'élément <input>

Par contre .fadeOut() et .slideUp() font des choses beaucoup plus compliquées (animations).

Le bouton affiche "cacher"

Une fois l'image cachée on voudrait qu'il affiche "montrer".

On va utiliser la fonction jQuery .val()

Documentation: http://api.jquery.com/val/

Comme d'autres fonction jQuery ( .html(), .text() ...), elle a deux variantes:

.val() : permet de lire la valeur (pas d'argument)

.val('exemple') : permet de modifier la valeur (argument)

Vérifiez que vous arrivez à afficher "montrer" dans le bouton.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('input').click(function()
		{
			console.log("L'utilisateur a cliqué sur le bouton");
			$('img').hide() ;
			$('input').val('montrer');
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Lorsque l'utilisateur clique sur le bouton, on voudrait montrer ou cacher l'image, en fonction de ce qui est affiché dans le bouton.

Quand l'utilisateur clique, on doit donc distinguer deux cas:

• le bouton affiche actuellement "montrer" : on doit montrer l'image et changer l'affichage du bouton à "cacher"
• le bouton affiche actuellement "cacher" : on doit cacher l'image et changer l'affichage du bouton à "montrer"

Précisions:

if et else s'utilisent comme en C/Java/PHP.

pour comparer deux chaînes de caractères, utilisez ===

Trouvez la fonction pour montrer l'image ici : http://api.jquery.com/category/effects/

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");
	$('input').click(function()
		{
			console.log("L'utilisateur a cliqué sur le bouton");
			if($('input').val()==='cacher')
			{
				console.log("Cacher l'image");
				$('img').hide() ;
				$('input').val('montrer');
			}
			else
			{
				console.log("Montrer l'image");
				$('img').show();
				$('input').val('cacher');
			}
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Essayons d'écrire un nouveau programme JavaScript.

On veut afficher la position de la souris quand elle passe sur l'image.

D'abord, créez un fichier exo-2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exo-2</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exo-2.js"></script>
	</head>
	<body>
		<p>
			La souris se trouve à la position 
			x=<span id="affiche-x">?</span>, 
			y=<span id="affiche-y">?</span>
		</p>
		<p><img src="https://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
	</body>
</html>

Vérifiez que cette page s'affiche correctement.

Ensuite on va créer le fichier js.

Ensuite créez un fichier exo-2.js :

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('AAA').BBB(function(event)
		{
			$('CCC').DDD(EEE);
			$('FFF').DDD(GGG);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Dans les pages suivantes, on va compléter, ensemble, les informations manquantes (AAA, BBB, CCC...).

Comme souvent en JS, on veut réagir à un événement qui survient sur un élément.

Ici l'événement qui nous intéresse est le mouvement de la souris. L'élément sur lequel il survient c'est l'image.

Notre réaction c'est ce qui se passe dans la fonction: function(event){...}

Que faut-il écrire à la place de AAA ?

C'est bien sur l'image que survient l'événement de la souris.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('AAA').BBB(function(event)
		{
			$('CCC').DDD(EEE);
			$('FFF').DDD(GGG);
		});
	console.log("La mise en place est finie. En attente d'événements...");

});

Maintenant il faut trouver la fonction jQuery qui permet de réagir au mouvement de la souris.

Cherchez dans la documentation, ici:

mousemove va faire appeler notre fonction à chaque petit mouvement de la souris sur l'image.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('AAA').BBB(function(event)
		{
			$('CCC').DDD(EEE);
			$('FFF').DDD(GGG);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Maintenant il faut trouver les informations sur la position de la souris.

Vous avez remarqué que dans cet exemple on utilisait function(event){...} au lieu de function(){...}

Notre fonction est appelée avec le paramètre "event" qui décrit l'événement "mouvement de souris" qui a provoqué cet appel.

Cet objet "event" contient plusieurs propriétés décrivant l'événement.

Elles sont décrites ici :

http://api.jquery.com/category/events/event-object/

Cherchez dans cette documentation quelle propriété donne la position de la souris.

event.pageX et event.pageY nous donnent la position de la souris.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('AAA').BBB(function(event)
		{
			$('CCC').DDD(EEE);
			$('FFF').DDD(GGG);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Maintenant il faut afficher ces positions sur la page.

Vous avez remarqué que dans le premier paragraphe deux éléments sont prévus à cet effet.

#affiche-x  et #affiche-y designent les deux <span> prévus pour afficher la position.

$(document).ready(function()
{
	console.log("Le document est prêt");
	$('AAA').BBB(function(event)
		{
			$('CCC').DDD(EEE);
			$('FFF').DDD(GGG);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Maintenant il nous manque juste le nom de la fonction jQuery qui permet de changer le contenu de ces spans.

Voila, vous avez tout pour faire fonctionner cet exemple.

Complétez-le et vérifiez qu'il marche bien.

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");
	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Prenons quelques instants pour analyser et bien comprendre ce qui a été écrit.

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");
	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Décortiquons ce qui vient d’être écrit :

On utilise très suivant ce type d'expression : $('#affiche-x')

Décortiquons: 

1. on prend le sélecteur CSS #affiche-x
   
2. et on le met dans une chaîne  de caractères '#affiche-x'
   
3. puis on passe cette chaîne en paramètre d'une fonction au nom bizarre $
   
4. et cette fonction nous renvoie un objet  que l'on appelle "Liste jQuery" et qui peut être imaginé comme un tableau d'éléments.
   

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");
	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Lors de l'utilisation normale de ce programme, quelle(s) portions de code sont appelées plusieurs fois ?

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
[A]	console.log("Le document est prêt");
	$('img').mousemove(function(event)
		{
[B]			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});
[C]	console.log("La mise en place est finie. En attente d'événements...");
});

Quel est l'ordre d'exécution ?

Attention, réfléchissez bien. C'est une question délicate et importante. On vous conseille d'avoir les pages de cours sur la programmation événementielle sous la main (page1, page2).
Ce problème est important. C'est probablement ce qui pose le plus de difficultés quand on apprend le JavaScript.

Explication:

La difficulté est à la ligne 5, sur la signification de l'appel de "mousemove".

Le réflexe, erronée, est de la comprendre comme "attends que l’utilisateur  bouge la souris puis exécute cette fonction".

La bonne formulation est "Voici une fonction. Enregistre là pour que plus tard, chaque fois que l'utilisateur bougera la souris, le navigateur l'appelle.".

 1 console.log("Ce programme JS vient d'être chargé");
 2 $(document).ready(function()
 3 {
 4 [A]	console.log("Le document est prêt");
 5 	$('img').mousemove(function(event)
 6 		{
 7 [B]			$('#affiche-x').text(event.pageX);
 8 			$('#affiche-y').text(event.pageY);
 9 		});
10 [C]	console.log("La mise en place est finie. En attente d'événements...");
11 });

Si vous venez d'assister au cours magistral, passez à la section suivante.

Cet HTML simple affiche une zone texte, un bouton, et une liste.

On y associe un programme JS qui permet à l'utilisateur de taper du texte dans le champs texte puis d'appuyer sur le bouton « Ajouter ». Lorsque le bouton est appuyé, une ligne est ajoutée à la liste, contenant le texte tapé.

Ces trois lignes correspondent à des notions déjà vues précédemment

En HTML, les formulaires sont très utilisés pour permettre à l'utilisateur de saisir des données.

La fonction jQuery .val() permet de lire les données entrées par l'utilisateur dans plusieurs types de champs:

<select>

<input type="text"/>

<textarea>

Comme toujours avec jQuery, il faut d'abord créer une liste en utilisant un sélecteur qui désigne le champ en question. Par exemple

$('#saisie').val()

.val() permet aussi de modifier le champs:

$('#saisie').val('nouveau texte')

Une opération courante en JS est de créer de nouveaux éléments pour les ajouter à une page.

On a vu précédemment la fonction jQuery .html() qui permet d’insérer du code HTML dans un élément existant. Cette approche n'est pas toujours pratique.

jQuery permet aussi de créer des éléments à partir de code HTML, sans les insérer dans l'arbre DOM.$('<p>exemple</p>')

On peut manipuler ces éléments avec les fonctions jQuery. Ensuite on va les insérer dans l'arbre DOM.

jQuery fourni des fonctions pour insérer des éléments dans l'arbre DOM.

Il est important de comprendre à quel endroit exactement on veut insérer l'élément.

Ici on a crée un élément <li>. On veut l'ajouter à la fin de la liste, c'est à dire dans <ul> et après les autres <li>. On va donc utiliser la fonction .append() appliquée à la liste <ul>.

« append » veut dire « ajouter à la fin de ».

jQuery fourni d'autres fonctions pour insérer des éléments dans l'arbre DOM, en fonction de l'endroit exact que l'on vise.

Dans ces 4 exemples on insère par rapport à <ul> : $('ul').xyz(...)

before : avant (frère précédent)

after: avant (frère suivant)

prepend: avant le premier fils

append: après le dernier fils

Récapitulons:

1) On crée une liste jQuery contenant un <li> vide. Ce li est crée par le navigateur, mais n'est pas encore inséré dans l'arbre du document.

2) On lit le texte que l'utilisateur a tapé

3) On écrit se texte dans le <li> crée.

4) On insère le <li> dans l'arbre, à la fin du <ul>

Continuons à partir de l'exercice 2 (position de la souris sur l'image).
Copiez les fichiers exo-2.html et exo-2.js en exo-3.html et exo-3.js
Remplacez exo-2 par exo-3 dans exo-3.html
(important: n'oubliez pas de remplacer exo-2.js par exo-3.js dans exo-3.html)

L'objectif:

Attention: on va faire tout ceci ensemble, sur les pages suivantes.

Quand l'utilisateur clique sur l'image tux.png, on voudrait qu'une autre petite image (verte) soit ajoutée à l'endroit ou il a cliqué.

D'un point de vue technique, il va falloir:

• Ajouter un gestionnaire d'événements pour le click sur l'image.
• Dans cette fonction, il faut créer un nouvel élément img (voir cours)
  L'image se trouve ici : https://moodle.iutv.univ-paris13.fr/img/js/splat.png
  
• Positionner l'image en utilisant la position de la souris.
• Ajouter l'image dans l'arbre DOM.

On a vu toutes ces notions en cours, sauf le positionnement.

On va donc commencer par un rappel sur le positionnement CSS.

On va devoir manipuler du CSS.

Créez le fichier CSS suivant: exo-3.css :

body
{
    background-color: red;
}

Faites le lien vers ce fichier dans exo-3.html (si vous ne vous souvenez pas comment faire, cherchez sur le web).

Vérifiez que ca marche bien.

Essai avec une image verte

A la fin du fichier exo-3.html (avant la fin du body), créez une image avec l'url suivante:
https://moodle.iutv.univ-paris13.fr/img/js/splat.png

Donnez lui un attribut "class" appelée "splat".

Vérifiez dans le fichier CSS que vous pouvez  ajouter une bordure (border: 2px solid black;) à cette image, en utilisant le sélecteur associé à "class".

exo-3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exo-3</title>
		<link type="text/css" rel="stylesheet" href="exo-3.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exo-3.js"></script>
	</head>
	<body>
		<p>
			La souris se trouve à la position 
			x=<span id="affiche-x">?</span>, 
			y=<span id="affiche-y">?</span>
		</p>
		<p><img src="https://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
                <img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>
	</body>
</html>

exo-3.css

.splat
{
	border: 2px solid black;
}

En modifiant uniquement le fichier exo-3.css, expérimentez les propriétés position: absolute, left, et top .

Si vous arrivez à positionner l'image verte entre les yeux du pingouin, vous pouvez passer à la question suivante !

En cas de difficultés:

https://developer.mozilla.org/fr/docs/Web/CSS/position

https://developer.mozilla.org/fr/docs/Web/CSS/left

Vous venez de faire "à la main" (dans le HTML et le CSS) ce que l'on veut faire en JavaScript quand l'utilisateur clique sur l'image.

Enlevez l'image verte du HTML.
Enlevez top et left du fichier CSS (mais laissez le "position: absolute;")
Enlevez aussi le border.
Enlevez le fond rouge

Rappel, on veut:

• Ajouter un gestionnaire d'événements pour le click sur l'image.
• Dans cette fonction, il faut créer un nouvel élément img (voir cours)
  
• Positionner l'image en utilisant la position de la souris.
• Ajouter l'image dans l'arbre DOM.

Dans les pages suivantes on va, ensemble, compléter le squelette suivant:

$(document).ready(function()
{
	console.log("Le document est prêt");

	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});

	$('???').???(function(event)
		{
			console.log("Click sur l'image");
			var splat=AAA;
			splat.BBB(CCC);
			splat.BBB(DDD);
			$('EEE').FFF(splat);
		});

	console.log("La mise en place est finie. En attente d'événements...");
});

Remplissez vous mêmes les "???" (ca devrait être facile...).

Dans les pages suivantes on va  traiter, ensemble, les points restants suivants:

• AAA : création de l'élément img
• BBB : positionnement de l'image
• CCC,DDD : positionnement de l'image
  
• EEE: à quel endroit de l'arbre DOM ajouter l'image
• FFF: quelle fonction jQuery pour ajouter l'image

Rappel du cours:

En vous inspirant du cours ci-dessus remplacez AAA par le code nécessaire pour créer une image.

L'image se trouve ici:

https://moodle.iutv.univ-paris13.fr/img/js/splat.png

N'oubliez pas l'attribut "class" souhaité.

            var splat=$('<img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>');

Une petite explication sur cette ligne, qui est un peu compliquée:

1. On crée une chaîne de caractères '<img ... />' qui contient du HTML.
2. Cette chaîne de caractères est passée à la fonction jQuery "$".
3. La fonction jQuery crée les objets DOM décrits dans la chaîne de caractères (c'est à dire, l'image).
   
4. La fonction jQuery renvoie une "liste" jQuery contenant l'élément DOM (image) crée.
5. Cette liste jQuery est affectée à la variable "splat"

Essayez de bien retenir, pour la question suivante.

Avez vous bien retenu la syntaxe:

            var splat=$('<img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>');

Nous en sommes ici:

	$('img').click(function(event)
		{
			console.log("Click sur l'image");
			var splat=$('<img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>');
			splat.BBB(CCC);
			splat.BBB(DDD);
			$('EEE').FFF(splat);
		});

On veut positionner l'image à l'endroit où l'utilisateur a cliqué.

Tout à l'heure, on l'avait fait à la main, dans le fichier CSS, en utilisant "left: 123px; top: 123px".

En JavaScript on ne modifie pas le fichier CSS.

On va donc modifier la propriété style de l'élément img (splat).

On a vu  en cours qu'il existait une fonction jQuery permettant de modifier cette propriété "style".

Comment s'appelle BBB ?

(dans le doute, regardez votre cours ou cherchez ici: http://api.jquery.com/category/manipulation/style-properties/ )

La fonction jQuery .css() s'utilise comme ceci:

splat.css(nom,valeur);

Rappel : dans un fichier CSS on écrirait: "left: 123px;".

Ici nom serait "left" et la valeur "123px"

Pour la valeur associée à "left" on veut utiliser la position X de la souris.
N'oubliez pas non plus le "px".

En JavaScript on peut coller ensemble deux chaînes de caractères en utilisant le "+" (comme en Java).
(concaténation)

"abc"+"def" => "abcdef"

Ça marche aussi pour coller ensemble un nombre et une chaîne.

Que faut-il écrire à la place de "valeur" ?

Nous en sommes ici:

	$('img').click(function(event)
		{
			console.log("Click sur l'image");
			var splat=$('<img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>');
			splat.css('left',event.pageX+"px");
			splat.css('top' ,event.pageY+"px");
			$('EEE').FFF(splat);
		});

On a donc

• crée l'élément img (splat)
  
• on l'a positionné

Mais il n'est pas dans l'arbre DOM. Il faut l'ajouter quelque part.

Ici l'endroit dans l'arbre DOM ne change pas grande chose.
Comme l'élément a "position: absolute", sa position sur l'écran ne dépend pas de sa position dans l'arbre DOM (dans cet exemple).

Dans ce genre de cas, on peut insèrer l'élément à la fin du <body>.
Si on choisit EEE=body, que faut-il choisir pour FFF ?

Rappel:

(attention: dans cette illustration on insère par rapport à 'ul', mais dans notre cas on veut insérer par rapport à 'body')

Et voila ! On a vu tous les points nécessaires.

Vérifiez que le programme marche bien.

Petite amélioration:

Actuellement on positionne le coin en haut à gauche de l'image verte sur la souris.

L'image verte fait 32x40, adaptez la position pour que l'image verte soit bien centrée sur la souris.

exo-3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exo-3</title>
		<link type="text/css" rel="stylesheet" href="exo-3.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exo-3.js"></script>
	</head>
	<body>
		<p>
			La souris se trouve à la position 
			x=<span id="affiche-x">?</span>, 
			y=<span id="affiche-y">?</span>
		</p>
		<p><img src="https://moodle.iutv.univ-paris13.fr/img/js/tux.png" alt="tux"/></p>
	</body>
</html>

exo-3.css

.splat
{
	position: absolute;
}

exo-3.js

$(document).ready(function()
{
	console.log("Le document est prêt");

	$('img').mousemove(function(event)
		{
			$('#affiche-x').text(event.pageX);
			$('#affiche-y').text(event.pageY);
		});

	$('img').click(function(event)
		{
			console.log("Click sur l'image");
			var splat=$('<img class="splat" alt="" src="https://moodle.iutv.univ-paris13.fr/img/js/splat.png"/>');
			splat.css('left',(event.pageX-16)+"px");
			splat.css('top' ,(event.pageY-16)+"px");
			$('body').append(splat);
		});

	console.log("La mise en place est finie. En attente d'événements...");
});

Maintenant c'est à vous !

HTML:

<h1>Vos identifiants:</h1>
<form method="POST">
	<p><label>Nom :   <input id="nom"   name="nom"   type="text"/></label></p>
	<p><label>Login : <input id="login" name="login" type="text"/></label></p>
</form>

Dans cet exercice on veut remplir le champs "Login" au fur et à mesure que l'utilisateur tape dans le champs "Nom".

On a vu ensemble tout ce dont vous avez besoin.

Indications :

• Le nom de l'événement qui nous intéresse est "keyup"
• Vous pouvez utiliser la fonction jQuery .val() sans argument pour lire le texte tapé.
• Vous pouvez utiliser la fonction jQuery .val(xyz) avec un argument pour écrire dans un champ.
• La méthode .toLowerCase() de String permet de convertir en minuscules (s=s.toLowerCase();)

C'est à vous! (correction à la page suivante)

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");

	$('#nom').keyup(function(event)
		{
			console.log("Une touche a été appuyée");
			var texte=$("#nom").val();
			texte=texte.toLowerCase();
			$('#login').val(texte);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

<form method="POST">
	<p><label>Nom :   <input id="nom"   name="nom"   type="text"/></label>
		<span id="erreur-nom">Non valide !</span></p>
	<p><label>Login : <input id="login" name="login" type="text"/></label></p>
</form>

On voudrait maintenant afficher un message d'erreur à droite du champs "Nom" quand l'utilisateur tape un caractère qui n'est pas une lettre, un espace ou une apostrophe.

HTML/CSS

• Ajoutez le message d'erreur dans le HTML (voir ci-dessus).
• Ajoutez un fichier CSS
• Dans le CSS : faites en sorte que le message d'erreur s'affiche en rouge, puis cachez-le avec "display: none;"

JS

Pour faire la vérification, utilisez une expression rationnelle JavaScript avec sa méthode .test() comme ceci:

if(/[^a-zA-Z '-]/.test(texte)){ ... }

Utilisez les fonction jQuery .show() et .hide() pour faire apparaître et disparaître le message d'erreur.

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");

	$('#nom').keyup(function(event)
		{
			console.log("Une touche a été appuyée");
			var texte=$("#nom").val();
			if(/[^a-zA-Z '-]/.test(texte))
			{
				$('#erreur-nom').show();
			}
			else
			{
				$('#erreur-nom').hide();
			}
			texte=texte.toLowerCase();
			$('#login').val(texte);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

exo-4.css :

#erreur-nom
{
	color: red;
	margin-left: 1em;
	display: none;
}