Mesures Physiques et Informatique, MPI, page 4

Réalisation d'un site Internet, page 3

Page modifiée le 7 / 11 / 2002

Contenu : Réalisation d'un site Internet, JavaScript, nombres, couleurs, différences entre Netscape Communicator et Internet Explorer, feuilles de style externes, styles intégrés, classes, cadres, calques, exemple de code Javascript, codes pour les caractères spéciaux

Note importante : Ceci est très largement au-delà du programme de MPI, mais peut intéresser des élèves très à l'aise en informatique.

Bibliographie

JavaScript : bien débuter, Compétence Micro, en bureau de tabac, basique, mais suffisant.
JavaScript : Micro Application, beaucoup plus complet

Conseils

Plutôt que reproduire une partie des ouvrages spécialisés qui traitent fort bien la question, prenons quelques exemples dans les pages mêmes de ce site. Notez que ce site sera amélioré régulièrement et qu'il vaut donc mieux voir directement le source de ses pages, dans le navigateur Internet, ou en sauvegardant la page et en la consultant avec un traitement de textes basique tel NotePad, ou WordPad.

En effet, Internet Explorer ne se comportant pas (plus joli en aspect, mais moins performant en JavaScript) comme Netscape Communicator , l'auteur de ce site est à la recherche permanente d'un compromis acceptable dans la présentation.

Naturellement, nous vous invitons aussi à explorer le code d'autres sites, chaque fois que vous y trouverez quelque chose d'original.

1. JavaScript

1.1. Quelques généralités

JavaScript est un langage interprété, contrairement au Pascal de Delphi (compilé), c'est à dire que le code est lu par le navigateur Internet qui réagit à ce code.

L'avantage de cette façon de faire est qu'elle est plus tolérante vis à vis des erreurs de programmation.
A ce propos, n'oubliez pas de faire taire Internet Explorer : Lorsqu'on explore un site, on souhaite le visualiser au mieux et pas noter sur 20 le réalisateur du site.

L'inconvénient est qu'elle est plus lente.

Mais JavaScript présente quelques défauts qu'il vous faut connaître : Il est sensible à la casse (majuscules ou minuscules) ; par exemple function, Math.random fonctionnent, mais pas Function, ni math.random. C'est parfois la galère.

De plus Netscape Communicator et Internet Explorer ne parlent pas le même JavaScript. Vous verrez comment il est possible, à grand peine, de s'en sortir (à peu près).

Haut de cette page

1.2. Images réagissant au passage de la souris

Voir dans ce site, le cadre vertical, à gauche de l'écran, mais il est compliqué, car c'est une seule procédure qui gère tous les boutons. IE recharge parfois inutilement les images ...

<!--
var nombreBoutons = 8 ;

//charge les 2 fois 8 dessins pour la barre verticale de navigation
vu = new Array() ; // crée un tableau
for (compt1=1 ; compt1 <=((nombreBoutons+1)*2) ; compt1++) {
vu[compt1] = new Image(); // crée un tableau d'images
vu[compt1].src = "ic"+compt1+".gif"; } // charge toutes les images nommées ic1.gif, ic2.gif etc.
// l'avantage est que le chargement est fait par une boucle
// l'inconvénient est que les noms d'images ne sont pas explicites

//-->
</script>

</head>
<body >

<a href="javascript:ChangerCadreHaut()" onMouseOver="GererIcone(2) ; return true" onMouseOut="GererIcone(1)"><img SRC="ic1.gif" ALT="Outils de recherche, ou bandeau PhyJi jussiaux.software" height=32 width=32 border="0"></a> etc.

Remarquez

le commentaire :
le chargement d'une nouvelle page : a href="javascript:ChangerCadreHaut()"
la réaction au passage de la souris : onMouseOver="GererIcone(2)"
la réaction au départ de la souris : onMouseOut="GererIcone(1)"
l'image chargée au départ : img SRC="ic1.gif"
le texte s'affichant lorsque le pointeur de la souris s'attarde sur l'icône : ALT="Outils de recherche, ou bandeau PhyJi
les dimensions de l'image, pour permettre une mise en place du cadre, avant le chargement des images : height=32 width=32

Les événements JavaScript sont les suivants :
onLoad, onUnLoad, onMouseOver, onMouseOut, onFocus, onBlur, onChange, onClick, onSubmit. Voyez ci dessus comment leur associer une procédure ou fonction.

Haut de cette page

1.3. Gestion des nombres

Voir le code dans le cadre en haut de l'écran, affichant le titre de ce site, nommé cadrhoriz1.htm.

