Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Javascript, Ajax, Webservices et Mashups by Mind Map: Javascript, Ajax, 
   Webservices 
    et Mashups
0.0 stars - 0 reviews range from 0 to 5

Javascript, Ajax, Webservices et Mashups

Mastère Management et Nouv. Techno. 2007/08

<html><img src="logos hec enst.png">

Stéphane ROUILLY

Chercheur EDF, chef de projet Internet commercial multi-segment : innovations Web appliquées à la GRC

Prof à Télécom Paris (mastère MNT, mastère CPM, module Web & carto), Mines et Sc-po

Prof à Paris 8 : « concevoir un site web dynamique » en licence CIM (00-07)

Project leader de 2 LL : un silo Spip et un wiki Wysiwyg

Associé d’une startup Internet parisienne

plan du cours

Javascript/Ajax, Le langage du web (3h)

Web2.0 [45mn]

Exemples [5mn]

Bases et subtilités [2h]

ccm ou re-introduction à lire

Javascript/Ajax, Clés pour un web riche et modulaire (3h)

interrogation ?

DOM [30mn]

Fonctions utiles [30mn]

ajax [30mn]

bibliothèques [30mn]

debugger + webdeveloper [10mn]

API, mashups [40mn]

parler des closures ?

Sujet du devoir "Un diaporama animé", Chargement d'une image différente toutes les x secondes, lancez un timer dans le onload du body, timers : setTimeout ou setInterval, les image s peuvent se trouver dans un tableau ex : images[["titre1", "url1"]["titre2","url2"]];, Apparition de l'image à un endroit de la page tiré au hasard pour chaque nouvelle image, utilisez un calque (div absolute) et nommez le (id), pour le déplacer, utilisez le nouveau DOM en ciblant les propriétés css : left et top, Agrandissement progressif de l'image jusqu'a sa taille originale ou jusqu'à une taille précise (400px par ex), nommez l'image (id), utilisez le nouveau DOM pour modifier sa propriété css width ou height (pas les 2 car elles sont proportionnelles), utilisez un timer pour augmenter la taille petit à petit, Déplacement de l'image jusqu'au milieu de la page, modifiez les propriétés css left et / ou top de la div qui contient l'image, Déplacement et agrandissement se font simultanément, Je vous conseille un seul timer pour les 2, Au moins 20 images différentes, remplissez le tableau des images, Le titre de l'image s'affiche comme nom de la page web, ça c'est de l'ancien dom, Le titre de l'image s'affiche aussi quelquepart sur la page web (au dessus de l'image en mouvement par ex)., on peut remplacer un texte par un autre avec le nouveau DOM et innerHTML, La couleur et la taille du titre de l'image changent chaque nouvelle image (tirage au hasard), on peut modifier le style d'un élément avec le nouveau DOM et style.color par exemple, Fonctionnalités optionnelles, Les images peuvent se trouver sur web et non avec votre page en tant que fichiers. Elles seraient donc chargées en http. [optionnel], pas de différence sauf <img src="http://">, Prévoir une image de chargement qui tant qu'une image n'est pas chargée [optionnel], vous pouvez par exemple utiliser l'évènement onload appliqué à l'image (<img src="" onload="">), - 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], utilisez l'objet date(), utiliser par exemple l'instruction "prompt" pour laisser l'utilisateur entrer un paramètre, - 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], utilisez les cookies (get et setcookie), Images tirées d'une RSS ? [optionnel], - 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 starcrouz@gmail.com. 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, 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.

Contexte

Web2.0

ajax

haut débit

navigateurs

historique

95, livescript/javascript

97, ECMAscript / DHTML

00, Actionscript

01-05, XMLHTTPRequest / AJAX

06, Firebug

tamarin, Rhino...

Exemples

les editeurs web : excel/word

sauvegarde automatique

modifications simultanées

ex : google docs

les webmails

completion automatique

correcteur orthographique

ex : gmail

chat

rafraichissement auto

on est prévenu que l'interlocuteur tape

meebo

effets

bases, dynamic drive

bibliothèques, scriptaculous

virtuose, dhtmleu

Langage

Coeur

support de cours, ccm, résumé en 3 pages, docs on et offline, htmlplayground : aide interactive html, css, gotApi : tous les langages du web avec 1 seul moteur de recherche, devboi : doc offline, tous langages du web

Pour commencer, interprété, coté client, schéma, Pour démarrer : affichage, alert("coucou"); // une boite d'alerte, a= prompt("question", "réponse"); // une boite de question, a = confirm("alors ?") // une boite de confirmation, document.write("coucou<br />Les aminche"); // ecriture dans le flux de la page, intégration dans un navigateur, appel, type="text/javascript", anciennement langUage="javascript", - Dans les pages html directement, <script> <!-- fonction toto() { alert("coucou"); } //--> </script>, - En fichier inclus, <script src= "toto.js"></script>, attention, ne rien écrire entre les 2 balises script, toto.js : fonction toto() { alert("coucou"); }, - Dans les évènements des balises html, <a href="" onclick = "toto(); return false;">Cliquez ici !</a>, - Dans les propriétés des balises, <a href = "javascript:alert(‘coucou’) ">Cliquez ici !</a>, <a href="javascript:void" onclick="lalala();"> // astuce, javascript: en url, javascript: // afficher la console, Untitled, DOM, sensible à la casse, permissif : les virtuoses stylent, le code peut être réduit (cf les bibliothèques), 1er programme : hello prénom, dans l'url, dans la console, dans un fichier, prompt, évènement (survol)

