Cours XHTML-Javascript IUT

Cours de programmation en Javascript et XHTML

Plan du document

Présentation

Ce cours est une adaptation XHTML du cours sur le HTML. Tel qu'il est présenté ici, le XHTML n'apporte pas beaucoup d'intérêts par rapport au HTML car je fais exactement les mêmes choses!

Cependant, d'un point de vu enseignement, le premier intérêt du XHTML, c'est qu'il est moins transigeant quand il y a une erreur dans le code. Il affiche uniquement une indication sur la première erreur trouvée. Un autre intérêt est que les scripts en javascript disponibles sur le net sont rarement faits avec assez de précisions pour être compatibles XHTML.

Travail demandé

Une page WEB
Je ne demande qu'une page WEB au format xhtml, si pour des besoins quelconques, vous préférez en faire plusieurs, allez-y ! Je veux que vous y mettiez tout ce que je demande dans les exercices (à la fin des chapitres). Cette page devra être validée XHTML par W3C. Je tolèrerais des eccarts à la norme que s'ils sont duement expliqués. Ceci demande du travail, mais me semble intéressant.

Je souhaite en plus qu'une page ait en javascript au moins une boucle, un test, un appel à une fonction, une recherche de valeur dans un formulaire.

C'est à vous de trouver un sujet intéressant à traiter où vous pouvez mettre toutes ces astuces. Je ne veux pas voir des boûts de code copiés bêtement sur des sites qui en proposent, vous devez les modifier et les adapter à vos besoins.
Compte rendu
Une semaine avant la soutenance, il faudra me rendre un compte rendu. Celui-ci devant mettre en valeur les points qui vous ont semblé critiques dans la conception de la page. Ce compte rendu sera une manière diplomatique de dire "Là, ce que j'ai fait, c'est dur, ça mérite des points. Donnez-les moi SVP." ! Afin de mettre en évidence le point qui vous a demandé le plus de réfexion, je demande de mettre l'algorithme correspondant (au moins un algorithme dans le rapport).

Le top serai que ce soit une page XHTML faîte à la main.

Remarque : il est inutile de mettre le code source comme ça dans le document s'il n'est pas abondamment commenté ! Je préfère avoir un lien vers la page afin de tester.

Documentation et outils utilisés

Cette page bien sur! Mais elle n'est pas tout, Il y a tellement de choses, d'astuces que je ne peux prétendre tout connaître. Le but du cours est aussi de vous apprendre à faire un site avec les informations disponibles sur internet.

Reférence HTML officielle : http://www.w3.org/TR/html4/

Cours de javascript : http://perso.wanadoo.fr/philippe.medan/jvs/jsaccueil.htm

Documentation utile : Outil XHTML 1.1 Hiérarchie : liste des balises XHTML avec commentaires et liste des attributs et événements.

Toutes les pages html, htm (ou php) que vous trouvez intéressantes ont aussi leur code HTML que vous pouvez regarder, comprendre et utiliser. Celle-ci aussi!

Nous allons utiliser hapedit pour écrire l'HTML car il possède la coloration syntaxique (ceci est fort agréable) et d'autres atouts comme la complétion des balises.

Nous utiliserons mozilla ou firefox pour afficher nos pages car les erreurs javascript sont assez facilement visibles avec "Outils->Console Javascript".

Votre feuille devra être validée par W3C.

