Javascripts supplémentaires proposés par WebExpert 5

De nombreux javascripts vous sont proposés gratuitement avec la nouvelle version 5 de WebExpert.

Les explications des différents scripts précédents devraient vous permettre d'employer ceux-ci sans problème, néanmoins nous vous proposons quelques commentaires pour certains d'entre eux...

Pour lancer l'assistant de ces scripts supplémentaires, cliquez sur le bouton

de l'onglet Javascript...

Emploi de l'assistant

Bouton d'alerte

Voici une façon très simple d'obtenir un message d'alerte, par l'intermédiaire d'un bouton. le "caption" du bouton, ainsi que le message sont paramétrables directement par l'assistant.

Code inséré par l'assistant

Variante

Si vous désirez placer le code sur un lien normal, par un copier-coller, récupérez le code de l'événement "onClick" et placez-le dans celui du lien. Par exemple, un lien vers une section qui n'est pas encore terminée, peut nécessiter une message d'alerte :

<A HREF="#" onClick='alert("Cette page est encore en construction. \nMerci.")'>
Entrée dans la section
</A>

Les caractères "\n" permettent un retour à la ligne...

Date et Temps

Voici un autre script pour introduire dans vos documents la date et l'heure du système. Cette version emploie le système AM/PM et la notification américaine de la date.

Code du script

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

C'est la méthode de l'objet document "write" qui est employée pour "inscrire" la date et l'heure dans le document. Comme nous le disions, puisqu'aucune traduction n'est effectuée (comme dans le avascript "Heure/Date", c'est la notification par défaut (américaine) qui est employée.

"Charger dans deux cadres"

Script inséré par l'assistant

<SCRIPT LANGUAGE="JavaScript">

</script>
Code de la page de définition de cadres, créée par le clic sur le lien...

<BASE HREF="file:/H|/Program Files/Visicom Media/WebExpert4/">
<FRAMESET rows='50%,50%'>
<FRAME src='http://www.visic.com'>
<FRAME src='http://www.webgraphique.com'>
</FRAMESET>
Code de la section "BODY"

<a href="javascript:loadFrames('http://www.visic.com','http://www.webgraphique.com')">Charge le site de Visicom et de WebGraphique</a>

Commentaires

