You are on page 1of 41

Programmation Internet

Protocole HTTP DHTML  Javascript
Ivan Madjarov , MCF, IUT‐R&T, 2002‐2011

Programmation Internet
Partie I

Protocole HTTP

Ivan Madjarov , MCF, IUT‐R&T, 2002‐2011

Le Protocole HTTP
HTTP : HyperText Transfert Protocol
protocole de rapatriement des documents protocole de soumission de formulaires

Fonctionnement (HTTP/1.0)
connexion demande (GET) d’un document renvoi du document ou le code d ’une erreur Déconnexion

Fonctionnement (HTTP/1.1)
partage HTTP ‐ WebDAV (Web‐based Distributed  Authoring and Versioning)
Programmation Internet 3

Le Protocole HTTP
Dialogue HTTP ‐ Méthode POST

Programmation Internet

4

Le Protocole HTTP
Format de la requête envoyé par le client au serveur
<Méthode> <URI> HTTP/<Version> [<Champ d’entête>: <Valeur>] [<tab><Suite Valeur si >1024>] ligne blanche [corps de la requête pour la méthode POST]

Programmation Internet

5

Le Protocole HTTP
Méthodes de la requête
GET :  demande pour obtenir des informations et une  zone de données concernant l’URI HEAD :  demande pour seulement obtenir des  informations concernant l’URI POST :  envoie de données (contenu du formulaire  vers le serveur, requête SOAP …) situées dans le corps. PUT :  enregistrement du corps de la requête à l’URI  indiqué
DELETE : suppression des données désignées par 

l’URI
Programmation Internet 6

Le Protocole HTTP
Format de la réponse Réponse envoyé par le serveur au client
HTTP/<Version> <Status> <Commentaire Status> Content-Type: <Type MIME du contenu> [< Champ d’entête >: <Valeur>] [<tab><Suite Valeur si >1024>] Ligne blanche Document

Programmation Internet

7

Le Protocole HTTP ‐ En‐têtes
Accept Accept‐Charset Accept‐Encoding Accept‐Language Authorization Content‐Encoding Content‐Language Content‐Length Content‐Type Date Forwarded From Link Orig‐URL Referer User‐Agent Type de contenu accepté par le browser (par exemple text/html) Jeu de caractères attendu par le browser Codage de données accepté par le browser Langage attendu par le browser (anglais par défaut) Identification du browser auprès du serveur Type de codage du corps de la requête Type de langage du corps de la requête Longueur du corps de la requête Type de contenu du corps de la requête (par exemple text/html).  Date de début de transfert des données Utilisé par les machines intermédiaires entre le browser et le serveur Permet de spécifier l'adresse e‐mail du client Relation entre deux URL URL d'origine de la requête URL du lien à partir duquel la requête a été effectuée Chaîne donnant des informations sur le client, comme le nom et la version du  navigateur, du système d'exploitation
8

Programmation Internet