Bases et subtilités, Structure, sur la même ligne ";", var a=1; var b=9;, commentaires, //ligne, /* plusieurs lignes */, portée des variables : leur bloc, {var a=1}, bonne pratique : indentation, « ; », espace, a = 1; { kfsjhdfj; }, guillemets, apostrophes, échappement, toto="coucou('lalala l\'éclair lalala')";, Variables, non typées (pas de type prédéfini), var a=1, b='z', c="zer", d='toto';, déclaration, a = 5; // donne une variable globale ! Très risqué var a = 5; // correct, booléen, true, false, nombre, 9; 10.1; 0xFF; 0713, chaîne, a="nuages";, "coucou".length; // donne 6, "coucou".charAt(2); // donne u ou "coucou"[2]; // donne u aussi, toutes les methodes de l'objet string, tableaux, 1 dimension, var a = new Array(); a[0] = 8; (déclaration, affectation) ou var a=[3,5,8];, a.length; // donne 3, a[a.length] = "glagla"; (ajouter un élément en fin de tableau), n dimensions, var a = [[0,0,1],[1,0,0],[1,0,1]]; // grille de morpion gagnante ou var a = new Array(new Array(0,0,1),new Array(1,0,1),new Array(0,1,0)); // grille perdante !, a[0][0] // donne 0, Opérateurs, arythmétiques, a=1+5; b=5*9; c=3%2(modulo=1), relationnels(comparaisons), a==b; a===b; a>=b; a!=b;, logiques, a&&b; a||b; !a; !!b, binaires, ~a (NON), b|c; d>>1 (décalage à droite), spéciaux, a++ (post incrémentation); ++a (pré incrémentation) ; a--..., d’affectation, =, +=, *=, -=, /=, %= (combinaison avec un opérateur arythmérique), autres, a=(b!=c)? « b différent de c » : « b égal c » (condition);, affectation + condition sur une même ligne, a=« fran »+ « ce » (concaténation), transtypage (cast), !!a (booléen), +"" (chaine), *1 (flotant), parseInt (a);, demander l'age et afficher +2, Instructions conditionnelles, if (a==1) {b=1} (si-alors), else {b=2} (sinon), else if (a==2) {b=1} (si imbriqués), switch(a) { case 12 : // cascade case 34 : break; default : }, attention : ===, while(a<=10) {a++} (tant que), for(a=0;a<=10;a++) {} (boucle), var Tab = ["un", "deux", "trois"]; for( a in Tab) { document.write( Tab[a] + '\n'); }, confimer l'âge et afficher si true, Fonctions, function soustraitMoiCela(a,b){ c=a-b; return c; } z = soustraitMoiCela(10,2); // z donne 8, -fonction anonyme- var a = function (){ return 6}; // déclaration a // donne 6 (appel), closures, Objets, var toto = new Object() ou var toto = {} // déclaration, toto.bras=2; toto.tete="grande"; ou toto[bras]=2; // affectation, var toto = { bras : 2; tete : "grosse"; corps : { "nombril" : rond, "dos" : "rond" } } // affectation multiple toto.corps.nombril ou toto["corps"]["nombril"], En savoir plus, Un exposé des bonnes pratiques et meilleures astuces "Javascript, a (re)introduction" (sous forme textuelle), au sujet des nombres flottants (détail), Meilleurs extraits (selon moi) de cet exposé sous forme de présentation powerpoint (60 transparents)

DOM

évènements, onclick, onmousedown, onmouseover, onmouseout, onfocus, onblur, onselect (formulaire ...), onload, onunload, onkeypress...

accès au navigateur, url, historique, document.location.href = "http://toto.fr", window.history.go(-1);, titre, barre d'état, document.title, window.status, frames, parent. ou top.frames[0].frames[2] ou top.frameTotoHaut.frameSousTotoDroite .document.write("lalala");, sécurité, cross domain interdit, controle, self.close(); self.focus(), pop-ups, 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, taille, placement..., construire une page web..., dont le titre change en survol,, la barre d'état en clic,, une pop up se déclenche quand on la quitte,, un lien permette de revenir à la page précédente, la taille change ?

