5/7/12

Technologies Web 2.0

Cliquez pour modifier le style des sous-titres du masque

Cours LPTW 2011/2012 Prpar par S. HAGUOUCHE

5/7/12

Historique du web

1990 : dbut du Web statique

la seule interactivit possible sur les pages HTML tait laffichage une nouvelle page lors dun clic sur un lien hypertexte.

22

5/7/12

Historique du web
1995 : le Web orient client Excuter des scripts ct client : JavaScript

33

5/7/12

Historique du web
Par

la suite, dautres socits ont dvelopp des programmes propritaires (applets Java, ActiveX, Flash) pouvant tre intgrs dans une page Web et excuts dans le navigateur grce un plug-in (extension du navigateur). Web disposait alors dune multitude de technologies client, mais, elles se comportent diffremment selon le type dordinateur et la version du navigateur.
44

Le

Dautres

problmes lis la scurit des

5/7/12

Historique du web
2000 : le Web orient serveur

Motivs par les problmes de compatibilit et de scurit lis aux applications ct client, les dveloppeurs on commenc une migration progressive vers des applications ct serveur.

55

Historique du web

5/7/12

Le Web orient serveur

66

Si on le compare avec un script ct client, la raction

5/7/12

Historique du web
2005 : le compromis client-serveur
les

applications peuvent tre quitablement rparties entre le client et le serveur favorisant ainsi une meilleure ractivit des systmes lusage du JavaScript, du DOM et des CSS est entr dans la normalit. des utilisateurs qui dsactivaient les technologies client dans leur navigateur.
77

Dsormais,

Disparition

5/7/12

Historique du web

Problme : lenvoi dune requte bloque les actions de linternaute jusqu la rponse du serveur la page en cours est obligatoirement rafrachie.

Apparition de AJAX

88

5/7/12

Web 2.0
Le

Web 2.0 est une volution du Web vers plus de simplicit et d'interactivit (L'internaute contribuer lenrichissement du contenu du site, il devient, grce aux outils mis sa disposition, une personne active). Web 2.0 dsigne l'ensemble des techniques, des fonctionnalits et des usages du World Wide Web qui ont suivi la forme initiale du web.
99

L'expression

Lappellation

Web 2.0 correspond plus un

5/7/12

Application Internet riche (RIA)

Les sites Web 2.0 se caractrisent par leurs fonctionnalits, leur ergonomie et leur ractivit qui se rapprocher des applications dordinateurs de bureau quaux applications traditionnelles du Web.

Les RIA (Rich Internet Application) sont des applications Web qui permettent de disposer en ligne des mmes services que sur une application habituellement installe sur un ordinateur de bureau. Exemple : Le webmail
10 10

5/7/12

Ajax, lapplication Internet riche lgre

Pour raliser des applications RIA, diffrentes technologies peuvent tre mises en uvre. Parmi ces technologies: Flash coupl avec Flex, les applications Java La technologie la plus importante est : Ajax
(Asynchronous Javascript And XML)

Ajax a lnorme avantage de ne pas ncessiter la prsence dun plug-in puisquil exploite des technologies intgres par dfaut dans tous les navigateurs rcents (CSS, DOM, JavaScript et son
objet XMLHttpRequest, XML).

11 11

5/7/12

Technologies Web 2.0

JavaScript

Cliquez pour modifier le style des sous-titres du masque

5/7/12

Quest ce que JavaScript?

JavaScript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de programmation qui permet dapporter des amliorations au langage HTML en permettant dexcuter des commandes du cot client.

JavaScript a t initialement dvelopp par Netscape et s'appelait l'poque LiveScript. Adopt la fin de l'anne 1995, par la firme Sun (qui a aussi dvelopp Java), il prit alors son nom actuel de JavaScript.
13 13

JavaScript n'est donc pas propre aux navigateurs de Netscape. Microsoft l'a d'ailleurs aussi adopt partir de son Internet Explorer 3. On le retrouve, de faon

5/7/12

Excution de JavaScript

Les

scripts JavaScript sont grs et excuts par le browser lui-mme sans devoir faire appel aux ressources du serveur. Ses instructions seront donc traites en direct et surtout sans retard par le navigateur.

14 14

5/7/12

un script JavaScript
JavaScript

est intgr une page HTML.

Par dfaut, le navigateur excute le code HTML. Il faut alors signaler au navigateur que la portion du code qui suit nest plus du HTML mais du script JavaScript.
Le

code JavaScript est plac entre La balise <script> et </script>

15 15

Pour prciser que cest du JavaScript il faut ajouter lattribut language=javascript.

Caractristiques de JavaScript
o

5/7/12

JavaScript est un langage de programmation (ou de script) cot client. Cest--dire que cest le navigateur qui se charge de lexcuter tout comme le code HTML. Par consquent la page est charge sur le navigateur avec le code source qui contient des scripts bruts de JavaScript en vu dexcution. Il est alors vident que la confidentialit du code est compromise et il peut tre copi et rutilis par dautres personnes. On appelle souvent le langage JavaScript un langage vnementiel. En effet la plupart de ses scripts sont associs des vnements qui peuvent se produire sur le navigateur tel que le

