IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ JavaScript

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 29 août 2021 

 
OuvrirSommaireDivers scripts utiles

Il suffit d'insérer ce code en bas de page.

 
Sélectionnez
document.write('<div style="position:absolute;display:none" id="bulle"></div>')
var bal=false;
var lien=false;
var im=false;
var bulle=document.getElementById('bulle');
// affichage de la bulle
function on(e){
    if(!e){
        window.event.cancelBubble=true
    }
    else{
        e.stopPropagation()
    };
    //position de la bulle
    ns= (navigator.appName.search("Nestcape")!=-1) ? window.pageXOffset : 0;
    ns2= (navigator.appName.search("Nestcape")!=-1) ? window.pageYOffset : 0;
    posx= (!e) ? event.clientX+document.documentElement.scrollLeft : e.pageX+ns;
    posy= (!e) ? event.clientY+document.documentElement.scrollTop : e.pageY+ns2;
    hori=(posx > (screen.availWidth - 200)) ? -250 : 0;
    bulle.style.left= posx+hori+"px";
    bulle.style.top= posy+"px";
    bulle.style.display='block';
    //gestion du type d'élément
    bal=document.createElement('div');
    bal.style.fontWeight=100;
    bal.style.backgroundColor="pink";
    typ=this.tagName=="INPUT" ? this.type : "";
    bal2=document.createTextNode("Balise \"" + this.tagName + " " + typ + "\"." + " (" + tags[this.tagName] + ") ");

    bal.appendChild(bal2);
    bulle.appendChild(bal);
    //gestion des liens
    if(this.tagName=="A"){
        lien=document.createElement('div');
        lien.style.fontWeight=100;
        lien.style.backgroundColor="orange";
        lien2=document.createTextNode(" Adresse: \"" + this.href + "\".");
        lien.appendChild(lien2);
        bulle.appendChild(lien)
    };
    //gestion des images
    if(this.tagName=="IMG"){
        im=document.createElement('div');
        im.style.fontWeight=100;
        im.style.backgroundColor="yellow";
        im2=document.createTextNode("Adresse: \"" + this.src + "\".");
        im.appendChild(im2);
        bulle.appendChild(im)
    };
}
//masquage de la bulle
function off(e){
    if(!e){
        window.event.cancelBubble=true
    }
    else{
        e.stopPropagation()
    };
    bulle.style.display='none';
    if(bal){
        bulle.removeChild(bal);
        bal=false
    };
    if(lien){
        bulle.removeChild(lien);
        lien=false
    };
    if(im){
        bulle.removeChild(im);
        im=false
    };
}
// ajoutez ou enlevez les éléments que vous voulez dans les tableaux suivants
var tagtype=['IMG','DIV','P','FORM','H1','TABLE','TD','A','SPAN',
    'INPUT','TEXTAREA','HR','H2','SELECT'];
var expl=['image','contenant de type bloc','paragraphe','formulaire',
    'titre n°1','tableau','cellule de tableau','lien','contenant intra-ligne',
    'contrôle de formulaire','zone de texte multiligne','barre horizontale',
    'titre n°2','liste d\'options'];
var tags=[];
for(i=0;i != tagtype.length;i++){
    tags[tagtype[i]]=expl[i]
}
for(i=0;i != tagtype.length;i++){
    for(j=0;j != document.getElementsByTagName(tagtype[i]).length;j++){
        document.getElementsByTagName(tagtype[i])[j].onmouseover=on;
        document.getElementsByTagName(tagtype[i])[j].onmouseout=off;
    }
}
document.body.onclick=off;
Créé le 23 septembre 2004  par Javatwister

Pour arrondir un nombre décimal à l'entier le plus proche, il suffit d'utiliser :

 
Sélectionnez
Math.round(-- valeur décimale --)

Un autre exemple, si l'on veut arrondir un chiffre au centième,

 
Sélectionnez
function arrondir(resultat) {
      resultat = Math.round(resultat*100)/100;
      return resultat;
}

Pour avoir une plus grande précision, il suffit de remplacer 100 par la valeur que vous souhaitez (1000 pour un arrondi au millième par exemple).

Il existe également une autre façon d'obtenir un arrondi :

 
Sélectionnez
function arrondir(resultat) {
    resultat = resultat.toFixed(2);
    return resultat;
}
Mis à jour le 17 mai 2005  par simone.51
 
Sélectionnez
function calculeOffsetLeft(r){
  return calculeOffset(r,"offsetLeft")
}
 
function calculeOffsetTop(r){
  return calculeOffset(r,"offsetTop")
}
 
function calculeOffset(element,attr){
  var offset=0;
  while(element){
    offset+=element[attr];
    element=element.offsetParent
  }
  return offset
}

La fonction calculeOffsetLeft() retourne le nombre de pixel à la gauche de l'élément (son abscisse), la fonction calculeOffsetTop() le nombre au dessus (son ordonnée).