accès au document, formulaire, <form name="monformulaire"><input type="text" /></form>, document.monformulaire.monchamp.value=3;, document.monformulaire.action="return false;";, complexe dés que les champs sont multiples (listes déroulantes, boutons radio...), utilisation de bibliothèques, Valider un formulaire, images (roll over particulièrement), document.monImage.src='http://unAutreSite/uneAutreImage';, <a href="#" onmouseover="this.src='autreURL'" onmouseout=""><img src="url"> /></a>, body, document.body.bgColor="red"; // deprecated, window.onload = "feuDArtifice()";, nodes (voir nouveau dom), roll over, permutation

nouveau DOM, css, style="color: red; marging: 3px; opacity: 40; ", id, <p id="ii">louloulou</p>, lalala et <span id="oo">lilili</span> et lololo, accès aux id et aux styles, onmouseover="this.style.opacity=80;" // on rend translucide un bloc, document.getElementById("ii").style.fontsize = 33; // on change l'apparence d'un texte, document.getElementById("oo").innerHTML="haha"; // on change contenu, style.display="none" ou "block", style.visibility = "hidden" ou "visible" // on cache avec ou sans déplacement, simplification de syntaxe dans les bibliothèques, superposition d'éléments, fausse pop-up, <div id="toto" style="position:absolute; width:200px; height:200px; z-index:1; left: 100px; top: 100px; background-color: #FF00FF; border: 1px solid #000000; visibility: hidden" >, style="position:absolute", style.left = 200px // déplacement, style.width = 200px // redimentionnement, contruire un texte arrangé en accordéon

fonctions et objets utiles

random, Math.random();

créer un div..., qui, au chargement de la page, ait une taille tirée au hasard,, une couleur de fond tirée au hasard,, un emplacement tiré au hasard

timer, setTimeout("lala();",1000);, setInterval()

Animer un texte..., en utilisant id et styles, taille, couleur, chenillard...

l'objet Date

cookies, principe, entête http, schéma, session, intersession, vs. url longues, expiration, cookie mémoire, cookie disque, path/domaine, bibliothèque, lire, getCookie("toto");, écrire / créer / détruire, setCookie("toto", "lalala");, exemple

afficher un message..., qui dépend de l'heure du jour, et dépend de la fidélité de l'internaute

Evolutions

Ajax

cf. bibliothèques

ahah, docs, exemple, limite, idée

yahoo ui, docs, exemple

exemples avancés

pb de cross domain, flash, proxy, apache rerouting, <script> hack, <img> hack, Iframes, fragment identifier messaging (FIM) with IFrames, le 7ème ?

to be continued ;-)

bibliothèques

simplifications, cross browser, memory leaks, accès aux id, accès aux champs de formulaire, accès aux variables, rechargement (ajax)

backbase, redéfinition complète, payante, démo

scriptaculous, basée sur prototype, démo, les bases, tuto détaillé

yahoo ui, légère et documentée, démo, en local, et même des extensions

prototype, docs, to be continued ;-)

JSON

to be continued ;-)

Webservices

interopérabilité

APIs

REST, SOAP, RPC...

to be continued ;-)

Mashup

référence, la matrice des mashups, 537 API, 2444 mashups

exemples, housingmaps

to be continued ;-)

Pratique

créer son bureau ajax de zéro (dom et nodes !) http://www.musestorm.com/developers/tutorials/ad_tutorial.jsp

supports de pratique

selfhtml

FAQ irt.org

outils

GUI, APTANA

debug, firefox, webdevelopper, ctrl + shift + F, afficher "code source de la selection" (firefox), affiche le code généré par javascript s'il y en a, firebug, inspect html elements : cascade de styles + modification possible !, un pb d'instalation ? Firefox portable !, ie, ietab ou mieux, ieview lite, webdevelopper (version de microsoft), firebug lite

1/ utiliser des scripts

réutilisation, 1/ script, in or out, copier le code, récupérer le .js, 2/ ancrage, où le faire apparaître dans le body, 3/ lancement, onload en général, précisions, Où trouver des scripts, installation d'un script sur une page (ie)

compatibilité, document.all / getElementsByID, précisions, mise en compatibilité FF

chainage, multi, attention aux var globales, attention aux lancements multiples (onload), précisions, carte de voeux

2/ créer 1 script

règles, <script>, function, 1 ligne à la fois

effet, scrolling, texte dans un tableau, var a = ["gggg", "jjjjj"];, défilement vertical, setInterval, div, style et getElementById, boucle, accélération, arrêt en survol

3/ créer son mashup

TD chat, zip avec tous les fichiers, interface/chat.html (l'interface utilisateur avec le javascript à réaliser)), chat.php (le webservice qui écrit les phrases tapées), texte.html (le fichier qui contient les phrases tapées)), transparents guides du TD, refresh ajax, qd on tape, a chak phrase, géolocalisé, ip, 81.56.14.93(Lausanne) - 81.57.128.214 (Paris), du visiteur, webservice sur notre serveur, géolocalisée, webservice tiers, googlemaps, ex : geotool, service complet avec localisation sur google maps, double passage de paramètres, &=%26, astuce pour leurer le cache, var maDate = new Date(); document.location = "toto.html?" + maDate.getTime();, cross domain