Programmation Internet Partie II Javascript Le script côté client Ivan Madjarov .  VBScript. 2002‐2011 DHTML ‐ XHTML dynamique Le DHTML n'est pas un standard! C’est une appellation qui désigne un rassemblement  de techniques. Le DHTML est une combinaison de feuilles de styles (CSS) des langages de scripts (JavaScript. MCF. JScript. PHP) et d'objets (DOM). Programmation Internet 10 . IUT‐R&T.

 Opera. Côté Client:  XHTM/CSS et JavaScript 2. Safari ou  autre). clic.JavaScript ‐ Le langage Le modèle Client‐Serveur par rapport aux scripts  et les langages interprétés 1. Firefox.  Le navigateur Web du côté client interprète le code  XHTML et le script JavaScript. saisie clavier) Programmation Internet 12 . JavaScript est un langage objet et événementiel. L'interprétation dépend  du type de navigateur (IE.  Le développeur peut créer des objets sur la page. Côté Serveur:  PHP/ASP/JSP Programmation Internet 11 JavaScript ‐ Le langage JavaScript est un langage de programmation  introduit dans le code XHTML (HTML).  avec des propriétés et des méthodes et leur associer  des actions en fonction d'événements déclenchés par  le client (passage de souris.

js"> </SCRIPT> Programmation Internet 13 JavaScript ‐ Intégrer <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript </TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!‐‐ alert("Voici un message d\'alerte!"). − onClick="alert('Vous avez cliqué')" − faire appel à un script quand l'utilisateur clique sur  un lien:  <A HREF="javascript:ma_fonction()">Cliquez ici</A> − Depuis un fichier externe : <SCRIPT LANGUAGE =  "Javascript" SRC="url/fichier. ou dans la partie  entête <head> − <script language="JavaScript"> … </script> − dans un événement d'un objet de la page. // ‐‐> </SCRIPT> </BODY> </HTML> TEST Programmation Internet 14 .JavaScript ‐ Intégrer Intégrer du code JavaScript dans une page XHTML − dans le corps de la page <body>.

  // Concaténation directe Programmation Internet 16 .   // type string var nom_visiteur = "Dupond". var prenom_visiteur = "Marcel"." >  <p>Texte HTML dans le corps de la page Web. Toute nouvelle  variable doit être initialisée ce qui  détermine son type.                      // type numérique Une variable déjà déclarée s'utilise ensuite comme  d’habitude : var accueil="Bonjour " + prenom_visiteur + " " +  nom_visiteur.JavaScript ‐ Fonctionner <HTML> <HEAD> <SCRIPT language="Javascript"> <!‐‐ function Chargement() { alert('Bienvenue sur le site').       // type string var age_visiteur = 29... }  //‐‐> </SCRIPT> </HEAD> <BODY onLoad="Chargement().</p>  </BODY> </HTML> (Test) Programmation Internet 15 JavaScript ‐ Les Variables Instruction var pour la déclaration.

title = "titre de la page web".couleur = vert.branche. comme  des formulaires.branche.  window.JavaScript – La notion d’Objets Imaginez un arbre dans un jardin comportant une  branche sur laquelle se trouve un nid.nid.document. Programmation Internet 18 . etc. des images.nid Pour changer la couleur du nid :  jardin.arbre.arbre. Les objets du navigateur L'objet le plus grand est l'objet fenêtre (window)  Dans la fenêtre s'affiche une page (document ) Cette page peut contenir plusieurs objets.   La hiérarchie d'objets est définie comme ceci : jardin  arbre branche  feuille  nid  largeur: 20  couleur: jaune  hauteur: 4  Programmation Internet 17 JavaScript – La notion d’Objets Notation Le nid sur l'arbre est donc désigné comme suit :  jardin.

 s). alert("Le jour de la semaine est "+T[dj.  h.  j. "mercredi". var unedate = new Date(a.getDay()]). "lundi". var dj = new Date(). "samedi" ).  "mardi". Le respect des majuscules/minuscule est obligatoire.  m. // ‐‐> </SCRIPT> </BODY></HTML> Programmation Internet 20 . "vendredi". Cela correspond à la création d'un type objet et  donne accès aux méthodes et propriétés prédéfinies var a = datejour.getDay(). var datejour = new Date().  m. il faut utiliser le mot‐clé  new suivi du type d'objet.    // le jour de la semaine   (Txt) Programmation Internet 19 JavaScript ‐ Les Objets <HTML><HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!‐‐ var T = new Array ( "dimanche". Pour créer un objet.  "jeudi".JavaScript ‐ Les Objets La déclaration se fait avec var.

Programmation Internet 22 . les tableaux sont des objets: var T = new Array(10).JavaScript ‐ Les Tableaux Un tableau. indexées  par un numéro. en Javascript. est une variable pouvant  contenir plusieurs données indépendantes. qui assure l'accès aux  données. La taille du tableau s'adapte en  fonction du contenu (taille variable). appelé indice. Le premier élément est indexé à 0. Indice Données "Paul" 1000 "André" 500 "Marie" 1200 "Jean" 4500 21 Programmation Internet JavaScript ‐ Les Tableaux En JavaScript.length Retourne le nombre d'éléments de l'objet Array. Des propriétés associées à l'objet : T.  T[9] = 5.  Indice Données 0 donnée 1 1 donnée 2 2 donnée 3 3 donnée 4 Tableaux associatifs indices personnalisés pour indexer les valeurs du  tableau. Il est possible de déclarer un tableau sans  dimension fixe.  T[2] = "Toto".  Pour accéder aux éléments du tableau: T[0] = 10.