La fonction loadFrames(page1, page2) créée par l'assistant crée le code de la page de définition des frames par la méthode write de l'objet document (page.document.write(framecode) dont vous pouvez visionner le résultat ci-dessus.

L'assistant vous permet de choisir les deux pages à charger dans les frames lors de la création du script. Si vous décidez de changer celles-ci, il vous est loisible de le faire dans le lien de la section "BODY" en changeant la valeur d'un ou des arguments de la fonction "loadFrames"

Dernière mise à jour

De nouveau, c'est la méthode "write" de l'objet document qui est employée pour "imprimer" à l'écran la propriété "lastmodified" du même objet. Comme cette propriété est celle par défaut, la notification est américaine.

Code inséré par le script

Version en français

Code à insérer dans la balise <head>

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>

Code à insérer dans le <BODY>

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>

Dans ce script, la fonction "Trad" traduit le mois (chiffre) par une correspondance du mois dans le tableau "Moistrad" et par la propriété "write", on donne aussi un formatage "européen" à la notification de la date. Vous faites précéder celle-ci par une chaîne de caractères, ici "Dernière mise à jour", qui vous convient.

Vous placez le script du <BODY> à l'endroit qui vous intéresse dans le corps du document. Comme la propriété "lastmodified" est changée à chaque changement du document, il n'est plus nécessaire que ce script soit modifié après son introduction dans le document. La date de "dernière mise à jour" du document sera toujours, en effet, celle de la dernière modification de la page.

Description de lien

Voici un script qui donne une description du lien choisi dans la barre de status du navigateur. La propriété "status" de l'objet windows est changée en employant l'événement "onload" et "onMouseOver". Dans l'événement "OnLoad", il faut employer trois symboles différents pour les chaînes de caractères : (") - (') - (`).

L'assistant vous propose d'encoder la description du lien - le contenu du lien et l'adresse du lien.

Code inséré

<BODY OnLoad="window.defaultStatus='`message`';">

<A HREF="http://www.page-web.com" onMouseOver=" window.status='Page-Web'; return true" onMouseOut="window.status=' '; return true">Visitez mon site</a>

Étoiles filantes

Ce script, crée des petites étoiles de couleur autour du curseur de la souris. Celui-ci est compatible uniquement avec Netscape car il emploie une balise propriétaire, à savoir "LAYER" qui n'est pas comprise par Internet Explorer, qui l'ignore.

Il suffit de lancer l'assistant pour que celui-ci intègre dans vos page le script nécessaire...

Mise en minuscule - majuscule

Ces deux scripts se ressemblent puisque seule les fonctions "toUpperCase()" et "toLowerCase()" changent. le bouton "OK" n'a d'autre valeur que celui de déplacer le focus, puisqu'en effet, c'est sur l'événement "OnChange" que la transformation de la casse des caractères est effectuée. Quand le focus a quitté lme champ "input", l'événement "OnChange" intervient (après encodage des caractères dans le champ) et la fonction choisie transforme la casse des caractères.

Code inséré par les scripts

Majuscules

<center>
<form name="capsform">
<input type="text" name="caps" size=40 value="" onChange="javascript:this.value=this.value.toUpperCase();">
<br>
<input type="button" value="Ok!">
</form>
</center>

Minuscules

<center>
<form name="capsform">
<input type="text" name="caps" size=40 value="" onChange="javascript:this.value=this.value.toLowerCase();">
<br>
<input type="button" value="Ok!">
</form>
</center>

Variante

Pour que vous puissiez tester l'événement "OnChange", sans employer un bouton, voici dans un tableau, les deux fonctions en action :

Quand vous encodez, en minuscules,dans le premier champ et que vous placez le curseur de la souris dans le second champ par exemple, ou plus simplement cliquer à un autre endroit de la page, la casse est changée en minuscules. Inversement pour le second champ.

Message de temps

En fonction du moment de la journée, un message de salutation est donné aux visiteurs :

Code inséré par l'assistant

<SCRIPT LANGUAGE="JavaScript">


</SCRIPT>

L'emploi d'expressions conditionnelles "If" imbriquées donne le bon message. Remarquez le symbole "||", opérateur binaire, qui signifie la "OU" : cfr Notions Générales.

Objet d'e-mail

Nos amis canadiens emploient plutôt le mot "courriel" et nous apprécions grandement leur habitude de "franciser" le plus possible les termes anglais, et cela avec beaucoup de talent ;-)

Vous connaissez tous la possibilité qu'offre WebExpert, lors de la création d'un lien, de type e-mail, d'introduire un objet au message.

Le code inséré est le suivant :

<A HREF="mailto:email@adresse.com?subject=Objet du message...">Pour m'écrire</A>

L'assistant intégre cette fonction sur un bouton (nécessite l'emploi de la balise <FORM>)

Bouton DHTML (seulement Internet Explorer)

Si vous visionnez ce tutoriel sous Internet Expolorer, vous visionner le même script pour un bouton DHTML :

Ceci ne fonctionne pas sous les versions 4.x de Netcape : seules, les versions 4.x et supérieures d'IE peuvent le visionner...

Code du bouton DHTML

<BUTTON TYPE="submit" STYLE="background:URL(fp-w1.gif);font-family:Arial;font-size:16pt;color:navy;" onClick="parent.location='mailto:mailing@visic.com?subject=Objet du courriel'">
Cliquer <SPAN STYLE="font-style: italic; color:maroon">ici pour m'écrire</SPAN>
</BUTTON>

Pour les effets particuliers d'Internet Explorer, consultez le tutoriel "TutorDHTML".

Protection des images

Beaucoup de visiteurs nous demandent un script de protection, soit de leurs images, soit du code de leur page (clic droit). WebExpert 5 vous fournit le premier.

Code inséré par l'assistant

Section <HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Balise <BODY>

<BODY OnLoad="trap()">

Comme vous le remarquez, la fonction "trap()" effectue une "inhibition" de toute action de la souris, lorsque le curseur de celle-ci se trouve, uniquement, sur une image (document.images)

Clic droit et clic gauche interdits !

Voici un petit script que vous pouvez intégrer dans vos pages HTML et qui empêche la vision du code source HTML par l'action d'un clic droit. Cette protection est relative mais a le mérite d'exister ;-)

Le principe est de capter l'événement "onmousedown" (comme dans le script précédent) et d'afficher un message d'alerte [alert()] qui remplace les propriétés habituelles du clic droit de la souris, en l'occurrence la vision du code source (y compris donc les images).

Ce script fonctionne sous IE ou Netscape.

<SCRIPT language=JavaScript1.1>
<!-- début
function non(clic) {
var msg="On est curieux ?";
if (navigator.appName == 'Netscape' && clic.which==3) {
alert(msg);
return false;}
else
if ((navigator.appName == 'Microsoft Internet Explorer' && event.button==2) | (navigator.appName == 'Microsoft Internet Explorer' && event.button==3)) {

alert(msg);
return false;
}
return true;
}
document.onmousedown = non;
// fin -->
</SCRIPT>

Une particularité intéressante du script est l'inhibition de l'association "clic gauche + clic droit". En effet, sous IE, on pouvait passer outre de l'inhibition du clic droit en cliquant simultanément sur le clic gauche et le clic droit : cette action est interdite dans ce script aussi...

Le message proposé est "On est curieux ?" et vous pouvez bien sûr changer celui-ci par celui qui vous intéresse...

Si vous désirez tester le script. Pour fermer la fenêtre contenant le script, cliquez simplement sur le document actuel, automatiquement la fenêtre sera fermée. Pour employer cette faculté, consultez le javascript "Bulle explicative" déjà expliqué précédemment.

Quitter le document ou la fenêtre

Lorsque le visiteur quitte votre document où la fenêtre dans laquelle le focus se trouve, un script peut automatiquement charger une autre page. ce script exécute cette action. Vous pouvez bien sûr choisir les dimensions de la fenêtre (largeur, hauteur) ainsi que l'adresse de chargement...

Le script emploie l'événement "

Code du script

Section <HEAD>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

Balise <BODY>

<BODY onUnload="leave()">

C'est l'événement "onUnload" qui déclenche l'ouverture de la fenêtre : celui-ci intervient lorsque le document ou fenêtre est quitté par le visiteur... c'est la seule différence avec le javascript "bulle explicative", expliqué précédemment.

Employez avec parcimonie ce script, car les visiteurs n'aiment pas, en général, qu'une page se charge sans leur intervention ! Cela pourrait servir de fenêtre d'info par exemple...

Dans le paragraphe précédent, nous avons employé la méthode expliquée dans le javascript "Bulle explicative"...

Message de temps

Ce script est une variante du précédent, dans la mesure où il emploie aussi l'événement "onUnload" pour lancer la fonction "Bye()" qui a calculé le temps depuis l'arrivée sur la page et le moment de la quitter ("onUnload").

Code inséré par l'assistant

Section <HEAD>

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>

Section <BODY>

<BODY OnUnload="bye()">

Cliquez sur le bouton du script pour visionner son explication...

Mise en MAJUSCULES :
Mise en minuscules :