logo xgarreau.org Quoi ma tête ?
xavier@xgarreau.org
Javascript
Version imprimable

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

Votre avis dans le forum.

Zazou Projets

Développement

Utilisation et culture

Ailleurs

Vieilleries

Bonne parole

Partenaire



Ce site existe depuis le 01/02/2003
Pour rapporter un bug : xavier@xgarreau.org.
Hébergement : Maneya.
Essayez ZazouMiniWebServer !
Votre avis dans le forum.