DynamicHTML DHTML Butlsteffenel/cours/Licence/... · 2014-06-13 · ArnaudRENARD (URCA) DHTML...

DHTMLINFO0406

Arnaud RENARD

[email protected]

Arnaud RENARD (URCA) DHTML [email protected] 1 / 80

Plan

1 Introduction

2 Javascript

3 DOMGestion d’événementsSelection d’élémentsModifications avec DOM

4 AJAXFonctionnementUne première requêteDes exemples

5 JSON

6 jQuery


DHTML et WEB 2.0

HTML dynamique, de l’anglais Dynamic HTML, souvent abrégéDHTML, est un nom générique donné à l’ensemble des techniquesutilisées par l’auteur d’une page web pour que celle-ci soit capable dese modifier elle-même en cours d’affichage :

Les éléments constituant la page peuvent ainsi être modifiés,déplacés, créés ou effacés ;

Une succession rapide de modification peut créer une animation ;

Les style et les contenu des éléments peuvent être modifiéesdynamiquement ;

Les champs de formulaire peuvent être contrôlées ;

Des informations sont échangées entre le navigateur et le serveur.


Objectif

Butrépartir la charge et l’utilisation des ressources

déplacer du traitement sur le clientdéplacer de la mise en forme sur le client

développer l’utilisation de pages WEB dynamiquespermettre un chargement "local" dans la pagepermettre la mise à jour d’une fraction d’un documentinter-agir entre des éléments (images, formulaires) et un serveur


Les technologies mises en oeuvre

HTML pour la structuration

CSS pour la présentation

JavaScript pour traitement sur le client

DOM comme méthode pour manipuler une structure XML

AJAX pour les communications avec le serveur

JSON pour JavaScript Object Notation

JQUERY comme framework Javascript

PHP pour la programmation sur le serveur

Cours de référence en Creative Commons :http ://www.gchagnon.fr/cours/dhtml


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


JavaScript : Historique

C’est un langage orienté objets à prototype, c’est-à-dire que lesbases du langage et ses principales interfaces sont fournies par desobjets qui ne sont pas des instances de classes, mais qui sont chacunéquipés de constructeurs permettant de générer leurs propriétés, etnotamment une propriété de prototypage qui permet d’en générer desobjets héritiers personnalisés.Le langage a été créé en 1995 par Brendan Eich pour le compte deNetscape Communications Corporation. Le langage actuellement à laversion 1.7 est une implémentation du standard ECMA-262. La version1.8 est en développement et intégrera des éléments du langagePython. La version 2.0 du langage est prévue pour intégrer la 4eversion du standard ECMA.


JavaScript : Insertion dans un document

en ligne

<ba l i se onc l i c k = ’ . . . ’ >

interne

< s c r i p t type =" t e x t / j a v a s c r i p t " > . . . < / s c r i p t >

externe

< s c r i p t type =" t e x t / j a v a s c r i p t " s rc = " . . / s c r i p t s / monScript . j s ">

Navigateurs non JavaScript

< s c r i p t type =" t e x t / j a v a s c r i p t ">( . . . )<nosc r ip t >Achetez un nav iga teur ! < / nosc r ip t >

</ s c r i p t >


JavaScript : code convention

espaces, fins de ligne et tabulations ignorées ;

; en fin de ligne ;

// ou /* ... */ pour les commentaires ;

noms de variables et de fonction sensibles à la casse ;

déclaration de variable optionelle (portée globale) ;

déclaration avec var (donc de type undefined, portée bloc) ;

affectation a=b=c=5 ; , += , -= , *= , /= =(expression) ?4 :5 ; ;

opérateurs : + (addition ou concaténation), - , * , / , %, ++ , - - , !,&& , || ;

comparaison : <, <=, > , >= , == , ! = , === (type et valeur) ;

conversion explicite 1=="1" est true ;

évaluation d’expression : eval("a=3+2 ;alert(a) ;").


JavaScript : les types

chaines de caractères :

" . . . \ ’ \ t \ n \ \ "’ ’

nombres (entiers ou flottant) ;

boolean ;

object (orienté prototype) ;

undefined ;

null.

Conversions :

parseInt() et parseFloat() : chaine vers nombre

