10:57:52 programmation web 2012-2013 1 programmation web : dom / javascript jérôme cutrona...

03:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013 11

Programmation Web :Programmation Web :DOM / JavaScriptDOM / JavaScript

Jérôme CUTRONAJérôme CUTRONA

[email protected]@univ-reims.fr

2203:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013

DOM = Document Object ModelDOM = Document Object Model

API (Application Programming Interface) pour la API (Application Programming Interface) pour la manipulation de HTML / XMLmanipulation de HTML / XML

Définit la structure logique des documentsDéfinit la structure logique des documents Définit la façon d’y accéder, de la manipulerDéfinit la façon d’y accéder, de la manipuler

Créer des documentsCréer des documentsParcourir leur structureParcourir leur structureAjouter, effacer, modifier des élémentsAjouter, effacer, modifier des élémentsAjouter, effacer, modifier leur contenuAjouter, effacer, modifier leur contenu


Qu’est-ce que le DOM ?Qu’est-ce que le DOM ?

<<tabletable>>

<<tbodytbody>>

<<trtr><><tdtd>>Shady GroveShady Grove</</tdtd>>

<<tdtd>>AeolianAeolian</</tdtd>>

</</trtr>>

<<trtr><><tdtd>>Over the River, CharlieOver the River, Charlie</</tdtd>>

<<tdtd>>DorianDorian</</tdtd>>

</</trtr>>

</</tbodytbody>>

</</tabletable>>


Qu’est-ce que le DOM ?Qu’est-ce que le DOM ?

Représentation arborescente du documentReprésentation arborescente du document Modèle objet (structure + méthodes)Modèle objet (structure + méthodes) Permet la manipulation du documentPermet la manipulation du document Une implémentation : JavaScript…Une implémentation : JavaScript… … … Des implémentations :Des implémentations :

JavaScript IEJavaScript IE JavaScript Mozilla / FirefoxJavaScript Mozilla / Firefox JavaScript OperaJavaScript Opera ……


JavaScript : PrincipeJavaScript : Principe

Langage de script objetLangage de script objet Syntaxe style C / C++ / JavaSyntaxe style C / C++ / Java Sensible à la casseSensible à la casse N’est PAS du JavaN’est PAS du Java Exécuté par le client WebExécuté par le client Web Peut être désactivé sur le clientPeut être désactivé sur le client Nombreux objets pour la manipulation HTMLNombreux objets pour la manipulation HTML Gestion des événements HTMLGestion des événements HTML Rendre les pages dynamiques (HTML+CSS+JS)Rendre les pages dynamiques (HTML+CSS+JS) Haut niveau d’incompatibilité…Haut niveau d’incompatibilité…

JavaScript : Balise scriptJavaScript : Balise script

<<scriptscript typetype=="text/javascript""text/javascript" languagelanguage=="JavaScript""JavaScript">>

// -->

</</scriptscript>>

<<scriptscript typetype=="text/javascript""text/javascript" languagelanguage=="JavaScript""JavaScript" srcsrc=="URI""URI">>

</</scriptscript>>

Masquer le script aux Masquer le script aux navigateurs non compatibles navigateurs non compatibles

avec JavaScriptavec JavaScript

JavaScript : ExempleJavaScript : Exemple

<<htmlhtml>> <<headhead>> <<titletitle>>Ma première page WebMa première page Web</</titletitle>> </</headhead>> <<bodybody>> <<scriptscript typetype=="text/javascript""text/javascript" languagelanguage=="JavaScript""JavaScript">>

// --> </</scriptscript>></</bodybody>></</htmlhtml>>


VariablesVariables

Déclaration de variables facultativeDéclaration de variables facultative Variables non typées à la déclarationVariables non typées à la déclaration

varvar nom_variablenom_variable ; ; Typage dynamique à l’affectationTypage dynamique à l’affectation Types gérés:Types gérés:

Nombres (Nombres (10, 3.1410, 3.14)) Booléens (Booléens (truetrue, , falsefalse)) Chaînes (Chaînes ("Salut !""Salut !", , 'Salut !' 'Salut !' )) nullnull undefinedundefined


Structures conditionnellesStructures conditionnelles

ifif ((conditioncondition))

{{

instructions ;instructions ;

}}

[ [ elseelse

{{


} } ]]


Structures conditionnellesStructures conditionnelles

switchswitch ((expressionexpression))

{{ casecase étiquetteétiquette ::

instructions ;instructions ; breakbreak ; ; casecase étiquetteétiquette ::

instructions ;instructions ; breakbreak ; ; defaultdefault ::

instructions ;instructions ;}}


Structures itérativesStructures itératives

whilewhile ((conditioncondition))

{{


}}

dodo

{{


}}

whilewhile ((conditioncondition)) ; ;


Structures itérativesStructures itératives

forfor ((instr ;instr ; condition ; instrcondition ; instr))

{{


}}

forfor ((variable variable inin objet objet))

{{


}}


CommentairesCommentaires

// Commentaire ligne// Commentaire ligne

/* Commentaire multi-lignes *//* Commentaire multi-lignes */


FonctionsFonctions

Valeur de retour non typéeValeur de retour non typée Arguments non typésArguments non typés

// Déclaration// Déclaration

functionfunction ma_fonctionma_fonction((argumentsarguments))

