Cours 3 PI Javascript 2011 2012

ProgrammationInternet
ProtocoleHTTP DHTML Javascript

IvanMadjarov ,MCF,IUTR&T,20022011
PartieI
ProtocoleHTTP
LeProtocoleHTTP
HTTP :HyperTextTransfertProtocol
protocolederapatriementdesdocuments protocoledesoumissiondeformulaires
Fonctionnement(HTTP/1.0)
connexion demande(GET)dundocument renvoidudocumentoulecodeduneerreur Dconnexion
Fonctionnement(HTTP/1.1)
partageHTTP WebDAV(WebbasedDistributed AuthoringandVersioning)
Programmation Internet 3
LeProtocoleHTTP
DialogueHTTP MthodePOST
Programmation Internet
LeProtocoleHTTP
Formatdelarequte envoyparleclientauserveur
<Mthode> <URI> HTTP/<Version> [<Champ dentte>: <Valeur>] [<tab><Suite Valeur si >1024>] ligne blanche [corps de la requte pour la mthode POST]
LeProtocoleHTTP
Mthodesdelarequte
GET :demandepourobtenirdesinformationsetune zonededonnesconcernantlURI HEAD :demandepourseulementobtenirdes informationsconcernantlURI POST :envoiededonnes(contenuduformulaire versleserveur,requteSOAP)situesdanslecorps. PUT :enregistrementducorpsdelarequtelURI indiqu
DELETE :suppressiondesdonnesdsignespar
lURI
LeProtocoleHTTP
Formatdelarponse Rponseenvoyparleserveurauclient
HTTP/<Version> <Status> <Commentaire Status> Content-Type: <Type MIME du contenu> [< Champ dentte >: <Valeur>] [<tab><Suite Valeur si >1024>] Ligne blanche Document
LeProtocoleHTTP Enttes
Accept AcceptCharset AcceptEncoding AcceptLanguage Authorization ContentEncoding ContentLanguage ContentLength ContentType Date Forwarded From Link OrigURL Referer UserAgent Typedecontenuacceptparlebrowser(parexempletext/html) Jeudecaractresattenduparlebrowser Codagededonnesacceptparlebrowser Langageattenduparlebrowser(anglaispardfaut) Identificationdubrowserauprsduserveur Typedecodageducorpsdelarequte Typedelangageducorpsdelarequte Longueurducorpsdelarequte Typedecontenuducorpsdelarequte(parexempletext/html). Datededbutdetransfertdesdonnes Utilisparlesmachinesintermdiairesentrelebrowseretleserveur Permetdespcifierl'adresseemailduclient RelationentredeuxURL URLd'originedelarequte URLdulienpartirduquellarequteateffectue Chanedonnantdesinformationssurleclient,commelenometlaversiondu navigateur,dusystmed'exploitation
8
PartieII
Javascript
Lescriptctclient
DHTML XHTMLdynamique
LeDHTML n'estpasunstandard!
Cestuneappellationquidsigneunrassemblement detechniques.
LeDHTML estunecombinaisondefeuillesdestyles (CSS) deslangagesdescripts (JavaScript,JScript, VBScript,PHP) etd'objets (DOM).
10
JavaScript Lelangage
LemodleClientServeur parrapportauxscripts etleslangagesinterprts
1. CtClient: XHTM/CSSetJavaScript 2. CtServeur: PHP/ASP/JSP
11
JavaScript Lelangage
JavaScript estunlangagedeprogrammation introduitdanslecodeXHTML (HTML). Lenavigateur Webductclientinterprtelecode XHTML etlescriptJavaScript. L'interprtationdpend dutypedenavigateur(IE,Firefox,Opera,Safari ou autre). JavaScriptestunlangageobjet etvnementiel. Ledveloppeurpeutcrerdesobjets surlapage, avecdesproprits etdesmthodes etleurassocier desactionsenfonctiond'vnementsdclenchspar leclient(passagedesouris,clic,saisieclavier)
JavaScript Intgrer
IntgrerducodeJavaScript dansunepageXHTML
danslecorpsdelapage<body>,oudanslapartie entte<head>
<scriptlanguage="JavaScript"></script>
dansunvnementd'unobjetdelapage.
onClick="alert('Vousavezcliqu')"
faireappelunscriptquandl'utilisateurcliquesur unlien:
<AHREF="javascript:ma_fonction()">Cliquezici</A> Depuisunfichierexterne:<SCRIPTLANGUAGE= "Javascript"SRC="url/fichier.js"></SCRIPT>
JavaScript Intgrer
<HTML> <HEAD> <TITLE>VoiciunepagecontenantduJavascript</TITLE> </HEAD> <BODY> <SCRIPTlanguage="Javascript"> <! alert("Voiciunmessaged\'alerte!"); //> </SCRIPT> </BODY> </HTML> TEST
JavaScript Fonctionner
<HTML> <HEAD> <SCRIPTlanguage="Javascript"> <! functionChargement(){ alert('Bienvenuesurlesite'); } //> </SCRIPT> </HEAD> <BODYonLoad="Chargement();"> <p>TexteHTMLdanslecorpsdelapageWeb...</p> </BODY> </HTML> (Test)
JavaScript LesVariables
Instructionvar pourladclaration.Toutenouvelle variabledoittreinitialisecequi dterminesontype.
var prenom_visiteur ="Marcel";//typestring var nom_visiteur ="Dupond";//typestring var age_visiteur =29;//typenumrique
Unevariabledjdclares'utiliseensuitecomme dhabitude:
varaccueil="Bonjour"+prenom_visiteur +""+ nom_visiteur; //Concatnationdirecte
JavaScript LanotiondObjets
Imaginezunarbredansunjardincomportantune branchesurlaquellesetrouveunnid. Lahirarchied'objetsestdfiniecommececi : jardin
arbre branche feuille nid largeur:20 couleur:jaune hauteur:4
JavaScript LanotiondObjets
Notation Lenidsurl'arbreestdoncdsigncommesuit : jardin.arbre.branche.nid Pourchangerlacouleurdunid: jardin.arbre.branche.nid.couleur =vert; Lesobjetsdunavigateur L'objetleplusgrandestl'objetfentre(window) Danslafentres'afficheunepage(document ) Cettepagepeutcontenirplusieursobjets,comme desformulaires,desimages,etc. window.document.title ="titredelapageweb";
JavaScript LesObjets
Ladclarationsefaitavecvar. Pourcrerunobjet,ilfaututiliserlemotcl new suividutyped'objet.
Lerespectdesmajuscules/minusculeestobligatoire. vardatejour =newDate(); varunedate =newDate(a,m,j,h,m,s); Celacorrespondlacrationd'untypeobjetet donneaccsauxmthodesetpropritsprdfinies vara=datejour.getDay();//lejourdelasemaine (Txt)
JavaScript LesObjets
<HTML><HEAD> <TITLE>VoiciunepagecontenantduJavascript</TITLE> </HEAD> <BODY> <SCRIPTlanguage="Javascript"> <! varT=newArray( "dimanche","lundi", "mardi","mercredi", "jeudi","vendredi","samedi" ); vardj=newDate(); alert("Lejourdelasemaineest"+T[dj.getDay()]); //> </SCRIPT> </BODY></HTML>
JavaScript LesTableaux
Untableau,enJavascript,estunevariablepouvant contenirplusieursdonnesindpendantes,indexes parunnumro,appelindice,quiassurel'accsaux donnes.
Indice Donnes 0 donne1 1 donne2 2 donne3 3 donne4
Tableauxassociatifs
indicespersonnalisspourindexerlesvaleursdu tableau.
Indice Donnes "Paul" 1000 "Andr" 500 "Marie" 1200 "Jean" 4500
21
JavaScript LesTableaux
EnJavaScript,lestableauxsontdesobjets:
varT=newArray(10);
Lepremierlmentestindex0. Ilestpossiblededclareruntableausans dimensionfixe.Latailledutableaus'adapteen fonctionducontenu(taillevariable). Pouraccderauxlmentsdutableau:

