TP JS 2014

tpJS

# Travaux Pratiques

## TP 1 : Syntaxe et Expression Régulières

**=>** Ecrire une fonction comparer, qui prend 2 paramètres a et b, et qui retourne le résultat de la comparaison ==. 

* Ecrire les tests correspondants
* Changer l'implémentation en ===

**=>** Ecrire un test qui prouve que en javascript , :

 * la portée de la variable se limite à la fonction.
 * Prouve que == et === sont différents

**=>** Ecrire une fonction qui permet de valider une adresse email ...

**=>** Ecrire une fonction qui permettent d'extraire le nom de domaine d'une ou d'une adresse email.

* *(SI TDD)* Puis Changer l'implémentation sans changer le test

**=>** Créer une fonction moyenne, qui prend un tableau en paramètre et qui retourne la moyenne arithmétique des valeurs du tableau.

* *(SI TDD)* Changer l'implementation, supprimer le for ou le while en utilisant le forEach;

**=>** Créer une fonction qui calcule la factorielle d'un nombre.

## TP 2 : Evénements

Prérequis : Créer une nouvelle page HTML

> Tout doit fonctionner sur IE / FF / Chrome

**=>** Ecrire un programme, qui génére 10 boutons sur la page, et qui, lors du click sur un bouton, affiche le numéro du bouton dans la console, ou sur la page (au choix) 

 * Le bouton 1 affiche : 1
 * ...
 * Le bouton 10 affiche : 10

**=>** Ajouter un Lien sur la page vers http://www.w3schools.com/, lors du click :

 * Empecher l'affichage du site.
 * Remplacer la destination du lien par la destination vers http://www.w3fools.com/ 
 * Et accepter l'affichage de la page lors d'un nouveau click
  
**=>** Ajouter un élément div (contenant du texte) à la page et

* Faire en sorte que le texte change lors du survol de la souris

document.getElementById(divId).innerHTML = ‘texte';

* Le contenu doit revenir à son état initial lorsque la souris quite l'élément

**=>** Tester le Bouillonnement 

* Créer plusieurs éléments imbriqués :
 * Div > ul > li > a
* Ajouter des evenements sur le click du ul et sur le click du lien
* Sous FF / Chrome, changer la valeur du flag de capture pour et tester le comportement.

## TP 3 : Creation d'objets
> http://yuml.me/edit/f90e0673

![Shop Diagram][2]

**=>** Ecrire un programme de "web shop"

 * Créer les objets du diagramme 
 * Passer une commande  

## TP 4 : Patterns

**=>** Modifier le code précédent en utilisant des designs patterns :

 * Factory
 * Singleton
 
Comme ceci : 
![Shop Diagram][3]


## TP 5 : Packaging

**=>** Créer un webshop "livrable", et utilisable avec **require**
**=>** Préparer le projet pour livrer "webshop" sur Bower.


## TP 6 : Sécurité

### **=>** Cross Site Scripting 

* Dans le projet expertise, créer une nouvelle page WEB :
* Nom : xss.html
* Dans cette page ajouter un formulaire avec le champ nom qui poste en Ajax sur le fichier xss.php (vous devez récupérer ce fichier) et affiche le résultat dans la page.
* Faire un test de post du nom …
* Tester avec les navigateurs.
* Dans l’appel ajax ajouter une donnée : {key :toto} ;
* Refaire un test


### **=>** Cross Site Request Forgery
 * Créer une page : csrf.html
 * Lors du click sur un bouton, afficher une image : DEMANDER l’URL DE L’image
 * Que ce passe t’il ?
 * Tester avec différents Navigateurs.



  [1]: http://yuml.me/f90e0673
  [2]: http://yuml.me/80605ade
  [3]: http://yuml.me/8aacde0c