Cours HTML

Laurence Jacquenod

Le javascript

C'est un langage de programmation qui permet d'automatiser des tâches, de manipuler et améliorer le fonctionnement des systèmes. C'est un langage orienté objet. Le javascript est un complément du HTLM, il permet de produire du HTML dynamique (DHTML).
Ce langage de programmation est conçu pour traiter localement des événements provoqués par le lecteur, par exemple le glissement de la souris. Le javascript permet de programmer des actions en fonction d'événements ou bien d'effectuer des calculs sans avoir recours au serveur. On nomme script l'ensemble d'instruction permettant de réaliser une action. Les domaines d'application du langage javascript peuvent être classés en plusieurs catégories :

Petites applications simples (devis, calculette, conversion)
aspect graphiques de l'interface (modification d'image lors du passage de la souris, gestion de la fenêtre, fabrication locale d'une page HTML)
tests de validité des données sur les éléments de l'interface de saisie et gestion complète de l'interface d'une application complexe (création de fenêtres, modification de menus...)

Les bases

Insérer le javascript dans son site

Dans un fichier lié qui porte l'extension.js et que l'on appelle dans le head : <script language="javascript" src="chemin/fichier.js">
Directement dans le HTML, entre deux balises <script language="javascript"></scipt>

Insérer un commentaire

entre deux // pour un commentaire d'une ligne
entre /* et*/ pour un commentaire de plusieurs lignes

Javascript et les liens

Avec Javascript les liens d'une page HTML sont des objets que l'on peut manipuler. Trois événements peuvent être associés aux objets liens:

L'événement onMouseOver apparaît lorsque le curseur arrive sur la zone de lien hypertexte
L'événement onMouseOut apparaît lorsque le curseur quitte la zone du lien hypertexte
L'événement onClick apparaît lorsque l'on clique sur le lien

Ouvrir une fenêtre

Exemple d'utilisation de onClick <img onClick='window.open("maPage.html", "titre","width=largeur en pixel,height=hauteur en pixel,menubar=no,location=no,toolbar=no");'title="titre"src="images/monimage" alt="titre"/>

Lorsque l'on clique sur l'image, elle ouvre une nouvelle fenêtre, sans menu, ni barre de navigation et on règle sa longueur et sa hauteur :

site

Créer une fenêtre

Dans le head

 <script>
	    function creerFenImage() {
fiRef = window.open("","fenImage","width=600,height=397,scrollbars=no, 
toolbar=no, location=no, directories=no, status=no")
}
</script>

Dans cet exemple, lorsque l'on clique sur le lien Tour Eiffel, on exécute d'abord la fonction "creerImae" qui crée une nouvelle fenêtre dans le navigateur dont le nom sera "fenImage". Cette fenêtre aura une largeur de 600 pixels sur une hauteur de 397 pixels. Elle est dépourvue des boutons, de l'adresse url et de la zone de status. Lorsque cette fenêtre est créée, le lien demandé est chargé dans la fenêtre spécifiée par l'attribut target.

La Tour Eiffel

Dans le Body

        <a href="Tour_Eiffel_artifice.jpg" target="fenImage" onClick="creerFenImage()">La Tour Eiffel</a>

Réaliser un diaporama interactif

Voir l'exemple

Exemple de Javascript

Message d'alerte

Exemple de message d'alerte

<script language="Javascript">

<!--
alert("Voici un message d\'alerte!");

// -->

</script>

Cliquez ici pour voir le résultat d'un tel script lors du chargement de la page ci-dessus :

Petit compteur

Ce petit script permet de faire un compteur du temps passé sur une page et donne un message quand la personne quitte la page :

 <SCRIPT LANGUAGE="Javascript">
pageOpen = new Date();
function bye() {
pageClose = new Date();
heurs = (pageClose.getHours() - pageOpen.getHours());
minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
time = (seconds + (minutes * 60) + (heurs * 3600));
if (time == 1)
time = (time + " second");
}
else {
time = (time + " secondes");
}
alert('Vous êtes restés ' + time + ' sur ce site, restez plus longtemps la prochaine fois!');
}
</SCRIPT>