1. Mastère Management et Nouv. Techno. 2007/08
2. <html><img src="logos hec enst.png">
3. Stéphane ROUILLY
3.1. Chercheur EDF, chef de projet Internet commercial multi-segment : innovations Web appliquées à la GRC
3.2. Prof à Télécom Paris (mastère MNT, mastère CPM, module Web & carto), Mines et Sc-po
3.3. Prof à Paris 8 : « concevoir un site web dynamique » en licence CIM (00-07)
3.4. Project leader de 2 LL : un silo Spip et un wiki Wysiwyg
3.5. Associé d’une startup Internet parisienne
4. plan du cours
4.1. Javascript/Ajax, Le langage du web (3h)
4.1.1. Web2.0 [45mn]
4.1.2. Exemples [5mn]
4.1.3. Bases et subtilités [2h]
4.1.4. ccm ou re-introduction à lire
4.2. Javascript/Ajax, Clés pour un web riche et modulaire (3h)
4.2.1. interrogation ?
4.2.2. DOM [30mn]
4.2.3. Fonctions utiles [30mn]
4.2.4. ajax [30mn]
4.2.5. bibliothèques [30mn]
4.2.6. debugger + webdeveloper [10mn]
4.2.7. API, mashups [40mn]
4.2.8. parler des closures ?
4.2.9. Sujet du devoir "Un diaporama animé"
4.2.9.1. Chargement d'une image différente toutes les x secondes
4.2.9.1.1. lancez un timer dans le onload du body
4.2.9.1.2. timers : setTimeout ou setInterval
4.2.9.1.3. les image s peuvent se trouver dans un tableau ex : images[["titre1", "url1"]["titre2","url2"]];
4.2.9.2. Apparition de l'image à un endroit de la page tiré au hasard pour chaque nouvelle image
4.2.9.2.1. utilisez un calque (div absolute) et nommez le (id)
4.2.9.2.2. pour le déplacer, utilisez le nouveau DOM en ciblant les propriétés css : left et top
4.2.9.3. Agrandissement progressif de l'image jusqu'a sa taille originale ou jusqu'à une taille précise (400px par ex)
4.2.9.3.1. nommez l'image (id)
4.2.9.3.2. utilisez le nouveau DOM pour modifier sa propriété css width ou height (pas les 2 car elles sont proportionnelles)
4.2.9.3.3. utilisez un timer pour augmenter la taille petit à petit
4.2.9.4. Déplacement de l'image jusqu'au milieu de la page
4.2.9.4.1. modifiez les propriétés css left et / ou top de la div qui contient l'image
4.2.9.5. Déplacement et agrandissement se font simultanément
4.2.9.5.1. Je vous conseille un seul timer pour les 2
4.2.9.6. Au moins 20 images différentes
4.2.9.6.1. remplissez le tableau des images
4.2.9.7. Le titre de l'image s'affiche comme nom de la page web
4.2.9.7.1. ça c'est de l'ancien dom
4.2.9.8. Le titre de l'image s'affiche aussi quelquepart sur la page web (au dessus de l'image en mouvement par ex).
4.2.9.8.1. on peut remplacer un texte par un autre avec le nouveau DOM et innerHTML
4.2.9.9. La couleur et la taille du titre de l'image changent chaque nouvelle image (tirage au hasard)
4.2.9.9.1. on peut modifier le style d'un élément avec le nouveau DOM et style.color par exemple
4.2.9.10. Fonctionnalités optionnelles
4.2.9.10.1. Les images peuvent se trouver sur web et non avec votre page en tant que fichiers. Elles seraient donc chargées en http. [optionnel]
4.2.9.10.2. Prévoir une image de chargement qui tant qu'une image n'est pas chargée [optionnel]
4.2.9.10.3. - cadre des images fonction de l'heure qu'il est (matin / midi / aprem / soir / nuit ?) mais aussi d'un paramètre entré par l'utilisateur au début (nom, plage de couleur, épaisseur du cadre, style...) [optionel]
4.2.9.10.4. - ne jamais reproposer la même image même après un rechargement de la page. Mais placer un bouton (ou un lien) pour reproposer toutes les images (vider la "mémoire"). [optionnel]
4.2.9.10.5. Images tirées d'une RSS ? [optionnel]
4.2.9.11. - J'ai ajouté des conseils à gauche de toutes les fonctionnalités demandées ci-dessus, n'oubliez pas de les lire ! (cliquez pour ouvrir le noeud) - LE DEVOIR EST A RENDRE AU PLUS TARD LE 29 NOVEMBRE 2007 à mon mail [email protected]. TITRE DU MAIL : DIAPORAMA (svp) - Votre devoir doit être complet (page web + images par ex). Faites moi un zip si besoin. - Attendez un mail de retour (accusé de réception) sinon renvoyer avec l'historique de vos précédents envois
4.2.9.12. Un petit exemple de page html comprenant un javascript simple pour ceux qui auraient du mal à se lancer : Cliquez sur la fleche rouge pour la voir fonctionner puis sur "voir le code de cette page" avec votre navigateur web pour analyser son code.
5. Contexte
5.1. Web2.0
5.2. ajax
5.3. haut débit
5.4. navigateurs
5.5. historique
5.5.1. 95
5.5.1.1. livescript/javascript
5.5.2. 97
5.5.2.1. ECMAscript / DHTML
5.5.3. 00
5.5.3.1. Actionscript
5.5.4. 01-05
5.5.4.1. XMLHTTPRequest / AJAX
5.5.5. 06
5.5.5.1. Firebug
5.5.6. tamarin, Rhino...
6. Exemples
6.1. les editeurs web : excel/word
6.1.1. sauvegarde automatique
6.1.2. modifications simultanées
6.1.3. ex : google docs
6.2. les webmails
6.2.1. completion automatique
6.2.2. correcteur orthographique
6.2.3. ex : gmail
6.3. chat
6.3.1. rafraichissement auto
6.3.2. on est prévenu que l'interlocuteur tape
6.3.3. meebo
6.4. effets
6.4.1. bases
6.4.1.1. dynamic drive
6.4.2. bibliothèques
6.4.2.1. scriptaculous
6.4.3. virtuose
6.4.3.1. dhtmleu
7. Langage
7.1. Coeur
7.1.1. support de cours
7.1.1.1. ccm
7.1.1.2. résumé en 3 pages
7.1.1.3. docs on et offline
7.1.1.3.1. htmlplayground : aide interactive html, css
7.1.1.3.2. gotApi : tous les langages du web avec 1 seul moteur de recherche
7.1.1.3.3. devboi : doc offline, tous langages du web
7.1.2. Pour commencer
7.1.2.1. interprété, coté client
7.1.2.1.1. schéma
7.1.2.2. Pour démarrer : affichage
7.1.2.2.1. alert("coucou"); // une boite d'alerte
7.1.2.2.2. a= prompt("question", "réponse"); // une boite de question
7.1.2.2.3. a = confirm("alors ?") // une boite de confirmation
7.1.2.2.4. document.write("coucou<br />Les aminche"); // ecriture dans le flux de la page
7.1.2.3. intégration dans un navigateur
7.1.2.3.1. appel
7.1.2.3.2. DOM
7.1.2.4. sensible à la casse
7.1.2.5. permissif : les virtuoses stylent, le code peut être réduit (cf les bibliothèques)
7.1.2.6. 1er programme : hello prénom
7.1.2.6.1. dans l'url
7.1.2.6.2. dans la console
7.1.2.6.3. dans un fichier
7.1.3. Bases et subtilités
7.1.3.1. Structure
7.1.3.1.1. sur la même ligne ";"
7.1.3.1.2. commentaires
7.1.3.1.3. portée des variables : leur bloc
7.1.3.1.4. bonne pratique : indentation, « ; », espace
7.1.3.1.5. guillemets, apostrophes, échappement
7.1.3.2. Variables
7.1.3.2.1. non typées (pas de type prédéfini)
7.1.3.2.2. déclaration
7.1.3.2.3. booléen
7.1.3.2.4. nombre
7.1.3.2.5. chaîne
7.1.3.2.6. tableaux
7.1.3.3. Opérateurs
7.1.3.3.1. arythmétiques
7.1.3.3.2. relationnels(comparaisons)
7.1.3.3.3. logiques
7.1.3.3.4. binaires
7.1.3.3.5. spéciaux
7.1.3.3.6. d’affectation
7.1.3.3.7. autres
7.1.3.3.8. transtypage (cast)
7.1.3.4. Instructions conditionnelles
7.1.3.4.1. if (a==1) {b=1} (si-alors)
7.1.3.4.2. else {b=2} (sinon)
7.1.3.4.3. else if (a==2) {b=1} (si imbriqués)
7.1.3.4.4. switch(a) { case 12 : // cascade case 34 : break; default : }
7.1.3.4.5. while(a<=10) {a++} (tant que)
7.1.3.4.6. for(a=0;a<=10;a++) {} (boucle)
7.1.3.4.7. var Tab = ["un", "deux", "trois"]; for( a in Tab) { document.write( Tab[a] + '\n'); }
7.1.3.4.8. confimer l'âge et afficher si true
7.1.3.5. Fonctions
7.1.3.5.1. function soustraitMoiCela(a,b){ c=a-b; return c; } z = soustraitMoiCela(10,2); // z donne 8
7.1.3.5.2. -fonction anonyme- var a = function (){ return 6}; // déclaration a // donne 6 (appel)
7.1.3.5.3. closures
7.1.3.6. Objets
7.1.3.6.1. var toto = new Object() ou var toto = {} // déclaration
7.1.3.6.2. toto.bras=2; toto.tete="grande"; ou toto[bras]=2; // affectation
7.1.3.6.3. var toto = { bras : 2; tete : "grosse"; corps : { "nombril" : rond, "dos" : "rond" } } // affectation multiple toto.corps.nombril ou toto["corps"]["nombril"]
7.1.3.7. En savoir plus
7.1.3.7.1. Un exposé des bonnes pratiques et meilleures astuces "Javascript, a (re)introduction" (sous forme textuelle)
7.1.3.7.2. Meilleurs extraits (selon moi) de cet exposé sous forme de présentation powerpoint (60 transparents)
7.2. DOM
7.2.1. évènements
7.2.1.1. onclick, onmousedown, onmouseover, onmouseout, onfocus, onblur, onselect (formulaire ...)
7.2.1.2. onload, onunload
7.2.1.3. onkeypress...
7.2.2. accès au navigateur
7.2.2.1. url, historique
7.2.2.1.1. document.location.href = "http://toto.fr", window.history.go(-1);
7.2.2.2. titre, barre d'état
7.2.2.2.1. document.title, window.status
7.2.2.3. frames
7.2.2.3.1. parent. ou top.frames[0].frames[2] ou top.frameTotoHaut.frameSousTotoDroite .document.write("lalala");
7.2.2.3.2. sécurité
7.2.2.4. controle
7.2.2.4.1. self.close(); self.focus()
7.2.2.5. pop-ups
7.2.2.5.1. mafenetre = window.open("","maFenetre","menubar=no,scrollbars=no,status=no,width=100,height=100"); mafenetre.document.write("<html><body>J’ecris ce que je veux : c’est dynamique !</body></html>"); mafenetre.focus() // affiche au 1er plan mafenetre.close(); // bye bye
7.2.2.6. taille, placement...
7.2.2.7. construire une page web...
7.2.2.7.1. dont le titre change en survol,
7.2.2.7.2. la barre d'état en clic,
7.2.2.7.3. une pop up se déclenche quand on la quitte,
7.2.2.7.4. un lien permette de revenir à la page précédente
7.2.2.7.5. la taille change ?
7.2.3. accès au document
7.2.3.1. formulaire
7.2.3.1.1. <form name="monformulaire"><input type="text" /></form>
7.2.3.1.2. document.monformulaire.monchamp.value=3;
7.2.3.1.3. document.monformulaire.action="return false;";
7.2.3.1.4. complexe dés que les champs sont multiples (listes déroulantes, boutons radio...)
7.2.3.1.5. Valider un formulaire
7.2.3.2. images (roll over particulièrement)
7.2.3.2.1. document.monImage.src='http://unAutreSite/uneAutreImage';
7.2.3.2.2. <a href="#" onmouseover="this.src='autreURL'" onmouseout=""><img src="url"> /></a>
7.2.3.3. body
7.2.3.3.1. document.body.bgColor="red"; // deprecated
7.2.3.3.2. window.onload = "feuDArtifice()";
7.2.3.4. nodes (voir nouveau dom)
7.2.3.5. roll over, permutation
7.2.4. nouveau DOM
7.2.4.1. css
7.2.4.1.1. style="color: red; marging: 3px; opacity: 40; "
7.2.4.2. id
7.2.4.2.1. <p id="ii">louloulou</p>
7.2.4.2.2. lalala et <span id="oo">lilili</span> et lololo
7.2.4.3. accès aux id et aux styles
7.2.4.3.1. onmouseover="this.style.opacity=80;" // on rend translucide un bloc
7.2.4.3.2. document.getElementById("ii").style.fontsize = 33; // on change l'apparence d'un texte
7.2.4.3.3. document.getElementById("oo").innerHTML="haha"; // on change contenu
7.2.4.3.4. style.display="none" ou "block", style.visibility = "hidden" ou "visible" // on cache avec ou sans déplacement
7.2.4.3.5. simplification de syntaxe dans les bibliothèques
7.2.4.4. superposition d'éléments
7.2.4.4.1. fausse pop-up
7.2.4.4.2. style="position:absolute"
7.2.4.4.3. style.left = 200px // déplacement
7.2.4.4.4. style.width = 200px // redimentionnement
7.2.4.5. contruire un texte arrangé en accordéon
7.3. fonctions et objets utiles
7.3.1. random
7.3.1.1. Math.random();
7.3.2. créer un div...
7.3.2.1. qui, au chargement de la page
7.3.2.2. ait une taille tirée au hasard,
7.3.2.3. une couleur de fond tirée au hasard,
7.3.2.4. un emplacement tiré au hasard
7.3.3. timer
7.3.3.1. setTimeout("lala();",1000);
7.3.3.2. setInterval()
7.3.4. Animer un texte...
7.3.4.1. en utilisant id et styles
7.3.4.2. taille
7.3.4.3. couleur
7.3.4.4. chenillard...
7.3.5. l'objet Date
7.3.6. cookies
7.3.6.1. principe
7.3.6.1.1. entête http
7.3.6.1.2. session, intersession
7.3.6.1.3. vs. url longues
7.3.6.1.4. expiration
7.3.6.1.5. path/domaine
7.3.6.2. bibliothèque
7.3.6.2.1. lire
7.3.6.2.2. écrire / créer / détruire
7.3.6.3. exemple
7.3.7. afficher un message...
7.3.7.1. qui dépend de l'heure du jour
7.3.7.2. et dépend de la fidélité de l'internaute
8. Evolutions
8.1. Ajax
8.1.1. cf. bibliothèques
8.1.2. ahah
8.1.2.1. docs
8.1.2.2. exemple
8.1.2.3. limite
8.1.2.4. idée
8.1.3. yahoo ui
8.1.3.1. docs
8.1.3.2. exemple
8.1.4. exemples avancés
8.1.5. pb de cross domain
8.1.5.1. flash
8.1.5.2. proxy
8.1.5.3. apache rerouting
8.1.5.4. <script> hack
8.1.5.5. <img> hack
8.1.5.6. Iframes
8.1.5.6.1. fragment identifier messaging (FIM) with IFrames
8.1.5.7. le 7ème ?
8.1.6. to be continued ;-)
8.2. bibliothèques
8.2.1. simplifications
8.2.1.1. cross browser
8.2.1.2. memory leaks
8.2.1.3. accès aux id
8.2.1.4. accès aux champs de formulaire
8.2.1.5. accès aux variables
8.2.1.6. rechargement (ajax)
8.2.2. backbase
8.2.2.1. redéfinition complète
8.2.2.2. payante
8.2.2.3. démo
8.2.3. scriptaculous
8.2.3.1. basée sur prototype
8.2.3.2. démo
8.2.3.3. les bases
8.2.3.4. tuto détaillé
8.2.4. yahoo ui
8.2.4.1. légère et documentée
8.2.4.2. démo
8.2.4.2.1. en local
8.2.4.3. et même des extensions
8.2.5. prototype
8.2.5.1. docs
8.2.5.2. to be continued ;-)
8.3. JSON
8.3.1. to be continued ;-)
8.4. Webservices
8.4.1. interopérabilité
8.4.2. APIs
8.4.3. REST, SOAP, RPC...
8.4.4. to be continued ;-)
8.5. Mashup
8.5.1. référence
8.5.1.1. la matrice des mashups
8.5.1.2. 537 API, 2444 mashups
8.5.2. exemples
8.5.2.1. housingmaps
8.5.3. to be continued ;-)
9. Pratique
9.1. créer son bureau ajax de zéro (dom et nodes !) http://www.musestorm.com/developers/tutorials/ad_tutorial.jsp
9.2. supports de pratique
9.2.1. selfhtml
9.2.2. FAQ irt.org
9.3. outils
9.3.1. GUI
9.3.1.1. APTANA
9.3.2. debug
9.3.2.1. firefox
9.3.2.1.1. webdevelopper
9.3.2.1.2. afficher "code source de la selection" (firefox)
9.3.2.1.3. firebug
9.3.2.1.4. un pb d'instalation ? Firefox portable !
9.3.2.2. ie
9.3.2.2.1. ietab ou mieux, ieview lite
9.3.2.2.2. webdevelopper (version de microsoft)
9.3.2.2.3. firebug lite
9.4. 1/ utiliser des scripts
9.4.1. réutilisation
9.4.1.1. 1/ script, in or out
9.4.1.1.1. copier le code
9.4.1.1.2. récupérer le .js
9.4.1.2. 2/ ancrage
9.4.1.2.1. où le faire apparaître dans le body
9.4.1.3. 3/ lancement
9.4.1.3.1. onload en général
9.4.1.4. précisions
9.4.1.5. Où trouver des scripts
9.4.1.6. installation d'un script sur une page (ie)
9.4.2. compatibilité
9.4.2.1. document.all / getElementsByID
9.4.2.2. précisions
9.4.2.3. mise en compatibilité FF
9.4.3. chainage, multi
9.4.3.1. attention aux var globales
9.4.3.2. attention aux lancements multiples (onload)
9.4.3.3. précisions
9.4.3.4. carte de voeux
9.5. 2/ créer 1 script
9.5.1. règles
9.5.1.1. <script>
9.5.1.2. function
9.5.1.3. 1 ligne à la fois
9.5.2. effet
9.5.2.1. scrolling
9.5.2.2. texte dans un tableau
9.5.2.2.1. var a = ["gggg", "jjjjj"];
9.5.2.3. défilement vertical
9.5.2.3.1. setInterval
9.5.2.3.2. div, style et getElementById
9.5.2.3.3. boucle
9.5.2.4. accélération
9.5.2.5. arrêt en survol
9.6. 3/ créer son mashup
9.6.1. TD chat
9.6.1.1. zip avec tous les fichiers
9.6.1.1.1. interface/chat.html (l'interface utilisateur avec le javascript à réaliser))
9.6.1.1.2. chat.php (le webservice qui écrit les phrases tapées)
9.6.1.1.3. texte.html (le fichier qui contient les phrases tapées))
9.6.1.2. transparents guides du TD
9.6.1.3. refresh ajax
9.6.1.3.1. qd on tape
9.6.1.3.2. a chak phrase
9.6.1.4. géolocalisé
9.6.1.4.1. ip
9.6.1.4.2. googlemaps
9.6.1.4.3. ex : geotool
9.6.1.5. double passage de paramètres
9.6.1.5.1. &=%26
9.6.1.6. astuce pour leurer le cache
9.6.1.6.1. var maDate = new Date(); document.location = "toto.html?" + maDate.getTime();
9.6.1.7. cross domain