Number() : objet vers nombre

string() : objet vers chaine


JavaScript : tableaux

/ / tab leau v idevar tableau1 = new Array ( ) ;/ / tab leau de t a i l l e 4var tableau2 = new Array ( 4 ) ;/ / i n i t i a l i s a t i o n du tab leautableau2 = [ " Beurre " , " Con f i t u re " , " Pain " , " Jus de f r u i t " ] ;/ / c r éa t i on e t i n i t i a l i s a t i o nvar tableau3 = new Array ( ’ Beurre ’ , ’ Conf i tu re ’ , ’ Pain ’ ) ;/ / t a i l l e du tab leaua l e r t ( tableau3 . leng th ) ;/ / tab leau mu l t ivar tableau4 = new Array ( 4 ) ;f o r ( i =0; i < tableau4 . leng th ; i ++){

tableau4 [ i ] = newArray (2 ) ;}


JavaScript : test des types

var myFun = new Funct ion ( "5+2 " )var shape=" round "var s ize=1var today=new Date ( )

t ypeo f myFun == ’ func t i on ’t ypeo f shape == ’ s t r i ng ’t ypeo f s ize == ’ number ’t ypeo f today == ’ ob jec t ’t ypeo f don tEx is t == ’ undefined ’t ypeo f t r ue == ’ boolean ’t ypeo f n u l l == ’ ob jec t ’t ypeo f 62 == ’ number ’t ypeo f ’ He l lo world ’ == ’ s t r i ng ’t ypeo f pa rse In t == ’ func t i on ’t ypeo f Date == ’ func t i on ’t ypeo f Funct ion == ’ func t i on ’t ypeo f Math == ’ ob jec t ’t ypeo f Object == ’ func t i on ’t ypeo f S t r i ng == ’ func t i on ’


JavaScript : l’objet String

chaine =" Bonjour ! " ;/ / une p rop r i é t éa l e r t ( chaine . leng th ) ;/ / des méthodeschaine . indexOf ( ’ o ’ ) ; / / 0 ( ou −1)chaine . las t IndexOf ( ’ o ’ ) ; / / 4chaine . charAt ( 5 ) ; / / uchaine . toUppercase ; / / majusculechaine . toLowercase ;chaine . subs t r i ng ( 1 , 4 ) ; / / on jchaine . subs t r ( 1 , 4 ) ; / / onjochaine . subs t r ( 2 ) ; / / n jou r !tab=chaine . s p l i t ( ’ o ’ ) ; / / [ " B" , " n j " , " ur ! " ]chaine . rep lace ( " j ou r " , " s o i r " ) ; / / Bonsoir !

Expressions rationnelles : match et searchAutres objets : Math, Date, window ...


L’objet window

Méthodes utilisables directement.

/ / messagea l e r t ( chaine )

/ / con f i rma t i oni f ( conf i rm ( chaine ) )

a l e r t ( " Bravo " ) ;

/ / va leurquan t i t e=prompt ( " Entrez l a quan t i t é souhai tée : " ) ;a l e r t ( quan t i t e ) ;


Object à prototype

< s c r i p t type =" t e x t / j a v a s c r i p t ">f unc t i on cd ( p_chanteuse , p _ t i t r e ) {

t h i s . chanteuse=p_chanteuse ;t h i s . t i t r e = p _ t i t r e ;t h i s . desc r i p t i on= f unc t i on ( ) {

r e t u rn t h i s . t i t r e +" par "+ t h i s . chanteuse ;}t h i s . laChanteuse = af f icheChanteuse ;

}f unc t i on af f icheChanteuse ( ) {

a l e r t ( t h i s . chanteuse ) ;}t o t o = new cd ( "Madonna " , " Frozen " ) ;a l e r t ( t o t o . t i t r e ) ; / / Frozena l e r t ( t o t o . desc r i p t i on ( ) ) ; / / Frozen par Madonnat o t o . laChanteuse ( ) ; / / Madonna</ s c r i p t >


Tests et boucles

i f ( c==1) { . . . }i f ( c==1) { . . . } e lse { . . . }swi tch ( c ) {

case 1: . . . break ;. . .d e f au l t :. . .

}wh i le ( c<3) {

c++;. . .

}f o r ( i =0; i <3< i ++) { . . . }var tab = new Array (3 ) ;f o r ( element i n tab ) {

element =" t e s t " ;}