T[0]=10;T[9]=5;T[2]="Toto";
Despropritsassociesl'objet:T.length
Retournelenombred'lmentsdel'objetArray.
JavaScript LesFonctions
Lesfonctionsetleursinstructionssontdclareset codesdansl'enttedelapage(<head>) etpeuvent treappelesensuitedanslecorpsdelapage (<body>).
functionNom(argument1,argument2,...) {listed'instructions} Nom_De_La_Fonction(); Unevariabledclaredanslafonction(nonprcdedu motclvar)seraglobaleetaccessibleaprsexcutionde lafonction Unevariabledclareaveclemotclvar seralocale, accessibleuniquementdanslafonction.
JavaScript LesInstructions
Letestconditionnel: if(condition){}else{} Lesboucles: For(initialisation;condition;opration){ //Vosinstructions } while(condition){ //Lesinstructionsdelaboucle } Uncommentaire://commentairesuruneligne /*descommentairessurplusieurslignes*/
JavaScript LesMthodes
Unemthode estunefonctionassocieunobjet Appeld'unemthode:
window.objet1.objet2.methode(); windowtantl'objetdebasedunavigateur
Exemple:
unepage HTMLestcomposed'unobjetappel document. Al'objetdocument estassocieunemthode write(listedeparamtres).Lamthodepermetde modifierdefaondynamiquelecontenudelapage. window.document.write("bonjour");(Test,Txt) Lamthodewriteln() ajouteunretourchariotlafin.
JavaScript L'Objet
Lemotclthis
Lorsqu'onfaitappelunefonctionpartird'un objet(formulaire),lemotclthis faitrfrence l'objetencoursetsesubstituel'appelcomplet: window.objet1.objet2... ainsilorsquel'onpasse l'objetencoursenparamtred'unefonction,il suffitdetapernom_de_la_fonction(this) pour pouvoirmanipulercetobjetpartirdelafonction. Pourmanipulerlespropritsdel'objetilsuffirade taperthis.propriete (opropriete reprsentelenom delaproprit).
JavaScript Objetsprdfinis
Leschanesdecaractres Ladclaration
varch1="Bonjour";
Lesoprations:
Concatnation: varchaine1="Vivele"; varchaine2="JavaScript"; varchaine=chaine1+chaine2; Lavariablechaine contientaprscetteconcatnation "ViveleJavaScript".
JavaScript Leschanesdecaractres
o Lalongueurd'unechane
UnechanedecaractresenJavaScriptestunobjet string surlequels'appliquentdespropritsetdes mthodes Lapropritlength indiquelenombredecaractres delachane varchaine="azerty";6< chaine.length
o Rcuprerlenime caractre
LamthodecharAt(n) rcuprelecaractren :var chaine="azerty"; "z"< chaine.charAt(1)
Programmation Internet IvMad, 2005-2008 28
JavaScript Leschanesdecaractres
MAJUSCULES/minuscules
varchaine="Ceciestuntexte"; varmaj=chaine.toUpperCase(); varmin=chaine.toLowerCase();
Unesouschanedansunechane
vardomaine="www.javascript.com"; varextension=domaine.substring( domaine.lastIndexOf(".")); substring extraitunesouschanepartirdel'indice retourneparlastIndexOf quiretrouveladernire occurrencedesouschaine
Programmation Internet Internet IvMad, 2005-2008 29
JavaScript L'objetString
Programmation Internet Internet
IvMad, 2005-2008
30
JavaScript L'objetString
IvMad, 2005-2008
31
JavaScript Conversions
Lesfonctionsdeconversion
transformerunechaneenunentierouunrel: varchane="3.14"; varentier=parseInt(chane); varreel=parseFloat(chane);
Estceunnombre
Pourdtecterqu'unechane aleformatd'un nombre,onappliquelafonctionisNaN(valeur) qui renvoie: true sivaleurn'estpasunnombre false sivaleurestunnombre
Programmation Internet Internet IvMad, 2005-2008 32
JavaScript L'objetMath
Utilisation:
x=Math.proprit;x=Math.mthode(paramtre);
Mthode/Param E LN2 LN10 PI abs() cos() sin() Valeur constanted'Euler logarithmenaturelde 2 logarithmenaturelde 10 constantePI valeurpositive cosinus sinus Mthode/param sqrt() exp() max() min() pow() random() round()
IvMad, 2005-2008
Racinecarre valeurexponentielle leplusgranddedeux chiffres lepluspetitdedeux chiffres puissanceexposant 0ou1alatoire arrondid'unnombre

33
Javascript etlesMaths
Laplupartdesfonctions debasemathmatiquessont desmthodesdel'objetMath:
Math.abs(a) Math.round(a) Math.ceil(a) Math.floor(a) Math.sqrt(a) Math.log(a) Math.ln(a) Math.exp(a) Math.pow(a,b) Math.min(a,b) Math.max(a,b) Retourne la valeur absolue de a Retourne l'entier arrondi le plus proche de a Retourne l'entier immdiatement suprieur (ou gal) a Retourne l'entier immdiatement infrieur (ou gal) a Retourne la racine carre de a Retourne le logarithme de a Retourne le logarithme nprien de a Retourne l'exponentielle de a Retourne a la puissance b Retourne le plus petit des paramtres a ou b Retourne le plus grand des paramtres a ou b
34
UntableauHTMLenJavaScript
<SCRIPTlanguage=javascript> document.write("<TABLEborder='1'><TR>"); for(vari=0;i<5;i++){ document.write("<TD>"+10*(Math.random())+"</TD>"); } document.write("</TR></TABLE>"); </SCRIPT> (Test)
Cescriptcommenceparinitialiserlatable. Labouclede5itrationscre5cellulesdetableauxet affichel'intrieurunnombrealatoire. Lescriptcltlatableenfermantlabalise</TABLE>

Javascript lesbotesdedialogue
Lamthodealert() permetd'afficherdansunebote composed'unefentre etd'unboutonOKun textefourniten paramtre.Exemple.
Lamthodeconfirm() estsimilairelamthodealert(),sice n'estqu'ellepermetunchoixentre"OK"et"Annuler". Lorsque l'utilisateurappuiesur"OK"lamthoderenvoielavaleurtrue. Ellerenvoiefalse danslecascontraire...Exemple.

Javascript lesbotesdedialogue
Lamthodeprompt() Lamthodeprompt fournitunmoyensimplede rcupreruneinformationprovenantde l'utilisateur. Lamthodeprompt() requiertdeuxarguments :
letexted'invite Letextepardfautdanslechampdesaisie
37
Javascript Formulaires
LeslmentsdeformulairesontdesobjetsJavaScript. SoitleformulaireXHTML:
<FORMname="general> <INPUTtype="text"name="champ1"value="Valeurinitiale"> </FORM>
Accderauformulaire:
Leformulaire estunlmentdel'objetdocument document.forms["general"] document.forms[0] document.general forms estletableaudesformulairesdedocument
Javascript Formulaires
Accderunlment:
document.forms["general"].elements["champ1"] document.forms["general"].elements[0] document.forms["general"].champ1
"elements" estletableaudetousleslmentsdu formulaire. Onpeutaccderunlmentpar:

sonnom, sonindice, sonnom.
Utilisezlenom deslments,pluttquelesindices.Lesnoms sontindpendantsduformulaire.

Javascript ManipulerdesFormulaires
Manipulerlespropritsd'unlment Pourplacerdanslazonedetextelemot "NOUVEAU",ilfautjustecrire: document.forms["general"].elements["champ1"].value = "NOUVEAU" Appelerunemthodesurunlment Pourdonnerlefocusunchamptexteilfaut appelerlamthodefocus()surcetlment. document.forms["general"].elements["champ1"].focus()
40
Formulaires onClick
IntgrerduJavaScriptdansunvnement L'vnementleplusclassiqueestleclicsurun boutonappelonClick <FORM name="changer"> <INPUT type="text" name="zonetexte" value="Valeur initiale"><br/> <INPUT type="button" value="Changer la zone de texte" onClick = ' document.forms["changer"].elements["zonetexte"].value = "NOUVEAU" '> </FORM> [Excuter]
Formulaires alert
Auboutonl'vnementonClick estrajoutquireoitle codeJavaScriptexcuterlorsduclicsurlebouton.
LecodeJavaScriptdoitsemettreentre" ouentre'.Il fautfairetrsattentiondelesalternercorrectement! onClick='alert("Bonjour")'>

ou
onClick="alert('Bonjour')">
42
Formulaires this
L'objetthis reprsentel'objetJavaScriptencours.
<FORM>
<INPUT type="text" name="zonedetexte" value="Valeur initiale"> <INPUT type="button" value="Changer le contenu" onClick=' this.form.zonedetexte.value="NOUVEAU" '> </FORM>
43
Formulaires input
Leszonesdetexte<input> Laprincipaleactionsurunezonedetexteestde manipulersoncontenu. Unformulaire"monform"possdeunchamptexte "monchamp". Onaccdeaucontenuduchamppar: document.forms["monform"].elements["monchamp"].value Ilfautajouterlaproprit.valuepouraccderau contenuduchamp!Alorsilfautpenserauxoprations surleschanesdecaractres.
Formulaires Lescasescocher
Dtecterunecasecoche.Onutiliselaproprit checkedquiestdetypeboolen(true /false)pourvrai oufaux.
<FORM> <INPUT type="checkbox" name="majeur">Enseignant <INPUT type="checkbox" name="etudiant">Etudiant <INPUT type="button" value="Tester" onClick="alert(' Enseignant : ' +this.form.majeur.checked+ '\nEtudiant : ' +this.form.etudiant.checked);"> </FORM>
Formulaires Lesradioboutons
Lagestiondesradioboutonsestassezcomplexe. <FORM> <INPUT type="radio" name="os" value="Windows 95" checked>Windows 95 <INPUT type="radio" name="os" value="Windows 98">Windows 98 <INPUT type="radio" name="os" value="Windows NT">Windows NT <INPUT type="radio" name="os" value="Linux">Linux <INPUT type="radio" name="os" value="Autre">Autre <INPUT type="button" value="Tester" onClick="testerRadio(this.form.os)"> <SCRIPT language="javascript"> function testerRadio(radio) { for (var i=0; i<radio.length; i++) { if (radio[i].checked) { alert("Systme = "+radio[i].value) } } } </SCRIPT> Ungroupederadioboutonslisestcrsouslenomde'os'.Lafonctiona commeparamtrelegroupedesradioboutons. Onrepreenbouclela propritcheckedtrue etonaffichelavaleurcorrespondante.
Formulaires Lesradioboutons
47
Formulaires SELECT
Lastructured'unlmentdetype SELECT(voirTableau) Pourrcuprerl'indicelaligne slectionne: this.form.elements['liste'].selectedIndex Pourrcuprerlenombredelignes: this.form.elements['liste'].options.length Pourrcuprerlavaleurdelaligne slectionne: this.form.elements['liste'].options[this.for m.elements['liste'].selectedIndex].value
Nom selectedIn dex Nomdelaliste Indicedelaligne slectionne (ligne1:indice=0) Tableaudeslignes Nombredelignes Valeurd'uneligne Libelld'uneligne
options length value text
48
Formulaires TEXTAREA
Unezonedetextemultilignesacommeproprit principale.value quicontientletextedelazone.Pour rcuprerlecontenu: document.forms["nom"].elements["zone"].value
49
Javascript Lesvnements
Lesvnementssontdesactionsdel'utilisateur, quidonnentlieuuneinteractivit. Ainsi,ilestpossibled'associerdesfonctions,des mthodesdesvnements:
lepassagedelasourisaudessusd'unezone,le changementd'unevaleur,
Lesgestionnairesd'vnementspermettent d'associeruneactionunvnement.
onEvenement="Action_Javascript_ou_Fonction()";
Lesgestionnairesd'vnementssontassocis desobjets
Javascript Listedesvnements
51
Javascript Listedesvnements
Chaquevnementnepeutpastreassoci n'importequelobjet...ilestvidentqu'un vnementOnChange nepeutpass'appliquerun lienhypertexteparexemple,... Objetsauxquelsonpeutassocierdesvnements:
52
Gnrerunnombrealatoireentierentre1etN: function aleatoire(N) { return (Math.floor((N)*Math.random()+1)); } ConvertisseurEurosFrancs:
<FORM> <INPUT type="text" name="franc" size=10 onBlur="convF(this.form)" value="0"> FF <INPUT type="button" value="< Convertir > "> <INPUT type="text" name="euro" size=10" onBlur="convE(this.form)" value="0"> Euros </FORM>
53
<SCRIPTLANGUAGE="JavaScript"> vartaux=6.55957; functionconvF(f){ varE=Math.round(100*parseFloat(f.franc.value)/taux)/100; if(isNaN(E)){alert("Montantincorrect");f.franc.focus(); }else{f.euro.value=E;} } functionconvE(f){ varF=Math.round(100*parseFloat(f.euro.value)*taux)/100; if(isNaN(F)){alert("Montantincorrect");f.euro.focus(); }else{f.franc.value=F;} } </SCRIPT>
Formulaires Unexemple
<html><head><title>Exercice 1.5</title> <script language="javascript"> function controle(form1) { var inpt = document.form1.input.value; var tsts = parseFloat(inpt); alert(inpt+" usd = "+(tsts*0.758)+" eur"); } </script></head> <body> <form name="form1"> <p>Donnez une somme en USD :<br /> <INPUT TYPE="text" NAME="input" VALUE="0"><BR /> <INPUT TYPE="button" NAME="bouton" VALUE="Echanger" onClick="controle(form1)"></p> </FORM></BODY></HTML>
Formulaires Contrlerlasaisie
Unnombre: Ilpeuttreutiledevrifierquelasaisiedansunchamp deformulaireestbienunnombre:saisiedequantits, deprix... Soitnb lechamptester.Si!(isNaN(nb))retournetrue, alorsnb estunnombre.
<SCRIPT language="javascript"> function CheckNombre(nb) { // retourne true si c'est un nombre et false sinon return !(isNaN(nb)); } </SCRIPT>
Unmail Pourvrifierqu'unmailestvalide,ilsuffitdetesterla prsencede@ etdupoint.
function verifiermail(mail) { if ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>=0)) { return true; } else { alert("Mail invalide !"); return false; } }
Lafonctionretournetrue sinon,elleafficheunmessage etretournefalse.

ValiderunformulaireparJavaScript:
Ilestsouventutiledevrifierlasaisied'unformulaire avantdelevalider. L'idalestdecrerunbouton(detype"button"et pas"submit")quiappelleunefonctionJavaScriptqui contrlelasaisieetsoumetounonleformulaire.
<FORM name="form4" action="form.php" method="POST"> <INPUT type="texte" name="mail"> Adresse mail<br /> <INPUT type="button" name="bouton" value="Valider" onClick="ValiderMail(this.form)"> </FORM>
<SCRIPT language="javascript"> function ValiderMail(formulaire) { if (formulaire.mail.value.indexOf("@",0)<0) { alert("Adresse mail saisie invalide.\nLe formulaire pas valide.")} else { alert("Formulaire valid"); // Pour valider le formulaire en JavaScript : formulaire.submit() // envoy par la mthode POST } // au fichier form.php sur serveur } </SCRIPT>
59
Lespopups
Lemotpopup peuttretraduitparfentresurgissante. L'vnementestdclencheparl'utilisateur(clic, ouverturedesite,minuterie,...)viauncodeJavaScript. L'objetwindow possdelamthodeopen quiattend3 paramtreschanesdecaractres: window.open(page[,nom][,options])
page contientl'adressedelapageafficher. nom dupopupquivatreouvert. options paramtragedupopup.
60
Lespopups 'page'et'nom'
Pourouvrirunpopup surunlien,voicilasyntaxeHTML:
<Ahref ="javascript:popup('popup.html')">Ouverturepopup basique</A>
Dclarationlafonctionpopup():
<SCRIPTlanguage="javascript"> function popup(page){ window.open(page); } </SCRIPT>
61
Lespopups 'options'
Lachaned'optionsd'affichage:
Aucunebarredemenu,taillefixe: OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no, menubar=no')
Lespopups 'options'
VoicilafonctionJavaScriptquiouvreunpopup pour touscesexemples: <SCRIPTlanguage="javascript"> functionOuvrirPopup(page,nom,option){ window.open(page,nom,option); } </SCRIPT>
63
Lespopups 'options'
Ouvertured'unefentrepopupenfonction
<scriptLANGUAGE="JavaScript"> <! functionShowWindow(cURL){ varControlWindow; ControlWindow=window.open(cURL,"RFC","status, height=480,width=640,status=no,scrollbars=yes,resizable=yes, toolbar=0"); if(parseInt(navigator.appVersion)>=3){ ControlWindow.focus(); }} //> [Test] </script>
JavaScriptetlescookies
Uncookiepermetdestockerdesinformationssurle posteclient:
Lenombredevisites, Ladatedeladernirevisite, Unidentifiantetunmotdepassepourune reconnaissanceautomatique, Unelistedemotsclsutilissdanslesmoteursde recherchepourciblerlespublicitsafficher, Unelistedeparamtresdeprfrencesdenavigation pourpersonnaliserlapageprsente.
65
JavaScriptetlesframes
Pourcrerunepagespareenplusieursframes,ilfaut l'origineunepageHTML:
<HTML> <HEAD><TITLE>Titre de page</TITLE></HEAD> <FRAMESET cols="140,*"> <FRAMESET rows="*,50" frameborder=0> <FRAME name="FRAME1" src="frame1.html"> <FRAME name="FRAME2" src="frame2.html"> </FRAMESET> <FRAME name="FRAME3" src="frame3.html"> </FRAMESET> </HTML>
67
68
69
70
Cadre 1 contient le menu
<HTML><HEAD><TITLE>Frame 1</TITLE><script language="JavaScript"> function charger(page1, page2) { parent.frames["frame2"].window.location=page1; parent.frames["frame3"].window.location=page2; }</script></HEAD><body><p>Page : 1</P> <p><A HREF = "JavaScript:charger('frame2.html', 'frame3.html')"> Menu </A></p> <p><A HREF = "JavaScript:charger('frame5.html', 'frame4.html')"> JavaScript</A></p> <p><A HREF = "JavaScript:charger('frame6.html', 'frame7.html')"> Java </A></p> <p><A HREF = "JavaScript:charger('frame8.html',' frame9.html')">Python </A></p> </body></HTML>
Cadre 2 contient le logo
<HTML> <HEAD> <TITLE>Frame 5</TITLE> </HEAD> <body> <p>Page: 2<br /> <img src="Javascript_toplogo.gif" alt="JavaScript" width="107" height="114"> </P> </body> </HTML>
72
Cadre 3 contient le texte:
<HTML> <HEAD> <TITLE>Frame 4</TITLE> </HEAD> <body> <h1>Page: 3</h1> <h2>JavaScript</h2> <p>JavaScript est un langage de programmation compltement li au langage HTML. Le dveloppeur internet code ses pages HTML en y intgrant des sources JavaScript. Le visiteur, par l'intermdiaire de son navigateur, charge le code des pages.</p><p> </p> </body> </HTML>
JavaScriptetlescookies
Uncookie estunfichierdetextequicontientunechane decaractresavecdesinformationsconcatnes:
SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.argum ents.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name+"="+escape(value)+ ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+ ((path==null) ? "" : ("; path="+path))+ ((domain==null) ? "" : ("; domain="+domain))+ ((secure==true) ? "; secure" : ""); }
PartieIII
DHTML
(DynamicHypertextMarkupLanguage)
LeDHTML
La manipulation de ces lments porte sur leur
position, leur dimension, leur visibilit et leur style d'affichage (police, attributs de police, couleurs). Le mot dynamique de DHTML signifie que les modifications peuvent se faire une fois que la page a fini de se charger, ce que ne permet pas le HTML classique. En HTML pur, une fois la page charge et affiche, il n'est plus possible d'afficher de nouveaux lments ou de les dplacer.
LeDHTML
Leproblmedelapagefigeaagacpasun Webmaster! LasolutionrcenteappartientlatechniqueAJAX et s'intgreparfaitementdansleDHTML. Ils'agitderenouvelerdespartiesd'unepagesans pourcelarechargerlapageentireduserveur. Ilexistentdeuxmoyens:synchroneetasynchroneen seservantdelafonctionXMLHTTPRequest de JavaScript.
LeDHTML
AJAX: Excuterdesrequtessurunserveurentemps reletdemaniresynchroneouasynchrone. Mettrejourdesinformations surunepage HTMLsansrechargerpourcelatoutelapage. Ajouter desinformationsenfonctionde paramtresouvnementssurunepage. Excuter desapplicationsdistantes,i.e.Services Web.
LeDHTML objets
EnHTMLlesimages,lesliens,lesformulaires,etc.sont desobjetsqueJavaScriptpeutdjmanipuler. DHTMLintroduitlanotiondecalque oucouche ou layer. CescalquessontlabaseduDHTMLcarilsvont pouvoirtremanipuls:dplacs,cachs,modifis, redessins Uncalqueestdfiniparlecoupledebalises<DIV>et </DIV>
79
LeDHTML calques
Uncalque doitpossder: unidentifiant,pourlereprer, unstyled'affichage,pourindiquersaposition,sataille, sacouleur,etc uncontenu,quiseraaffich
<DIV id="moncalque" style="position:absolute; top:200px; left:100px; visibility:hidden; background-color:yellow"> Ceci est un calque </DIV>
Unobjetcalqueestretournparlafonction document.getElementById deJavaScript.

LeDHTML calques
Manipulerlavisibilitetlaposition. Faireapparatrelecalque:
document.getElementById("mcalque").style.visibility="visible";
Fairedisparatrelecalque:
document.getElementById("mcalque").style.visibility="hidden";
Pourdplacerlecalque:
document.getElementById("mcalque").style.left=500; document.getElementById("mcalque").style.top=parseInt(document.g etElementById("mcalque").style.top)+10;
- Manipulationssurlestyle:couleurdefond,detexte, depolice,etc.
LeDHTML lesnavigateurs
Acausedesincompatibilits entrenavigateurs,ilest indispensabledesavoirreconnatrelesbons! PourcelailsuffitdetestersilafonctiongetElementById estreconnue:
if(document.getElementById){ alert("NavigateurquisupporteDHTMLofficiel"); }
Pourreconnaitrelesanciensnavigateurs!
if ((!document.layers)&&(!document.all)&&(!document.getElementById)) { // Navigateur trop ancien ! }

Cours 3 PI Javascript 2011 2012

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 3 PI Javascript 2011 2012

Transféré par

Droits d'auteur :

Formats disponibles

ProgrammationInternet

ProtocoleHTTP DHTML Javascript

LeDHTML estunecombinaisondefeuillesdestyles (CSS) deslangagesdescripts (JavaScript,JScript, VBScript,PHP) etd'objets (DOM).

Lepremierlmentestindex0. Ilestpossiblededclareruntableausans dimensionfixe.Latailledutableaus'adapteen fonctionducontenu(taillevariable). Pouraccderauxlmentsdutableau:

Programmation Internet Internet

Programmation Internet Internet

Racinecarre valeurexponentielle leplusgranddedeux chiffres lepluspetitdedeux chiffres puissanceexposant 0ou1alatoire arrondid'unnombre

Programmation Internet Internet

Cescriptcommenceparinitialiserlatable. Labouclede5itrationscre5cellulesdetableauxet affichel'intrieurunnombrealatoire. Lescriptcltlatableenfermantlabalise</TABLE>

Lamthodeconfirm() estsimilairelamthodealert(),sice n'estqu'ellepermetunchoixentre"OK"et"Annuler". Lorsque l'utilisateurappuiesur"OK"lamthoderenvoielavaleurtrue. Ellerenvoiefalse danslecascontraire...Exemple.

"elements" estletableaudetousleslmentsdu formulaire. Onpeutaccderunlmentpar:

Utilisezlenom deslments,pluttquelesindices.Lesnoms sontindpendantsduformulaire.

LecodeJavaScriptdoitsemettreentre" ouentre'.Il fautfairetrsattentiondelesalternercorrectement! onClick='alert("Bonjour")'>

options length value text

Lafonctionretournetrue sinon,elleafficheunmessage etretournefalse.

Unobjetcalqueestretournparlafonction document.getElementById deJavaScript.

Vous aimerez peut-être aussi