{{


returnreturn quelque_chose; quelque_chose; // ou pas… // ou pas…

}}

ma_fonctionma_fonction((1212) ; ) ; // Appel// Appel


Objets prédéfinisObjets prédéfinis

windowwindow alert(alert(messagemessage))

// Message d’avertissement// Message d’avertissement

confirm(confirm(messagemessage))

// Message de confirmation : retourne // Message de confirmation : retourne true ou falsetrue ou false

prompt(prompt(messagemessage, , valeur_par_défautvaleur_par_défaut))

// Boîte de saisie : retourne la chaîne // Boîte de saisie : retourne la chaîne saisiesaisie


Objets prédéfinisObjets prédéfinis

documentdocument write(write(messagemessage))

// Ecrire dans le document// Ecrire dans le document

writeln(writeln(messagemessage))

// Ecrire dans le document (retour à la // Ecrire dans le document (retour à la ligne)ligne)


Chaînes : Propriétés & MéthodesChaînes : Propriétés & Méthodes

PropriétésPropriétés lengthlength ……

MéthodesMéthodes charAt(charAt(indexindex)) charCodeAt(charCodeAt(indexindex)) concat(concat(chaine2chaine2, , chaine3chaine3, …), …) fromCharCode(fromCharCode(code1code1, , code2code2, …), …) indexOf(indexOf(aiguilleaiguille[, [, indexindex])]) lastIndexOf(lastIndexOf(aiguilleaiguille[, [, indexindex])]) match(match(expr_regexpr_reg))


Chaînes : ExemplesChaînes : Exemples

