Langage de Programmation Web : JavaScript / AJAX / DHTML - S1 2007/2008

Description du cours

Les technologies du Web sont soumises à un changement permanent et les stratégies, méthodes et connaissances nécessaires pour produire des systèmes en ligne ne sont plus les mêmes aujourd'hui qu'il y a dix ans. Depuis un certain moment déjà, l'objet xmlhttprequest permet aux pages Web de charger de l'information sans recharger la page. Cela permet de créer des systèmes plus interactifs, réactifs et performants, en réduisant le temps de chargement et donc le temps d'attente pour l'utilisateur. Sous le nom AJAX (Asynchronous JavaScript and XML) cette stratégie de construction connaît un franc succès parce qu'elle rend possible - en coopération avec le DHTML (dynamic HTML) - la création de véritables applications Web.

Dans ce cours, nous allons aborder quelques-uns des éléments les plus courants du langage JavaScript/DHTML (traitement de formulaires, travail avec CSS et calques, etc.) en les liant à la logique AJAX. Conforme à une orientation vers la pratique, nous allons travailler essentiellement avec des exemples concrets et des applications réelles et courantes.

Le cours est organisé d'une telle manière que la réussite de chaque séance dépende de la maîtrise de tous les éléments abordés dans les séances précédents. Les étudiants sont responsables de rattraper des cours ratés et de réviser et pratiquer les connaissances présentées de façon indépendante.

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 et la présentation d'un projet (50%)

    Le projet finale consistera en la réalisation d'une petite application Web faisant usage de la stratégie de développement AJAX. Le contenu du projet est à trouver par l'étudiant et cette recherche fait partie du projet même.

    Le projet fera l'objet d'une présentation en classe d'environ 10min à la fin du semestre.

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

Programme du cours

S1 (10/10/07) : Introduction à JavaScript / DHTML / AJAX

Déscription :
Contexte technique et commercial
Capacités et limites du langage
Introduction langage
Links :
Le Monde
Le Figaro
Interface SNCF
YouTube
Blogger Home
Google Maps
Google Suggest
Backbase Demo
NetVibes
Yahoo Mail

Fichier HTML/JavaScript de base

S2 (17/10/07) : Le modèle DOM

Déscription :
Le Document Object Model avec (X)HTML et XML
Links :
Variables
Boites de système
Vérification d'un formulaire de base
Utilisation de base de "innerHTML"
Parser un document avec "getElementsByTagName"

Exo 1 : Il s'agit de creer une petite galérie d'images (cf. prise d'écran en bas) ou les images sont échangés par rapport au cadre (colorés, à gauche) survolé par le curseur (onmouseover) de l'utilisateur. En bas a droite, un petit texte est affiché (m1,m2,...). A rendre par email avant le cours de la semaine prochaine.

S3 (24/10/07) : Styles et calques

Déscription :
Modification de propriétés CSS par JavaScript
Layout et création d'interfaces avec calques
Links :
Solution EXO 1 (montagnes)
Opérations de base sur calques
Formulaire complexe à vérifier
Petite interface de recherche
Parser du XML avec JS
Le XML en .xml

S4 (07/11/07) : Introduction AJAX

Déscription :
Architecture trois-tiers avec client riche
AJAX, une solution universelle ?
Links :
Petite biliothèque AJAX
Bases PHP pour génération XML
Pack de fichiers pour EXO2

Exo 2 : A partir de deux exercices précédents (fichiers), créez une interface de recherche AJAX. Il suffit de fusionner l'interface de recherche.html avec les fonctions de recherche de parse_xml.html. A rendre par email avant le cours de la semaine prochaine. Le resultat devrait ressembler à cela:

S5 (28/11/07) : Web-APIs I

Attention: a cause de la grève des transports, le cours est annulé...
Déscription :
Travailler avec Google Maps comme example d'un Web-API
Links :
Solution EXO2
Google Maps API
Google Maps AJAX COOP (MAJ : 28/11 15:00)
Google Maps AJAX COOP Sources (MAJ : 28/11 15:00)
Example 1 : fichier de base
Example 2 : marker et bulle d'info
Example 3 : creer une ligne
Example 4 : ligne, marker et texte quand on click
Example 5 : geocoder (adresse => point)
Example 6 : interface pour trouver le Lat/Lng d'un point
Example 7 (pas vu en classe) : un petit voyage à Paris

S6 (05/12/07) : Vérification de formulaires avec AJAX / AJAX Suggest

Déscription :
Interaction client <=> bdd transparente et événements JS
Links :
AJAX Suggest
Formulaire de base
Fichiers PHP
Solution avec sql2xml.php
Solution avec recherche.php

S7 (12/12/07) : Applications collaboratives avec AJAX

Déscription :
Un simple système de chat (Shoutbox)
Links :
Shoutbox, fichier de base

Exo 3 : A du (fichier de base), il s'agit de créer un simple système de chat - un utilisateur laisse son peudo et un message dans une base de données. L'interface est régulièrement (2-5 sec.) mis à jour avec les derniers messages...

S8 (19/12/07) : RSS et AJAX / Web-APIs II

Déscription :
Interaction avec flux XML externes
Links :
EXO 3 : Shoutbox, Solution
Site AJAX pour moteurs de recherche
Localisation par adresse IP
Lecture RSS, solution

S9 (09/01/08) : répétition et Google Search API

revisites du programme du semestre
travailler avec l'API de recherche de chez Google
Links :
AJAX, l'application de base
Google AJAX Search, hello world
Google AJAX Search, custom search
Google AJAX Search, popinfo

S11 (16/01/09) : AJAX avec JSON / Sécurité

Links :
AJAX, l'application de base avec JSON
Date limite pour rendre les projets finaux : 31 Janvier