Contrairement à Delphi, il n'est pas nécessaire de déclarer les variables au préalable ; c'est cependant préférable, pour pouvoir choisir entre variables globales et locales. Par contre les variables ne sont en général pas typée. Chic ! diront les élèves. Pas sur, car cela crée de nombreux problèmes. Voici un exemple.

x déclarée avant la fonction AfficherEnCouleur ( ), est globale. C'est une variable numérique, quoique ...
texte, incr ... sont locales à la fonction AfficherEnCouleur ( ). Mais l'interpréteur peut décider de changer la nature d'une variable, sans que les règles qu'il utilise soient bien claires.
Si x vaut 3, texte + x +1 peut donner texte31, au lieu du texte4 attendu. x est redevenu un chiffre et pas un nombre.

Par ailleurs, il n'est pas possible de changer la valeur de x, à l'aide d'une fonction et de la retrouver un peu plus tard, comme c'était souhaité pour la variable compteur, bien que x soit une variable globale !
En ce cas, il faut déclarer :
var x = new Number (0).

En faisant :
var compteur = new Number (0xFF),
nous avons décidé de plus que compteur serait écrit sous forme hexadécimale, en espérant que l'interpréteur ne le remettra pas au mauvais moment sous forme décimale.

var x = 3 ;
var compteur = new Number (0xFF) ; var compteur2 = new Number (0x0) ;
function AfficherEnCouleur ( ) {
var texte = "essai" ; var incr = 0x3 ; var incr2 = 0xD ;
etc. }

1.4. Fonctions et procédures

Voici un exemple de fonction. En fait, elle ne retourne pas de valeur ; c'est donc une procédure.

1.5. Utilisation du "Timer" pour déclencher une fonction à intervalles réguliers

setInterval('AfficherEnCouleur( )' , 300)
lance toutes les 300 millisecondes la fonction AfficherEnCouleur( ).

1.6. Différences entre Netscape et I E

Comme si tout cela était trop simple, Internet Explorer n'a pas respecté les conventions adoptées par Netscape. Cela signifie que pour qu'une fonction JavaScript fonctionne sous les deux navigateurs, elle doit parfois être scindée en deux sous fonctions. Vous en trouverez un exemple dans le bandeau supérieur de ce site, Site PhyJi jussiaux.software. Le code détermine le nom du navigateur en train de le lire, et nomme différemment les objets. Ensuite, pour afficher le texte en couleur, il doit adopter à nouveau une technique différente.

var compteur = new Number (0x88) ; var compteur2 = new Number (0x0) ;
// il faut obligatoirement déclarer la variable numérique
function AfficherEnCouleur ( ) {
var texte = "" ; var incr = 0x3 ; var incr2 = 0xD ;

couleurOmbre = (rouge << 16) + (vert << 8) + bleu ; // décalages de bits
couleurTexte = 0xFFFFFF - couleurOmbre ; // complémentaire
//window.status="compteur à : " + couleurTexte ; // pour les tests
texte = '<h1><font color = #' + couleurTexte + ' >Site PhyJi jussiaux.software</font></h1>' ;
if (navigator.appName == "Netscape") {
with (calqueTexte.document){
open( ) ;
write(texte) ;
close( ) ;}
texte = "" ;
texte = '<h1><font color = #' + couleurOmbre + ' >Site PhyJi jussiaux.software</font></h1>' ;
with (calqueOmbre.document){
open( ) ;
write(texte) ;
close( ) ;} } // sinon, code pour Internet Explorer
else { calqueTexte.color = couleurTexte ; calqueOmbre.color = couleurOmbre }
}
//-->
</script>

Haut de cette page

2. Feuilles de style externes

Voici un exemple de feuille de style externe. Vous pouvez le coller dans WordPad et sauvegarder en tant que texte, avec l'extension .css. Par exemple essai.css.