Timers

Avec setTimeout

var i =6f unc t i on t e s t ( ) {

a l e r t ( i −−);i f ( i >0)

setTimeout ( " t e s t ( ) " , 1000) ;}t e s t ( ) ;

Avec setInterval

var i =6f unc t i on affAndDec ( ) {

a l e r t ( i −−);i f ( i <0)

c learTimeout ( i d e n t i f i a n t ) ;}var i d e n t i f i a n t = s e t I n t e r v a l ( " affAndDec ( ) " , 1000) ;


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Le DOM, À quoi cela sert-il ?

Le DOM, ou Document Object Model est un standard duW3Cdésignant l’ensemble des techniques permettant à un langage descript (comme JavaScript) d’accéder au contenu d’un document balisé(comme par exemple une page HTML).

Le HTML « standard » est statique. La page est chargée sur lenavigateur de l’internaute, et son affichage est défini une fois pourtoutes. Si l’on revient sur cette page un autre jour, elle n’aura paschangé d’aspect. On peut considérer que le DOM permet d’allerau-delà de cet aspect statique.

Mais ajouter des animations à une page est un acte gratuit etinutile si cela n’apporte rien à l’internaute. Le JavaScript permetd’augmenter le niveau d’interactivité de l’utilisateur, voire deconcevoir des applications en ligne.

Ces animations supplémentaires ne sont traitées que sur lamachine de l’internaute, ce qui allège d’autant les chargesreposant sur le serveur.


Techniques mises en jeu

Le DOM est la conjonction d’un ensemble de techniques, qui sontsupportées par la pluspart des navigateurs.

une vue orientée objet de la page web et de ses éléments.Chaque élément < tag id = ”id_du_tag” > blabla < /tag > estidentifié par son identifiant (l’attribut id) et accessible de manièreunivoque.

la structure entière de la page peut être représentée sous la formed’une arborescence, permettant l’accès direct (et la modification,l’insertion, la suppression) à chacun de ses éléments. C’est àproprement parler cette structure qui constitue le DOM du W3C.

l’appel systématique aux feuilles de style (les CSS) qui permettentune modification précise de l’apparence de chacun des éléments.

le recours éventuel à des langages de script pour la gestion desévénements. Nous nous limiterons au JavaScript.


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Attributs de gestion d’événements

La gestion d’événements (clavier, souris, formulaire, image,navigateur, ...) est un processus complexe si on veut pouvoir tirer partide toutes les possibilités offertes par le DOM. Fort heureusement,lorsqu’il s’agit de coder un effet simple, les attributs HTML définis dansla recommandation du W3C sont suffisants. On trouve :

Les attributs de gestion des boutons de la souris : onclick etondblclick permettent la prise en compte d’un clic simple ou d’undouble clic, tandis que onmousedown et onmouseup détectent siun bouton de la souris a été enfoncé ou relaché.Les attributs de gestion des déplacements de la souris :onmouseover et onmouseout détectent si la souris passe sur laboîte de l’élément courant, ou bien la quitte.Les attributs de gestion du clavier : onkeypress, onkeydown etonkeyup détectent respectivement si l’utilisateur a appuyé puisrelaché, simplement appuyé, ou relaché une touche du clavier.onLoad permet de détecter le chargement de la page et onError laprésence d’erreurs


Les événements

Formulaire et éléments de formulaireonFocus

onBlur : perte du focus

onChange

onClick

onReset

onSelect

onSubmit


Modification des propriétés de style

Un événement permet de déclencher une action, par exemple demodifier localement les propriétés de style d’un élément. On fait alorsappel à l’objet courant this en JavaScript. En voici quelques exemples :

<p onmouseover=" t h i s . s t y l e . co l o r = ’ blue ’ "onmouseout=" t h i s . s t y l e . co l o r = ’ black ’ " > Ceci es t untex te dont l a cou leur va changer au passage dela sou r i s . </p>


Modification des propriétés de style

Dans l’exemple suivant l’utilisation de majuscules permet d’éviterl’utilisation du tiret présent dans la propriété CSS.