Pour ma part, dans ce document, j'essaie de toujours d'écrire les codes sources en italique (il a pu m'en échapper quelques uns!) et sans fautes d'orthographe (là, c'est vraiment trop dur!).

Le XHTML

Une page WEB est avant tout une page de code en HTML ou XHTML. Le HTML comme le XHTML servent tout d'abord à faire de la pagination : la mise en page d'informations, d'images et de mettre des liens vers d'autres pages WEB. Ce sont aussi des langages qui permetent une hiérarchisation.

Les éléments de base du HTML et du XHTML sont les balises : des opérateurs entre des < >. En HTML, beaucoup de balises vont par paire afin de marquer une partie de texte par exemple <b>en gras</b> pour en gras. Notez le / pour la balise fermante qu'il faudra mettre au bon endroit, par exemple, vous écrivez {[(...)]} mais pas {([...})] comme aurait trop tendance à le faire micro$oft. En HTML, certaines balises ne vont pas par paire comme <br> pour un saut de ligne. Par contre en XHTML, il faut fermer toutes les balises même <br>, mais on peut simplifier dans de tels cas <br></br> en <br />.

Remarques :

Le html n'est pas sensible à la case (majuscule/minuscule) contrairement au XHTML et au javascript, mais pour avoir moins de problème lorsque vous voudrez rendre votre document compatible XHTML, je conseille de mettre les balises en minuscule dans les documents html.
Ne pas mettre d'espace entre le < et la balise : on écrit <br /> mais pas < br /> .

Un document XHTML a une structure minimale indispensable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	Pour informer de la norme utilisée, ici XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">	Début du document html
<head>	Début de l'entête
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />	Indispensable : information sur le code utilisé
<meta name="Author" content="Troumad" /> <meta name="Description" content="XHTML" /> <meta name="Keywords" content="Conception" /> <meta name="Copyright" content="gpl" /> <meta name="Generator" content="kwrite" />	Des infos sur le documents (il y en a plein d'autres qui existent)
<title>Cours XHTML-Javascript IUT</title>	Informe le navigateur du titre de la page
</head>	Fin de l'entête
<body>	Début du texte
...	corps du document html
</body>	Fin du texte
</html>	Fin du document

Les principales balises à connaître

La mise en forme
- br : saut de ligne (1).
- hr : saut de ligne avec un trait entre les lignes (1).
- p : marque un paragraphe.
- b : mettre en gras peut aussi être traité en css.
- i : mettre en italique.
- s : barrer.(2)
- u : souligner.(2)
- big : écrire plus gros.
- small : écrire plus petit.
- sup : ^{mettre en exposant}.
- sub : _{mettre en indice}.
- font : modifie les attributs de la fonte de caractères en fonction des paramètres.(2)
- center : centre le paragraphe (met un saut de ligne avant et après).(2)
- em : balise pour mettre du texte en évidence, mozilla et netscape ont choisit de mettre en italique.
- span : délimite une partir de texte où on peut appliquer les styles souhaités, pour suppléer par exemple aux balises devenues obsolettes en XHTML.
images et liens
- img : désigne une image(1) Par exemple <img src="chemin_vers_image" alt="commentaire" />.
- a : encadre un lien
  . paramètres importants
  - src : indique l'emplacement de l'image. Si cet emplacement est local, mettre le lien en relatif, s'il est sur un autre site ce lien doit être absolu.
  - href : indique l'emplacement du lien (même remarque que précédemment).
    - Lien vers une page de notre site : href="chemin relatif" comme href="../Math/index.html".
    - Lien vers une page extérieure : href="http://chemin absolu" comme href="http://geii.univ-lyon1.fr".
    - Lien vers un signet de la page href="#le signet" comme href="#_1_".
    - Lien vers une adresse internet : href="mailto:toto@fai.fr".
  - id : à l'intérieur d'un lien permet de rajouter un signet comme le (1) en bas de chapitre.
hiérarchisation :
- ol : marque le début d'un niveau de liste numérotée.
- ul : marque le début d'une liste désordonnée.
- li : indique une entrée de liste aussi bien pour ul que ol (1).
- dl : marque le début d'une liste avec terme et définition.
- dt : nom d'un terme d'une liste définie avec dl.
- dd : définition d'un terme d'une liste définie avec dl.
- hx : lettrage d'entête avec x de 1 à 6 (niveau de titre).
tableau (peut aussi être utilisé pour faire des colonnes dans un document comme pour les boutons radios plus bas) :
- table : début d'un tableau, composé de lignes avec des cases dedans.
  Voir la page http://openweb.eu.org/articles/tableaux_css/.
- tr : définition d'une ligne qui va contenir des cases. Cette ligne devra être dans un tableau (entre des balises table).
- td : définition d'une case normale. Cette case devra être dans une ligne (entre des balises tr).
- th : définition d'une case de titre (centrée et en gras) Cette case devra être dans une ligne (entre des balises tr).
- caption : Titre du tableau : en caractère normal centré au dessus du tableau. La largeur du titre sera au plus celle du tableau : s'il le faut, il y aura un retour à la ligne.
Voici un exemple de tableau avec des nouveaux paramètres. Le code source de ce tableau est :
<table style='width:95%;border:2'>
<caption>Exemple de tableau</caption>
<tr><th>A</th><th style="background-color:#ff0000">B</th><th>C</th><th>D</th></tr>
<tr valign='top'><td rowspan='2'>E</td><td>F</td><td colspan='2'>G</td></tr>
<tr align='right'><td>H</td><td>I</td><th>J</th></tr>
</table>

Exemple de tableau
A B C D

E F G

H I J

Nous pouvons voir ici que les styles sont prédomminants : H et I sont à droite alors que J ne l'est pas : voir les feuilles de style.

Exemple de tableau
A	B	C	D
E	F	G
H	I	J

Les formulaires : interfaces de dialogues

form : délimite un formulaire. Il pourra contenir autant d'entrées qu'on le souhaite, toutes nommées différemment afin de les différencier. On peut définir une action qui sera effectuée lorsqu'on actionnera la une input de type submit : <form Method="get" Action="sortie.html">. Dans ce cas, tous les paramètres seront automatiquement transmis. Ces entrées seront au choix :
label : sert à ce que lors d'un clique sur un texte, ça fasse comme si on cliquait sur l'input auquel il corresspond. Voir exemple sur les boutons radios avec <label for="un"> et </label> autour de son commentaire : c'est le seul dont le texte est aussi actif !

input : défini une entrée de formulaire (1). Son type pourra être :

radio : défini un ensemble de bouton pour chaque nom id="nom" pour lesquels un seul pourra être sélectionné simultanément. Voici un exemple avec deux ensembles de deux boutons :

<input type='radio' name='un' id='un' value='un_zero' />	ou	<input type='radio' name='un' value='un_un' />
<input type='radio' name='deux' value='deux_zero' checked='checked' />	ou	<input type='radio' name='deux' value='deux_un' />

checkbox : défini une case à cocher comme sur la ligne suivante.

<input type='checkbox' name='trois' value='trois_zero' /> et/ou <input type='checkbox' name='trois' value='trois_un' />
text : permet de rentrer un texte qui sera visible
<input type='text' name='quatre' value='ici' />
password : permet de rentrer un texte qui sera caché, comme l'entrée d'un mot de passe, les caractères sont remplacés par des *.
<input type='password' name='cinq' value='pas là' />
button : affiche un bouton
<input type='button' name='six' value='bouton' />, ici, j'ai rajouter un script pour faire un changement de couleur au passage de la souris.
file : permet de repérer un fichier dans l'arborescence de l'ordinateur
<input type='file' name='sept' value='fichier' />
submit : quand un utilisateur clique sur un bouton "submit", le questionnaire est soumis avec l'action spécifiée par la balise form. J'ai dit dans la balise form que cette page doit elle-même s'appeler, regarder, la forme du lien après avoir cliqué sur le bouton.
<input type="submit" name ="huit" value="Oui" />
reset : remet tous les boutons aux valeurs initiales
<input type="reset" name ="neuf" value="Non" />
image : comme submit, mais place une image à la place du bouton.

On peut rajouter l'extention readonly="readonly" à toute entrée input afin de la rendre non editable :

select : un menu déroulant

option : item du menu déroulant

textarea : défini une zone de texte
C'est la première ligne Voici la seconde Et la dernière <textarea name='onze' rows='4' cols="55">
C'est la première ligne
Voici la seconde

Et la dernière
</textarea>

Pour plus de renseignements (paramètres...) sur ces balises et les autres que j'ai oubliées (volontairement ou non) : l'index des balises sur netscape ou sur les actions en javascript sur ses éléments aller voir plus loin sur cette page.

Attention, ce sont les balises qui sont entre des <...>. Pour écrire ceci je dois utiliser des caractéres définis <...> et dans cet exemple pour le &, j'ai du mettre &. Vous en trouverez un formulaire à http://www.cabuzel.com/truc/resume.html#caractere.

(1) : balises qui ne se ferment pas en HTML, mais en XHTML, toutes les balises se ferment. Celles ci peuvent se fermer comme <br> en <br />.

(2) : balises non conformes aux règles strictes : elles doivent être remplacées par des styles.

Exercices
A vous de créer une page avec une hiérarchisation, des images, un formulaire et des liens.

Cette page devra avoir au moins :
- une hiérarchisation ordonnée (trame de la page) et des listes non ordonnées
- Un lien vers une page voisine : dans le répertoire où est votre page, créez une répertoire dans lequel vous mettez par exemple cette feuille
- Un lien vers un site extérieur
- Un lien vers votre adresse électronique
- Des images dont une qui sert de lien
- Un tableau avec des titres et des cases de données
- Un formulaire avec différents boutons
- Des liens sur des parties d'images (3)

Le Javascript

Normes officielles : Standard Ecma-262.

C'est lui qui nous permettra de faire des programmes. Nous allons commencer par faire des effets simples en passant la souris sur des liens. Ensuite nous travaillerons avec des formulaires et leurs boites de dialogues. Finalement dans le prochain chapitre, nous ferons du dynamique en alliant le DHTML au javascript.

Un programme en javascript s'insére dans du code HTML entre les balises suivantes : <script type="text/javascript"> code JS </script> ou il peut être mis comme argument à certains paramètres de balises.

Insertion de code JavaScript à l'intérieur d'une balise HTML

Certaines balises HTML acceptent de réagir à certains événements. Ils sont soit provoqués par l'intervention de l'utilisateur, soit provoqués par une action du navigateur lui même, comme le chargement de la page HTML (événement onLoad) ou la fermeture de la page HTML en cours (événement onUnload).

Dans ce cas, le code JavaScript peut être aussi inséré directement au niveau de la balise en question comme ceci <balise html événement="[javascript:]nom du code événement">. Voici une liste partielle des possibilités :

onclick : quand on clique sur le lien balise a, sur une entrée, input, de type button, checkbox, password, radio, reset, sur une balise select
<a name="JS_1" onclick="alert('vous venez de cliquer')" href="#JS_1"> ou
pour la balise a : <a href="javascript:alert('comme ceci ça marche sans mettre un lien qui peut faire planter')">
onmouseout : quand la souris sort du lien marqué par la balise a
<a name="JS_2" onmouseout='alert("vous venez de sortir du lien")' href="#JS_2">
onmouseover : quand la souris passe sur le lien, balise a
<a name="JS_3" onmouseover="alert('votre souris arrive sur le lien')" href="#JS_3">
onreset : pour la balise form si on remet à zéro le formulaire
onsubmit : pour la balise form si on soumet le formulaire
onblur : sur une entrée, input, de type text, sur une balise select, sur un textarea, sur le document avec la balise body quand l'élément rend la sélection
onchange : sur une entrée, input, de type text, sur une balise select, sur un textarea quand l'élément rend la sélection et est modifié
onfocus : sur une entrée, input, de type text, sur une balise select, sur un textarea, sur le document avec la balise body quand l'utilisateur clique sur l'élément (sélectionne)
onselect : sur une entrée, input, de type text, sur un textarea quand l'utilisateur sélectionne une partie du texte

...

Ce cadre contient trop d'interactions pour un fonctionnement serein.

<input type='text' value='dur dur' name="JS_4" onblur='alert("désélection")' onchange='alert("nouvelle valeur :\n" + this.form.JS_4.value)' onselect='alert("que mettre?")' />

onload : sur le document avec la balise body exécute la procédure quand le document a fini de se charger. Il y en a un dans ce document : regarder le code source.
onunload : sur le document avec la balise body exécute la procédure quand le document se décharge (quand on passe à la page suivante).

Remarque :

Pour des exemples simples, j'utilise une fonction javascript fort utile pour débugger : alert.
Vous pouvez faire appel à n'importe quelle autre fonction, même une fonction que vous aurez vous-même défini (voir plus loin).
Vous pourrez aussi remarquer la différence entre les lignes de onclick et onmouseout : les " ou les ' servent à encadrer des chaînes de caractères. Ils marchent comme des parenthêses.
J'ai fait un saut de ligne dans le onchange en mettant \n dans la chaîne de caractères

Insertion entre les balises script
Entre les balises <script type="text/JavaScript">//<![CDATA[ et //]]></script>, vous aurez deux sortes de code :
- exécution directe : le code sera exécuté lors de l'affichage du document html. Attention, dans ce cas, si vous faîtes appel à des propriétés du documents elles doivent déjà être affichées. C'est comme si vous faîtes appel à une partie d'un formulaire non affiché, donc inconnu pour le moment.
- exécution différée : le code est placé dans une fonction qui sera appelé plus tard par exemple lors d'un événement défini lors du précédent paragraphe.
Maintenant, nous voilà vraiment dans la programmation ! De quels outils disposons-nous? Quelle est la syntaxe de ce langage?
- Syntaxe
  Comme le C, le javascript est sensible à la case des caractères, c'est à dire que les fonctions ou variables "Fonc", "fonc" et "FONC" seront toutes différentes.
  
  Contrairement au C, en Javascript, on n'est pas obligé de définir une variable avant de l'utiliser (bien que ce soit conseillé) et on ne définit pas la nature de la variable la forme de son contenu sera défini lorsqu'on lui affectera une valeur. Par exemple a="10" mettra la chaîne de caractères constituée d'un 1 puis d'un 0 dans a alors que a=10 affectera la valeur entière 10 à a. Ceci permet de travailler plus tranquillement, mais fait perdre beaucoup de force au langage.
  
  Une fin de commande est signalée par un fin de ligne ou un ";". Contrairement au C, le ";" n'est pas obligatoire en fin de ligne.
  
  Les déclarations de fonctions se font de la manière suivante : function nom_de_fonction(liste des paramètres).
  
  Comme en C on encadre les fonctions, les boucles... avec des accolades : { partie à encadrer }.
  
  On déclare une chaîne de caractère avec ch='apostrophe' ou ch="guillemet".
- Les outils
  Les outils dont on dispose sont fort semblables aux outils du C. Nous pouvons faire des tests, des boucles, des fonctions qui peuvent être récursives, des tableaux qui commencent aussi à l'indice 0. L'utilisation de ces outils se fait comme en C.
  
  Le javascript dispose aussi de fonctions prédéfinies comme la fonction alert que j'ai utilisée tout à l'heure.
  
  Vous trouverez la liste des fonctions (méthodes) ainsi que le nom des objets (paragraphe suivant) à l'adresse : http://developer.netscape.com/docs/manuals/js/client/jsref/bklast.htm.
  
  Ces fonctions agissent certes sur des variables internes au javascript, mais le but est d'intervenir sur l'affichage de la page HTML. Pour cela, nous avons besoin d'intervenir sur les objets du javascript. Il faut donc apprendre à les dompter, ceci sera fait dans le chapitre suivant.
- En include
  On peut faire une routine javascript qui sera utilisée dans plusieurs pages. Nous pouvons soit la copier, soit dire de l'inclure dans le fichier à partir d'un fichier extérieur. L'intérét de la seconde méthode est une maintenance rapide : on modifie le fichier à inclure afin de mettre à jour toutes les pages. Par contre, il est alors plus dur de personnaliser les pages.
  
  L'insertion peut se faire n'importe où. Pour ceci, il faut mettre :
  <script type="text/javascript" SRC="/include/deroulement.js"></script> pour inclure le fichier "/include/deroulement.js". Là, il devient alors intéressant de repérer le fichier à partir de la racine du site car la ligne est uniquemnt à copier d'un fichier à l'autre sans se poser la question du chemin relatif qui a du changer.
Les Objets du javascript
Une liste des objets du javascript : http://www.toutjavascript.com/reference/index.php.

Voici une liste des objets disponibles :
- document : la page HTML que vous êtes en train de regarder. Tant qu'on travaille sur la page en cours, il est possible de ne pas le préciser.
  Cet objet contient aussi des (sous-)objets :
  - forms : tableau contenant une entrée pour chaque formulaire, form, du document. Voir la suite pour plus de détail sur cet objet.
  - fgColor : la couleur du fond d'écran.
  - images : un tableau avec une entrée par image du document.
  - links : un tableau avec une entrée par lien du document.
  - title : titre du document qui s'affiche en haut de votre navigateur.
  - height : la hauteur du document en pixel
  - width : la largueur du document
  - ...
    Pour tous les tableaux avec une entrée par item, les items sont classés dans l'ordre d'apparition en partant de 0.
  L'objet document a aussi des méthodes (fonctions, procédures) pour agir sur lui-même.
  - close() : pour fermer le document.
  - getElementById("nom") : pointe sur l'objet nommé nom du document. Trés utile pour le DHTML.
  - write("chaîne de caractères") : écrit dans le document "chaîne de caractères".
  - writeln("chaîne de caractères") : comme le précédent et rajoute un saut de ligne à la fin.
  - ...
- window : contient des informations sur la fenêtre du navigateur dans laquelle vous êtes en train de regarder cette page HTML.
  Comme document et les autres objets, cet objet contient des sous objets et des méthodes.
- navigator : contient des informations sur votre navigateur comme son nom et sa version. Ceci peut être important car parfois ils ne réagissent pas tous de la même façon à certaines procédures : il faut donc agir en fonction du navigateur utilisé !
- Date : pour manipuler des dates, heures et temps.
- Math : pour avoir des fonctions mathématiques.
- String : pour traiter les chaînes de caractère (c'est là qu'on vaoit la force de langage comme le C où on déclare la nature des variables.
- RegExp : effectue des recherches dans des chaînes de caractères ou d'effectuer des remplacements dans les mêmes chaînes de caractères.
- event : event.ccument.getElementById("DHTML1").style.toplientX et event.clientY pour les coordonnées x et y de la souris sur la page par exemple.
- ... regardez :http://richard.geneva-link.ch/954b.html.
A partir du moment, qu'on connaît l'existence d'un objet, on peut trouver dans la page précédemment donnée sur le site de Netscape, le nom de l'objet, cliquer dessus et voir ce qu'on peut en faire.

Nous allons étudier plus précisément l'objet document.form et nous intervenons sur notre formulaire précédemment vu.
- L'objet document.forms
  Il contient un tableau de tous les formulaires de la page, le premier étant document.forms[0].
  
  Il est possible avec le javascript aussi bien de lire les entrées d'un formulaire que de les modifier. Elles sont considérées comme des variables. On peut même utiliser une entrée textarea comme une sortie dans laquelle on mettra un message en fonctions de différents paramètres. Vous pouvez voir ceci à la fin d'une de mes pages. Cette page est assez intéressante à regarder car j'agis aussi bien sur le formulaire que je le lis, à vous de regarder le code source.
  
  Une feuille pouvant contenir plusieurs formulaires, ceux-ci portent un nom. Avant ma première entrée du formulaire, j'ai mis <form id="essai" method="get" action="cours.html">. Notre formulaire s'appelle donc "essai", pour intervenir dessus. Il faudra tout d'abord la qualifier par document.getElementById('essai') ou document.form[0] car c'est le premier formulaire du document ou tout simplement par this.form.essai losqu'on fait un appel dans un balise du formulaire. Ensuite il faudra qualifier l'entrée du formulaire sur laquelle on veut agir en les nommant correctemment. J'ai défini ma zone de texte par : <textarea name='onze' rows='4' cols="55">, elle se nomme donc onze. Pour agir dessus, je dois agir sur essai.onze. Maintenant, il faut aussi faire attention à la nature de l'entrée du formulaire car on n'agit pas toujours de la même manière sur les différentes entrées.
  
  Pour savoir ce que contient notre zone de texte, recherchons textarea sur l'index javascript de Netscape.
  
  On voit que cet élément à des "event handlers", c'est à dire qu'il peut appeler des procédures javascript en fonction de différents événements. Après, on voit qu'il posséde des propriétés puis des méthodes. Commençons par tester les propriétées en les faisants afficher.
  - : <input type='button' onclick="alert(this.form.onze.defaultValue)" value='defaultValue' name='JS_2' />
  - this.form donne le nom de la forme où se trouve notre entrée de formulaire. Ceci peut donner :
    - : <input type='button' onclick="alert(this.form.name)" value='this.form.name' name='JS_3' />
    - : <input document.getElementById("span"+i).style.top type='button' onclick="alert(this.form.elements[7].value)" value='this.form.elements[7].value' name='JS_4' />, la 8^ième entrée (7=8-1) est le mot de passe que vous voyez donc en clair!
    - ... vous pouvez ainsi tourner en rond aussi longtemps que vous le voulez!
  - : <input type='button' onclick="alert(this.form.action)" value='this.form.action' name='JS_5' />
  - : <input type='button' onclick="alert(this.form.encoding)" value='this.form.encoding' name='JS_5_bis' />
  - : <input type='button' onclick="alert(this.form.method)" value='this.form.method' name='JS_5_ter' />
  - : <input type='button' onclick="alert(this.form.target)" value='this.form.target' name='JS_5_quar' />
  - : <input type='button' onclick="alert(document.getElementById('essai').elements[2].type)" value='document.getElementById('essai').elements[2].type' name='JS_6' />
  - : <input type='button' onclick="alert(document.forms[0].onze.value)" value='document.forms[0].onze.value' name='JS_7' />
  - : <input type='button' onclick="alert(document.forms.length)" value='document.forms.length' name='JS_7_bis' /> nous indique le nombre de formulaires du document
  - : <input type='button' onclick="alert(this.form.length)" value='this.form.length' name='JS_7_ter' />. nombre d'item de ce formulaire.
  Maintenant, modifions ces valeurs :
  - : <input type='button' onclick="this.form.onze.defaultValue='nouveau'" value='defaultValue' name='JS_8' />
    : <input type='button' onclick="this.form.onze.defaultValue='autre'" value='defaultValue' name='JS_8bis' />
    pour tester et donner la nouvelle valeur par défaut.
  - : <input type='button' onclick="this.form.onze.value='Nouveau\ntexte\n'" value='value' name='JS_9' />
  Finalement, voici la liste des méthodes intéresantes :
  - : <input type='button' onclick="this.form.onze.focus()" value='focus()' name='JS_10' />
  - : <input type='button' onclick="this.form.onze.select()" value='select()' name='JS_11' />, maintenant cliquez sur le bouton juste en dessus et remarquez la différence
  - : <input type='button' onclick="this.form.onze.blur()" value='blur()' name='JS_12' />, ceci désélectionne et enlève le focus à notre zone de texte
  - handleEvent() : je ne le maîtrise pas!
  Toutes les entrées du formulaire ne sont pas aussi simple que ça à gérer. Certains ensembles d'éléments comme des boutons radio doivent avoir le même nom pour former un ensemble. Dans ce cas, ils forment un tableau indexé dans l'ordre d'apparition du premier au dernier en partant de 0 : le 4^ième élément sera l'item 3=4-1 du tableau. Ceci est aussi valable pour la forme essai.elements, l'ensemble des entrées du formulaire, objet que j'ai utilisé dans this.form.elements[7].value. Le premier ensemble de boutons radio est donc constitué de essai.un[0] et essai.un[0]. Nous allons nous intéresser à ces boutons. Pour cela cherchons radio dans l'index de la documentation javascript de netscape. Nous y trouvons de nouvelles fonctionnalités : c'est normal, le fonctionnement ne peut pas être le même que pour une zone de texte!
  
  Voici la liste des nouvelles fonctionnalités :
  - : <input type='button' onclick="alert(this.form.un[0].checked)" value='checked' name='JS_14' />
  - : <input type='button' onclick="this.form.un[0].defaultChecked" value='.defaultChecked' name='JS_15' />
  - : <input type='button' onclick="alert(this.form.un[0].click())" value='click()' name='JS_16' /> sélectionne l'item
    : <input type='button' onclick="alert(this.form.un[1].click())" value='click()' name='JS_16bis' />
- L'objet event
  event.keyCode informe sur la touche du clavier qui a été touchée :test
- Un objet quelconque
  <script type="text/javascript">
  //<![CDATA[
  for (prop in window)
  {
  document.write('<p>window.'+prop+' = '+window[prop]+'</p>');
  }
  //]]>
  </script>
  
  Choisissez l'objet dont vous voulez voir les caractéristiques :
Afficher des messages
Depuis le début des exemples, nous utilisons alert() pour afficher des messages dans des fenêtres modales. Voici d'autres essais de fenêtres modales confirm et prompt.
- : <input type='button' onclick="s=prompt('Entrez la barre de statut', window.status);" value='prompt' name='JS_15' /> puis appuyer sur le bouton suivant.
- : <input type='button' onclick="if (confirm('la zone texte sera \n' + s)) {window.status=s} else {alert('Annulation')}" value='confirme' name='JS_16' />
  - Cette fois, j'ai mis un petit programme dans le onclick. Et on a travaillé avec un nouvel objet : window.status.
Nous avons aussi la possibilité d'ouvrir de nouvelles fenêtres. Il faut commencer par ouvrir le document msg=open(chemin, nom de la fenêtre[, paramêtre de la fenêtre]) et ensuite, si besoin, msg.document.write(texte à mettre).

<input type='button' onclick='msg=open("cours_1.html","DisplayWindow","status=yes,width=500,height=150")' value='fenêtre et passage de paramètres' />

Ci dessous le code source du document cours_1.html

<html><head><title>Passage de paramètres</title></head>
<body style='text-align : center' bgcolor='#000000'>
<input type="button" onclick="window.status=prompt('Nouveau statut de la page','Rentrez-le ici')" value="donner le nouveau statut"><br><br / />
<input type='button' onclick="window.opener.document.title = window.status" value='transférer le statut' /><br /><br />
<input type="button" value="voir la source de la page" name="btnSource" onClick='window.location="view-source:" +window.location.href' />
</body></html>

Si nous laissons vide le premier champ d'open, nous pouvons alors fabriquer le document à la main avec msg.document.writeln("une ligne du document") et msg.document.write("une partie du document"). Vous pouvez voir un exemple sur la page : http://membres.lycos.fr/wphilippe/js_fenetres.html.
Exercices
Faîtes un formulaire clair et des procédures javascript pour résoudre et afficher le résultat de (au choix) :
y'+ay=bcos(c x)+dsin(c x)

y''+ay'+by=cx + d

y''+ay'+by=d.e^cx
où l'utilisateur rentrera a,b,c et d
Vous pouvez remplacer cette résolution par toute autre résolution de problème que vous avez vu cette année. Il suffit que la difficulté soit équivalente.

Gérez aussi toutes les ouvertures de fenêtres possibles.

Faîtes un appel de fonction avec passage de paramètres (4).

Il vous reste encore des procédures intéressantes à découvrir comme celle qui est expliquée à la page : http://perso.wanadoo.fr/philippe.medan/jvs/jsbtanim.htm. Essayez grâce à cette page d'intervertir deux images lorsque vous passez sur un lien. Ou regardez http://cgi.din.or.jp/~hagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html.

Le DHTML

Présentation

Les balises DHTML ne sont que des balises HTML qui encadrent un texte avec un nom pour les identifier. Elles définissent des morceaux de documents qui peuvent bouger, disparaître, apparaître afin de faire de l'animation. Personnellement, je préfère la balise div. Nous allons un peu étudier cela.

Pour pouvoir faire bouger du texte, il faut qu'il ait un style spécial. Pour cela, pas besoin de connaître les feuilles de style, il y a juste des lignes à recopier presque bêtement. Cependant, si vous êtes intéressés par les feuilles de style, aller voir les documentations officielles sur : VF de CSS1, VF de CSS2, VO de CSS1 et VO de CSS2.

Voici l'élément à rajouter entre les balises head pour créer un style d'élément dynamique :

<style type="text/css">	Ouverture d'un feuille de style
.cachea {	Création d'une classe "cache_a"
position: absolute;	On choisit une position absolue : le point de repère de notre élément sera le point haut-gauche de la feuille comme DHTML 1 et 4 Il existe aussi la position relative comme DHTML 2 et 3
left: 0px;	On place le point gauche à 0 pixel de l'écran.
top : 0px;	On peut aussi situer le haut.
visibility:hidden;	On décide de le cacher par défaut, pour le rendre visible, choisir visible.
} </style>	Fin de la feuille de style

Essais

Absolu DHTML1

Absolu DHTML4

Relatif DHTML2

Relatif DHTML3

Je défini comme ceci 4 structures DHTML :

<div class='cachea' id='DHTML1'><table border='2'><tr><td style='background-color:#ff3300'><a name="aDHTML1"></a>Absolu DHTML1</td></tr></table>	Remarquez bien que la div n'est pas close : l'autre élément fera donc partie intégrante de celui-ci.
<div class='cachea' id='DHTML4'><table border='2'><tr><td style='background-color:#ffff00'><a name="aDHTML4"></a>Absolu DHTML4</td></tr></table></div> </div>	Cette fois, les 2 div sont clos : DHTML4 est dans DHTML1.

J'ai fait la même manipulation avec 2 éléments positionnés en relatifs (position: relative) : HTML3 est dans HTML2. Vous pouvez les manipuler avec les boutons ci dessous. A vous de regarder le code source.


	DHTML1				DHTML2



	DHTML4				DHTML3

Je vous dois une petite explication quant à ces boutons :

Pour faire apparaître ou disparaître un calque (élément entre deux balises div), je fais :<input type='button' onclick='document.getElementById("DHTML1").style.visibility="visible"' value='montre' /> pour montrer et pour cacher, il suffit de remplacer le ="visible" par ="hidden". Pour passer d'un calque à l'autre, il suffit de changer son nom.
Pour les déplacer : <input type='button' onclick='pos_a_l-=100;document.getElementById("DHTML1").style.left=pos_a_l' value='Gauche' />. Comme ceci, je mémorise l'emplacement tout en le bougeant. Pour aller à droite plutôt qu'à gauche il aurait fallu augmenter pos_a_l au lieu de le diminuer. La hauteur, se gère avec .top à la place de .left. Pour descendre, il faut augmenter la coordonnée car l'axe part du haut de la feuille et va vers le bas.

Attention : Le DHTML1 et le DHTML4 étant en absolu avec une position relative de 0,0 apparaîtront en haut de la page. Si on n'avait pas imposé les coordonnées, ils seraient apparus au même endroit que DHTML2 et DHTML3, les relatifs, à la suite du dernier élément affiché. Par contre, je ne sais pas comment on récupère les coordonnées d'un élément, après je suis planté pour les faire bouger. Par contre, je peux ramener la frame en haut à gauche de la page : (attention, j'ai du rajouter du code pour être aussi compatible avec M$IE).

On remarquera entre autre que les emplacements relatifs impliquent des sauts de lignes alors que les absolus n'en génèrent pas. Ces derniers seront utiles par exemple pour faire des boites de commentaire comme sur ma page d'introduction du html.

Avec Mozilla, le DHTML3 disparaît s'il est trop haut ou trop bas par rapport au DHTML2. Je ne peux pas dire pourquoi d'autant plus que ce phénomène n'a pas lieu pour le DHTML4. De toutes façon, je déconseille de mettre un calque dans un calque car on s'y perd trop facilement par la suite. Ce n'est pas parce que des logiciels tels que FrontPage de Micro$oft font ça qu'on se doit de faire les même imbécilités que micro$oft.

Exercices
Rajoutez sur votre feuille :
- Des éléments qui bougent, disparaissent, apparaissent sur votre feuille.
- Un commentaire sous un lien qui s'affiche dès qu'on passe dessus.
- Essayer faire suivre la souris par une image(4).

Les feuilles de style (3)

présentation
C'est avec les CSS que, par exemple, on défini nous mêmes l'allure des liens, formate une page... Vous trouverez une traduction en français sur http://www.yoyodesign.org/doc/w3c/css1/index.html.

Vous pouvez rajouter une feuille de style sur votre page. Profitez-en pour faire des effets sur vos liens quand la souris passe dessus (comme le menu en haut à gauche de votre page). Vous pouvez regarder le code source de cette page, il y en a une au début.

Certes cette page n'est pas conçue de façon optimale : le mieux est d'avoir la feuille de style en dehors de la page, je dirais même d'avoir une feuille de style pour le site (ou au moins une par partie) car ceci permet de modifier l'allure du site en modifiant une seule page et d'avoir un site cohérent. Ici, le but est de TOUT avoir sur la page !
Mise en place des styles
- Pour la feuille complète
  Il faut mettre entre les balides head :
  <style type="text/css" media="screen">
  /*<![CDATA[*/
  P {text-indent : 20px;}
  P:first-line { margin-left : 5px ;}
  P:first-letter { color: #a4a ; text-decoration: underline; font-weight: bold; font-style: oblique; background-color: #aea; letter-spacing: 3px;}
  A:hover {color: #f00 ; background-color : #0ff; }
  BODY { color: #000000; background-color : #E0FFE0; }
  UL LI {margin-bottom : 20px }
  .t1 { list-style: upper-roman inside; color: #ff0000; font-size : 22px; font-weight: bold ; margin-left:50px;}
  .gras {font-weight:bold}
  /*]]>*/
  </style>
  
  Avec ses indications (un extrait de celle de cette page), je déclare, dans l'ordre pour toute la page :
  - P : Une indentation aux paragraphes.
  - P:first-line : Un retrait à la première ligne du paragraphe.
  - P:first-letter : Un effet sur la première lettre de chaque paragraphe.
  - A:hover : Un effet particulier lorsqu'on passe sur un lien (couleur bleue de fond).
  - BODY : un effet général sur toute la page : couleur de caractères noires et fond vert.
  - UL LI : Un espacement après chache fin de chapitre : à la fin de chaque li qui est dans un ul.
  - .t1 : La création d'un style t1 : les grands paragraphes.
  - .gras : Un autre style : gras pour remplacer la balide <b> du HTML.
  Dans une page optimisée, il vaut mieux le déclarer dans un fichier extérieur afin que toute une partie du site y fasse appel pour harmoniser l'aspect d'ensemble. Dans ce cas, nous ferons appel à la feuille de la façon suivante :
  <link rel="StyleSheet" href="/include/style.css" type="text/css" media="screen" />
  
  Dans les deux cas, vous pouvez voir : media="screen" car il est possible, entre autre, de définir une autre feuille de style pour l'impression : media="print".
- Pour une balise particulière
  Dans ce cas, on peut soit utiliser un style prédéfini dans la feuille de style : <p class='t1'> ou définir un style précis : <ul style='list-style:circle'> (cette dernière méthode ne sera plus acceptée dans les prochaines normes).
Demandes fréquentes des étudiants
Comme je demande un document en XHTML, il y a des balises HTML qu'on ne peut plus utiliser car il y a une autre méthode plus puissante pour faire la même chose.
- Centrer un texte
  Je donne l'attribut style="text-align:center" à ma balise <p> : <p style="text-align:center">Paragraphe centré</p>.
- Souligner un texte
  J'utilise la balise span :<span style="text-decoration:underline">Texte souligné<span>. Vous pouvez voir avec le lien donner qu'on a plusieurs façon de souligner : cette méthode est plus compliquées, mais plus puissante !
- Mettre en gras
  Avec le style définit pour la feuille complète : <span class="gras"> ou pour un seul élément (encore plus gras) : <span style="font-weight:bolder">.

Le php

Pour faire du php, il faut avoir un serveur php et déjà maîtriser le HTML et le javascript. Ce n'est pas pour cette fois! Pourtant, le PHP est très intéressant car il permet de gérer (lecture/écriture) des fichiers sur votre site et aussi des bases de données MySQL par exemple.

Un autre intérêt du PHP est d'envoyer le code à afficher directement au client. Le menu en haut de cette page est généré en javascript, les liens ne seront donc pas parcouru par un moteur de recherche, si le menu avait été créé en PHP (comme à ma partie secte), les moteurs de recherche pourraient les parcourir. Ceci dit, on peut mettre les liens dans une partie cachée de la page pour qu'ils soient ausi parcouru (comme sur http://geii.univ-lyon1.fr/).

Astuces demandées par les étudiants

Là, il faut regarder le code source pour comprendre et essayer de récupérer la méthode.

Afficher une boîte de dialogue si le bouton est coché

Afficher la liste à la place du bouton

Emplacement de la fenetre de choix

Dans ce cas, le texte et la liste de choix sont dans des calques à position absolue qui sont eux dans le meme calque à position relative placé juste à droite du bouton grace à un tableau. Cette astuce de double calque permet de placer autant de menu à cet endroit que souhaité. On peut aussi pour cela utiliser l'astuce suivante.
Changer l'affichage d'un HTML
__

Texte ici

Vous pouvez voir ne application sur ma page : Les cartes à la carte
Chaîne de caractères trop longue
_/____

(4) : exemple et pratique à trouver sur le WEB. A faire quand tout le reste est fait.

Finalement, j'aimerai vous dire que la meilleure façon de trouver des idées et des scripts est de surfer ou de trouver des sites qui en proposent des bibliothèques comme le site de WPhilippe et aussi de .