Exercices de Programmation Web, Laboratoires et TP

Transcription

1 Exercices de Programmation Web, Laboratoires et TP

2 TABLEAU DES MATIÈRES 1. Introduction Outils de développement Programmation en JQuery Utilisation Démarrer jquery Gestion d événements de JQuery L'écoute sur la souris L'écoute sur le clavier Le cas des formulaires La délégation d'évènements Stockage des données locales Interface LocalStorage Interface SessionStorage Exercice Stockage sur un fichier JSON Exercice aditionnel...8 Ruben Chambilla i

3 1. I N T R O D U C T I O N Description de cours : Introduire les étudiants à la problématique de la programmation d'applications web. Les fondements du web : navigateurs, serveurs, protocoles. Les principales normes et les principaux outils fonctionnant dans le navigateur sont couverts : HTML, XHTML, JavaScript, CSS, DOM et XML. Conception de formulaires. Introduction à la problématique des traitements sur serveur dans n environnement web : script serveur, notion de persistance. Présentation des nouvelles approches et techniques en émergence. Séance d'exercices de deux heures hebdomadaire. Description de manuel : Les applications web même s ils sont simples pages statiques en termes du code html ou une page dynamique avec connexion à une base de donné en termes du langage de programmation, certaine partis d une application web s exécutera sur l ordinateur de l utilisateur et certaine sur le serveur web. Dans c est manuel nous allons tracer les bonnes pratiques dans la programmation côté client en utilisant différentes technologies. Contienne des exercices des laboratoires et travaux pratiques. 2. O U T I L S D E D É V E L O P P E M E N T Sur internet il y a nombreux outils qu aide créer un application web, sur tour au niveau de texte, cependant, la plupart des développeurs utilisent les suivants : Générateur de faux texte : Blindtextgenerator Lorem Ipsum Responsive test Responsive Web Design Tester Site web : Description des balises Dictionnaire d attributs des balises Liste des attributs HTML5 The complete Font Awesome Liste des balises HTML5 Jquery Bootstrap Ruben Chambilla 1

4 3. P R O G R A M M A T I O N E N J Q U E R Y jquery est la librairie JavaScript la plus utilisée dans d'une page web, soit pour maintenir un site web existant, ou développer un nouveau site web sites de nouvelle génération à l'aide du librairie de jquery. «Langage de programmation coté client permettant de manipuler le code source d une page HTML» 3.1. Utilisation Démarrer jquery Vous pouvez télécharger les fichiers directement sur vous pouvez récupérer ainsi une version «mini-fiée», c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires Gestion d événements de JQuery Un événement est une action détectée sur une page web L'écoute sur la souris Action Fonction Clic click() Lance une fonction lors du clic de l'utilisateur sur l'objet associé Double-clic dblclick() Lance une fonction lors du double-clic de l'utilisateur sur l'objet associé Passage de la souris hover() Lance une modification sur l icône de la souri. Rentrer dans un élément mouseenter() Le souris rentre dans un élément Quitter un élément mouseleave() Le souris sorte d un élément Presser un bouton de la souris mousedown() Presser le bouton gauche de la souri Relâcher un bouton de la souris mouseup() Relâcher un bouton Scroller (utiliser la roulette) scroll() Operations avec roulette de la souri Une bonne pratique, au début à utiliser du code Javascript, tous les fichiers de styles et fichiers Javascript doit être chargés, en suite s assurer que le code HTML de la page a été chargé L'écoute sur le clavier Action Fonction Touche du clavier keydown() Se lance lorsqu'une touche du clavier est enfoncée Maintient une touche keypress() Se lance lorsqu'on maintient une touche enfoncée Touche préalablement enfoncée keyup() Se lance lorsqu'on relâche une touche préalablement enfoncée. Ruben Chambilla 2

