Exercices de Programmation Web, Laboratoires et TP

INF2005 Programmation web

Ruben Chambilla i

TABLEAU DES MATIÈRES

1. Introduction ......................................................................................................................................................1

2. Outils de développement .................................................................................................................................1

3. Programmation en JQuery ...............................................................................................................................2

3.1. Utilisation Démarrer jQuery .....................................................................................................................2

3.2. Gestion d’événements de JQuery ............................................................................................................2

3.2.1. L'écoute sur la souris ........................................................................................................................2

3.2.2. L'écoute sur le clavier .......................................................................................................................2

3.2.3. Le cas des formulaires ......................................................................................................................3

3.2.4. La délégation d'évènements.............................................................................................................3

3.3. Stockage des données locales ..................................................................................................................3

3.3.1. Interface LocalStorage ......................................................................................................................4

3.3.2. Interface SessionStorage ..................................................................................................................4

3.3.3. Exercice .............................................................................................................................................5

3.4. Stockage sur un fichier JSON ....................................................................................................................6

4. Exercice aditionnel ...........................................................................................................................................8

INF2005 Programmation web

Ruben Chambilla 1

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 http://www.blindtextgenerator.com/fr

Lorem Ipsum http://fr.lipsum.com

Responsive test http://responsivetest.net/

Responsive Web Design Tester https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg

Site web :

Description des balises https://developer.mozilla.org/fr/

Dictionnaire d’attributs des balises http://webmasterhelp.fr/dico.php?lang=1

Liste des attributs HTML5 http://41mag.fr/liste-des-balises-html5/liste-des-attributs-html5

The complete Font Awesome http://fontawesome.io/cheatsheet

Liste des balises HTML5 https://jaetheme.com/balises-html5/

Jquery https://jquery.com/

Bootstrap http://getbootstrap.com/

INF2005 Programmation web

Ruben Chambilla 2

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 www.jQuery.com, 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.

3.2. Gestion d’événements de JQuery

Un événement est une action détectée sur une page web

3.2.1. 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é.

3.2.2. 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.

INF2005 Programmation web

Ruben Chambilla 3

3.2.3. 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

3.2.4. La délégation d'évènements

p click(..);

Balise, paragraphe

Paragraphe créé de façon dynamique

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.

Balise DIV contenant la valeur Bonjour

Balise « a » contenant l’évent Onclick que modifiera monDiv (DOM), en utilisant des

sélecteur $ et hide()

INF2005 Programmation web

Ruben Chambilla 4

3.3.1. 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>

3.3.2. 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

Récupération

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>

setItem est la clé (type String). Elle précise l'endroit où sont stockées les données

getItem permet de récupérer les données - chaine de caractère.

INF2005 Programmation web

Ruben Chambilla 5

3.3.3. Exercice

INF2005 Programmation web

Ruben Chambilla 6

Affichant l’information gardé : dans chrome : Appuyez sur la touche F12 – Application – Storage

3.4. 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 http://jsonviewer.stack.hu

Pour valider un fichier .JSON, ce site web http://jsonlint.com

• 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

F12

INF2005 Programmation web

Ruben Chambilla 7

Lire et afficher un fichier JSON

Ce fichier .JSON, peut être

construit comme affiche

l’application, mais on peut aussi

afficher sur HTML.

INF2005 Programmation web

Ruben Chambilla 8

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

INF2005 Programmation web

Ruben Chambilla 9

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

INF2005 Programmation web

Ruben Chambilla 10

Code HTML, JQuery

Trouver les erreurs qu'il y a et corriger

Les correction est ci-jointe……