<STYLE TYPE="text/css">
<!--
BODY {background-color: #FEFEF4}

H1     {font-weight: bold;
font-style: italic;
            font-variant: small-caps;
            font-size: 145%;
            font-family: verdana;
color : #774422;
margin-right: 60Px;
margin-left: 40Px;
padding-top: 10px;
padding-bottom: 5px;
background-color: #FFFFF9;
border-style: outset;
border-width: thin;
text-align : center }

H2     {font-weight: bold;
            font-size: 135%;
            font-family: times;
color : #774422;
text-indent: 4%;
margin-right: 15%;
margin-left: 40Px;
padding-top: 10px;
padding-bottom: 5px;
background-color: #F5F5EB;
border-style: inset;
border-width: thin; }

H3     {font-weight: bold;
            font-size: 120%;
            font-family: times;
color : #774422
margin-right: 40px;
margin-left: 40Px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 24px;
background-color: #F5F5EB;
border-style: none; }

H4 {color : #774422}

H5     {font-weight: bold;
            font-size: 84%;
            font-family: verdana;
color : #774422
margin-right: 40px;
margin-left: 40Px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 24px;
background-color: #F5F5EB;
border-style: none; }

H6     {font-weight: bold;
            font-size: 70%;
            font-family: verdana;
color : #774422
margin-right: 40px;
margin-left: 40Px;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 24px;
background-color: #F5F5EB;
border-style: none; }

p {text-align : justify}

a:link { color: #6644EE }
a:visited { color: #BB3377 }
a:hover { color: #FFBB00 }

a:active { color: #FFBBEE }

-->
</STYLE>

</head>
<body></body>
</html>

Cette feuille formate différents types d'en-têtes, avec éventuellement un cadre. Small-caps écrit tout en petites majuscules. Tous les paragraphes seront justifiés. Pour créer un paragraphe à l'aide de Netscape Composer, oubliez ce que nous avons dit dans la leçon traitement de textes. Un retour chariot inscrit la balise <br>, deux retours chariot inscrivent <p>, c'est à dire début de paragraphe. Il ne sera plus nécessaire de doubler les retour chariot, tant qu'il s'agira de texte normal ; par contre, il faura le refaire après un en-tête.

Il est hors de question d'entrer dans le détail des styles ; c'est un sujet immense. Quelques règles peuvent être trouvées dans les gros ouvrages traitant du HTML, le reste sur Internet (voir nos bonnes adresses).

Pour utiliser ce style dans une page, celle-ci doit débuter ainsi :

Pour que cela fonctionne, les deux pages, .htm et essai.css doivent être ici dans le même dossier.

Haut de cette page

3. Styles intégrés

Ils sont utiles, lorsqu'un style ne concerne qu'une page. Par exemple, sur ce site, nous avons voulu contrôler la position des icônes dans la barre verticale gauche permettant d'accéder aux différents chapitres.
Au lieu d'écrire <br><br> pour provoquer deux retours chariot au passage d'une icône à la suivante, nous avons affecté un style au retour chariot lui même :
<br style="line-height : 25px">
où 25px signifie 25 pixels. (Pour arranger le tout, Internet Explorer ne comprend pas cet ordre).
Mais cela nécessite de répéter le code à chaque retour chariot, ce qui est ennuyeux, si un changement de valeur est nécessaire.

Il est possible de faire mieux en écrivant :

avant
</head>, ce qui définit deux nouvelles classes de <br>, retour chariot. Ces classes sont appelées par :

Haut de cette page

4. Cadres

Les cadres sont une idée géniale, gâchée par le fait que leur gestion est différente dans les principaux navigateurs. A tel point que beaucoup de sites ne les emploient pas, préférant dessiner sur chaque page un faux cadre.

Vous trouverez un exemple de déclaration de cadres, dans la page index.html de ce site.
p><HTML>
<HEAD> ....
</HEAD>

<NOFRAMES>
Cette page est conçue pour visualisation
dans un navigateur qui gère les cadres (Frames). Si vous lisez ce texte
c'est que votre navigateur n'est pas compatible avec cette extension, ou que vous avez tenté de modifier une page comportant plusieurs cadres, au lieu de ne modifier qu'un cadre à la fois.
</NOFRAMES>

</FRAMESET>

</HTML>

Remarquez qu'il n'y a pas de <body>
Le texte dans <NOFRAMES> s'affiche lorsque les cadres ne sont pas gérés. Par exemple, dans Netscape Composer, vous ne pouvez modifier qu'un cadre à la fois ; ce texte apparaît si vous demandez de modifier toute une page.
<FRAMESET cols="48,*" déclare deux colonnes, une large de 48 pixels, l'autre remplissant le reste de l'écran.
<FRAMESET rows="48,*" déclare deux lignes, une large de 48 pixels, l'autre remplissant le reste de l'écran.

<FRAME SRC="cadres/cadrvert.htm" scrolling=no name="gauche">
<FRAMESET rows="48,*" frameborder=no border=0 >
fait que la première colonne est remplie par le document cadrvert, et la deuxième est partagée en deux lignes, remplies à leur tour par
<FRAME SRC="cadres/cadrhoriz1.htm" scrolling=no name="haut">
<FRAME SRC="cadres/hompag.htm" name="corpus">

Haut de cette page

Comme il ne vous est peut-être pas facile de le visualiser, voici le code complet de notre page index, avec ses mots clés et ses cadres.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<TITLE>PhyJi, jussiaux software : logiciels et conseils, pour l'enseignement de la physique chimie</TITLE>

</HEAD>

</FRAMESET>

</HTML>

5. Calques

Les calques permettent de superposer deux documents. Leur gestion est différente selon le navigateur. Voyez le code source de cadrhoriz1 qui affiche deux fois le même titre décalé pour créer un effet d'ombre.
Voici la déclaration des calques, compatible IE et Communicator.

<body >
<div id = "ombre" style = "position : absolute ; top : 2 ; left :92 ; color : #888888 " >
<h1>Site PhyJi jussiaux.software</h1></div>

<div id = "texte" style = "position : absolute ; top : 0 ; left : 90 ; color : #888888 " >
<h1>Site PhyJi jussiaux.software</h1></div>

</body>
</html>

Haut de cette page

6. Code d'un en-tête avec ombre créée par calques et animation par changement de couleur

Il s'agit de l'ancien bandeau supérieur de ce site. En voici le code. Vous y découvrirez comment gérer les calques dans Netscape et Internet Explorer, comment y écrire par du code, et comment faire cela à intervalle régulier. Mais attention, JavaScript n'est pas un langage compilé ; il est donc lent. Voici le code :

<html>
<head>
<title>Bandeau de présentation PhyJi.</title>

//affichage du titre avec des couleurs variables
var calqueTexte, calqueOmbre ;

function Initialiser( ) {
//deux titres identiques sont dessinés sur des calques légèrement décalés
//pour produire un effet d'ombre
// selon le navigateur, les calques n'ont pas la même définition, ni les mêmes méthodes

if (navigator.appName == "Netscape") { // c'est Netscape Communicator
calqueOmbre = document.layers['ombre'] ;
calqueTexte = document.layers['texte'] ; }
else { // c'est Internet Explorer
calqueOmbre = document.all['ombre'].style ;
calqueTexte = document.all['texte'].style ; }
calqueOmbre.zIndex = 1 ; // derrière l'autre
calqueTexte.zIndex = 2 ; }

var compteur = new Number (0x88) ; var compteur2 = new Number (0x0) ;
// obligation de déclarer ainsi ces nombres, pour qu'ils puissent être
// incrémentés à chaque nouvel appel de fonction
//0x88 est le nombre 88 en base 16. dans 0x88, 0 est le chiffre zéro
function AfficherEnCouleur ( ) {
var texte = "" ; var incr = 0x7 ; var incr2 = 0xF ;

couleurOmbre = (rouge << 16) + (vert << 8) + bleu ; // décalages de bits
couleurTexte = 0xFFFFFF - couleurOmbre ; // couleur comlémentaire
//window.status="compteur à : " + couleurTexte ; // pour les tests
texte = '<h1><font color = #' + couleurTexte + ' >PhyJi jussiaux.software</font></h1>' ;
if (navigator.appName == "Netscape") {
// remarquez comment on écrit sur un calque de Netscape
with (calqueTexte.document){
open( ) ;
write(texte) ;
close( ) ;}
texte = "" ;
texte = '<h1><font color = #' + couleurOmbre + ' >PhyJi jussiaux.software</font></h1>' ;
with (calqueOmbre.document){
open( ) ;
write(texte) ;
close( ) ;} } // sinon, code pour Internet Explorer
else { calqueTexte.color = couleurTexte ; calqueOmbre.color = couleurOmbre }
}
// IE gère plus finement les couleurs que Communicator

//-->
</script>
</head>

<body onLoad = "Initialiser( ) ; setInterval('AfficherEnCouleur( )' , 1000) " background="degvert.jpg">
<div id = "ombre" style = "position : absolute ; top : 2 ; left :182 ; color : #888888 " >
<h1>PhyJi jussiaux.software</h1></div>

<div id = "texte" style = "position : absolute ; top : 0 ; left : 180 ; color : #888888 " >
<h1>PhyJi jussiaux.software</h1></div>

</body>
</html>

Haut de cette page

7. Codes pour les caractères spéciaux

La galère commence en HTML lorsque vous devez employer des caractères spéciaux, lettres grecques... Vous pouvez les placer dans le texte en tant qu'images au format .Gif ; cela est d'ailleurs obligatoire pour les formules compliquées.

Vous pouvez aussi les entrer 'à la main' dans Netscape Composer, dans la fonte Symbol, ou sous la forme suivante (plus compliquée, mais présentant plus de possibilités) : &#x; où x est le code dans le standard Unicode du caractère spécial.

Dans ce deuxième cas, il vous faudra ensuite retravailler le code dans un traitement de texte basique tel WordPad.

Tout ceci est détaillé à la page 10 de ce chapitre.

Haut de cette page