Cours de programmation en Javascript et HTML

Ce cours n'est plus maintenu à jour car je passe au XHTML.

Plan du document

Travail demandé
- Une page WEB
- Compte rendu
Documentation et outils utilisés
Le HTML
- Un document HTML a une structure minimale indispensable
- Les principales balises à connaître
- Exercices
Le Javascript
- Insertion de code JavaScript à l'intérieur d'une balise HTML
- Insertion entre les balises Script
- Les Objets du javascript
  - L'objet document.form
- Afficher des messages
- Exercices
Le DHTML
- Présentation
- Essais
- Exercices
Les feuilles de style
Le php
Astuces demandées par les étudiants
- Afficher une boîte de dialogue si le bouton est coché
- Changer l'affichage d'un HTML
- Chaîne de caractères trop longue

Travail demandé
- Une page WEB
  Je ne demande qu'une page WEB, 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). Ceci demande du travail, mais me semble intéressant.
  
  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." ! Le top serai que ce soit une page HTML faîte à la main.
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 : Netscape : liste des balises HTML, DHTML avec commentaires et explications des fonctions javascript.

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 pour afficher nos pages car les erreurs javascript sont assez facilement visibles avec "Tools->Web developement->javascript console".

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 HTML

Une page WEB est avant tout une page de code en HTML. Le HTML sert tout d'abord à faire de la mise en page d'informations, d'images et de mettre des liens vers d'autres pages WEB. Le HTML est aussi un langage qui permet une hiérarchisation.

Les éléments de base du HTML sont les balises : des opérateurs entre des < >. 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. Certaines balises ne vont pas par paire comme <br> pour un saut de ligne.

Remarques :

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

Un document HTML a une structure minimale indispensable

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">	Pour informer de la norme utilisée, ici HTML 4.01
<html>	Début du document html
<head>	Début de l'entête
<title>Cours HTML-Javascript IUT</title>	Informe le navigateur du titre de la page
...	d'autres infos
</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.
- i : mettre en italique.
- s : ~~barrer~~.
- u : souligner.
- 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 choisi comme font color="#ff0000".
- center : centre le paragraphe (met un saut de ligne avant et après) .
: images et liens
- img : désigne une image(1).
- 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".
  - name : à 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).
- 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.
- 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 width='95%' border='2'>
  <caption>Exemple de tableau</caption>
  <tr><th>A</th><th bgcolor="#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 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 ne sont pas à droite alors que J l'est : voir les feuilles de style.

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

Les boites de dialogues

form : délimite une boite de dialogue. Elle 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 :

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

radio : défini un ensemble de bouton pour chaque nom name="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' value='un_zero'>	ou	<input type='radio' name='un' value='un_un'>
<input type='radio' name='deux' value='deux_zero' 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'>
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.

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) : balise qui ne se ferme pas.

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 (2)

Le Javascript

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" + document.essai.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/css"> 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.
Les Objets du javascript
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.form
  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 name="essai" method="get" action="cours.html">. Notre formulmaire s'appelle donc "essai", pour intervenir dessus. Il faudra tout d'abord la qualifier par document.essai ou tout simplement par essai. 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(document.essai.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'>
    - : <inputdocument.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.name)" value='this.name' name='JS_5'>
  - : <input type='button' onclick="alert(document.essai.onze.type)" value='type' name='JS_6'>
  - : <input type='button' onclick="alert(document.essai.onze.value)" value='value' name='JS_7'>
  Maintenant, modifions ces valeurs :
  - : <input type='button' onclick="document.essai.onze.defaultValue='nouveau'" value='defaultValue' name='JS_8'>
    : <input type='button' onclick="document.essai.onze.defaultValue='autre'" value='defaultValue' name='JS_8bis'>
    pour tester et donner la nouvelle valeur par défaut.
  - : <input type='button' onclick="document.essai.onze.value='Nouveau\ntexte\n'" value='value' name='JS_9'>
  Finalement, voici la liste des méthodes intéresantes :
  - : <input type='button' onclick="document.essai.onze.focus()" value='focus()' name='JS_10'>
  - : <input type='button' onclick="document.essai.onze.select()" value='select()' name='JS_11'>, maintenant cliquez sur le bouton juste en dessus et remarquez la différence
  - : <input type='button' onclick="document.essai.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(document.essai.un[0].checked)" value='checked' name='JS_14'>
  - : <input type='button' onclick="document.essai.un[0].defaultChecked" value='.defaultChecked' name='JS_15'>
  - : <input type='button' onclick="alert(document.essai.un[0].click())" value='click()' name='JS_16'> sélectionne l'item
    : <input type='button' onclick="alert(document.essai.un[1].click())" value='click()' name='JS_16bis'>
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 (2).

Il vous reste encore des procédures intéressantes à découvrir comme celle qui est expliqué à 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 bgcolor='#ff3300'><a name="#DHTML1"></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 bgcolor='#ffff00'><a name="#DHTML4"></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 emplacement 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(2).

Les feuilles de style (2)
Rajoutez une feuille de style sur votre page. Profitez-en pour faire des effets sur vos liens quand la souris passe dessus. Vous pouvez regarder le code source de cette page, il y en a une au début.
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.
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
  /

(2) : 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 .

Index de mon site	Index de mes pages sur la création de pages WEB