Mis à jour le 16 décembre 2005  par simone.51, denisC
 
Sélectionnez
if (document.getElementById('objet')) {
   // objet existe
}
else {
   // objet n'existe pas
}
Créé le 21 janvier 2004  par simone.51

Le code de l'image :

 
Sélectionnez
<img src="image.gif" id="idimage" alt="Image" />

Et voici le code du script :

 
Sélectionnez
var w=document.images["idimage"].width;
var h=document.images["idimage"].height;
document.write("L'image fait " + w + " pixels de large sur " + h + " pixels de haut");
Créé le 21 janvier 2004  par simone.51

Prenons un exemple.
Vous avez sur votre page un lien permettant de supprimer un message et vous souhaitez que le navigateur affiche une demande de confirmation. Voici le code du lien :

 
Sélectionnez
<a href="supprMsg.php" onclick="return confirm('Voulez-vous vraiment supprimer ce message?');">Supprimer</a>
Créé le 23 septembre 2004  par simone.51

Pour répondre à cette question, on va utiliser un exemple. Supposons que l'on ait cette phrase dans une variable machaine :

 
Sélectionnez
le+petit+chat+noir+est+malade

et qu'on veuille afficher :

 
Sélectionnez
le petit chat noir est malade

le code JavaScript sera :

 
Sélectionnez
var aRemplacer = /\+/g;
var machaine = "le+petit+chat+noir+est+malade";
machaine = machaine.replace(aRemplacer, " ")
alert (machaine);

Pour obtenir ce résultat, on se sert des expressions régulières :

 
Sélectionnez
/\+/g

Une expression régulière est généralement de cette forme : /....../.
Le /g permet de rechercher le caractère dans toute la chaîne.
Le caractère \ avant le + est un simple caractère d'échappement

Mis à jour le 27 octobre 2004  par jeca, simone.51

Lien : Les expressions régulières

 
Sélectionnez
function IsPosInteger(nbr){
    return (/^\d+$/.test(nbr) && (parseInt(nbr,10)>=0));
}

La fonction parseInt() retourne un nombre entier converti à partir d'une chaîne. L'expression régulière permet de vérifier que le nombre est bien uniquement composé de chiffres.

Une autre solution :

 
Sélectionnez
function IsPosInteger(nbr){
    return nbr == Math.abs(parseInt(nbr));
}
Mis à jour le 23 novembre 2010  par javaEli, denisC, Javatwister

Voici le code de la fonction PHP permettant la conversion :

 
Sélectionnez
<?php
function construisTableauJS($tableauPHP, $nomTableauJS){
   echo $nomTableauJS." = [];";
   for($i = 0; $i < count($tableauPHP); $i++){
      if(!is_array($tableauPHP[$i])){
         echo $nomTableauJS."[".$i."] = '".$tableauPHP[$i]."';";
      }
      else{
         construisTableauJS($tableauPHP[$i], $nomTableauJS."[".$i."]");
      }
   }
   return;
} 
?>

Dans cette fonction, le code JavaScript est généré dynamiquement par le PHP. On utilise des echo (PHP) pour écrire les ligne de code JavaScript.
Voici la déclaration du tableau en PHP :

 
Sélectionnez
$monTableauPHP = array(array("toutou", "toto"), array("titi", "tata",
array("tonton", "tutu", array("quatrieme etage du tableau", 54))));

On peut éventuellement afficher le tableau grâce à :

 
Sélectionnez
<?php
echo "<pre>";
print_r($monTableauPHP);
echo "</pre>";
?>

Et voici le code permettant la création du tableau JavaScript :

 
Sélectionnez
echo "<script type='text/javascript'>";
construisTableauJS($monTableauPHP, "monTableauJS");
document.write(monTableauJS.toSource());
echo "</script> ";

Vous obtenez ainsi un tableau JavaScript : monTableauJS à partir d'un tableau PHP : $monTableauPHP

Créé le 2 juillet 2005  par torvalds17, simone.51

Voici un code qui permet à un utilisateur d'ordonner comme bon lui semble une liste (déroulante ou pas)

 
Sélectionnez
<html>
<head>
<script type="text/javascript">
var Obj=null;
 
