Javascript

Javascript est un langage de programmation utilisé principalement dans les pages web pour rendre une page dynamique.
Il est interprété par le navigateur web.

Résumé :

<html>
<head>
  <title>Exemple</title>
  <script language="javascript">
      alert("Hello world !");
  </script>
</head>
<body>
</body>
</html>

On peut écrire du code javascript où on veut dans une page html.

self.close(); fermer la fenêtre courante (utile pour les popups)

Comment effacer le texte par défaut d'une zone de saisie quand l'utilisateur se rend dessus ?

<input type="text" value="Votre valeur" onFocus="if(this.value=='Votre valeur') this.value='';" on peut le faire quand l'utilisateur arrive dessus ...
onBlur="if(this.value=='') this.value='Votre valeur';"> ... et quand il quitte cette zone.

exemple :

Quelles sont les informations de l'utilisateur récupérables en Javascript ?

On peut récupérer des informations concernant l'utilisateur en Javascript :

navigator.appName;
navigator.appCodeName;
navigator.appVersion.substring(0,4);
navigator.platform;
navigator.javaEnabled();
screen.width;
screen.height;

Indique si Javascript est activé ou non (true ou false)
Largeur de l'écran (en pixels)
Hauteur de l'écran (en pixels)

exemple :

Comment rediriger l'utilisateur sur une autre page ?

redirection vers une page donnée :
window.location='page.html';

redirection à partir de l'historique :
window.history.go(-1) précédent
window.history.go(1) suivant

window.history.go(-2) pour aller de deux pages en arrière et ainsi de suite.

Comment détecter quel est le type de système que possède l'utilisateur (Windows, Linux, ...) ?

Il peut être utile de savoir quel type de système d'exploitation possède l'utilisateur, cela peut se faire avec navigator.appVersion; on vérifie alors si une chaîne de caractères typique est présente :

Par exemple, pour Windows on peut faire :

<input type="button" value="Windows ?" onclick="
if(navigator.appVersion.indexOf('Win') != -1)
alert('Vous êtes sous Windows.');
else
alert('Vous n\'êtes pas sous Windows.');"
>

Comment proposer à l'utilisateur d'imprimer la page ?

Exemple permettant d'ouvrir la fenêtre d'impression de la page courante :

<input type="button" value="Imprimer" onclick="print(document);">

Comment proposer un véritable Aperçu avant impression ?

Dans les dernières versions des navigateurs, cela est possible directement via le menu Fichier.
Voici un petit bout de code permettant, pour Internet Explorer, de proposer un aperçu avant d'imprimer. Cela peut être pratique, on peut savoir le nombre de feuilles nécessaires avant de commencer une impression !

<script language="JavaScript">
function apercu() {
   document.body.insertAdjacentHTML('beforeEnd', '<OBJECT ID="nav" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>');
   nav.ExecWB(7,1);
   nav.outerHTML = "";
}
</script>

Si vous savez faire cet aperçu avant impression avec un autre navigateur, n'hésitez pas à me contacter en passant par le lien de suggestions en bas de cette page ! merci

Comment appeler une fonction au bout d'un certain temps ?

On peut appeler une fonction après un temps défini, cela avec la fonction setTimeout() :

<html><head>
<script language="javascript">
function dix()
{
 alert('Cela fait 10 secondes que cette page a été chargée.');
}

setTimeout("dix()",10000);    //on appelle la fonction dix() dans 10 secondes (10000 millisecondes)
</script>
</head><body>
</body></html>

Cacher, montrer, cocher, décocher, apparaître, disparaître des éléments

Il peut être utile de vouloir cacher ou afficher des éléments dans une page de façon dynamique, comme des Div qui sont chargés avec la page, et qu'on affiche que si besoin par exemple.
Pour utiliser les fonctions suivantes, les éléments doivent être identifiés avec un ID.

/** rend invisible l'objet passé en paramètre, mais il garde sa place */
function cacher(lobjet)
{
	document.getElementById(lobjet).style.visibility = 'hidden';
}

/** rend Visible l'objet passé en paramètre */
function montrer(lobjet)
{
	document.getElementById(lobjet).style.visibility = 'visible';
}

/** rend invisible Sans prendre de place l'objet passé en paramètre */
function disparaitre(lobjet)
{
	document.getElementById(lobjet).style.display = 'none';
}

/** rend Visible l'objet passé en paramètre */
function apparaitre(lobjet)
{
	document.getElementById(lobjet).style.display = 'block';
}


/** coche la checkbox passée en paramètre */
function cocher(lobjet)
{
	document.getElementById(lobjet).checked = true;
}

/** décoche la checkbox passée en paramètre */
function decocher(lobjet)
{
	document.getElementById(lobjet).checked = false;
}

/** rend enabled l'objet passé en paramètre */
function enable(lobjet)
{
	document.getElementById(lobjet).disabled = false;
}

/** rend disabled l'objet passé en paramètre */
function disable(lobjet)
{
	document.getElementById(lobjet).disabled = true;
}

exemple :

<div id="mondiv1">mon div 1</div>
<div id="mondiv2" style="visibility:hidden">mon div 2</div>
<input type="button" value="changer de div visible" onclick="changeDiv()">
<script>
function changeDiv()
{
	if(document.getElementById('mondiv2').style.visibility == 'visible')
	{
		montrer('mondiv1');
		cacher('mondiv2');
	}
	else
	{
		cacher('mondiv1');
		montrer('mondiv2');
	}
}
</script>

mon div 1

mon div 2

Javascript

<html> <head> <title>Exemple</title> <script language="javascript"> alert("Hello world !"); </script> </head> <body> </body> </html>

<input type="text" value="Votre valeur" onFocus="if(this.value=='Votre valeur') this.value='';" on peut le faire quand l'utilisateur arrive dessus ... onBlur="if(this.value=='') this.value='Votre valeur';"> ... et quand il quitte cette zone.

<input type="button" value="Windows ?" onclick="if(navigator.appVersion.indexOf('Win') != -1) alert('Vous êtes sous Windows.'); else alert('Vous n\'êtes pas sous Windows.');">

<input type="button" value="Imprimer" onclick="print(document);">

<script language="JavaScript"> function apercu() { document.body.insertAdjacentHTML('beforeEnd', '<OBJECT ID="nav" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'); nav.ExecWB(7,1); nav.outerHTML = ""; } </script>

<html><head> <script language="javascript"> function dix() { alert('Cela fait 10 secondes que cette page a été chargée.'); } setTimeout("dix()",10000); //on appelle la fonction dix() dans 10 secondes (10000 millisecondes) </script> </head><body> </body></html>

<html>
<head>
<title>Exemple</title>
<script language="javascript">
alert("Hello world !");
</script>
</head>
<body>
</body>
</html>

<input type="text" value="Votre valeur" onFocus="if(this.value=='Votre valeur') this.value='';" on peut le faire quand l'utilisateur arrive dessus ...
onBlur="if(this.value=='') this.value='Votre valeur';"> ... et quand il quitte cette zone.

<input type="button" value="Windows ?" onclick="
if(navigator.appVersion.indexOf('Win') != -1)
alert('Vous êtes sous Windows.');
else
alert('Vous n\'êtes pas sous Windows.');"
>

<script language="JavaScript">
function apercu() {
document.body.insertAdjacentHTML('beforeEnd', '<OBJECT ID="nav" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>');
nav.ExecWB(7,1);
nav.outerHTML = "";
}
</script>