Programmation Internet 23 JavaScript ‐ Les Instructions Le test conditionnel: if (condition) { … } else { … } Les boucles: For (initialisation.. argument2. .  accessible uniquement dans la fonction.)  { liste d'instructions } Nom_De_La_Fonction().. opération) { // Vos instructions  } while (condition) { // Les instructions de la boucle } Un commentaire : // commentaire sur une ligne /* des commentaires sur plusieurs lignes */ Programmation Internet 24 .JavaScript ‐ Les Fonctions Les fonctions et leurs instructions sont déclarées et  codées dans l'entête de la page (<head>) et peuvent  être appelées ensuite dans le corps de la page  (<body>). Une variable déclarée dans la fonction (non précédée du  mot‐clé var) sera globale et accessible après exécution de  la fonction  Une variable déclarée avec le mot‐clé var sera locale.  function Nom (argument1. condition.

window étant l'objet de base du navigateur Exemple: une page HTML est composée d'un objet appelé  document. ainsi lorsque l'on passe  l'objet en cours en paramètre d'une fonction.  Pour manipuler les propriétés de l'objet il suffira de  taper this.methode(). il  suffit de taper nom_de_la_fonction(this) pour  pouvoir manipuler cet objet à partir de la fonction.  A l'objet document est associée une méthode  write(liste de paramètres).objet2.document. le mot clé this fait référence à  l'objet en cours et se substitue à l'appel complet:  window.. Txt) La méthode writeln() ajoute un retour chariot à la fin. Programmation Internet 25 JavaScript ‐ L'Objet Le mot‐clé this Lorsqu'on fait appel à une fonction à partir d'un  objet (formulaire).. window.  Programmation Internet 26 .objet1.propriete (où propriete représente le nom  de la propriété).write("bonjour").objet2.JavaScript ‐ Les Méthodes Une méthode est une fonction associée à un objet Appel d'une méthode:  window. (Test. La méthode permet de  modifier de façon dynamique le contenu de la page.objet1.

var chaine2="JavaScript". 2005-2008 28 . Programmation Internet 27 JavaScript ‐ Les chaînes de caractères o La longueur d'une chaîne • Une chaîne de caractères en JavaScript est un objet  string sur lequel s'appliquent des propriétés et des  méthodes • La propriété length indique le nombre de caractères  de la chaîne  • var chaine="azerty".length o Récupérer le nième caractère • La méthode charAt(n) récupère le caractère n : var  chaine="azerty".charAt(1) Programmation Internet IvMad. • Les opérations: Concaténation: var chaine1="Vive le ". var chaine=chaine1+chaine2.  "z" <‐ chaine. La variable chaine contient après cette concaténation "Vive le JavaScript".  6 <‐ chaine.JavaScript – Objets prédéfinis Les chaînes de caractères • La déclaration var ch1="Bonjour".

javascript.") ). var extension = domaine.substring(  domaine. 2005-2008 30 . var maj=chaine. substring extrait une souschaîne à partir de l'indice  retournée par lastIndexOf qui retrouve la dernière  occurrence de souschaine  Programmation Internet Internet IvMad.lastIndexOf(".JavaScript ‐ Les chaînes de caractères MAJUSCULES / minuscules var chaine="Ceci est un texte".toLowerCase().toUpperCase().com". Une sous‐chaîne dans une chaîne var domaine = "www. 2005-2008 29 JavaScript – L'objet String Programmation Internet Internet IvMad. var min=chaine.

 on applique la fonction isNaN(valeur) qui  renvoie : ‐ true si valeur n'est pas un nombre ‐ false si valeur est un nombre Programmation Internet Internet IvMad.14". 2005-2008 31 JavaScript ‐ Conversions Les fonctions de conversion • transformer une chaîne en un entier ou un réel:  var chaîne = "3.JavaScript – L'objet String Programmation Internet Internet IvMad. var entier = parseInt(chaîne). 2005-2008 32 .  Est‐ce un nombre • Pour détecter qu'une chaîne a le format d'un  nombre. var reel = parseFloat(chaîne).

b) Retourne la valeur absolue de a Retourne l'entier arrondi le plus proche de a Retourne l'entier immédiatement supérieur (ou égal) à a Retourne l'entier immédiatement inférieur (ou égal) à a Retourne la racine carrée de a Retourne le logarithme de a Retourne le logarithme népérien de a Retourne l'exponentielle de a Retourne a à la puissance b Retourne le plus petit des paramètres a ou b Retourne le plus grand des paramètres a ou b Programmation Internet 34 .propriété.  x = Math.JavaScript – L'objet Math Utilisation: x = Math.abs(a) Math.sqrt(a) Math.round(a) Math.log(a) Math.méthode(paramètre).exp(a) Math. 2005-2008 Racine carrée valeur exponentielle le plus grand de deux  chiffres le plus petit de deux  chiffres puissance exposant 0 ou 1 aléatoire arrondi d'un nombre 33 Programmation Internet Internet Javascript et les Maths La plupart des fonctions de base mathématiques sont  des méthodes de l'objet Math: Math.min(a.max(a.floor(a) Math.b) Math. Méthode/Param E LN2 LN10 PI abs()  cos() sin() Valeur constante d'Euler logarithme naturel de  2 logarithme naturel de  10 constante PI valeur positive cosinus sinus Méthode/param sqrt() exp() max() min() pow() random() round() IvMad.ln(a) Math.pow(a.b) Math.ceil(a) Math.

write("<TABLE border='1'><TR>"). } document. Lorsque  l'utilisateur appuie sur "OK" la méthode renvoie la valeur true.  Elle renvoie false dans le cas contraire. i<5.. Programmation Internet 36 .Un tableau HTML en JavaScript <SCRIPT language=javascript> document. La boucle de 5 itérations crée 5 cellules de tableaux et  affiche à l'intérieur un nombre aléatoire. i++) { document..write("</TR></TABLE>"). si ce  n'est qu'elle permet un choix entre "OK" et "Annuler". Exemple. </SCRIPT> (Test) Ce script commence par initialiser la table.random())+"</TD>"). Exemple. La méthode confirm() est similaire à la méthode alert(). Le script clôt la table en fermant la balise </TABLE> Programmation Internet 35 Javascript ‐ les boîtes de dialogue La méthode alert() permet d'afficher dans une boîte  composée d'une fenêtre et d'un bouton OK un texte fournit en  paramètre.write("<TD>"+ 10*(Math. for (var i=0.

  La méthode prompt() requiert deux arguments :  le texte d'invite  Le texte par défaut dans le champ de saisie Programmation Internet 37 Javascript ‐ Formulaires Les éléments de formulaire sont des objets JavaScript.Javascript ‐ les boîtes de dialogue La méthode prompt() La méthode prompt fournit un moyen simple de  récupérer une information provenant de  l'utilisateur.forms[0] document.general forms est le tableau des formulaires de document Programmation Internet 38 .  Soit le formulaire XHTML: <FORM name="general“> <INPUT type="text" name="champ1" value="Valeur initiale"> </FORM>  Accéder au formulaire: Le formulaire est un élément de l'objet document document.forms["general"] document.

