Développement Web L2 CORRIGES DES TD (Faculté des Sciences d'Angers) gilles.hunault "at" univ-angers.fr Table des matières Corrigé du TD numéro 1     Langage XHTML et CSS Corrigé du TD numéro 2     Formulaires, tableaux et propriétés Corrigé du TD numéro 3     Eléments, attributs et Javascript Corrigé du TD L2 numéro 1 (énoncé)     Langage XHTML et CSS XHTML signifie eXtended HyperText Markup Language, c'est à dire Langage à Marqueurs d'Hyper Texte Etendu. Les marqueurs sont les symboles < (inférieur), > (supérieur), & (é commercial), / (slash) et ; (point-virgule). Les marqueurs / < et > définissent des balises ouvrantes, fermantes ou auto-fermantes, les marqueurs & et ; définissent les entités. Dans d'autres systèmes de marqueurs comme RTF ou LaTeX, on utilise \ (antislash) et les accolades { et }. Pour écrire en XHTML < (inférieur) et > (supérieur) on utilise les entités &lt; et &gt; (en anglais Less Than et Greater Than). Une page Web est structurée en éléments imbriqués. Les éléments peuvent avoir des attributs. Les attributs permettent d'identifier et de mettre en forme les éléments. Les balises sont des repères et servent à délimiter les éléments, à l'aide de balises ouvrantes et fermantes (sauf pour les éléments auto-fermants qui n'utilisent qu'une balise, à la fois ouvrante et fermante). Les entités servent à écrire des caractères spéciaux, dont les symboles de marqueur de balise et d'entité (pour éviter que le navigateur ne les interprète) : une entité est donc juste un raccourci pour permettre l'écriture des marqueurs et des symboles spéciaux. Dans une page Web les éléments sont emboités hiérarchiquement de la façon suivante : l'élément html contient les deux éléments head et body. L'élément head contient l'élément title, des éléments facultatifs comme meta ou link pour les feuilles de style. L'élément body contient le "corps du texte affiché", avec ses éléments div, p, table, ol, ul, dd... Les éléments sont repérés par une balise ouvrante et une balise fermante et ils ont un contenu (texte ou structure). Si le contenu est vide, on peut raccourcir en une balise ouvrante-fermante (nommée aussi auto-fermante). Par exemple l'élément hr commence par <hr> et se finit par </hr>. Au lieu d'écrire <hr></hr> on raccourcit en <hr />. Les attributs sont des couples (propriétés,valeur) qui permettent de gérer les éléments (forme, identification, nommage, source). On écrit propriété="valeur" pour affecter la valeur à l'attribut (les guillemets sont obligatoire). Avec la grammaire transitional on peut utiliser de nombreuses propriétés de mise en forme. Avec la grammaire strict on ne peut pas utiliser des attributs de mise en forme et on doit passer par des attributs class pour indiquer quel "style" on utilise. Il est très important de bien structurer et d'écrire des documents valides car sinon le navigateur risque de ne pas être capable d'afficher. Ce n'est pas obligatoire (pour l'instant), mais c'est presque aussi risqué que de passer au rouge avec sa voiture ! Fermer une balise et fermer un élément ce n'est pas la même chose. Par exemple pour un paragraphe, il faut deux balises, une balise ouvrante de paragraphe et une balise fermante de paragraphe. Fermer la balise ouvrante p, c'est mettre le symbole > après p ; fermer la balise fermante p, c'est mettre le symbole > après /p. Donc pour l'élément p on a une ouverture d'élement avec l'ouverture et la fermeture de la balise ouvrante et on a aussi l'ouverture et la fermeture de la balise fermante pour fermer l'élément. Ouf ! Il existe plusieurs grammaires, comme : HTML 4.01 (versions strict, transitional, frameset) XHTML 1.0 (versions strict, transitional, frameset) XHTML 1.1 Et bien d'autres, comme MathML, SVG... Pour les grammaires conseillées ici (XHTML 1.0 strict et transitional), le vocabulaire est restreint au nom des élements html head body title link div p table tr td ul ol li span... ; les règles de syntaxe sont simples : toute balise ouverte doit être fermée. tout élément de balise et d'attribut doit être écrit en minuscules. le chevauchement entre balises est interdit. la valeur d'un attribut doit être mise entre "guillemets" même pour du numérique. l'abréviation des attributs est interdite. l'utilisation d'une DTD (Document Type Definition) XHTML est obligatoire. Dés qu'on utilise une grammaire, on peut vérifier si le document est bien structuré et valide. Ce n'est pas obligatoire non plus pour l'instant, et là encore c'est presque aussi risqué que de passer au rouge avec sa voiture. Si on omet la définiton de grammaire, la structure est : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> un simple bonjour </title> </head> <body> <h1>Bonjour</h1> </body> </html> Au vu de l'extrait de balise suivante <p id="dates" name="dates" style="font-size : 5 ; color : blue" class="mamf1 mamf2"... le navigateur repère qu'il s'agit d'un élément p, lui donne la chaine de caractères 'dates' comme identifiant et comme nom. Si la grammaire est 'strict', le navigateur cherche alors dans la cascade des styles les noms mamf1 mamf2 et applique alors dans l'ordre des styles les propriétés correspondantes. Si la grammaire est 'transitional', le navigateur commence par mettre pour les propriétés indiquées dans le style local les valeurs fournies avant de chercher à appliquer les styles noms mamf1 et mamf2. Voici le texte et sa traduction (rappel : en XHTML, les éléments et les attributs s'écrivent en minuscule). <x1 x2="X3" x4="x5">X6<x7 /><b>X8</b></x1> <p id="mfp" class="texte">Bonjour<hr /><b>tout le monde</b></p> Voici un document complet : <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="std.css" title="gh" /> <title> L2 TD1 EX 6 </title> </head> <body> <h1> Bonjour en <span class="gbleuf">XHTML</span> à Angers </h1> <h1>Bonsoir les enfants</h1> </body> </html> Ce fichier, écrit pour la grammaire 'strict', est valide aussi pour la grammaire 'transitional', la réciproque étant fausse. On peut utiliser une représentation en arbre haut/bas : html | | +-------------------+------------------+ | | | | head body | | | | title +----------+--------------+ "L2 TD1 EX 6" | | | | h1 h1 | "Bonsoir les enfants" | +---------+----------+ "Bonjour en" | "à Angers" | span | | "XHTML" ou une représentaion en arbre gauche/droite : html -- + -- head -- + -- title "L2 TD1 EX 6" | | + -- body -- + -- h1 --+ -- "Bonjour en" | | | | | + -- span + -- "XHTML" | | | | | + -- "à Angers" | + -- h1 "Bonsoir les enfants" Un exemple de boîtes est le suivant : +---------------------------------------------------------+ | html | | +-----------------------------------------------+ | | | head | | | | +------------------------------------+ | | | | | title | | | | | | +----------------+ | | | | | | | "L2 TD1 EX 6" | | | | | | | +----------------+ | | | | | +------------------------------------+ | | | +-----------------------------------------------+ | | | | +-----------------------------------------------+ | | | body | | | | +------------------------------------+ | | | | | h1 | | | | | | +--------------------+ | | | | | | | "Bonjour en" | | | | | | | +--------------------+ | | | | | | | | | | | | +--------------------+ | | | | | | | span | | | | | | | | +----------+ | | | | | | | | | "XHTML" | | | | | | | | | +----------+ | | | | | | | +--------------------+ | | | | | | | | | | | | +--------------------+ | | | | | | | "à Angers" | | | | | | | +--------------------+ | | | | | +------------------------------------+ | | | | | | | | +------------------------------------+ | | | | + h1 | | | | | | +-------------------------+ | | | | | | | "Bonsoir les enfants" | | | | | | | +-------------------------+ | | | | | +------------------------------------+ | | | +-----------------------------------------------+ | +---------------------------------------------------------+ Un tableau (élément table) contient des rangées (éléments tr). Chaque rangée contient des cellules ((éléments td). Voici donc la solution (avec une bonne indentation) où on a ajouté les ouvrantes et fermantes qui manquaient : <table> <tr> <td> <p align="left">Tout va <b>bien</b></p> </td> </tr> <tr> <td align="right"> Donc c'est <font color="blue">super</font>. </td> </tr> </table> L'attribut align n'existe pas pour les paragraphes en "strict", pas plus que l'élément font (mais align est accepté pour l'élément td). Voici donc le document valide en "strict" : <table> <tr> <td> <p class="justife_a_gauche">Tout va <b>bien</b></p> </td> </tr> <tr> <td align="right"> Donc c'est <span class="bleu">super</span>. </td> </tr> </table> Une colonne de valeurs numériques doit être justifiée à droite alors qu'une colonne de valeurs caractères doit être justifiée à gauche. On peut utiliser l'attribut align avec les valeurs left et right pour réaliser la justification. Cela fonctionnerait aussi avec les paragraphes mais avec la propriété text-align. Voici les éléments vus : Numéro Element Signification 1 a ancre (<a href="...") ou référence de section (<a name="...") 2 b passage en gras (mais <strong> est mieux) 3 blockquote retrait à droite (comme pour une citation) 4 body corps de la page 5 br saut de ligne 6 dd définition du terme dans une liste dl 7 div division (contenu rectangulaire) 8 dl liste à définitions 9 dt terme à définir dans une liste dl 10 em emphase 11 form formulaire 12 head partie "haute" qui contient notamment <title> 13 hr ligne horizontale 14 html élément racine qui contient tous les autres 15 h1 titre de niveau 1 16 h2 titre de niveau 2 17 img image 18 input élément de saisie dans un formulaire 19 li élément de liste 20 link relation de lien (sert pour la feuille de style) 21 ol liste ordonnée 22 noscript s'affiche quand Javascript n'est pas actif 23 p paragraphe 24 pre prévient que le texte est pré-formaté 25 script utilisation de Javascript 26 select liste de sélection dans un formulaire 27 span utilisation d'un style en mode "inline" (c'est-à-dire pas en mode bloc) 28 sub passage en indice 29 sup passage en exposant 30 table tableau 31 td division (cellule) d'une rangée (ligne) dans un tableau 32 textarea zone rectangulaire de saisie à plusieurs lignes 33 title titre de la page 34 th titre d'une cellule dans un tableau 35 tr rangée (ligne) d'un tableau 36 ul liste non ordonnée Corrigé du TD L2 numéro 2 (énoncé)     Formulaires, tableaux et propriétés Voici le texte et sa traduction (rappel: en XHTML, les éléments et les attributs s'écrivent en minuscule). <x1 class="s1"> <x2 class="s2">...</x2> <x3 class="s3">...</x3> ... </x1> <ul class="s1"> <li class="s2">...</li> <li class="s3">...</li> </ul> Une bonne indentation permet de relire le code-source plus facilement. De plus, en cas d'erreur de balise, d'attribut, comme les validateurs indiquent la ligne de l'erreur, si on n'a qu'une balise par ligne, on sait tout de suite d'où vient l'erreur. Par contre si on écrit <x1><x2>x3> ou <table><tr>td> il est difficile de voir immédiatement quelle balise est incriminée (ici, c'est le troisième élément qui n'a pas de < dans les deux cas). Pour écrire des indices et des exposants, il faut utiliser respectivement les élements sub et sup. Attention à l'ordre car il est d'usage de mettre l'indice avant l'exposant. Les exposants d'exposant et les indices d'indices sont autorisés comme pour : abcd et xijk qui s'écrivent a<sup>b<sup>c<sup>d</sup></sup></sup> et x<sub>i<sub>j<sub>k</sub></sub></sub> Les deux valeurs indiquées sont donc codées par x<sub>i</sub><sup>(n<sup>2</sup>)</sup> et par x<sup>n<sup>2</sup></sup><sub>i</sub>. Formulaire minimal : <form action="..."></form> Un tel formulaire est invisible dans une page Web et on ne peut pas l'exécuter. Mais avec Javascript, on peut le remplir, le gérer... Une entrée de type "submit" n'est pas forcément obligatoire, car s'il y a un champ d'entrée de type "text", il suffit d'appuyer sur la touche Entrée dans cette zone pour exécuter le formulaire. Attention : dès qu'on veut écrire du texte dans un formulaire à l'extérieur des élements input il faut une structure de "bloc" avec la grammaire stricte. Ainsi le code suivant est incorrect <form action="..."> Votre nom ? <input type='text' /> </form> Il faut par exemple ajouter un élément paragraphe, soit : <form action="..."></form> <p> Votre nom ? <input type='text' /> </p> </form> Tableau minimal : <table> <tr> <td> </td> </tr> </table> XHTMl fournit de quoi embellir un tel tableau. Ainsi, il existe des éléments pour définir les quatre parties logiques d'un tableau, à savoir caption, thead, tfoot et tbody. Les éléments caption, thead et tfoot, s'ils apparaissent doivent apparaitre en premier, dans cet ordre et une fois seulement. Par contre on peut avoir plusieurs éléments tbody. L'élément th peut être utilisé à la place de td pour indiquer qu'il s'agit d'une entête de ligne ou de colonne plutôt qu'une valeur dans le tableau. Le validateur pour Firefox impose d'avoir un attribut summary dans l'élément table pour l'accessibilité (aveugles, affichage sur téléphone...). Voici donc une structure de tableau plus complète ; noter l'ordre (obligatoire) tfoot puis tbody : fichier ../l2_tab_stru.txt non vu L'URL envoyée serait http://pdrv.fr/parm?JOUR=lun&DR=2&HR=A. Elle est composée de l'URL définie dans l'action, suivie du symbole ? puis des couples (variable,valeur) écrits variable=valeur sans guillemet, contrairement aux attributs ; ces couples sont séparés par un &. Si on met x=2, il y a conversion par le navigateur en x%3D2 ("urlencodage"). De même, le bouton d'envoi sera transmis comme go=envoi. L'ordre est celui des noms de champs dans le formulaire. Rien n'empêche d'avoir des noms identiques en majuscules et en minuscules mais c'est une mauvaise pratique car cela risque d'embrouiller le programmeur. On peut avoir un attribut value dans un élément input sans avoir d'attribut name ; cela arrive souvent quand on veut mettre un texte choisi pour la soumission (input type='submit'). Voir le code-source de sen_pdrv.php. Oui, il est possible d'interface Google-Web et Google-Images. En fait, pour afficher le texte renvoyé par Google-France concernant le mot pomme il suffit d'utiliser l'URL http://www.google.fr/search?q=pomme. On peut utiliser cette URL directement ou utiliser un formulaire dont l'action est http://www.google.fr/search avec un champ d'entrée nommé (impérativement) q. Pour les images, l'URL est http://images.google.fr/images?q=pomme. On peut activer le filtrage strict des pages renvoyées à l'aide de &safe=on soit en le tapant dans l'URL, soit avec un champ caché dans un formulaire via <input type="hidden" name="safe" value="on" />. Attention : pour une adresse écrite dans un href, la grammaire stricte interdit d'écrire le symbole & directement. Il faut utiliser l'entité &amp;. La valeur de l'attribut href est donc http://images.google.fr/images?q=pomme&amp;safe=on. Voici le code du tableau fichier ../l2_tableau.txt non vu Rappel : align='left' n'est pas obligatoire car c'est la valeur par défaut. Par défaut, l'élement th formatte son contenu en gras centré. On notera les constructions spéciales colspan='2' et rowspan='2' qui posent des problèmes d'indexation : avec colspan='2' combien a-t on de colonnes ? Il faut mettre dans l'attribut onsubmit du code Javascript qui aboutit à return false soit directement via onsubmit=' fonction() ; return false ' soit indirectement via onsubmit=' return( fonction() ) . Si l'URL est quand même chargée, c'est que Javascript est non actif ou que le code Javascript contient une erreur, que ce soit au chargement ou à l'exécution. Un pouce vaut 2,54 cm donc en Javascript, on peut écrire tout simplement tcm = tep*2.54 pour mettre dans la variable tcm la valeur en cm si la variable tep contient la valeur en pouces.Si dans un formulaire, le champ d'entrée pour la taille est nommé tep alors il faut penser à convertir en entier via parseInt(this.tep,10) ou en réel via parseFloat(this.tep) avant d'effectuer la multiplication. Voici le code possible d'un formulaire qui effectue cette conversion : <form method="get" action="non.htm" onsubmit="javascript: this.cm.value=2.54*parseFloat(this.pouces.value) + ' cm' ; return false ;"> Nombre de pouces : <input type="text" id="pouces" class="tajaunec" /> <input type="submit" /> <input type="text" id="cm" class="tajaunec" /> </form> Si on veut utiliser une fonction externe dont le paramètre est l'objet formulaire tout entier, il faut la mettre dans un fichier, par exemple conv2.js et charger ce fichier via <script type='text/javascript' src='conv2.js'></script> Ensuite, il faut mettre le mot this comme paramètre pour indiquer qu'on transmet l'objet formulaire tout entier. La fonction peut alors accéder aux informations du formulaire via le tableau associatif (ou table de hachage) nommé elements que fournit tout navigateur pour les formulaires d'une page web. Cela signifie qu'on peut donc utiliser les noms de texte d'entrée comme indices de ce tableau. Voici le code du formulaire qui utilise une fonction écrite dans un fichier externe : <form action="http://forge.info.univ-angers.fr/~gh/internet/non.php" method="get" onsubmit ="conversion(this) ; return false "> <p> Avec <input type="text" name="tep" /> pouces, <input type="submit" value="(cliquer)" /> on a <input type="text" name="cm" class="tajaunec" /> cms. </p> </form> Un texte correspondant pour Javascript est // (gH) -_- conv2.js ; TimeStamp (unix) : 19 Mars 2010 vers 11:26 // ################################################################################### function conversion(leFormulaire) { // ################################################################################### leFormulaire.elements['cm'].value = 2.54 * parseFloat( leFormulaire.elements['tep'].value ).toFixed(2) ; } // fin de fonction conversion // ################################################################################### mais on pourra préférer une version plus explicite comme : // (gH) -_- conv3.js ; TimeStamp (unix) : 19 Mars 2010 vers 11:51 // ################################################################################### function conversion(leFormulaire) { // ################################################################################### // taille en pouces lue dans le formulaire (en caractères) pouces = leFormulaire.elements['tep'].value ; // transcodage (cast ?) en numérique n_pouces = parseFloat( pouces ) ; // conversion en centimètres centim = 2.54 * n_pouces ; // on ne garde que deux décimales, c'est suffisant, le 1/10 de mm ! s_cm = centim.toFixed(2) ; // et on réinjecte dans le formulaire leFormulaire.elements['cm'].value = s_cm ; } // fin de fonction conversion // ################################################################################### Remarque : si l'utilisateur soumet le formulaire sans rien saisir, Javascript affiche NaN, ce qui signifie Not a Number. Oui, il y a une valeur par défaut, c'est 5 ; non, ce n'est pas correct, il manque l'attribut action pour l'élément form. Intellectuellement, il manque la question, car input type='text' ne gère que la réponse. Enfin, en strict il manque un élément de type boîte comme par exemple un paragraphe... Il faut rajouter un champ caché qui contient la bonne valeur, soit : <input type='hidden' name='section' value='grande' />. Comme son nom l'indique, type='text' correspond à du texte. Il faut le convertir en nombre avec parseInt ou parseFloat. Il est conseillé d'utiliser la forme "avec base explicite" comme dans a = parseInt(b,10) car certaines version de Firefox utilise le 0 mis en début de zone d'entrée pour en déduire qu'il s'agit d'une valeur écrite en... octal, ce qui fait que saisir 9 et 09 ne fournissent pas les mêmes résultats ! La valeur transmise est liée à l'attribut value. La valeur par défaut se définit via l'attribut selected. Pour des sélections multiples, on utilise l'attribut multiple. Et dans ce cas, le navigateur envoie plusieurs fois VARIABLE=VALEUR. Voici la réponse avec un envoi multiple possible via une sélection éventuellement non contigüe réalisée en appuyant sur la touche Contrôle en même temps qu'on clique : <select name='SEXE' multiple='multiple'> <option value='G' >Pipounet </option> <option value='A' >Schtroumpf</option> <option value='F' selected='selected'>Pipounette</option> </select> La valeur transmise est liée à l'attribut value. La valeur par défaut se définit via l'attribut checked. On ne devrait pas avoir deux valeurs par défaut (mais dans ce cas, les navigateurs semblent souvent utiliser le dernier attribut checked fourni). Voici le fragment du formulaire correspondant : <input type='radio' value='1' name='pipouyou' /> Non <input type='radio' value='2' name='pipouyou' checked='checked'/> Oui Rappel : il faut absolument utiliser le même attribut name pour que le navigateur soit capable de gérer la simultanéité d'affichage des ronds de sélection. Les trois parties essaient de permuter les contenus des variables a et b. Si les deux variables sont numériques, les trois séries d'instructions réussisent à permuter. Si les deux sont caractères, seule la partie 2 fonctionne, les deux autres mettre NaN dans a et b, comme dans le cas où une seule des deux variables est caractère. Attention : la partie trois fonctionne avec n'importe quels entiers et n'importe quels réels sauf a=0 et b=0. Pour tester rapidement le code, il suffit d'écrire <script> a = 6 ; b = 2 ; puis les trois parties puis </script> sous éditeur. Pas besoin de html, head, body... Par contre <script> est obligatoire pour forcer le navigateur à exécuter du code Javascript. Pas besoin besoin non plus de l'attribut type si on est pressé(e). Mais bien sûr, ce n'est pas valide pour la grammaire stricte... Cela peut venir de l'oubli de la conversion des champs en numérique. Par défaut, Javascript traite 13 et 21 comme des chaines, un peu comme "ac" et "ba" et donc "3" est plus grand que "21" (imaginez que c'est en fait "c" et "ba"). Dans la mesure où on ne sait pas si l'utilisateur a appuyé sur ENTREE ou s'il a cliqué sur le bouton ENVOI, ou sur une image, il vaut mieux utiliser onSubmit plutot que onClick. Il y a beaucoup de choses à faire dans les deux dernier cas. Pour un simple entier, utiliser parseInt est suffisant ; il reste à tester qu'après la conversion on n'a pas NaN., ce qui est par exemple le cas si la réponse est vide... Pour une liste d'entiers, il faut tester qu'il n'y a que des espaces et des chiffres, ce qui n'est pas simple (sauf à utiliser des 'expressions régulières') car il faut passer en revue tous les caractères saisis. Voici par exemple ce qu'on pourrait écrire si la réponse est dans la variable lst : lst = "12 18 35" // longueur de la chaine lng = lst.length // parcours de tous les caractères ; // seul l'espace et les chiffres sont autorisés charsOk = " 0123456789" ; // valeur de retour en fin de parcours : // si ok=1 la liste est valide ; // si ok=0 la liste est invalide. ok = 1 ; // par défaut, c'est plus simple idc = 0 ; // indice de caractère dans la chaine while (idc<lng) { cc = lst.substr(idc,1) ; // caractère courant if (charsOk.indexOf(cc)==-1) { // on a donc un caractère non autorisé ok = 0 ; idc = lng + 1 ; // non obligatoire, seulement plus rapide } ; // fin de si idc++ } ; // fin de tant que sur ic Avec un peu d'entrainement aux REGEXP en Javascript , on a un code plus concis : (autres références possibles : ref1, ref2, ref3 et ref4). // expression régulière qui accepte seulement des espaces et des chiffres // ce qui produit une liste d'entiers var moner = new RegExp("^[ 0-9]+$"); if (!moner.test(lst)) { // ligne d'entiers INVALIDE ... } else { // ligne d'entiers valide ... } ; // fin de si </script> Pour le ballon rouge, accepte-t-on les réponses en majuscules ? et si la réponse est roug au lieu de rouge (c'est à dire s'il manque une lettre), peut-on considérer que c'est faux (intellectuellement, pédagogiquement, bien sur car informatiquement, avec une lettre de différent, tout est faux). Idem pour la ballon rouge. Donc l'évaluation, c'est difficile avec un ordinateur.   Corrigé du TD L2 numéro 3 (énoncé)     Eléments, attributs et Javascript En toute rigueur, il ne faudrait utiliser que des appels à des fonctions Javascript dans une page Web valide, les fonctions étant définies dans un fichier externe et chargées dans la partie head. Pour des fonctions à exécuter dès le chargement de la page, il faudrait recourir à un gestionnaire d'évènements de façon à ce que chaque fonction chargée n'empiète pas sur les autres. window.document.write, qu'on peut d'ailleurs écrire seulement document.write, ne devrait s'utiliser que pour des vérifications élémentaires, jamais dans de "vraies" pages. Toutefois, pour des tests élémentaires, on peut écrire juste le code Javascript dans un élément script sans aucun attribut. Par exemple, on pourra utiliser un fichier restreint au code suivant et qu'on peut vérifier ici : <script> // essais "rapides" en Javascript // NE JAMAIS ECRIRE CECI DANS DES VRAIES PAGES A = 2 a = 5 var msg = " ; la variable a vaut " + a ; alert("la variable A vaut "+a+msg) ; document.write("<p>à éviter...</p>") ; </script> Voir ici le contenu des tableaux. Voici la solution, utilisée par l2td3e3.htm : // (gH) -_- l2td3e3.js ; TimeStamp (unix) : 27 Mars 2010 vers 18:25 function l2td3e3() { dbg = 1 ; // mettre dbg=1 pour avoir une "alerte" à chaque changement dans le texte // Création d'un paragraphe qui contient Bonjour para1 = window.document.createElement("p") ; text1 = window.document.createTextNode("Bonjour (1)") ; para1.appendChild(text1) ; window.document.body.appendChild(para1) ; if(dbg==1) { alert("Cliquer pour continuer") } // Création d'un paragraphe qui contient Bonsoir // On commence par supprimer le paragraphe précédent delete para1 ; // n'efface que le paragraphe en mémoire // window.document.body.removeChild(window.document.body.firstChild) ne suffit pas // car il y aussi l'élément script dans body while (window.document.body.firstChild) { window.document.body.removeChild(window.document.body.firstChild) } ; para2 = window.document.createElement("p") ; text2 = window.document.createTextNode("Bonsoir (2)") ; para2.appendChild(text2) ; window.document.body.appendChild(para2) ; if(dbg==1) { alert("Cliquer pour continuer") } // Modification du paragraphe précédent // On commence par enlever tous ses éléments // On met ensuite du texte, un élément span (à cause de la couleur demandée) // puis un autre texte while (para2.firstChild) { para2.removeChild(para2.firstChild) } text = window.document.createTextNode("Bonjour (3) ") ; para2.appendChild(text) ; part = window.document.createElement("span") ; part.setAttribute("id","sp2") ; part.setAttribute("class","gbleuf") ; text = window.document.createTextNode("à tous et à toutes") ; part.appendChild(text) ; para2.appendChild(part) ; para2.appendChild( window.document.createTextNode(". Bonsoir (3)") ) ; } ; // fin de fonction l2td3e3 Consulter l2td3e4.htm dont voici le code-source : // (gH) -_- l2td3e3.js ; TimeStamp (unix) : 27 Mars 2010 vers 18:25 function npara(nbp,id_div) { // Création de n paragraphes dans la division dont l'id est fourni for (idp=1;idp<=nbp;idp++) { para = window.document.createElement("p") ; text = window.document.createTextNode("Ceci est le paragraphe numéro "+idp) ; para.appendChild(text) ; document.getElementById(id_div).appendChild(para) } ; // fin pour idp } ; // fin de fonction npara Consulter listesel.htm dont voici le code-source : fichier listesel.js non vu Il suffit d'utiliser la fonction split avec l'espace comme séparateur. Il suffit d'utiliser la fonction split avec une expression régulière comme séparateur. Pour bien débugger, on peut penser utiliser un élément deux divisions en position fixe et un élément textarea dans la partie du bas pour afficher ce qui se passe. Voir par exemple taenbas.php et son code-source Javascript. Cliquer ici pour le savoir... Retour à la table des matières

 

 

   Retour à la page principale de   (gH)