|
Quelques bases pour vous permettre de donner un peu de vie à vos pages HTML. Il ne s'agit pas
de vous former à JScript en 5 min mais de vous permettre d'avoir un aperçu de ce qu'on peut
faire avec... Alors jetez un coup d'oeil aux exemples, c'est encore le meilleur moyen de se
former à quelque langage que ce soit...
Généralités
- Un script se place entre balises <Script> et </Script>, généralement dans l'en-tête du document (entre
les balises <HEAD> et </HEAD>.
- On appelle un script lors d'évènements comme onClick="nomScript()"; où directement, à l'endroit voulu
de la page, entre balises Script.
- window représente une fenêtre affichée. ex: fen=open('','',''); fen.close;
ouvre et ferme une fenêtre nommée fen.
- frames est un tableau des frames de la fenêtre.
- document représente le corps d'une page. (de <Body> à </Body>)
- document.links, documents.anchors, document.images, document.forms sont des tableaux regroupant les
liens(A HRef), ancres(A Name), images(Img), formulaires(Form) du document.
- alert('message') : affiche une boite d'information contenant le message.
- eval(chaîne) permet d'"évaluer" la chaîne de caractères passée en paramètre. Cela est surtout utile lors
de la réalisation d'une page dans laquelle on manipule des données numériques ou des opérations entrées dans des champs
Input type=text. Une opération du type 5*8+32-5/4 entrée dans un champ d'entrée texte peut être évaluée.
"Les menus de redirection", le dernier exemple en date, demandé par un visiteur.
VOIR !
Mettant en oeuvre un Meta tag et une courte fonction
JavaScript pour tenir à jour une horloge dans un Frame.
Explications :
- document : désigne le document appelant le script (de <BODY> à </BODY>).
- document.write : écrire dans le document (à l'endroit où est situé l'appel au script).
- Today = new Date() : créée une instance de la classe Date.
- Today.getMinutes() : renvoie la partie minutes de l'heure système. (de la machine lisant la page)
- Today.getHours() : renvoie la partie heures de l'heure système. (de la machine lisant la page)
- chaine = new String() : créée une instance de la classe String().
- chaine.fontSize(5) : est équivalent à chaine en taille 5. (ne modifie pas l'objet chaine)
Vous obtiendrez ici le code permettant d'implanter un bouton permettant de fermer la
page dans laquelle il se trouve.
Explications :
- onClick() : évènement 'lors d'un clic de souris'.
- top : désigne la fenêtre contenant le document appelant le script.
- top.close() : ferme ladite fenêtre.
Vous obtiendrez ici le code permettant de formater des données. Ici, on traite le cas de données importées
d'une base de données dans le format : entier.ndécimales, par exemple 354.58796.
Le but est de ce script est d'afficher le résultat sous la forme entier,2décimales.
Explications :
- document.forms[0] : représente le premier formulaire du document.
- document.forms[0].toFormat : représente l'élément du premier formulaire du document nommé
toFormat(ici, la zone de saisie).
- onClick="update(document.forms[0].toFormat)" : lors d'un clic, on lance la fonction nommée update en
passant en paramètre la zone de saisie toFormat.
- zonetxt.value : représente le contenu de la zone de saisie passée en paramètre.
- str = zonetxt.value.split('.'); : str reçoit un tableau de chaines de caractères construit à partir de
zonetxt.value que l'on coupe à chaque caractère '.'.
- str[1].substring(0,2) : représente les caractères de 0 à 2(non inclu) de la chaine située dans la deuxième
case du tableau de chaînes de caractères str. (Car le premier élément d'un tableau est à l'index 0 en JavaScript)
Vous obtiendrez ici le code permettant d'implanter un bouton permettant d'ouvrir une fenêtre contenant la page
désirée.
Explications :
open('page.htm',
'Titre',
'toolbar=yes,
location=yes,
status=yes,
menubar=yes,
directories=yes,
scrollbars=yes,
width=640,
height=480') :
ouvre une fenêtre,
lui affecte le contenu page.htm,
lui affecte le nom Titre utilisable avec l'attribut Target des balises A,Form...
lui ajoute la barre d'outils,
lui ajoute la barre d'adresse,
lui ajoute la barre d'état,
lui ajoute la barre de menu,
lui ajoute la barre des directories,
lui ajoute des scrollbars,
et en fixe les largeur et hauteur.
Les options toolbar,status... : - prennent la valeur no par défaut dans Netscape Communicator.
- sont optionnelles.
Cet exemple explique comment insérer des explications sommaires sur certains mots à dans une petite fenêtre
indépendante.
Explications :
- function makewindow(message) : créée une fonction prenant un paramètre message.
- WindowAide = open ("","","width="+w+",height="+h) : créé une fenêtre aux bonnes dimensions et l'affiche.
- WindowAide.document.open() : prépare le corps du document de la fenêtre créée à recevoir des entrées.
- WindowAide.document.write(...) : insère les chaînes de caractères dans le document.
- WindowAide.document.close() : termine les entrées du document.
- onClick="makewindow('...',200,200); return false;" : appelle la fonction créée pour faire les fenêtres d'aide et passe
la chaîne de caractères,la largeur et la hauteur de la fenêtre d'aide en paramètres. return false permet de ne pas suivre
le lien HRef.
Cet exemple explique comment redimensionner une fenêtre et lui redonner le focus.
Cela peut être utile pour afficher plusieurs photos de tailles différentes dans une même fenêtre.
On peut en plus utiliser la fonction setTimeout pour avoir une temporisation avant l'exécution.
Et si on rajoute cette dernière dans une boucle FOR, on peut obtenir un diaporama.
Voici une application amusante de tout cela, il s'agit d'un fenêtre qui se redimensionne toute seule, sans arrêt.
On peut améliorer le code en ajoutant, en plus, le déplacement de la fenêtre, mais c'est une autre histoire...
La page : Folle fenêtre
Le code : Le code de la folle fenêtre ( clic-droit puis enregistrer sous ... )
Explications :
- fenARedim = window.open (...) : ouvre une fenêtre et lui attribue le nom "fenARedim".
- fenARedim.resizeTo (320,200) : redimmensionne la fenêtre nommée fenARedim à une largeur de 320 et une hauteur de 200.
- fenARedim.focus() : redonne le focus à la fenêtre fenARedim. Remarquez que la fonction focus() peut être appliquée à de nombreuses autres choses, comme les éléments d'un formulaire par exemple.
Auteur : Xavier GARREAU
Modifié le 07.09.1999
|