function Deplacer(sens){
    if(Obj==null){return false;};
    var OptionSel= Obj.selectedIndex;
 
switch (true){
    case ( Obj.length == -1 & sens==-1):
        alert('Pas d\'option à déplacer');
        break;
    case(OptionSel== -1):
        alert('Selectionnez une option à déplacer');
        break;
    case(Obj.length==0):
        alert('Il n\'y a qu\'une option \!');
        break;
    case(OptionSel== 0 && sens==-1):
        alert('La première option ne peut être déplacée');
        break;
 
   case(OptionSel== Obj.length-1 && sens==1):
        alert('La dernière option ne peut être déplacée');
         break;
 
    case(sens==-1):
        // Ce code est le code qui est appelé lorque l'on veut remonter une
//option dans la liste
        // On mémorise dans des variables le texte et les valeurs des éléments
// que l'on déplace.
        // Il suffit ensuite d'échanger les deux éléments
        var moveText1 = Obj[OptionSel-1].text;
        var moveText2 = Obj[OptionSel].text;
        var moveValue1 = Obj[OptionSel-1].value;
        var moveValue2 = Obj[OptionSel].value;
 
        // Echange des éléments
        Obj[OptionSel].text = moveText1;
        Obj[OptionSel].value = moveValue1;
        Obj[OptionSel-1].text = moveText2;
        Obj[OptionSel-1].value = moveValue2;
        Obj.selectedIndex = OptionSel-1;
        break;
 
   case(sens==1):
         // On procède de la même manière que pour faire monter une option.
         // La différence, c que dans ce cas, on prend en compte l'option suivante,
 // et non la précedente comme auparavant
         var moveText1 = Obj[OptionSel].text;
         var moveText2 = Obj[OptionSel+1].text;
         var moveValue1 = Obj[OptionSel].value;
         var moveValue2 = Obj[OptionSel+1].value;
         Obj[OptionSel].text = moveText2;
         Obj[OptionSel].value = moveValue2;
         Obj[OptionSel+1].text = moveText1;
         Obj[OptionSel+1].value = moveValue1;
         Obj.selectedIndex = OptionSel+1;
         break;
    }
}
</script>
</html>
 
 
<body>
<form>
 
  <select name="tag1" id="tag1" size="8" style="width: 200px"
    onclick="Obj=this;" style="float:left;">
    <option value="0">TEST1</option>
    <option value="1">TEST2</option>
    <option value="2">TEST3</option>
    <option value="3">TEST4</option>
    <option value="4">TEST5</option>
    <option value="5">TEST6</option>
    <option value="6">TEST7</option>
    <option value="7">TEST8</option>
  </select>
  <div style="float:left;"><br/>
    <br/>
    <input type="button" name="boutMonter" id="boutMonter" value="Monter" 
      onclick="Deplacer(-1);" style="width:80px"/><br/><br/>
    <input type="button" name="boutDesc" id="boutDesc" value="Descendre"
      onclick="Deplacer(1);" style="width:80px"/>
  </div>
</form>
</body>
</html>

Grâce à ce code, lorsque l'on clique sur un item de la liste pour le déplacer, la variable Obj prend la valeur de la liste déroulante.
Ainsi, dans la fonction deplacer(), la variable Obj fait appel à la liste en question.
La variable OptionSel ne sert qu'à raccourcir les ligne de codes. Elle évite ainsi d'avoir à retaper à chaque fois Obj.selectedIndex.

Créé le 2 juillet 2005  par SpaceFrog, simone.51

Cette fonction permet de remplacer les images qui n'ont pas pu être chargées par une image par défaut.

remplacer les images qui n'ont pas pu être chargées
Sélectionnez
/* Remplace les images qui n'ont pas pu être chargées */
function remplaceImages(){
  for(i=0;i<document.images.length;i++){
    if(!document.images[i].complete){
      document.images[i].src="inconnue.gif"// choisir l'image que vous voulez ici
    }
  }
}
window.onload=remplaceImages;
Créé le 19 avril 2006  par Javatwister

Ce script permet d'afficher dans l'ordre les balises qui composent le document :

Afficher les balises d'un document
Sélectionnez
/* Affiche les balises d'un noeud b. */
function afficheBalises(b){
  var d = "";
  var descendants = b.getElementsByTagName('*');
 
  for( i=0 ; i<descendants.length ; i++ ){
    var dist = distance(b,descendants[i]);
 
    for ( j=0 ; j < (dist-1) ; j++) {
      d += "__";
    }
 
    d += descendants[i].nodeName+'\n';
  }
 
  alert(d)
}
/* Calcule la distance entre deux noeuds. */
function distance(ancetre, descendant) {
  var dist = 0;
  var courant = descendant;
 
  while (courant != ancetre) {
    if (courant == null) {
      dist = -1;
      break;
    }
    dist += 1;
    courant = courant.parentNode;
  }
 
  return dist;
}
window.onload = function() {afficheBalises(document)};
Créé le 19 avril 2006  par Javatwister

Pour remplacer dans un élément de type p toutes les occurrences de ":-)" par l'image image.jpg, on utilise le code suivant :

 
Sélectionnez
monElement.innerHTML = monElement.innerHTML.replace(/\:\-\)/g, " <img src='image.jpg' />");

