Ces lignes sont pour ceux qui ne veulent pas enter dans les détails du JavaScript ou pour
les débutants.
Quelques petits trucs et fonctions pour vous simplifier la vie. Vous pourrez ainsi ajouter
tout simplement du JavaScript dans vos pages HTML en reprenant ces exemples par un simple "copier coller".
JavaScript est un langage de programmation de script souvent utilisé pour créer des pages web dynamiques et interactives.
Il a été créé par Brendan Eich chez Netscape en 1995 et a depuis été standardisé sous le nom de ECMAScript.
Le langage JavaScript est souvent utilisé pour ajouter des fonctionnalités interactives à des pages web, telles que
des formulaires dynamiques, des animations, des effets visuels et des fonctionnalités de navigation.
Il est également souvent utilisé pour créer des applications web complexes, des jeux en ligne, des applications
mobiles hybrides et même des programmes côté serveur.
JavaScript est un langage de script interprété qui s'exécute côté client (côté navigateur) et côté serveur
(avec l'utilisation de Node.js). Il peut être utilisé conjointement avec des langages de balisage tels que HTML et
XML pour créer des pages web dynamiques et réactives.
En résumé, JavaScript est un langage de programmation populaire qui permet de créer des pages web dynamiques et
interactives et peut être utilisé pour créer des applications web et mobiles.
Attention : le langage JavaScript est sensible à la case (aux majuscules et minuscules) !
<head>
<scripte SRC="script.js">
<!--
//-->
</script>
</head>
<body>
<script>ladate()</script>
. . . .
. . . .
Dans la partie head d'un fichier HTML, on peut donner référence à un fichier texte externe
contenant les fonctions JavaScript que nous avons en réserve.
Vous pourrez ainsi disposer de vos fonctions dans toutes vos pages, sans les réécrire. Gain de temps,
de place et discrétion... Si vous disposer d'une bibliothèque de plusieurs fichiers javascript, il
est bon alors de créer un fichier de type "script.js"
<body>
<form>
Nom<br>
<input type="text" name="champ1"
onChange="this.value = this.value.toUpperCase()">
Prénom<br>
<input type="text" name="champ2"
onChange="this.value = this.value.toLowerCase()">
</form>
En ajoutant à votre ligne INPUT, le onChange="... selon le modèle ci-dessus, pour le Nom, lors du passage au champ suivant, le contenu complet du champ passera automatiquement en majuscule.
En changeant le toUpperCase par toLowerCase, tout le champ passera en minuscule. C'est le cas pour le champ Prénom.
<script>
<!-- début du masquage
var max = 7;
phrase = new Array(max)
phrase[0] = "Je chante sous la douche"
phrase[1] = "La vie n'est pas triste"
phrase[2] = "Je suis un clown"
phrase[3] = "J'apprends vite ce matin"
phrase[4] = "Je suis heureux de vivre"
phrase[5] = "J'aime la nature"
phrase[6] = "Je soigne mes plantes"
var nb = Math.floor(max*Math.random())
var nom = "cac0" + nb + ".jpg"
document.write
("<img src='"+nom+"' width=250 alt='"+nom+"'>")
document.write
("<br>"+ nom+"<p>")
document.write
(phrase[nb])
.......
Afficher de façon aléatoire une image, un texte, donnera à vos pages un aspect plus vivant. ci-dessus, un exemple de code JavaScript pour afficher une image et un texte en mode aléatoire.
Vous pouvez presser sur le bouton "actualiser" de votre browser pour découvrir les changements.
<head>
<script>
<!--
var control = 1;
function flash(){
if (control == 1) {
window.status="NOUVEAUTE";
control=0;
pause=1300; // en msec avec message
}
else {
window.status="";
control=1;
pause=200; // en msec sans message
}
setTimeout("flash()",pause);
}
//-->
</script>
</head>
<body onLoad=flash()>
. . .
. . .
Avec cette fonction, un texte clignote dans la barre de status. Vous pouvez changer le temps de l'affichage et de l'extinction. Introduire la fonction dans la partie HEAD. Puis dans le marqueur BODY, placez onLoad=flash() comme dans le listing ci-contre.
<script>
<!-- début du masquage
date_angl = document.lastModified.substring(0,10);
date_fren = date_angl.substring(3,6) +
date_angl.substring(0,3) +
date_angl.substring(6) ;
document.write ("Dernière mise à jour le "
+ date_angl + " (En Anglais)"+"<p>");
document.write ("Dernière mise à jour le "
+ date_fren + " (En français)");
// fin du masquage -->
</script>
Voici comment afficher la date de dernière mise à jour de votre document avec un petit script. En bas de votre page, ajoutez une fois pour toute le script ci-contre. Vous pouvez choisir le format Français ou Anglais
<body onload=tty()>
<script>
<!-- début du masquage
var esp = " ";
var txt = "BONJOURS LES AMIS";
var letexte = esp + txt + esp;
var i = 0;
var pause = 70; //pause entre les lettres
var sens = 0;
function tty()
{
// Fonction écrite par Jean-Pierre Perroud
window.status = letexte.substring(esp.length,i);
document.affichage.texte_tty.value
= letexte.substring(esp.length,i);
if (sens == 0)
i++;
else
i--;
if (i == letexte.length+1)
sens = 1;
if (i == 0)
sens = 0;
setTimeout("tty()",pause);
}
// fin du masquage -->
</script>
<form name="affichage">
<INPUT TYPE=text SIZE=30 NAME="texte_tty">
</form>
La fonction tty() est appelée avec le :
<BODY onload=tty()>
au démarrage de la feuille.
Avec la ligne :
window.status = letexte.substring(esp.length,i);
l'affichage se fait dans la fenêtre de status
désactivé dans cet exemple
avec la ligne :
document.affichage.texte_tty.value
= letexte.substring(esp.length,i);
l'affichage se fait dans le champ texte
Vous pouvez choisir de n'afficher qu'une seule des deux possibilités, ou les deux à la fois.
<script> <!-- Ilest = new Date(); Heures = Ilest.getHours(); Minutes = Ilest.getMinutes(); Secondes = Ilest.getSeconds(); document.write(Heures+":"+Minutes+":"+Secondes); //--> </script>
Dans votre document vous pouvez ajouter le code de gauche.
Dès le lancement du document, l'heure est saisie puis affichée.
Cette heure est fixe puisque nous allons la lire qu'une seule fois.
<HEAD>
<SCRIPT language="JavaScript">
<!--
function AccesProtege() {
self.location.href=prompt("Mot de passe :","") + ".htm";
}
-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:AccesProtege()">Pages perso</A></br>
. . .
. . .
. . .
Dans une page, vous pouvez introduire un mot de passe pour accéder à une page perso.
Il suffit de donner le nom de la page sans l'extension .htm pour ouvrir celle-ci.
Pressez sur page "précédante" de votre browser pour revenir ici.
On peut ajouter des tests, pour compléter ce code, mais il fonctionne déjà, car seul vous connaissez le nom de vos pages :-)
<INPUT TYPE="button" VALUE= "Imprimer la page" onClick=print()>
Dans votre document vous pouvez ajouter le ci-dessus.
Un bouton d'impression sera alors disponible sur votre page.