<ps t y l e =" pos i t i o n : absolu te ; l e f t :10px ; top :230px ;width :400px "

onmouseover=" t h i s . s t y l e . l e f t = ’100px ’ ;t h i s . s t y l e . top = ’300px ’ ; t h i s . s t y l e . width = ’600px ’ ;t h i s . s t y l e . t e x t A l i g n = ’ center ’ "

oumouseout=" t h i s . s t y l e . l e f t = ’10px ’ ;t h i s . s t y l e . top = ’230px ’ ; t h i s . s t y l e . width = ’400px ’ ;t h i s . s t y l e . t e x t A l i g n = ’ l e f t ’ " >Exemple de tex te. . . .à géométr ie va r i ab l e . </p>


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Pour aller plus loin

Modification d’attributs quelconques : this.src=” ;

Modification de la class : this.className=” ;

Modification du contenu d’un élément : this.innerHTML=” ;

Accès direct aux éléments par leur id :elem = document.getElementById("id_du_tag")

Accès direct aux éléments par leur nom (renvoie une collection) :liens=elem.getElementsByTagName(’a’) ;

Accès direct aux éléments par leur name :liens=elem.getElementsByName(’a’) ;

Accès à l’attribut getAttribute("nom_d_attribut")

variable = document.getAttribute("nom") ;


getElementById

<img id = ’nomImage ’ src = ’ wa i t i ng . g i f ’ / >

<a h re f = ’ \ # ’ onc l i c k = ’document . getElementById ( " nomImage " ) . s rc =" image1 . jpg " ; ’>image1 </a>

<a h re f = ’ \ # ’ onc l i c k = ’document . getElementById ( " nomImage " ) . s rc =" image2 . jpg " ; ’>image2 </a>


getElementsByTagName

<o l i d =" t o t o ">< l i lang =" f r ">Bonjour </ l i >< l i lang ="be"> Bonjour r r < / l i >< l i lang ="us">Hel lo </ l i >< l i lang ="de"> Al lo </ l i >

</ o l >

< s c r i p t type =" t e x t / j a v a s c r i p t ">maOl = document . getElementById ( " t o t o " )var lesElements= maOl . getElementsByTagName ( " l i " ) ;f o r ( var i =0; i < lesElements . leng th ; i ++){

a l e r t ( lesElements . i tem ( i ) . g e t A t t r i b u t e ( " lang " ) ) ;}</ s c r i p t >

Résultat : fr, be, us, de


Accès par les collections

Quatre collections (=tableaux) sont définies.

window.frames

document.forms

document.images

document.links

Particulièrement utile pour les formulaires :

window.document.forms["form1"].checkbox

window.document.forms[0].nom_du_champ.value=’valeurincohérente’ ;

accès au second élément du premier formulaire

document . forms [ 0 ] . elements [ 1 ] . value =" t o t o " ;


Accès aux valeurs des éléments

Valeur des éléments de formulairesvalue

chemin.vers.un.element.value = xxx

Conteneur HTMLinnerText

chemin.vers.un.element.innerText = xxx

innerHTML

chemin.vers.un.element.innerHTML = xxx

Imagesrc

chemin.vers.un.element.src = xxx


Accès par le nom

Nommage successif des éléments

utilisation des noms successifs depuis la racine

<form method="POST" name=" a jax " ac t i on ="" >< inpu t type =" but ton " value ="Submit " onc l i c k =" submitForm ( ) " >< inpu t type =" t e x t " name="dyn " value ="" >

</ form>

pour accéder et modifier le contenu du champ de texte :

document . a jax . dyn . value =" t o t o " ;


Manipulation de l’arborescence

elt est un élément identifié, par exemple, par une méthodegetElementById.

elt.childNodes liste des enfants (tableau).

elt.firstChild premier fils

elt.lastChild dernier fils

elt.previousSibling frêre précédent

elt.nextSibling frêre suivant

elt.parentNode le pêre

Attributs : nodeName (nom du noeud, img, a, ...) et nodeType (type denoeud)Méthodes : hasChildNodes() et hasAttributes()


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Modification dans le DOM

Ce qui est / n’est pas modifiable

appel à des popup