Il peut être nécessaire de mettre l'image en cache pour que celle-ci s'affiche correctement, en utilisant le code suivant au chargement de la page :

 
Sélectionnez
Image1 = new Image();
Image1.src = "image.jpg";
Créé le 19 avril 2006  par siddh

Voici une petite fonction qui retourne vrai si le chiffre est pair et faux si il est impair :

pair ou impair?
Sélectionnez
function pair(chiffre){
    chiffre = parseInt(chiffre);
    return (chiffre & 1)=='0';
}
Créé le 31 octobre 2006  par SpaceFrog

Lien : Exemple d'utilisation de ce script

Jusqu'à présent à moins d'utiliser une police à espacement constant dont on connait la largeur d'un caractère, il était difficile de calculer la largueur qu'occuperait une chaîne de caractères à l'écran…
Voici la solution :

 
Sélectionnez
<script type='text/javascript'>
    function textWidth(mytext){
        var testdiv=document.getElementById('test');
        testdiv.innerHTML=mytext;
        return document.getElementById('test').offsetWidth +"px";
    }
</script>
</head>
 
<body>
	<div id="test" style="display:inline;visibility:hidden;position:absolute;z-index:100;"></div>
	<input type='text' id='saisie' />
	<input type='button' onclick="alert(textWidth(document.getElementById('saisie').value))" value='largeur pixels' />
</body>
</html>
Créé le 27 septembre 2009  par SpaceFrog

Lien : Exemple d'utilisation de ce script

Il est parfois utile de savoir quand toutes les images de votre page ont été chargées par le navigateur.
Pour cela, la première idée serait d'utiliser l'événement onload appliqué aux images. Mais cette méthode a un inconvénient : pour pouvoir l'utiliser, il faut attendre le chargement complet de la page pour lancer la fonction car il faut que toutes les balises < /> soient présentes dans le DOM. Or à ce moment, certaines images (les plus petites ou celles déjà présentes dans le cache) peuvent avoir fini d'être chargées et ne déclencheront pas le traitement attendu.
La parade est donc de passer par la propriété complete d'un objet HTML image pour incrémenter notre compteur :

 
Sélectionnez
window.onload=function(){
	var compteur = 0, i;
	var total = document.getElementsByTagName('img').length;
	while(compteur!=total){
		compteur = 0;
		for(i=0; i<total; i++){
			if(document.getElementsByTagName('img')[i].complete){compteur++;}
		}
	}
	alert('Toutes les images sont chargées !');
}

Attention : cette méthode suppose que toutes vos images existent réellement et sont accessibles ! Si vous ne pouvez pas garantir cette disponibilité, ajoutez une gestion de l'événement onerror pour compléter votre compte.

Cette méthode est valable pour les balises < />, mais ne fonctionnera pas avec les propriétés de style CSS background-image mais la présence de ces dernières ne perturbera pas le compte.

Mis à jour le 7 juillet 2010  par Bovino

Lien : Exemple d'utilisation de ce script

Le produit cartésien de n tableaux est l'ensemble de toutes les combinaisons de n éléments dont chacune des composantes i appartient au tableau i.

Ce script permet de déterminer le produit cartésien de n tableaux JavaScript et de renvoyer le résultat dans un tableau.

 
Sélectionnez
/*
 * Produit cartésien de n array
 * Wiki http://fr.wikipedia.org/wiki/Produit_cartésien
 * Daniel Hagnoul v1.0.0 2010-10-21
 */
var produitCartesien = function(ts){
	var tslength = ts.length;
 
	if (tslength >= 2){
		var r = tr(ts[0], ts[1]);
 
		for (var n = 2; n < tslength; n++){
			r = tr(r, ts[n]);
		}
 
		return(r.join());
	}
 
	function tr(t1, t2){
		var t3 = [];
 
		for (var i in t1) {
			for (var j in t2) {
				t3.push(t1[i] + '-' + t2[j]);
			}
		}
 
		return t3;
	}
 
	return "Erreur, n < 2";
};
 
var ts = [
	[ 'A', 'R', 'D', 'V', '10', '9', '8', '7', '6', '5', '4', '3', '2' ],
	[ 'pique', 'c?ur', 'carreau', 'trèfle'],
	[ 'a', 'b', 'c', 'd', 'e'],
	[ '01', '02', '03', '04', '05']
];
 
console.log(produitCartesien(ts));

console.log() fait référence aux différents outils de type console avec lesquels JavaScript est capable de communiquer. Cette utilisation remplace avantageusement les boîtes de type alert() pour le débogage car elle permet de récupérer des informations ponctuelles sans pour autant figer la page ni bloquer l'exécution du script.
Par exemple, Firefox dispose avec Firebug d'une console particulièrement efficace (voirMaîtriser Firebug, l'indispensable extension Firefox pour le développement Web).

Créé le 25 novembre 2010  par Daniel Hagnoul

Lien : Discussion en rapport avec cette question

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.