Les commentaires
Les commentaires en JavaScript sont semblables ceux du langage C. En effet on utilise les doubles slash (//) pour un commentaire de fin de ligne. Tandis que /* et */ dlimitent les commentaires sur plusieurs lignes. Exemple: <script language=javascript> // Ceci est un commentaire sur une ligne /* Ceci est un commentaire sur plusieurs lignes */ </script>

5/7/12

5/7/12

Variables et oprateurs

Le choix du nom des variables doit respecter les deux rgles suivantes:

le premier caractre ne peut tre quune lettre, un soulign (underscore) ou un dollar, les caractres suivants doivent tre des caractres alphanumriques, des souligns (underscores) ou des dollars.

Pour rappel JavaScript est sensible la case. Attention donc aux majuscules et minuscules!
18 18

5/7/12

Variables et oprateurs
Le

typage des variable nest pas obligatoire en JavaScript. Ainsi on peut changer le type dune variable plusieurs fois lors du mme script. dclarer une variable on utilise le mot cl var . On parle alors dune dclaration explicite: var a=20; on peut directement initier la variable sans le mot cl var (dclaration implicite): a=20;

Pour

Comme

19 19

5/7/12

structures conditionnelles
Les structures conditionnelles en JavaScript sont les mme quen langage C, savoir:
If

else

Oprateur

ternaire (condition)?(traitement1): (traitement2) for while

20 20

Boucle Boucle Les

mots cl break et continue conservent toujours leurs fonctions connues en JavaScript.

5/7/12

Les fonctions
En

JavaScript les fonctions sont dclares et appeles de la mme faon quen C.

Lappel

de la fonction peut seffectuer nimporte o dans le document condition que la dclaration doit tre faite en premier.

Dlaration:
21 21

Function

5/7/12

Les fonctions
Lidentificateur

de la fonction suit les mme rgles que lidentificateur de la variable: est sensible la casse

Il

Les

arguments de la fonction sont facultatifs cependant les parenthses sont obligatoires mme vides. mot cl return permet de passer le rsultat de la fonction dans le reste du script. Il est facultatif.

Le

22 22

5/7/12

Les vnements
JavaScript

est un langage de programmation appel aussi langage vnementiel vu que la majorit de ses scripts sont associs des vnements qui se produisent sur le navigateur. vnements sont des actions de lutilisateur qui vont pouvoir donner lieu une interactivit. L vnement par excellence est le clic de la souris JavaScript il est possible dassocier
23 23

Les

Grce

Liste des vnements:

5/7/12

Click: se produit lorsque lutilisateur clique sur un lment associ lvnement. Load: se produit lorsque le navigateur de lutilisateur charge la page en cours. Unload: se produit lorsque le navigateur de lutilisateur quitte la page en cours. MouseOver: cest lorsque lutilisateur survole (met le curseur de la souris sur) llment associ lvnement. MouseOut: cest lorsque le curseur de la souris quitte llment. Focus: se produit lorsque lutilisateur donne le focus un lment, cest--dire que llment devient actif. Blur: cest lorsque llment perd le focus (il tait actif et il ne lest plus, cest ce moment que cet vnement est dclanch). Change: se produit lorsque lutilisateur modifie le contenu dun champs donn.

24 24

Liste des vnements:

5/7/12

Select: se produit lorsque lutilisateur slectionne un texte (ou une partie dun texte) dans un champs de type text ou textarea. Submit: se produit lorsque lutilisateur clique sur le bouton de la soumission dun formulaire (bouton submit). KeyDown: se produit lorsque lutilisateur enfonce une touche du clavier. KeyUp: cest lorsque lutilisateur relche une touche du clavier. DblClick: se produit lorsque lutilisateur clique deux (double clique) fois sur un lment du navigateur. Resize: quand lutilisateur redimensionne le navigateur. 25 25

5/7/12

Les vnements
Chaque vnement ne peut pas tre associ nimporte quel objet. Par exemple on ne pas appliquer lvnement onChange un lien hypertexte. Ci-dessous un rsum des vnements qui peuvent tre associs aux objets les plus courants:

Lien hypertexte: onClick, onMouseOver, onMouseOut Page du navigateur: onLoad, onUnload Boutons: onClick Liste de selection: onBlur, onFocus, onChange Champs de texte: onBlur, onFocus, onChange, onSelect, onKeyUp, onKeyDown
26 26

Lobjet String

5/7/12

Une chane de caractre (string) est une suite de caractres dlimits par des guillemets (simples ou doubles). Lobjet string possde un ensemble de proprits et mthodes qui peuvent savrer utiles surtout au niveau du traitement des formulaires. En voici les plus importantes :
q q q q

length: Entier qui indique la longueur de la chane de caractres. charAt(): Mthode qui permet daccder un caractre de la chane dsign par lindice pass en paramtre. charCodeAt(): mme que charAt(), sauf quelle renvoie le code ASCI du caractre. indexOf(): Mthode qui renvoie la position dune sous-chane si elle existe dans la chane principale commenant par une position donne. substring(): Mthode qui renvoie une sous chane commenant dune position donne et finissant par une position donne. toLowerCase(): Conversion de la chane en minuscules. toUpperCase(): Conversion de la chane en majuscules.

q q q

27 27

Lobjet String
Exemples : Soit la chane de caractres suivante : Str=Cours de JavaScript;

5/7/12

Str.length renvoie la valeur 19 (19 caractres dans la chane) Str.charAt(1) renvoie la lettre o (lindexation commence de 0) Str.indexOf(de,0) renvoie la valeur 6 (de se trouve en sixime position commenant par la position 0). Si la sous28 28