boîte alertnouvelle fenêtre : window.open(...)

possibilité de modifier des éléments conteneursdiv dont on a définit la classe ou l’idspan dont on a définit la classe ou l’id

impossibilité de rajouter des éléments au niveau du document

impossibilité de modifier la structure du documentpossibilité d’accéder et de modifier certains attributs

champs texte des formulairescontenu des listes déroulantes


Ajout d’un élément

div1=document . getElementById ( " parentDiv " ) ;p2=document . getElementById ( " enfantP " ) ;p1=document . createElement ( " p " ) ;d iv1 . i nse r tBe fo re ( p1 , p2 ) ;


Suppression d’un élément

e l t =document . getElementById ( " d iv1 " ) ;e l t _ i n c l u s =document . getElementById ( " para1 " ) ;e l t _ r e j e t e = e l t . removeChild ( e l t _ i n c l u s ) ;

parag2=parag.cloneNode(true)

elt.replaceChild(newChild, oldChild)


Suppression d’un attribut

e l t =document . getElementById ( " top " ) ;a t t r _ a l i g n = e l t . ge tA t t r ibu teNode ( " a l i g n " ) ;e l t . removeAttr ibuteNode ( a t t r _ a l i g n ) ;

Existe aussi : elt.removeAttribute("align")


Manipulation des feuilles de style

Affichage / Suppression d’une règle.

reg le=document . s ty leSheets [ 0 ] . cssRules [ 0 ] ;a l e r t ( " La première règ le est : " + reg le . cssText ) ;a l e r t ( " Et maintenant on l a supprime ! " ) ;document . s ty leSheets [ 0 ] . de le teRule ( reg le ) ;

Ajout d’une règle.

i n dex f i n =document . s ty leSheets [ 0 ] . cssRules . leng th ;new_regle ="p { fon t−f am i l y : Verdana , A r i a l } " ;a l e r t ( "On a jou te l a nouve l le règ le : " + nouve l le_ reg le ) ;document . s ty leSheets [ 0 ] . i nse r tRu le ( new_regle , i n dex f i n ) ;


Ecran, Fenetre et page

resizeTo(width, height) : redimensionner

moveTo(x, y) : déplacer

window.screen.width : largeur de l’écran

window.screen.height : hauteur de l’écran

window.screen.availWidth : largeur de la fenetre

window.screen.availHeight : hauteur de la fenetre

Taille de la page sous IE :

document.body.clientHeight

document.body.clientWidth

Taille de la page sous Firefox :

window.innerHeight

window.innerWidth


Navigateur

On peut accéder à nombre d’informations sur le navigateur à l’aide dela collection navigator de l’objet window.

window.navigator.appName retourne le nom du navigateur.

window.navigator.appVersion retourne le numéro de version dunavigateur ainsi que diverses informations sur le système.

window.navigator.language retourne la langue du navigateur.Cette propriété n’est pas supportée par Internet Explorer.

window.navigator.platform retourne la plateforme sur laquellefonctionne le navigateur (dans le cas de Windows, la chaîneretournée est "Win32").

window.navigator.product retourne le nom du produit (dans le casde Mozilla/FireFox, il s’agit de Gecko).


Navigation

document.lastModified : date et heure de modification

window.history.back() : précédent

window.history.forward() : suivant

window.history.go(index) : déplacement dans l’historique

window.history.length : taille de l’historique

document.referrer : URL de la page précédente

window.location : URL du document


Pop-up : window.open()

popup = window . open ( u r l , ’ t i t r e ’ , op t ions ) ;popup . c lose ( ) ;

Parmi les options :

top=100, left=100 , width=200 , height=100

scrollbars=yes

status=no

menubar=no


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Généralités

AJAXAsynchronous Javascript And XML

ensemble de techniques et de langages existants

dépend de XMLHttpRequest : objet client manipulable avecJavascript

apparu avec I.E. 4

à l’origine un objet Active X microsoft

utilisable sur tous les navigateurs


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Principe

La présentation

gestion de la mise en forme

exploitation de la structure des données

Les événementsinteractions avec les utilisateurs

génération des appels et des requêtes


Synchrone et asynchrone

Exécution synchrone

requête bloquante

