Sites Web interactifs - 2008/2009

Description du cours

Ce cours traitera, pendant la durée de deux semestres, non seulement les bases de la programmation de sites Web interactifs avec JavaScript, mais également des concepts plus généraux de la programmation tout court, tels qu'ils peuvent étre transposés directement dans le contexte d'autres langages et technologies.

JavaScript est un langage de programmation qui est exécuté é l'intérieur d'un navigateur et permet donc de transformer un document HTML / XHTML statique en application interactive. Normalisé sous le nom d'ECMAScript, JavaScript est, en ce qui concerne sa structure et sa syntaxe, identique à  ActionScript, le langage de programmation au sein d'Adobe Flash. Les connaissances conceptuelles enseignées dans ce cours peuvent donc étre utilisées dans le contexte de cette technologie.

Ciblé sur la pratique, l'enseignement s'organisera autour des exemples concrets qui représentent les applications les plus courantes de JavaScript / DHTML (dynamic HTML). A part les éléments du langage nous allons donc travailler notamment avec les formulaires, les calques et popups.

Le deuxiéme semestre traitera des sujets plus avancés comme l'animation et le travail avec XML / AJAX.

Notation

La note finale sera composée de trois éléments :

• Présence et participation au cours (20%)
  
  
• La réalisation de trois devoirs pendant le semestre (30%)
  
  Trois notes par exercice :
  3 (résultat plus que demandé)
  2 (réussite)
  1 (réussite partielle)
  
  Les travaux rendus avec retard ne seront pas acceptés.
  
  
• L'achévement d'un projet (50%)

  Le projet final consistera en la réalisation d'un petit projet qui fait appel à JavaScript, soit en combinant les exercices du semestre dans un contexte commun, soit en produisant un objet propre. En ce qui concerne le choix du projet, vous avez toute liberté : un système de navigation originale, un petit jeux, un système de panier d'achat, etc. - la recherche d'un sujet fait effectivement partie de l'exercice...

  Vous pouvez valider plusieurs UE avec un seul projet. (aprés demande)

  Tout retard concernant la proposition de projet ou le projet final se traduira directement en une réduction de la note finale.

Premier semestre

S01E01 (23/10/08) : Introduction générale

S01E02 (30/10/08) : Introduction suite, tests et fonctions

Exo 1 : L'exercice constiste à créer une petite interface (cf. image) qui est composée de deux lignes : la permière contient des liens avec des noms de couleurs et la deuxième deux boutons, "start" et "stop". En défilant la souris sur les liens de la première ligne, la couleur du fond change. Quand l'utilisateur click sur "stop", les couleurs ne changent plus quand la souris passe sur les couleurs. En cliquant "start" elles marchent à nouveau. Voilà, j'attends vos exos avant le prochain cours la semaine prochaine par email !

S01E03 (06/11/08) : DOM et début formulaire

S01E04 (13/11/08) : Répétition et formulaires suite

Exo 2 : A partir du fichier de correction vu dans la classe il s'agit de changer la notification de l'utilisateur en donnant un feedback visuel des erreurs qui se sont produits. Attention : quand un utilisateur corrige le saisi d'un champ il faut que ce champs se décolorise. Pour réussir, il va falloir faire des petits ajustements au niveau HTML et ajouter quelques lignes de code du coté JS. Pour les courageux, le géstionnaire "onblur" permet de détécter quand le focus un utilisateur quitte un champ... Envoyez moi vos resultats SVP sur les deux adresses mentionnées en haut à droite avant le prochain cours. Bon courage et bon WE !

S01E05 (20/11/08) : Formulaires suite et répétition

Exo 2b : Pour ceux qui ont raté l'un des premiers TP ou qui ont tout simplement envie de pratiquer, voilà un exo de plus : Dans une boîte d'options (select) se trouvent des noms de couleur. On changeant l'option choisie, le fond de la page change aussi. Voilà !

S01E06 (27/11/08) : DHTML suite et une première boucle

Exo 3 : Et voilà le troisème TP pour ce semestre : sur une page cinq rectrangles en cinq couleurs différentes. En survolant chaque rectangle, le code couleur apparaît dans un div flottant qui suit le curseur. En cliquant, le fond de la page change pour la couleur séléctionnée et le code couleur s'affiche dans un div.



Pour les plus courageux, vous pouvez, à partir de ce fichier générer un tableau de couleurs plus complet (216 couleurs), avec le même comportement que dans la version de base de l'exercice. Pour générer du HTML, il va falloir créer une variable, remplir cette variable avec du code HTML et affecter le contenu final à un div avec .innerHTML. Ce fichier devrait vous donner une idée sur la boucle qui sera nécessaire pour réussir l'ecercice. Comme toujours, l'exo est à rendre avant le prochain cours. Bon courage et forza à tous !

S01E07 (04/12/08) : Calques et boucles suite

S01E08 (11/12/08) : Popups et animation

S01E09 (18/12/08) : Répétition

S01E10 (08/01/09) : Répétition et travail projet

S01E11 (15/01/08) : Travail projet

Deuxiéme semestre

Le deuxiéme semestre poursuivra les voies ouvertes par les connaissances acquises au premier semestre. En gardant une perspective toujours trés pratique nous allons aborder - entre autres - les cookies, les interactions animées, AJAX (Asynchronous JavaScript and XML) et, vers la fin du semestre, les API Web. La validation se fera de maniére similaire é celle du premier semestre.

S02E01 (13/02/09) : Résumé du premier semestre et présentation du programme du deuxième

S02E02 (20/02/09) : Cookies

S02E03 (27/02/09) : AJAX Introduction

S02E04 (06/03/09) : AJAX suite

S02E05 (13/03/09) : AJAX suite

S02E06 (20/03/09) : AJAX avec JSON

S02E07 (27/03/09) : WordPress

S02E08 (03/04/09) : Pas de cours

S02E09 (10/04/09) : AJAX avec XML

S02E12 (15/05/09) : Site AJAX et Travail Projet

S02E13 (22/05/09) : Travail Projet