forms["general"].forms["general"]. plutôt que les indices.forms["general"].elements[0] document.champ1 "elements" est le tableau de tous les éléments du  formulaire. Utilisez le nom des éléments.forms["general"].  − son nom.  On peut accéder à un élément par : − son nom.elements["champ1"]. Les noms  sont indépendants du formulaire.value = "NOUVEAU" Appeler une méthode sur un élément Pour donner le focus à un champ texte il faut  appeler la méthode focus() sur cet élément. il faut juste écrire : document.elements["champ1"] document.Javascript ‐ Formulaires Accéder à un élément: document.focus() Programmation Internet 40 . − son indice.forms["general"]. document.elements["champ1"]. Programmation Internet 39 Javascript – Manipuler des Formulaires Manipuler les propriétés d'un élément Pour placer dans la zone de texte le mot  "NOUVEAU".

Formulaires ‐ onClick Intégrer du JavaScript dans un événement L'événement le plus classique est le clic sur un  bouton appelé onClick <FORM name="changer"> <INPUT type="text" name="zonetexte" value="Valeur initiale"><br/> <INPUT type="button" value="Changer la zone de texte" onClick = ' document.elements["zonetexte"].forms["changer"].value = "NOUVEAU" '> </FORM> [Exécuter] Programmation Internet 41 Formulaires ‐ alert Au bouton l'événement onClick est rajouté qui reçoit le  code JavaScript à exécuter lors du clic sur le bouton. Le code JavaScript doit se mettre entre " ou entre '. Il  faut faire très attention de les alterner correctement! onClick='alert("Bonjour")'> ou onClick="alert('Bonjour')"> Programmation Internet 42 .