aucun traitement sur le client tant que la réponse n’est pasobtenue

risque d’attente indéfinie

mise en place d’un délai de garde

Exécution asynchrone

requête non bloquante

exécution poursuivie sur le client (navigateur)

le client (navigateur) poursuit son code (Javascript, applet, flash...)

mise en place dun callback au retour de la requête

nécessité de connaître l’état de la requête


L’objet de base :XMLHttpRequest

Utilisationpermet l’émission de requêtes vers le serveur

gestion asynchrone des requêtes

polling sur le résultat de la requête

basé sur l’utilisation d’attributs ou de méthodesdépendant des navigateurs :

sur Firefox, Mozilla ... : XMLHttpRequestsur IE : XMLHTTP


XMLHttpRequest : les attributs

Etats : readyState0 : non initialisé

1 : connexion établie

2 : requête reçue

3 : réponse en cours

4 : terminé

status

200 : OK

404 : erreur page non trouvée


XMLHttpRequest : les attributs

Les éléments retournésresponseText

responseXML

changement d’état

onreadystatechange


XMLHttpRequest : les méthodes

openprototype

open (mode , u r l , boolean )

mode : type de la requête (POST, GET)

url : localisation du traitement

true : asynchrone - false : synchrone

sendprototype

send ( chaine )

null pour une commande GET


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Différentes étapes

Mise en place d’une requête1 création de l’objet XMHttpRequest2 mise en place de l’attente / de la fonction de retour3 exécution de la requête


Création de l’objet

Solution de création1 détection du naviagateur

création d’un XMLHttpRequestion sur Firefox ...création d’un XMLHTTP sur IE

2 test des erreurs de créationessai de création d’un XMLHttpRequestionsi erreur essai de création d’un XMLHTTP sur IE


Création par détection du navigateur

i f ( window . XMLHttpRequest ) {/ / F i re fox , Sa fa r i , . . .

xhr = new XMLHttpRequest ( ) ;} e lse {

i f ( window . Act iveXObject ) {/ / I n t e r n e t Exp lorer

xhr = new Act iveXObject ( " M ic roso f t .XMLHTTP " ) ;}

}


Création par gestion des erreur

t r y {/ / Essayer I n t e r n e t Exp lorerxhr = new Act iveXObject ( " M ic roso f t .XMLHTTP " ) ;

} catch ( e ) {/ / en cas d ’ échecxhr = new XMLHttpRequest ( ) : / / Autres nav iga teurs

}


Gestion de la requête

Mise en place d’une fonction de retour

xhr . onreadystatechange = func t i on ( ) {/ / i n s t r u c t i o n s de t r a i t emen t de l a réponse

} ;

Test de l’état de la requête

i f ( xhr . readyState == 4) {/ / Reçu , OK

} e lse {/ / At tendre . . .

}


Emission de la requête

xhr . open ( "GET" , " h t t p : / /www. monurl . com/ la ressource " , t r ue ) ;xhr . send ( n u l l ) ;

Type de la ressource

fichier HTML

fichier texte

élément issu d’une exécution sur le serveur (PHP, ASP, JSP, CGI...)

fichier XML


Exemple complet

<html ><head><sc r i p t >f unc t i on submitForm ( ) {

var xhr ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {

t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ) {

t r y { xhr = new XMLHttpRequest ( ) ; }catch ( e3 ) { xhr = f a l s e ; }

}}

xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4 ) {

i f ( xhr . s ta tus == 200) document . a jax . dyn . value ="Received : " + xhr . responseXML ;e lse document . a jax . dyn . value =" Er ro r code " + xhr . s ta tus ;

}} ;

xhr . open ( "GET" , " data . xml " , t r ue ) ;xhr . send ( n u l l ) ;

}</ s c r i p t ></head><body>

<form method="POST" name=" a jax " ac t i on ="" >< inpu t type =" but ton " value ="Submit " onc l i c k =" submitForm ( ) " >< inpu t type =" t e x t " name="dyn " value ="" >

</ form></body></ html >


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


Modification d’un champ de formulaire

Principe

définition d’un formulaire (aj) composé :un champ de texte (t)un bouton (événement onClick)

définition de la fonction de traitementcréation de l’objetrécupération d’un fichier sur le serveurmodification du contenu du champ texte



