IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Divers scripts utiles
        Comment afficher automatiquement des informations sur les élements d'une page en info-bulle?
        Comment arrondir un nombre décimal ?
        Comment retrouver les coordonnées X et Y d'un objet ?
        Comment afficher l'heure en temps réel ?
        Comment tester si un objet existe ?
        Comment récupérer les dimensions d'une image affichée à l'écran ?
        Comment demander une confirmation une fois que l'on a cliqué sur un lien, ou sur un bouton ?
        Comment remplacer des caractères dans une chaine ?
        Comment verifier si la valeur rentrées dans un champ est un entier >0 ?
        Conversion d'un tableau PHP de dimension N en tableau JavaScript
        Comment permettre aux internautes de trier une liste ?
        Comment générer une image de remplacement pour toutes celles qui n'ont pu être chargées ?
        Comment afficher la liste des balises d'un document?
        Comment comparer deux dates?
        Comment remplacer un smiley par une image?
        Comment determiner si est chiffre est pair ou impair ?

rechercher
precedent    sommaire       telechargermiroir


Comment afficher automatiquement des informations sur les élements d'une page en info-bulle?
auteur : Javatwister
Il suffit d'insérer ce code en bas de page.
<script type="text/javascript">
    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=new Array('IMG','DIV','P','FORM','H1','TABLE','TD','A','SPAN',
		'INPUT','TEXTAREA','HR','H2','SELECT');
    var expl=new Array('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=new Array();
    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;
</script>

Comment arrondir un nombre décimal ?
auteur : simone.51
Pour arrondir un nombre décimal à l'entier le plus proche, il suffit d'utiliser :
math.round(-- valeur décimale --)
Un autre exemple, si l'on veut arrondir un chiffre au centième,
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 :
function arrondir(resultat) {
    resultat = resultat.toFixed(2);
    return resultat;
}

Comment retrouver les coordonnées X et Y d'un objet ?
auteurs : simone.51, denisC
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'élement (son abscisse), la fonction calculeOffsetTop le nombre au dessus (son ordonnée).


Comment afficher l'heure en temps réel ?
auteur : simone.51
Les timers Javascript permettent d'executer des fonctions à des intervalles de temps donnés. Ainsi, pour notre horloge, nous allons utiliser setInterval qui se déclenchera toutes les 1000ms pour mettre à jour l'heure affichée sur l'horloge.

Voici la fonction pour afficher l'heure :
function runClock() {
  today   = new Date();
  hours   = today.getHours();
  minutes = today.getMinutes();
  seconds = today.getSeconds();
  timeValue = hours;

  // Les deux prochaines conditions ne servent que pour l'affichage.
  // Si le nombre de minute est inférieur à 10, alors on rajoute un 0 devant...

  timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
  timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
  document.getElementById("time").value = timeValue;
  timerRunning = true;
}
timerID = setInterval(runClock,1000);
Et voici le champ texte :
<input type="text" id="time" size=10>
lien : Exemple d'utilisation de ce script

Comment tester si un objet existe ?
auteur : simone.51
if (document.getElementById('objet')) {
   // objet existe
}
else {
   // objet n'existe pas
}

Comment récupérer les dimensions d'une image affichée à l'écran ?
auteur : simone.51
Le code de l'image :
<img src="image.gif" id="idimage">
Et voici le code du script :
<script language="javascript">
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");
</script>

Comment demander une confirmation une fois que l'on a cliqué sur un lien, ou sur un bouton ?
auteur : 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 :
<a href="supprMsg.php" onclick="return confirm('Voulez-vous vraiment supprimer ce message?');">
	Supprimer
</a>

Comment remplacer des caractères dans une chaine ?
auteurs : jeca, simone.51
Pour répondre à cette question, on va utiliser un exemple. Supposons qu'on ait cette phrase dans une variable maChaine :
le+petit+chat+noir+est+malade
et qu'on veuille afficher :
le petit chat noir est malade
le code javascript sera :
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 :
/\+/g
Une expression régulière est généralement de cette forme : /....../
Le /g permet de rechercher le caractère dans toute la chaine.
Le caractère \ avant le + est un simple caractère d'échappement

lien : fr Les expressions régulières

Comment verifier si la valeur rentrées dans un champ est un entier >0 ?
auteurs : javaEli, denisC
function IsPosInteger(nbr){
    return (/^\d+$/.test(nbr)&&(parseInt(nbr,10)<=0));
}
La fonctions 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.


Conversion d'un tableau PHP de dimension N en tableau JavaScript
auteurs : torvalds17, simone.51
Voici le code de la fonction php permettant la conversion :
<?php

function construisTableauJS($tableauPHP, $nomTableauJS){
   echo $nomTableauJS." = new Array();";
   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 :
$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 à :
<?php
echo "<pre>";
print_r($monTableauPHP);
echo "</pre>";
?>
Et voici le code permettant la création du tableau Javascript :
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


Comment permettre aux internautes de trier une liste ?
auteurs : SpaceFrog, simone.51
Voici un code qui permet à un utilisateur d'ordonner comme bon lui semble une liste (déroulante ou pas)
<HTML>
<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>



<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 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.


Comment générer une image de remplacement pour toutes celles qui n'ont pu être chargées ?
auteur : Javatwister
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
/* 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;

Comment afficher la liste des balises d'un document?
auteur : Javatwister
Ce script permet d'afficher les balises qui composent le document, dans l'ordre:
Afficher les balises d'un document
/* 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)};

Comment comparer deux dates?
auteur : siddh
Comparer deux dates
// Mise en place de la première date
d1 = new Date(0);
d1.setFullYear(2006, 11, 27)

// Mise en place de la seconde date
d2 = new Date(0);
d2.setFullYear(2006, 0, 18)

if(d1 > d2)
	alert("d1 est après d2");
else if(d1 < d2)
	alert("d1 est avant d2");
else
	alert("d1 et d2 sont la même date");
Attention, les mois vont de 0 (janvier) à 11 (décembre).

lien : Exemple d'utilisation de ce script

Comment remplacer un smiley par une image?
auteur : siddh
Pour remplacer dans un élément de type p toutes les occurrences de ":-)" par l'image image.jpg, on utilise le code suivant:
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:
Image1 = new Image()
Image1.src = "image.jpg"

Comment determiner si est chiffre est pair ou impair ?
auteur : SpaceFrog
Voici une petite fonction qui retourne vrai si le chiffre est pair et faux si il est impair:
pair ou impair?
function pair(chiffre){
	chiffre=parseInt(chiffre);
	return ((chiffre & 1)=='0')?true:false;
}
lien : Exemple d'utilisation de ce script

rechercher
precedent    sommaire       telechargermiroir

Consultez les autres F.A.Q's


Valid XHTML 1.1!Valid CSS!

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.