value="NOUVEAU" '> </FORM> Programmation Internet 43 Formulaires ‐ input Les zones de texte <input> La principale action sur une zone de texte est de  manipuler son contenu.value Il faut ajouter la propriété . Un formulaire "monform" possède un champ texte  "monchamp".Formulaires ‐ this L'objet this représente l'objet JavaScript en cours.elements["monchamp"].forms["monform"].form.value pour accéder au  contenu du champ! Alors il faut penser aux opérations  sur les chaînes de caractères. Programmation Internet 44 .zonedetexte.  On accède au contenu du champ par : document. <FORM> <INPUT type="text" name="zonedetexte" value="Valeur initiale"> <INPUT type="button" value="Changer le contenu" onClick=' this.

Programmation Internet 46 .form.value) } } } </SCRIPT> Un groupe de radio‐boutons liés est créé sous le nom de 'os'.Formulaires ‐ Les cases à cocher Détecter une case cochée. On utilise la propriété  checked qui est de type booléen (true / false) pour vrai  ou faux.checked) { alert("Système = "+radio[i].etudiant. i<radio.os)"> <SCRIPT language="javascript"> function testerRadio(radio) { for (var i=0. <FORM> <INPUT type="checkbox" name="majeur">Enseignant <INPUT type="checkbox" name="etudiant">Etudiant <INPUT type="button" value="Tester" onClick="alert(' Enseignant : ' +this.checked). On repère en boucle la  propriété checked à true et on affiche la valeur correspondante.majeur.length.  <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. La fonction a  comme paramètre le groupe des radio‐boutons.form."> </FORM> Programmation Internet 45 Formulaires ‐ Les radio‐boutons La gestion des radio‐boutons est assez complexe.checked+ '\nEtudiant : ' +this. i++) { if (radio[i].form.

elements['liste'].form.elements['liste'].elements['liste'].Formulaires ‐ Les radio‐boutons Programmation Internet 47 Formulaires ‐ SELECT La structure d'un élément de type  SELECT (voir Tableau) Pour récupérer l'indice la ligne  sélectionnée : this.elements['liste'].form.value Nom selectedIn dex Nom de la liste Indice de la ligne  sélectionnée (ligne 1 : indice=0) Tableau des lignes Nombre de lignes Valeur d'une ligne Libellé d'une ligne options length •value •text Programmation Internet 48 .selectedIndex Pour récupérer le nombre de lignes : this.form.length Pour récupérer la valeur de la ligne  sélectionnée: this.selectedIndex].for m.options[this.options.

 des  méthodes à des événements: le passage de la souris au‐dessus d'une zone.  onEvenement="Action_Javascript_ou_Fonction() ". … Les gestionnaires d'événements permettent  d'associer une action à un événement. Pour  récupérer le contenu: document.  qui  donnent lieu à une interactivité. il est possible d'associer des fonctions. le  changement d'une valeur.elements["zone"].value Programmation Internet 49 Javascript ‐ Les événements Les évènements sont des actions de l'utilisateur.  Ainsi.Formulaires ‐ TEXTAREA Une zone de texte multi‐lignes a comme propriété  principale .value qui contient le texte de la zone. Les gestionnaires d'événements sont associés à  des objets …  Programmation Internet 50 .forms["nom"].

  Objets auxquels on peut associer des événements: Programmation Internet 52 ..Javascript ‐ Liste des événements Programmation Internet 51 Javascript ‐ Liste des événements Chaque événement ne peut pas être associé à  n'importe quel objet.... . il est évident qu'un  événement OnChange ne peut pas s'appliquer à un  lien hypertexte par exemple.

focus().euro.value=E. } } </SCRIPT> Programmation Internet 54 .euro. if (isNaN(E)) { alert("Montant incorrect").value)*taux)/100.round(100*parseFloat(f. f. f.  } } function convE(f) { var F=Math. } else { f. function convF(f) { var E=Math. } Convertisseur Euros‐Francs: <FORM> <INPUT type="text" name="franc" size=10 onBlur="convF(this.franc. } else { f.franc.value)/taux)/100.random()+1)).55957.value=F.form)" value="0"> FF <INPUT type="button" value="&lt.floor((N)*Math.form)" value="0"> Euros </FORM> Programmation Internet 53 Javascript et les Maths <SCRIPT LANGUAGE="JavaScript"> var taux=6.Javascript et les Maths Générer un nombre aléatoire entier entre 1 et N: function aleatoire(N) { return (Math.euro. if (isNaN(F)) { alert("Montant incorrect").focus(). Convertir > "> <INPUT type="text" name="euro" size=10" onBlur="convE(this.round(100*parseFloat(f.franc.

.758)+" eur"). <SCRIPT language="javascript"> function CheckNombre(nb) { // retourne true si c'est un nombre et false sinon return !(isNaN(nb)).. Si !(isNaN(nb)) retourne true.5</title> <script language="javascript"> function controle(form1) { var inpt = document. alert(inpt+" usd = "+(tsts*0.  alors nb est un nombre.  Soit nb le champ à tester.Formulaires ‐ Un exemple <html><head><title>Exercice 1.  de prix. } </SCRIPT> Programmation Internet 56 .input. } </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> Programmation Internet 55 Formulaires ‐ Contrôler la saisie Un nombre: Il peut être utile de vérifier que la saisie dans un champ  de formulaire est bien un nombre : saisie de quantités.form1. var tsts = parseFloat(inpt).value.

return false. } } La fonction retourne true sinon. } else { alert("Mail invalide !").form)"> </FORM> Programmation Internet 58 . L'idéal est de créer un bouton (de type "button" et  pas "submit") qui appelle une fonction JavaScript qui  contrôle la saisie et soumet ou non le formulaire. <FORM name="form4" action="form.  Programmation Internet 57 Formulaires ‐ Contrôler la saisie Valider un formulaire par JavaScript : Il est souvent utile de vérifier la saisie d'un formulaire  avant de le valider.Formulaires ‐ Contrôler la saisie Un mail Pour vérifier qu'un mail est valide. function verifiermail(mail) { if ((mail.php" method="POST"> <INPUT type="texte" name="mail"> Adresse mail<br /> <INPUT type="button" name="bouton" value="Valider" onClick="ValiderMail(this.")>=0)) { return true. elle affiche un message  et retourne false. il suffit de tester la  présence de @ et du point.indexOf("@")>=0)&&(mail.indexOf(".

L'événement est déclenchée par l'utilisateur (clic.indexOf("@"..open( page [.submit() // envoyé par la méthode POST } // au fichier form.mail.")} else { alert("Formulaire validé"). minuterie..  ouverture de site. L'objet window possède la méthode open qui attend 3  paramètres chaînes de caractères : window. − nom du popup qui va être ouvert. // Pour valider le formulaire en JavaScript : formulaire.nom] [. .\nLe formulaire pas valide.value.php sur serveur } </SCRIPT> Programmation Internet 59 Les pop‐ups Le mot popup peut être traduit par fenêtre surgissante. − options paramétrage du popup.) via un code JavaScript.Formulaires ‐ Contrôler la saisie <SCRIPT language="javascript"> function ValiderMail(formulaire) { if (formulaire.  Programmation Internet 60 .options] ) − page contient l'adresse de la page à afficher.0)<0) { alert("Adresse mail saisie invalide.

status=no. location=no.open(page). width=200. menubar=no') Programmation Internet 62 .html')"> Ouverture popup basique</A> Déclaration la fonction popup() : <SCRIPT language="javascript"> function popup(page) { window. menubar=no. } </SCRIPT> Programmation Internet 61 Les pop‐ups – 'options' La chaîne d'options d'affichage: Aucune barre de menu. scrollbars=no. taille fixe : OuvrirPopup('popup. ''. height=100. voici la syntaxe HTML : <A  href = "javascript:popup('popup. 'resizable=no.html'.Les pop‐ups – 'page' et 'nom' Pour ouvrir un popup sur un lien.

open(page.nom. "RFC". } </SCRIPT> Programmation Internet 63 Les pop‐ups – 'options' Ouverture d'une fenêtre popup en fonction <script LANGUAGE="JavaScript"> <!‐‐ function ShowWindow(cURL)   { var ControlWindow.option) { window.option). }  } //‐‐> [Test] </script> Programmation Internet 64 .nom.focus(). if (parseInt(navigator.  height=480. ControlWindow = window. resizable=yes. width=640. status=no.appVersion) >= 3)    { ControlWindow.  toolbar=0"). "status. scrollbars=yes.open(cURL.Les pop‐ups – 'options' Voici la fonction JavaScript qui ouvre un popup pour  tous ces exemples : <SCRIPT language="javascript"> function OuvrirPopup(page.

html"> </FRAMESET> <FRAME name="FRAME3" src="frame3.50" frameborder=0> <FRAME name="FRAME1" src="frame1.*"> <FRAMESET rows="*. − Une liste de mots‐clés utilisés dans les moteurs de  recherche pour cibler les publicités à afficher. − Une liste de paramètres de préférences de navigation  pour personnaliser la page présentée. il faut  à l'origine une page HTML: <HTML> <HEAD><TITLE>Titre de page</TITLE></HEAD> <FRAMESET cols="140. − Un identifiant et un mot de passe pour une  reconnaissance automatique.  − La date de la dernière visite.html"> <FRAME name="FRAME2" src="frame2. Programmation Internet 65 JavaScript et les frames Pour créer une page séparée en plusieurs frames.html"> </FRAMESET> </HTML> Programmation Internet 66 .JavaScript et les cookies Un cookie permet de stocker des informations sur le  poste client: − Le nombre de visites.

JavaScript et les frames Programmation Internet 67 JavaScript et les frames Programmation Internet 68 .

JavaScript et les frames Programmation Internet 69 JavaScript et les frames Programmation Internet 70 .

'frame3. parent.gif" alt="JavaScript" width="107" height="114"> </P> </body> </HTML> Programmation Internet 72 .html'.location=page2.location=page1.frames["frame3"].JavaScript et les frames Cadre 1 contient le menu <HTML><HEAD><TITLE>Frame 1</TITLE><script language="JavaScript"> function charger(page1.html')"> JavaScript</A></p> <p><A HREF = "JavaScript:charger('frame6.html')"> Java </A></p> <p><A HREF = "JavaScript:charger('frame8.html'.html')">Python </A></p> </body></HTML> Programmation Internet 71 JavaScript et les frames Cadre 2 contient le logo <HTML> <HEAD> <TITLE>Frame 5</TITLE> </HEAD> <body> <p>Page: 2<br /> <img src="Javascript_toplogo.window.frames["frame2"]. page2) { parent. 'frame4. 'frame7.' frame9.html'.window.html')"> Menu </A></p> <p><A HREF = "JavaScript:charger('frame5. }</script></HEAD><body><p>Page : 1</P> <p><A HREF = "JavaScript:charger('frame2.html'.

expires="+expires. } Programmation Internet 74 .toGMTString()))+ ((path==null) ? "" : (". value) { var argv = SetCookie. var secure = (argc > 5) ? argv[5] : false.</p><p> … </p> </body> </HTML> Programmation Internet 73 JavaScript et les cookies Un cookie est un fichier de texte qui contient une chaîne  de caractères avec des informations concaténées: SetCookie (name. var domain = (argc > 4) ? argv[4] : null.length. var argc = SetCookie. par l'intermédiaire de son navigateur. charge le code des pages.JavaScript et les frames 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 complètement lié au langage HTML. path="+path))+ ((domain==null) ? "" : (". var path = (argc > 3) ? argv[3] : null. document.argum ents.arguments. var expires = (argc > 2) ? argv[2] : null.cookie = name+"="+escape(value)+ ((expires==null) ? "" : (". domain="+domain))+ ((secure==true) ? ". secure" : ""). Le visiteur. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript.

 IUT‐R&T. une fois la page chargée et affichée. ‐ Le mot dynamique de DHTML signifie que les modifications peuvent se faire une fois que la page a fini de se charger. il n'est plus possible d'afficher de nouveaux éléments ou de les déplacer.Programmation Internet Partie III DHTML (Dynamic Hypertext Markup Language) Ivan Madjarov . ce que ne permet pas le HTML classique. ‐ En HTML pur. leur dimension. leur visibilité et leur style d'affichage (police. Programmation Internet 76 . 2002‐2011 Le DHTML ‐ La manipulation de ces éléments porte sur leur position. MCF. couleurs). attributs de police.

Il s'agit de renouveler des parties d'une page sans  pour cela recharger la page entière du serveur. Il existent deux moyens: synchrone et asynchrone en  se servant de la fonction XMLHTTPRequest de  JavaScript.Le DHTML Le problème de la page figée a agacé pas un  Webmaster! La solution récente appartient à la technique AJAX et  s'intègre parfaitement dans le DHTML. − Exécuter des applications distantes. i. Programmation Internet 77 Le DHTML AJAX: − Exécuter des requêtes sur un serveur en temps  réel et de manière synchrone ou asynchrone.e. − Mettre à jour des informations sur une page  HTML sans recharger pour cela toute la page. Programmation Internet 78 . Services  Web. − Ajouter des informations en fonction de  paramètres ou événements sur une page.

 pour indiquer sa position. modifiés.getElementById de JavaScript. les formulaires. left:100px. visibility:hidden. etc. pour le repérer. ‐ Ces calques sont à la base du DHTML car ils vont  pouvoir être manipulés : déplacés.  sa couleur.Le DHTML ‐ objets ‐ En HTML les images. ‐ DHTML introduit la notion de calque ou couche ou  layer. cachés. top:200px. qui sera affiché <DIV id="moncalque" style="position:absolute. ‐ un style d'affichage. Programmation Internet 80 . etc… ‐ un contenu.  redessinés… ‐ Un calque est défini par le couple de balises <DIV> et  </DIV> Programmation Internet 79 Le DHTML ‐ calques Un calque doit posséder : ‐ un identifiant. sont  des objets que JavaScript peut déjà manipuler. sa taille. les liens. background-color:yellow"> Ceci est un calque </DIV> Un objet calque est retourné par la fonction  document.

getElementById)) { // Navigateur trop ancien ! } Programmation Internet 82 .all)&&(!document. il est  indispensable de savoir reconnaître les bons! Pour cela il suffit de tester si la fonction getElementById est reconnue : if (document.layers)&&(!document.visibility="hidden". etc.visibility="visible".getElementById("mcalque").left=500.g etElementById("mcalque").style.Le DHTML ‐ calques Manipuler la visibilité et la position.getElementById("mcalque").style.getElementById("mcalque").style.getElementById("mcalque").style. .getElementById) {  alert("Navigateur qui supporte DHTML officiel"). Programmation Internet 81 Le DHTML ‐ les navigateurs A cause des incompatibilités entre navigateurs.top=parseInt(document. document. ‐ Pour déplacer le calque: document.style.  de police.top)+10.Manipulations sur le style: couleur de fond. de texte.  ‐ Faire apparaître le calque: document. } Pour reconnaitre les anciens navigateurs! if ((!document. ‐ Faire disparaître le calque: document.