varvar s = s = "Bon anniversaire Benjamin""Bon anniversaire Benjamin" ; ;document.write(s.charAt(document.write(s.charAt(22)) ;)) ; nndocument.write(s.charCodeAt(document.write(s.charCodeAt(22)) ;)) ; 110110document.write(s.concat(document.write(s.concat(" du groupe C12"" du groupe C12")) ;)) ; Bon anniversaire Benjamin du groupe C12Bon anniversaire Benjamin du groupe C12document.write(String.fromCharCode(document.write(String.fromCharCode(4949, , 5050)) ;)) ; 1212document.write(s.indexOf(document.write(s.indexOf("Benjamin""Benjamin")) ;)) ; 1717document.write(s.lastIndexOf(document.write(s.lastIndexOf("a""a")) ;)) ; 2121document.write(s.match(document.write(s.match(/Benjamin$//Benjamin$/)) ;)) ; BenjaminBenjamin ((null si non trouvénull si non trouvé))


Chaînes : MéthodesChaînes : Méthodes

MéthodesMéthodes replace(replace(expr_reg, nouvelle_chaineexpr_reg, nouvelle_chaine)) search(search(expr_regexpr_reg)) slice(slice(debutdebut[, [, finfin])]) split(split(separateurseparateur[, [, limitelimite])]) substr(substr(debutdebut[, [, tailletaille])]) substring(substring(debutdebut, , finfin)) toLowerCase()toLowerCase() toUpperCase()toUpperCase()

OpérateursOpérateurs ++


Chaînes : ExemplesChaînes : Exemples

varvar s = s = "Bon anniversaire Benjamin""Bon anniversaire Benjamin" ; ;document.write(s.replace(document.write(s.replace(/i/g/i/g, , 'I''I')) ;)) ; Bon annIversaIre BenjamInBon annIversaIre BenjamIndocument.write(s.search(document.write(s.search(/n{2}/i/n{2}/i)) ;)) ; 55document.write(s.slice(document.write(s.slice(1717)) ;)) ; BenjaminBenjamindocument.write(s.split(document.write(s.split(" "" ")) ;)) ; Bon,anniversaire,BenjaminBon,anniversaire,Benjamindocument.write(s.substr(document.write(s.substr(44, , 1212)) ;)) ; anniversaireanniversairedocument.write(s.substring(document.write(s.substring(44, , 1616)) ;)) ; anniversaireanniversairedocument.write(s.toUpperCase()+s.toLowerCase()) ;document.write(s.toUpperCase()+s.toLowerCase()) ; BON ANNIVERSAIRE BENJAMINbon anniversaire benjaminBON ANNIVERSAIRE BENJAMINbon anniversaire benjamin


Objet Objet MathMath

PropriétésPropriétés E, LN10, LN2, LOG10E, LOG2E, PI, E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2SQRT1_2, SQRT2

MéthodesMéthodes abs(abs(valval)) acos(acos(valval), cos(), cos(valval), …), … exp(exp(valval), log(), log(valval)) floor(floor(valval), round(), round(valval), ceil(), ceil(val)val) max(max(val1val1, , val2val2), min(), min(val1val1, , val2val2)) pow(pow(valval, , puisspuiss), sqrt(), sqrt(valval)) random() // 0 random() // 0 1 1


Objet Objet MathMath : Exemples : Exemples

document.write(document.write(115115..0404++1515) ;) ; 130.04000000000002130.04000000000002 ((Euh ?...Euh ?...))document.write(Math.PI) ;document.write(Math.PI) ; 3.1415926535897933.141592653589793document.write(Math.abs(document.write(Math.abs(-12-12..3434)) ;)) ; 12.3412.34document.write(Math.floor(document.write(Math.floor(1212..5454)) ;)) ; 1212document.write(Math.round(document.write(Math.round(1212..5454)) ;)) ; 1313document.write(Math.ceil(document.write(Math.ceil(1212..5454)) ;)) ; 1313document.write(Math.random()) ;document.write(Math.random()) ; 0.3945558316556890.394555831655689


Propriétés & Fonctions supérieuresPropriétés & Fonctions supérieures

PropriétésPropriétés Infinity, NaN, undefinedInfinity, NaN, undefined

FonctionsFonctions eval(eval(chainechaine)) isFinite(isFinite(nombrenombre)) isNaN(isNaN(objetobjet)) parseFloat(parseFloat(chainechaine)) parseInt(parseInt(chainechaine)) escape(escape(chainechaine)) unescape(unescape(chainechaine))


document.write(eval(document.write(eval("Math.pow(3+2, 2)""Math.pow(3+2, 2)")) ;)) ; 2525document.write(isFinite(Math.log(document.write(isFinite(Math.log(00))) ;))) ; falsefalsedocument.write(isNaN(document.write(isNaN("abcd""abcd")) ;)) ; truetruedocument.write(document.write("12.34""12.34"++22) ;) ; 12.34212.342document.write(parseFloat(document.write(parseFloat("12.34""12.34")+)+22) ;) ; 14.3414.34document.write(escape(document.write(escape("Bon anniversaire""Bon anniversaire")) ;)) ; Bon%20anniversaireBon%20anniversairedocument.write(unescape(document.write(unescape("Bon%20anniversaire""Bon%20anniversaire")) ;)) ; Bon anniversaireBon anniversaire

Propriétés & Fonctions supérieuresPropriétés & Fonctions supérieures


TableauxTableaux

Objet ArrayObjet Array DéclarationDéclarationvarvar tab1 = tab1 = newnew Array( Array(tailletaille) ;) ;varvar tab2 = tab2 = newnew Array( Array(11,, "a""a",, 9 9,, … …) ;) ;

index index 0 1 2 … 0 1 2 … UtilisationUtilisationwindow.alert(tab2[window.alert(tab2[00]) ;]) ; // 1 // 1tab2[tab2[22] = 6] = 6 // 6 remplace 9 // 6 remplace 9

Accroissement automatique de la tailleAccroissement automatique de la taillevarvar tab1 = tab1 = newnew Array( Array(22) ;) ;tab1[tab1[200200] = ] = 55 ; ;


TableauxTableaux

ParcoursParcours

varvar tab2 = tab2 = newnew Array( Array(11,, "a""a",, 9 9) ;) ;

tab2[tab2[200200] = ] = 1212 ; ;

for (i in tab2)for (i in tab2)

window.alert(window.alert("tab2[" "tab2[" + i + + i + "] = ""] = "

+ tab2[i]) ;+ tab2[i]) ;

// tab2[0] = 1// tab2[0] = 1

// tab2[1] = a// tab2[1] = a

// tab2[2] = 9// tab2[2] = 9

// tab2[200] = 12// tab2[200] = 12


Tableaux : Propriétés & MéthodesTableaux : Propriétés & Méthodes

PropriétésPropriétés lengthlength ……

MéthodesMéthodes concat(concat(tab2tab2, , tab3tab3, …), …) join(join(séparsépar)) pop()pop() push(push(val1val1, , val2val2, …), …) shift()shift() unshift(unshift(val1val1, , val2val2, …), …) slice(slice(débutdébut[, [, finfin])])


Contrôle de formulairesContrôle de formulaires

Vérifier la cohérence de la saisieVérifier la cohérence de la saisie Contrôles sur le clientContrôles sur le client Évite les transmissions client / serveurÉvite les transmissions client / serveur Contrôles possibles:Contrôles possibles:

Présence de valeurPrésence de valeur Numérique / ChaîneNumérique / Chaîne Expressions régulièresExpressions régulières

Événement Événement onSubmitonSubmit


Contrôle de formulairesContrôle de formulaires

<<htmlhtml><><headhead><><titletitle>>ContrôleContrôle</</titletitle>>

<<script script typetype=="text/javascript""text/javascript">>

function function verifverif() {() {

ifif (document.formu.txt.value !=(document.formu.txt.value != ''''))

returnreturn window.confirm( window.confirm('Envoyer ?''Envoyer ?') ;) ;

returnreturn false ; false ; }}

</</scriptscript></></headhead><><bodybody>>

<<formform namename=="formu""formu" actionaction=="URI""URI" methodmethod=="GET" "GET" onSubmit="onSubmit="returnreturn verif() ;" verif() ;">>

<<inputinput typetype=="text""text" namename=="txt""txt">>

<<inputinput typetype=="submit""submit" valuevalue=="Envoyer""Envoyer">>

</</formform></></bodybody></></htmlhtml>>


Formulaires : Propriétés & MéthodesFormulaires : Propriétés & Méthodes

PropriétésPropriétés actionaction elementselements encodingencoding lengthlength methodmethod namename targettarget

MéthodesMéthodes reset()reset() submit()submit()


Objets Objets commandescommandes de formulaires de formulaires

TextText TextareaTextarea HiddenHidden PasswordPassword CheckBoxCheckBox Radio (/!\ tableau de /!\)Radio (/!\ tableau de /!\) Submit / ResetSubmit / Reset SelectSelect OptionOption FileUploadFileUpload


Formulaires : ExempleFormulaires : Exemple

<<formform namename=='formu''formu' onSubmit='return verif(onSubmit='return verif(thisthis););''>> <<inputinput typetype=='text''text' namename=='texte''texte'><><brbr>> <<selectselect namename=='sel''sel'>> <<optionoption>>?? <<optionoption valuevalue==11>>UnUn <<optionoption valuevalue==22>>DeuxDeux</</selectselect><><brbr>> <<inputinput typetype=='radio''radio' namename=='rad''rad' idid=='rad1''rad1'>> <<labellabel forfor=='rad1''rad1'>>ouioui</</labellabel>> <<inputinput typetype=='radio''radio' namename=='rad''rad' idid=='rad2''rad2'>> <<labellabel forfor=='rad2''rad2'>>nonnon</</labellabel><><brbr>> <<inputinput typetype=='checkbox''checkbox' namename=='chk''chk' idid=='chk1''chk1'>> <<labellabel forfor=='chk1''chk1'>>OKOK</</labellabel><><brbr>> <<inputinput typetype=='submit' 'submit' valuevalue=='Envoyer''Envoyer'>></</formform>>


Formulaires : accès aux champsFormulaires : accès aux champs

<<formform namename=='formu''formu' onSubmit='return verif(onSubmit='return verif(thisthis););''>> <<inputinput typetype=='text''text' namename=='texte''texte'> ...> ...<<scriptscript typetype=="text/javascript""text/javascript">>functionfunction verif(f) verif(f) {{

... f.texte.value ; ... f.texte.value ; }}</</scriptscript>>

<<formform namename=='formu''formu' onSubmit='return verif();onSubmit='return verif();''>> <<inputinput typetype=='text''text' namename=='texte''texte'> ...> ...<<scriptscript typetype=="text/javascript""text/javascript">>functionfunction verif(f) verif(f) {{ ... document.formu.texte.value ;... document.formu.texte.value ; ... document.forms[0].elements[0].value ;... document.forms[0].elements[0].value ; ... document.forms[... document.forms["formu""formu"].elements[].elements["texte""texte"].value ; ].value ;

}}</</scriptscript>>

Objet formulaireObjet formulaire

Nom du champ Nom du champ objet champ texte objet champ texte

Index du formulaire dans la pageIndex du formulaire dans la page

Index du champ dans le formulaireIndex du champ dans le formulaire

Nom du formulaire Nom du formulaire objet formulaire objet formulaire

Nom du champ dans le formulaireNom du champ dans le formulaire

Tableau des formulaires de la pageTableau des formulaires de la page

Tableau des champs du formulaireTableau des champs du formulaire

Nom du formulaire dans la pageNom du formulaire dans la page

Nom du champ dans le formulaireNom du champ dans le formulaire


Formulaires : ExempleFormulaires : Exemple

<<scriptscript typetype=="text/javascript""text/javascript">>functionfunction verif(f) verif(f){{ window.alert(f.texte.value) ;window.alert(f.texte.value) ; window.alert(f.sel.selectedIndex) ;window.alert(f.sel.selectedIndex) ; window.alert(f.sel[f.sel.selectedIndex].text) ;window.alert(f.sel[f.sel.selectedIndex].text) ; window.alert(f.sel[f.sel.selectedIndex].value) ;window.alert(f.sel[f.sel.selectedIndex].value) ; window.alert(f.rad[window.alert(f.rad[00].checked) ;].checked) ; window.alert(f.chk.checked) ;window.alert(f.chk.checked) ; return return falsefalse ; ;}}</</scriptscript>>


Expressions rationnellesExpressions rationnelles

Expressions rationnelles / régulièresExpressions rationnelles / régulières /modele/drapeaux (drapeaux: g, i, gi)/modele/drapeaux (drapeaux: g, i, gi) new RegExp("modele"[, "drapeaux"])new RegExp("modele"[, "drapeaux"])

ModèlesModèles ^̂ : début de : début de $$ : fin de : fin de ** : 0 à n fois : 0 à n fois ++ : 1 à n fois : 1 à n fois ?? : 0 à 1 fois : 0 à 1 fois .. : un caractère sauf retour chariot : un caractère sauf retour chariot || : ou : ou



ModèlesModèles (x)(x) : : xx et mémorise et mémorise {n}{n} : : nn fois fois {n,}{n,} : au moins : au moins nn fois fois {n,m}{n,m} : de : de nn à à mm fois fois [xyz][xyz] : 1 élément de la liste : 1 élément de la liste [a-z][a-z] : 1 élément de la série : 1 élément de la série [^xyz][^xyz] : 1 élément n'étant pas dans la liste : 1 élément n'étant pas dans la liste [^a-z][^a-z] : 1 élément n'étant pas dans la série : 1 élément n'étant pas dans la série \b\b : frontière de mot : frontière de mot \B\B : non frontière de mot : non frontière de mot



ModèlesModèles \d = [0-9]\d = [0-9]: chiffre: chiffre \D = [^0-9]\D = [^0-9]: non chiffre: non chiffre \n\n : retour à la ligne : retour à la ligne \s\s : séparateur de mot : séparateur de mot \S\S : non séparateur de mot : non séparateur de mot \t\t : tabulation : tabulation \w = \w = [A-Za-z0-9_][A-Za-z0-9_] : 1 caractère alphanumérique : 1 caractère alphanumérique

MéthodesMéthodes test(test(chainechaine))


Expressions rationnelles : ExemplesExpressions rationnelles : Exemples

<<scriptscript typetype=="text/javascript""text/javascript">>document.write(document.write(/l//l/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^l//^l/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^h//^h/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^h/i/^h/i.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^Hel.o//^Hel.o/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^Hel+o//^Hel+o/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^He+llo//^He+llo/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^Hea*llo$//^Hea*llo$/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^He(l|o)*$//^He(l|o)*$/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^H[leos]+//^H[leos]+/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^H[^leo]+//^H[^leo]+/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^H[^kyz]+//^H[^kyz]+/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^H[a-z]*//^H[a-z]*/.test(.test('Hello''Hello')) ;)) ;document.write(document.write(/^H[a-z]*$//^H[a-z]*$/.test(.test('Hello''Hello')) ;)) ;

</</scriptscript>>

truetruefalsefalsefalsefalsetruetruetruetruetruetruetruetruetruetruetruetruetruetruefalsefalsetruetruetruetruetruetrue

Dates : Propriétés & MéthodesDates : Propriétés & Méthodes

MéthodesMéthodes ConstructeurConstructeur getDay(), attention de 0 (dimanche) à 6 (samedi)…getDay(), attention de 0 (dimanche) à 6 (samedi)… getDate() / setDate()getDate() / setDate() getMonth() / setMonth(), attention de 0 à 11…getMonth() / setMonth(), attention de 0 à 11… getHours()/ setHours()getHours()/ setHours() getMinutes() / setMinutes()getMinutes() / setMinutes() getTime() / setTime()getTime() / setTime() getYear() / setYear() / getFullYear() / setFullYear()getYear() / setYear() / getFullYear() / setFullYear() parse()parse()


Dates : ExemplesDates : Exemples

varvar today = today = newnew Date()Date()

documentdocument.write(today) ;.write(today) ;

varvar birthday = birthday = newnew Date(Date("December 17, 1995 "December 17, 1995 03:24:00")03:24:00")

documentdocument.write(birthday) ;.write(birthday) ;

birthday = birthday = newnew Date(95Date(95,11,17),11,17)


birthday = birthday = newnew Date(95Date(95,11,17,3,24,0),11,17,3,24,0)


documentdocument.write(birthday.getDay()) ;.write(birthday.getDay()) ;

documentdocument.write(birthday.getDate()) ;.write(birthday.getDate()) ;

birthday.setDate(25) ;birthday.setDate(25) ;



Tue Nov 02 2010 00:11:36 GMT+0100Tue Nov 02 2010 00:11:36 GMT+0100

Sun Dec 17 1995 03:24:00 GMT+0100Sun Dec 17 1995 03:24:00 GMT+0100



00

1717

Mon Dec 25 1995 03:24:00 GMT+0100Mon Dec 25 1995 03:24:00 GMT+0100

Dates : ExemplesDates : Exemples

documentdocument.write(birthday.getMonth()) ;.write(birthday.getMonth()) ;

birthday.setMonth(10) ;birthday.setMonth(10) ;


documentdocument.write(birthday.getYear()) ;.write(birthday.getYear()) ;

birthday.setYear(96) ;birthday.setYear(96) ;


documentdocument.write(birthday.getFullYear()) ;.write(birthday.getFullYear()) ;

birthday.setFullYear(2010) ;birthday.setFullYear(2010) ;


documentdocument.write(.write(DateDate.parse(.parse("Aug 9, 1995"))"Aug 9, 1995")) ; ;


1111

Sat Nov 25 1995 03:24:00 GMT+0100Sat Nov 25 1995 03:24:00 GMT+0100

9595

Mon Nov 25 1996 03:24:00 GMT+0100Mon Nov 25 1996 03:24:00 GMT+0100

19961996

Thu Nov 25 2010 03:24:00 GMT+0100Thu Nov 25 2010 03:24:00 GMT+0100

807919200000807919200000


Images : Propriétés & MéthodesImages : Propriétés & Méthodes

PropriétésPropriétés completecomplete widthwidth heightheight namename srcsrc ……

MéthodesMéthodes constructeurconstructeur

Image()Image() Image(Image(largeurlargeur, , hauteurhauteur))


Images: ExemplesImages: Exemples

<<scriptscript typetype=="text/javascript""text/javascript">>// Une image// Une imagerouge = rouge = newnew Image( Image(100100, , 100100) ;) ;rouge.src = rouge.src = 'rouge.gif''rouge.gif' ; ; // Préchargement// Préchargement

// Une autre image// Une autre imagevert = vert = newnew Image( Image(100100, , 100100) ;) ;vert.src = vert.src = 'vert.gif''vert.gif' ; ; // Préchargement// Préchargement

// Modification de la 13e image de la page Web// Modification de la 13e image de la page Webdocument.images[document.images[1212].src = rouge.src ;].src = rouge.src ;

// Modification de la 15e image de la page Web// Modification de la 15e image de la page Webdocument.images[document.images[1414].src = rouge.src ;].src = rouge.src ;</</scriptscript>>

Relations entre code HTML et DOMRelations entre code HTML et DOM

Deux visions, normalement concordantes :Deux visions, normalement concordantes : Le code HTML produit par le concepteurLe code HTML produit par le concepteur L’interprétation qui en faite par le navigateurL’interprétation qui en faite par le navigateur

Discordances possibles :Discordances possibles : Erreurs dans le code (code non valide)Erreurs dans le code (code non valide) Balises non supportées (HTML 5, par exemple)Balises non supportées (HTML 5, par exemple) Modifications de la page par JavaScriptModifications de la page par JavaScript

Comment explorer l’état réel de l’interprétation Comment explorer l’état réel de l’interprétation du code HTML / JavaScript par la navigateur ?du code HTML / JavaScript par la navigateur ?


Firefox : FirebugFirefox : Firebug

Module complémentaire de FirefoxModule complémentaire de Firefox https://addons.mozilla.org/fr/firefox/addon/firebug/

Principales fonctionnalités :Principales fonctionnalités : ÉditionÉdition DébogageDébogage ModificationModification HTMLHTML CSSCSS JavaScriptJavaScript HTTPHTTP

C’est l’outil indispensable du développeur WebC’est l’outil indispensable du développeur Web454503:24:5403:24:54 Programmation Web 2012-2013Programmation Web 2012-2013

https://addons.mozilla.org/fr/firefox/addon/firebug/

Firefox : FirebugFirefox : Firebug


IE : outils de développementIE : outils de développement


Et les autres navigateurs ?Et les autres navigateurs ?

OperaOpera Widgets permettent d’obtenir des outils de Widgets permettent d’obtenir des outils de

développementdéveloppement

SafariSafari Version allégée de FirebugVersion allégée de Firebug

Google ChromeGoogle Chrome Outils de développement intégrésOutils de développement intégrés


Solutions pour modifier le DOMSolutions pour modifier le DOM

innerHTMLinnerHTML Construire une chaîne de caractères contenant du Construire une chaîne de caractères contenant du

code HTMLcode HTML Affecter cette chaîne de caractères à l’attribut Affecter cette chaîne de caractères à l’attribut innerHTMLinnerHTML d’un élément de la page d’un élément de la page

Le navigateur interprète le contenu de la chaîne de Le navigateur interprète le contenu de la chaîne de caractères affectée pour modifier la structure du caractères affectée pour modifier la structure du documentdocument

DOM « pur »DOM « pur » Construire de nouveaux éléments logiques du Construire de nouveaux éléments logiques du

document avec des méthodes JSdocument avec des méthodes JS Construire les liens de parenté entre ces élémentsConstruire les liens de parenté entre ces éléments


innerHTMLinnerHTML : exemple : exemple

Identifier un élément HTMLIdentifier un élément HTML<div id="un_id"></div><div id="un_id"></div>

Accéder à un élémentAccéder à un élémente = document.getElementById("un_id");e = document.getElementById("un_id");

Construire une chaîne contenant du HTMLConstruire une chaîne contenant du HTMLs = "Voici <b>un texte</b>";s = "Voici <b>un texte</b>";

Modifier le contenu de l’élémentModifier le contenu de l’élémente.innerHTML = s;e.innerHTML = s;

Interprétation « automatique » par le navigateur Interprétation « automatique » par le navigateur du nouveau contenu pour modifier le documentdu nouveau contenu pour modifier le document


DOM « pur » : exempleDOM « pur » : exemple

Identifier un élément HTMLIdentifier un élément HTML<div id="un_id"></div><div id="un_id"></div>

Accéder à un élémentAccéder à un élémente = document.getElementById("un_id");e = document.getElementById("un_id");

Créer un nœud de type « texte »Créer un nœud de type « texte »t1 = document.createTextNode('Voici ');t1 = document.createTextNode('Voici ');t2 = document.createTextNode('un texte');t2 = document.createTextNode('un texte');

Créer un nouveau nœud de type « balise »Créer un nouveau nœud de type « balise »b = document.createElement('b');b = document.createElement('b');

Construire des liens de parentéConstruire des liens de parentée.appendChild(t1);e.appendChild(t1);b.appendChild(t2); e.appendChild(b);b.appendChild(t2); e.appendChild(b);


divdivid="un_id"id="un_id"

bbVoiciVoici

un texteun texte


Gestion des événementsGestion des événements

Interactions HTML / JavaScriptInteractions HTML / JavaScript Possibilité d'associer du code JavaScript à Possibilité d'associer du code JavaScript à

certains événements dans la page Webcertains événements dans la page Web EvénementsEvénements

OnMouseOverOnMouseOver OnMouseOutOnMouseOut OnClickOnClick OnKeyDownOnKeyDown OnFocusOnFocus OnBlurOnBlur ……


Mise en place des événementsMise en place des événements

<<aa hrefhref==''URI_cibleURI_cible''onMouseOver="onMouseOver="code_javascript1code_javascript1""onMouseOut="onMouseOut="code_javascript2code_javascript2"">>SupportSupport</</aa>>

<<aa hrefhref==''URI_cibleURI_cible''onMouseOver="a=onMouseOver="a=11""onMouseOut="b=onMouseOut="b=22"">>SupportSupport</</aa>>

<<aa hrefhref==''URI_cibleURI_cible''onMouseOver="allumer()"onMouseOver="allumer()"onMouseOut="eteindre()"onMouseOut="eteindre()">>SupportSupport</</aa>>


Événement onKeyUpÉvénement onKeyUp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<<htmlhtml>> <<headhead> <> <titletitle>>onKeyUponKeyUp</</titletitle>>

<<scriptscript typetype=='text/javascript''text/javascript' languagelanguage=='JavaScript''JavaScript'>>

<!—<!—

functionfunction maj() maj() {{

document.f.mail.value =document.f.mail.value =

document.f.prenom.value.toLowerCase()+document.f.prenom.value.toLowerCase()+'.''.'

+document.f.nom.value.toLowerCase() ;+document.f.nom.value.toLowerCase() ; }}

// -->// -->

</</scriptscript>>

</</headhead>> <<bodybody>>

<<formform namename=='f''f'>>

Nom Nom <<inputinput typetype=='text''text' namename=='nom''nom' onKeyUp='maj()'onKeyUp='maj()'><><brbr>>

Prenom Prenom <<inputinput typetype=='text''text' namename=='prenom''prenom' onKeyUp='maj()'onKeyUp='maj()'><><brbr>>

Login Login <<inputinput typetype=='text''text' namename=='mail''mail' disableddisabled>>

</</formform>>

</</bodybody>> </</htmlhtml>>

ExempleExemple


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<<htmlhtml>> <<headhead> <> <titletitle>>RolloverRollover</</titletitle>>

<<scriptscript typetype=='text/javascript''text/javascript' languagelanguage=='JavaScript''JavaScript'>>

<!—<!—

functionfunction change(image, src) change(image, src) {{

document.images[image].src = src ; document.images[image].src = src ; }}

// -->// -->

</</scriptscript>>

</</headhead>>

<<bodybody>>

<<aa hrefhref=='#''#'

onMouseOver="change(onMouseOver="change('image1''image1', , 'vert.gif''vert.gif'))""

onMouseOut="change(onMouseOut="change('image1''image1', , 'rouge.gif''rouge.gif'))"">>

<<imgimg namename=='image1''image1' widthwidth=='100''100' heightheight=='100''100'

srcsrc=='rouge.gif''rouge.gif' altalt=='disque''disque'></></aa>>

</</bodybody>>

</</htmlhtml>>

Événement onMouseOver / OutÉvénement onMouseOver / Out

Tableau des images du Tableau des images du document. Accès par leur document. Accès par leur

nom ou leur indicenom ou leur indice

ExempleExemple



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><<htmlhtml>> <<headhead> <> <titletitle>>RolloverRollover</</titletitle>>

<<scriptscript typetype=='text/javascript''text/javascript' languagelanguage=='JavaScript''JavaScript'>> functionfunction change(image, src) change(image, src) {{

document.images[image].src = src ;document.images[image].src = src ; }}</</scriptscript> </> </headhead> <> <bodybody>> <<ulul>>

<<lili><><aa hrefhref=='#''#' onMouseOver="change(onMouseOver="change('image1''image1', , 'vert.gif''vert.gif'))"" onMouseOut="change(onMouseOut="change('image1''image1', , 'rouge.gif''rouge.gif'))"">>Disque 1Disque 1</</aa>>

<<lili><><aa hrefhref=='#''#' onMouseOver="change(onMouseOver="change('image2''image2', , 'vert.gif''vert.gif'))"" onMouseOut="change(onMouseOut="change('image2''image2', , 'rouge.gif''rouge.gif'))"">>Disque 2Disque 2</</aa>>

<<lili><><aa hrefhref=='#''#' onMouseOver="change(onMouseOver="change('image3''image3', , 'vert.gif''vert.gif'))"" onMouseOut="change(onMouseOut="change('image3''image3', , 'rouge.gif''rouge.gif'))"">>Disque 3Disque 3</</aa> </> </ulul>><<imgimg namename=='image1''image1' widthwidth=='100''100' heightheight=='100''100' srcsrc=='rouge.gif''rouge.gif'

altalt=='disque''disque'>><<imgimg namename=='image2''image2' widthwidth=='100''100' heightheight=='100''100' srcsrc=='rouge.gif''rouge.gif'

altalt=='disque''disque'>><<imgimg namename=='image3''image3' widthwidth=='100''100' heightheight=='100''100' srcsrc=='rouge.gif''rouge.gif'

altalt=='disque''disque'>></</bodybody>> </</htmlhtml>>

ExempleExemple


Boîte à outils (1/3)Boîte à outils (1/3)

// Détection du navigateur// Détection du navigateur// Netscape 4// Netscape 4varvar nava = document.layersnava = document.layers ? ? truetrue : : falsefalse ; ; // IE, Firefox, Netscape 6, Opera// IE, Firefox, Netscape 6, Operavarvar dom = document.getElementByIddom = document.getElementById ? ? truetrue : : falsefalse ; ;// IE, Opera// IE, Operavarvar iex = document.alliex = document.all ? ? truetrue : : falsefalse ; ;// Récupérer un objet identifié// Récupérer un objet identifiéfunctionfunction getobj(id)getobj(id){{

varvar objobj ; ;ifif (nava)(nava) {{ obj=document.idobj=document.id }}elseelse ifif (dom)(dom) {{ obj=document.getElementById(id)obj=document.getElementById(id) }}elseelse ifif (iex)(iex) {{ obj=idobj=id }}returnreturn objobj ; ;

}}



// Récupérer le style d'un objet identifié// Récupérer le style d'un objet identifiéfunctionfunction getstyle(id)getstyle(id){{

varvar objobj ; ;ifif (nava)(nava)

{{ obj=document.idobj=document.id }}elseelse ifif (dom)(dom)

{{ obj=document.getElementById(id).styleobj=document.getElementById(id).style }}elseelse ifif (iex)(iex)

{{ obj=id.styleobj=id.style }}returnreturn objobj ; ;

}}



// Écrire un contenu HTML dans un objet identifié// Écrire un contenu HTML dans un objet identifiéfunctionfunction writecontent(obj, content)writecontent(obj, content){{

ifif (nava)(nava) {{ varvar objet=getstyle(obj) ;objet=getstyle(obj) ; objet.document.write(content) ;objet.document.write(content) ; objet.document.close() ;objet.document.close() ;}}elseelse ifif (dom)(dom) {{ document.getElementById(obj).innerHTML=content ;document.getElementById(obj).innerHTML=content ;}}elseelse ifif (iex)(iex) {{ document.all(obj).innerHTML=content ;document.all(obj).innerHTML=content ;}}

}}



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><<htmlhtml>> <<headhead> <> <titletitle>>Image cliquableImage cliquable</</titletitle>><<scriptscript typetype=='text/javascript''text/javascript' languagelanguage=='JavaScript''JavaScript'

srcsrc=='outils.js''outils.js'>> </</scriptscript> </> </headhead>> <<bodybody>><<h1h1>>Survolez mon image pour trouver les zones cliquables ;-)Survolez mon image pour trouver les zones cliquables ;-)</</h1h1>><<imgimg srcsrc=='formes.gif''formes.gif' widthwidth=='256''256' heightheight=='256''256' altalt=="L'image sur "L'image sur

laquelle il faut cliquer"laquelle il faut cliquer" usemapusemap=='#map''#map'>><<mapmap namename=='map''map'>>

<<areaarea hrefhref=='#''#' altalt=='Cercle''Cercle' titletitle=='Cercle''Cercle' shapeshape=='circle''circle' coordscoords=='94,67,49''94,67,49' onMouseOver="writecontent(onMouseOver="writecontent('info''info', , 'Cercle''Cercle'))""

onMouseOut="writecontent(onMouseOut="writecontent('info''info', , ''''))"">><<areaarea hrefhref=='#''#' altalt=='Rectangle''Rectangle' titletitle=='Rectangle''Rectangle' shapeshape=='rect''rect'

coordscoords=='171,20,233,150''171,20,233,150' onMouseOver="writecontent(onMouseOver="writecontent('info''info', , 'Rectangle''Rectangle'))"" onMouseOut="writecontent(onMouseOut="writecontent('info''info', , ''''))"">><<areaarea hrefhref=='#''#' altalt=='Etoile''Etoile' titletitle=='Etoile''Etoile' shapeshape=='poly''poly' coordscoords=='116,159,128,180,151,185,136,202,138,227,116,217,94,227,'116,159,128,180,151,185,136,202,138,227,116,217,94,227,96,203,80,184,103,180'96,203,80,184,103,180' onMouseOver="writecontent(onMouseOver="writecontent('info''info', , 'Etoile''Etoile'))"" onMouseOut="writecontent(onMouseOut="writecontent('info''info', , ''''))"">>

</</mapmap>> <<spanspan idid=='info''info'></></spanspan>></</bodybody>> </</htmlhtml>>

functionfunction getobj(id) getobj(id)functionfunction getstyle(id) getstyle(id)

functionfunction writecontent(obj, content) writecontent(obj, content)

ExempleExemple

Modification dynamique de styleModification dynamique de style

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><<htmlhtml>> <<headhead> <> <stylestyle typetype'text/css''text/css'>> // --> </</scriptscript>>

<<titletitle>>Cache-cacheCache-cache</</titletitle>> </</headhead>><<bodybody>>

<<divdiv classclass=='cache_cache''cache_cache'>> <<aa hrefhref=="javascript:cache_cache('div1')""javascript:cache_cache('div1')">>montrer / cachermontrer / cacher</</aa>></</divdiv>><<divdiv idid=='div1''div1' classclass=='visible''visible'>> Texte Texte Texte Texte Texte Texte Texte Texte </</divdiv>>




ExempleExemple

Modification dynamique de contenuModification dynamique de contenu

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><<htmlhtml>> <<headhead> <> <stylestyle typetype'text/css''text/css'>> // --> </</scriptscript>><<titletitle>>Cache-cacheCache-cache</</titletitle>> </</headhead> <> <bodybody>>

<<divdiv classclass=='cache_cache''cache_cache'>><<aa hrefhref=="#""#" onClick="cache_cache(onClick="cache_cache(thisthis, , 'div1''div1'))"">>cachercacher</</aa>> </</divdiv>><<divdiv idid=='div1''div1' classclass=='visible''visible'>> Texte Texte Texte Texte Texte Texte Texte Texte </</divdiv>>




ExempleExemple

10:57:52 programmation web 2012-2013 1 programmation web : dom / javascript jérôme cutrona...

Documents

javascript des implmentations

programmation web

manipulation html gestion

javascript une implmentation

html xml dfinit

client web excut

document modle objet

structure logique