5 Le cas des formulaires Focalisation focus() Focaliser sur un objet Sélection (dans une liste) select() Section d un objet Changement de valeur change() Valeur pris pour le changement Envoi du formulaire submit() Envoi d un form La délégation d'évènements p click(..); Balise, paragraphe Paragraphe créé de façon dynamique Balise DIV contenant la valeur Bonjour Balise «a» contenant l évent Onclick que modifiera mondiv (DOM), en utilisant des sélecteur $ et hide() 3.3. Stockage des données locales C'est une technique plus «puissante» que les cookies, qui sont limités en taille (quelques Ko contre plusieurs Mo pour Web Storage), la caractéristique fondamentale sur le stockage de données est que lui est fait dans la structure de fichier de chaque navigateur. Aucun partage des données «Web Storage» entre les navigateurs installés sur une même ordinateur, on peut stocker dépendamment dans que navigateur un travail jusqu à 2.5 Mo. Attention : l'information gardé sera par défaut chaine de caractère, lorsque vous feriez une opération mathématique il faut convertir vers un numéro. Comment y accéder? Les méthodes d'accès pour les deux interfaces sont communes. setitem(clé,valeur) : stocke une paire clé/valeur getitem(clé) : retourne la valeur associée à une clé removeitem(clé) : supprime la paire clé/valeur en indiquant le nom de la clé key(index): retourne la clé stockée à l'index spécifié clear(): efface toutes les paires La propriété.length renvoie le nombre de paires stockées. Ruben Chambilla 3

6 Interface LocalStorage Mémorise les données sans limite de durée de vie (elles ne sont pas effacées lors de la fermeture d'un onglet ou du navigateur). Stockage Récupération Suppression Suppression totale Lister le contenu des objets <h1>local Storage</h1> <script type="text/javascript"> var items = localstorage.length for(i=0;i<items;i++){ var itemnom = localstorage.key(i); document.write(itemnom + ' = ' + localstorage.getitem(itemnom) + '<br/>'); } </script> Interface SessionStorage Mémorise les données sur la durée d'une session de navigation, ce-t-à dire sa portée est limitée à la fenêtre ou l'onglet actif (lors de sa fermeture, les données sont effacées). Stockage setitem est la clé (type String). Elle précise l'endroit où sont stockées les données Récupération getitem permet de récupérer les données - chaine de caractère. Suppression Suppression totale Lister le contenu des objets <h1>session Storage</h1> <script type="text/javascript"> var items = sessionstorage.length for(i=0;i < items; i++){ var itemnom = sessionstorage.key(i); document.write(itemnom + ' = ' + sessionstorage.getitem(itemnom) + '<br/>'); } </script> Ruben Chambilla 4

7 Exercice Ruben Chambilla 5

8 Affichant l information gardé : dans chrome : Appuyez sur la touche F12 Application Storage F Stockage sur un fichier JSON (JavaScript Object Notation Notation Objet issue de JavaScript), format léger d'échange de données. Pour montrer un fichier. JSON, il est possible d utiliser le site Pour valider un fichier.json, ce site web Une collection de couples nom/valeur. (Objet, un enregistrement, une structure, un dictionnaire, une table de hachage, une liste typée ou un tableau associatif). Une liste de valeurs ordonnées. (tableau, un vecteur, une liste ou une suite). <script> var object, extrait; object = { "nom":"john", "age":30, "ville":"montreal" }; extrait = object.ville; document.getelementbyid("afficher").innerhtml = extrait; </script> <p id="afficher"></p> Affichera : Montreal Ruben Chambilla 6

9 Ce fichier.json, peut être construit comme affiche l application, mais on peut aussi afficher sur HTML. Lire et afficher un fichier JSON Ruben Chambilla 7

10 4. E X E R C I C E A D I T I O N N E L a. Créer un formulaire de contact, chaque balise doit être validé utilisant jquery validation Ruben Chambilla 8

11 Code Jquery CSS Compléter le code jquery qui manque b. Créer un fichier JSON avec une liste de livres (livres.json) - Créer des fonctions en JQuery pour extrait la liste au complet du livres contenues dans le fichier livres.json. - Afficher la liste sur le HTML (livre.html) Code Json Ajouter plus de livres Ruben Chambilla 9

12 Code HTML, JQuery Trouver les erreurs qu'il y a et corriger Les correction est ci-jointe Ruben Chambilla 10