<html > <head> <sc r i p t >f unc t i on execAJAX ( ){

var xhr ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ){ t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }

catch ( e2 ){ t r y { xhr = new XMLHttpRequest ( ) ; }

catch ( e3 ) { xhr = f a l s e ; }}

}xhr . onreadystatechange = func t i on ( ){

i f ( xhr . readyState == 4){

i f ( xhr . s ta tus == 200){ document . a j . t . value = xhr . responseText ; }e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }

}} ;

xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / ex2 . t x t " , t r ue ) ;xhr . send ( n u l l ) ;

}</ s c r i p t > </head><body>

<form name=" a j ">< inpu t type =" t e x t " name=" t ">< inpu t type =" but ton " onCl ick =" j a v a s c r i p t : execAJAX ( ) " value =" c l i quez i c i "></ form>

</body></ html >


Modification d’un texte

Principe

définition d’un div :définition de l’attribut id

définition de la fonction de traitementcréation de l’objetrécupération de l’accès au divrécupération d’un fichier sur le serveurmodification du contenu du div



<html ><head> <sc r i p t >f unc t i on execAJAX ( ) {

var xhr ;var zone = document . getElementById ( " mon_div " ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {



}}


i f ( xhr . s ta tus == 200){ zone . innerHTML = xhr . responseText ;} e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }

}} ;

xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / ex2 . t x t " , t r ue ) ;xhr . send ( n u l l ) ;

}</ s c r i p t ></head><body>

<p> <a h re f ="#" onCl ick ="execAJAX ( ) " > c l i quez i c i </a> </p><d iv i d ="mon_div "> l a va leur d ’ o r i g i n e </ div >

</body> </ html >


Mise en place de HTML

Principe

définition d’un div :définition de l’attribut id

définition de la fonction de traitementcréation de l’objetrécupération de l’accès au divrécupération d’un fichier HTML sur le serveurmodification du contenu du div


Le fichier HTML

tableau.html

< tab le border ="1" >< t r ><th > nom </ th ><th > prénom </ th ></ t r >< t r ><td > Renard </ td ><td > Arnaud </ td ></ t r >< t r ><td > S te f f ene l </ td ><td > Luiz−Angelo </ td ></ t r ></ tab le >


Mise en place de HTML

<html ><head><sc r i p t >f unc t i on execAJAX ( ) {

var xhr ;var zone = document . getElementById ( " mon_div " ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {



}}


i f ( xhr . s ta tus == 200){ zone . innerHTML = xhr . responseText ;} e lse { a l e r t ( " E r ro r code " + xhr . s ta tus ) ; }

}} ;

xhr . open ( "GET" , " h t t p : / / 192 .168 .30 .130 /~ arnaud / Info0406 / Cours3 / tab leau . html " , t r ue ) ;xhr . send ( n u l l ) ;

}</ s c r i p t ></head><body><p> <a h re f ="#" onCl ick ="execAJAX ( ) " > c l i quez i c i </a> </p>

<d iv i d ="mon_div "> l a va leur d ’ o r i g i n e </ div ></body></ html >


Paramètres des requêtes et traitement serveur

Principe

utilisation d’un URL GETutilisation d’un formulaireconstruction de la requête partir des informations collectées dansle formulaire

requête vers un script PHPrécupération des paramètres de la requêtetraitement sur le serveur

affichage dans le div sur le client


Le script PHP

<?php$tex te = $_GET [ " t ex te " ] ;echo "<p> vous avez é c r i t : " . $ tex te . " < / p > " ;?>


Le code javascript

<html ><head><sc r i p t >f unc t i on execAJAX ( ) {

var xhr ;var zone = document . getElementById ( " amod i f i e r " ) ;var requete = " h t t p : / / 192 . 168 . 30 . 130 / t r a i t . php? tex te =" + document . a j . t . value ;a l e r t ( requete ) ;t r y { xhr = new Act iveXObject ( ’ Msxml2 .XMLHTTP ’ ) ; }catch ( e ) {

t r y { xhr = new Act iveXObject ( ’ M ic roso f t .XMLHTTP ’ ) ; }catch ( e2 ){


}}

xhr . onreadystatechange = func t i on ( ) {i f ( xhr . readyState == 4){

i f ( xhr . s ta tus == 200){zone . innerHTML = xhr . responseText ;

} e lse {a l e r t ( " E r ro r code " + xhr . s ta tus ) ;

}}

} ;

xhr . open ( "GET" , requete , t r ue ) ;xhr . send ( n u l l ) ;

}


