Premier semestre
S1S1 (11/10/07) : Introduction générale
Déscription :
Contexte du développement Web
Capacités et limites du langage
Introduction langage
Links :
S1S2 (18/10/07) : Introduction suite et travail avec formulaires
Déscription :
Dialogues système
Le Document Object Model
Vérifier et tester les formulaires (X)HTML par JavaScript
Links :
S1S3 (25/10/07) : Tableau et innerHTML
Déscription :
Links :
Exo 1 : Il s'agit de prendre le fichier de base et de tester si l'utilisateur à bien remplit les trois champs. Mais à la place d'avoir un message d'erreur par champ, essayez de collecter les messages dans un tableau (cf. plus haut) et d'afficher les erreurs dans un seul message comme vous pouvez le voir sur la prise d'écran. A envoyer, par email, avant le cours du 8 octobre. Bon travail !
S1S4 (08/11/07) : Répétition et formulaires suite
Déscription :
Links :
Calculatrice (à consommer avec modération, syntaxe alternative)
S1SX (15/11/07) : Formulaires suite et CSS
Attention: a cause de la grève des transports et des étudiants, le cours est annulé...
Déscription :
Links :
Exo 2 : Voilà, pour vous donner un petit quelque chose à faire pendant cette période difficile, voilà le deuxième exercice du semestre : créez un petit menu (cf. image) composé de trois éléments de navigation et trois calques qui contiennent des liens. Quand l'utilisateur bouge le curseur sur un élément de navigation, le calque respectif s'affiche. Au départ du curseur, le calque redevient invisible. Ce fichier devrait vous aider. Bon travail !
S1S5 (22/11/07) : Introduction calques, deuxième menu
Déscription :
Links :
S1S6 (13/12/07) : Calques suite
Déscription :
Menu avec déplacement du calque selon le curseur
Boîte d'affichage avec calques
Links :
Exo 3 : Deux champs sur une page, le premier saisit un texte et le deuxième un chiffre. Le texte est répété sur la page autant de fois que l'utilisateur précise. Dans la variante plus difficile, le texte est attribué d'une couleur aléatoire (Math.random).
S1S7 (20/12/07) : Popups et une première boucle
Déscription :
Links :
S1S8 (10/01/08) : Répétition et gallerie d'images
Déscription :
Links :
Exo de rattrapage : A partir de ce fichier il s'agit de créer un petit système d'affichage d'actualités. Le contenu du bouton/compteur est mis à jour à chaque clic sur lui et le contenu de la boîte texte avance. Après le dernier message, le système repasse au premier. Si on enlève ou ajoute un élément au tableau des messages, le comptage s'adapte automatiquement. Bon travail !
S1S9 (12/01/08) : Répétition et travail projet (Session de rattrapage, 10-17h)
Déscription :
Links :
S1S10 (17/01/08) : Introduction animation et travail projet
21/01/08 : Date limite pour rendre les projets finaux
Informations concernant le projet final :
- enoyez-le à bernhard point rieder at univ-paris8 point fr ET b at procspace point net
- utilisez un fichier index.html pour le décut du projet
- ajoutez un fichier info.txt avec une petite explication
- joignez une photo de vous !
- enoyez-le à bernhard point rieder at univ-paris8 point fr ET b at procspace point net
- utilisez un fichier index.html pour le décut du projet
- ajoutez un fichier info.txt avec une petite explication
- joignez une photo de vous !
S2S1 (12/02/08) : Répétition et résumé du premier semestre
Déscription :
Elements clés des bases de JavaScript
Links :
S2S2 (21/02/08) : Animation I
Déscription :
Utiliser JavaScript pour créer des animations
Links :
S2S3 (28/02/08) : Animation II
Déscription :
Des galéries d'images animées
Links :
Exo 1 : A partir de la galérie du premier semestre, il s'agit de réaliser une transition d'une image à l'autre par un scrolling. La façon la plus simple pour arriver à cela est de mettre toutes les images sur un seul calque et le faire avancer par des pas de 400px (largeur des images). Il suffit de travailler avec l'opérateur mathématique "modulo" qui calcule le reste d'une division. Ainsi 800 % 400 donne comme réponse 0. Vue que les images ne seront plus en boucle, il faut enlever les éléments de navigation à la première et dernière position (cf. image). Bon travail !
S2S4 (13/03/08) : Cookies I
Déscription :
Les bases du travail avec les cookies
Links :
Exo 1B : Pour ceux qui ont eu des difficultés avec le premier exercice, voilà une deuxième chance. Prenez ce fichier comme point de départ et programmez un changement de la couleur de fond de la page qui va du noir au blanc et de retour. L'exercice resemble beaucoup à celui là.
S2S5 (20/03/08) : Cookies II
Déscription :
Utiliser les cookies pour créer un panier d'achat
Links :
S2S6 (03/04/08) : AJAX I
Déscription :
Introduction à la technique AJAX
Links :
Exo 2 : Prenez notre petite application AJAJ et l'insérer dans un design graphique et interactif "professionnel". Vous avez jusqu'au 16 avril ! Bon travail...
S2S7 (10/04/08) : AJAX II
Déscription :
AJAX, suite
Links :
S2S8 (15/05/08) : AJAJ collaboratif / Introduction à la programmation orientée objet.
Déscription :
La technique de programmation orientée objet implique un changement de perspective considérable mais ouvre la voie sur
une pratique de développement plus structurée et modulaire.
Links :
S2S9 (22/05/08) : Bibliothèques de développement
Déscription :
Le développement d'applications Web se fait aujourd'hui souvent à l'aide de frameworks / bibliothèques.
Nous en allons regarder deux, prototype et mootools
Links :
S2S10 (29/05/08) : Travail projet
Déscription :
Elements clés des bases de JavaScript
Links :
16/06/08 : Date limite pour rendre les projets finaux
Informations concernant le projet final :
- enoyez-le à bernhard point rieder at univ-paris8 point fr ET b at procspace point net
- le projet doit être hébérgé en ligne (!!!) et envoyé par email
- utilisez un fichier index.html pour le décut du projet
- ajoutez un fichier info.txt avec une petite explication
- joignez une photo de vous !
- enoyez-le à bernhard point rieder at univ-paris8 point fr ET b at procspace point net
- le projet doit être hébérgé en ligne (!!!) et envoyé par email
- utilisez un fichier index.html pour le décut du projet
- ajoutez un fichier info.txt avec une petite explication
- joignez une photo de vous !