Le fichier HTML

</ s c r i p t ></head>

<body><form name=" a j "><p> ent rez vo t re t ex te : < i npu t type =" t e x t " name=" t "> </p>< inpu t type =" but ton " onCl ick =" j a v a s c r i p t : execAJAX ( ) " value =" c l i quez i c i "></ form><d iv i d =" amod i f i e r "> l e t ex te d ’ o r i g i n e </ div >

</body></ html >


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


JavaScript Object Notation

Format de données textuel, générique, dérivé de la notation des objetsdu langage ECMAScript, afin de représenter de l’informationstructurée. Il est décrit par la RFC 4627 de l’IETF.Un document JSON ne comprend que deux éléments structurels :

des ensembles de paires nom / valeur(pas de différence entre attriuts et éléments de XML) ;

des listes ordonnées de valeurs.

Ces mêmes éléments représentent 3 types de données :

Numérique : nombres entiers ou à virgule : 18, 3.1415 ;

Booléen : true ou false ;

Chaîne de caractères : suite de caractères Unicode, encadrés pardes guillemets doubles ;

null ;

tableau et tableau associatif ( chaîne : donnée )


Exemple JSON

{"menu " : {

" i d " : " f i l e " ," value " : " F i l e " ," popup " : {

"menuitem " : [{ " value " : "New" , " onc l i c k " : "CreateNewDoc ( ) " } ,{ " value " : "Open" , " onc l i c k " : "OpenDoc ( ) " } ,{ " value " : " Close " , " onc l i c k " : " CloseDoc ( ) " }

]}

}}


JSON en PHP

Entension à installer.

json_decode : Decodes a JSON string

json_encode : Returns the JSON representation of a value

$val = ar ray ( " abc " => 12 ," foo " => " bar " ," bool0 " => fa lse ," bool1 " => t rue ," a r r " => ar ray (1 , 2 , 3 , nu l l , 5 ) ," f l o a t " => 1.2345

) ;$output = json_encode ( $va l ) ;echo $output . " \ n " ;

Résultat :

{ " abc " : 12 , " foo " : " bar " , " bool0 " : fa l se , " bool1 " : t rue ," a r r " : [ 1 , 2 , 3 , nu l l , 5 ] , " f l o a t " : 1.234500 }


JSON en JavaScript

A partir d’une chaine de caractère

var strPersonne = " {nom: ’ S te f fene l ’ ,prenom : ’ Luiz−Angelo ’ } " ;

var personne = eval ( ’ ( ’ + strPersonne + ’ ) ’ ) ;

Ou directement

var personne = {nom: ’ S te f fene l ’ ,prenom : ’ Luiz−Angelo ’

} ;

Manipulation comme un tableau.


Plan

1 Introduction

2 Javascript



5 JSON

6 jQuery


jQuery

Query est une bibliothèque Javascript libre qui porte sur l’interactionentre JavaScript (comprenant AJAX) et HTML, et a pour but desimplifier des commandes communes de Javascript et d’assurer leurcompatibilité avec les principaux navigateurs. jQuery se présentecomme un unique fichier de 19 ko.Le framework contient notamment les fonctionnalités suivantes :

Parcours et modification du DOM (y compris le support des CSS 1à 3 et un support basique de XPath) ;

Événements ;

Effets et animations ;

Manipulations des feuilles de style en cascade (ajout/suppressiondes classes, d’attributs, ...) ;

AJAX ;

Plugins ;

Utilitaires (version du navigateur, ...).


jQuery

à suivre


DynamicHTML DHTML Butlsteffenel/cours/Licence/... · 2014-06-13 · ArnaudRENARD (URCA) DHTML...

Documents

Transcript of DynamicHTML DHTML Butlsteffenel/cours/Licence/... · 2014-06-13 · ArnaudRENARD (URCA) DHTML...