Fiche Javascript : Utilitaires

Objet de la fiche :

État de la fiche


Plan de la fiche :

Avant propos :

Voici quelques scripts de base pour vous aider dans la conception et le développement de votre site. Facilement intégrables ils permettrons de démarrer rapidement et serviront de base de départ pour approfondir les divers sujets.

Récupération des informations d'une URL


Script liés aux objets

Retrouver la position d'un objet

Généralités

Ce script donne la position réelle, de sorte que que si la page est redimensionnée, les nouvelle coordonnées seront disponibles après le rafraîchissement de la page.
Quel que soit le navigateur on doit utiliser offsetTop et offsetLeft pour l'élément dont on veut connaître la position. Ces propriétés donnent les coordonnés de l'élément.

Ces coordonnées sont relatives à offsetParent. mais certains navigateurs présentent quelques désagréments concernant l'identité de offsetParent,
Par exemple, pour  l'offsetTop d'un paragraphe(<p>) le navigateur Mozilla donne l'offset de l'élément pour la page entière et le navigateur Opéra donne l'offset relatif à la position du paragraphe <p>). En tout état de cause pour  tous les navigateurs gérant la propriété offsetParent, cette dernière contient une référence à l'élément. Dans le script on doit cumuler les différents offset tant qu'il y a un offsetParent valide. Avec Mozilla le calcul sera fait 1 fois par rapport à l'élément pour chacun des offsetParent, alors que pour Opera il faut boucler tout au long de l'arbre: p, body et en fin html. Lorsque l'on ajoute les différents offset on obtient la position réelle de l'objet.

Exemple


Explications:

La fonction getOffsetPosition() attend 1 paramètre : _element : objet ou sa référence dont on doit calculer  la position en "X" ou "Y".


"if (oObj.offsetParent) {" teste si le navigateur supporte cette fonction.

"while (oObj)" boucle tant que oObj (à savoir document.getElementById(inID).offsetParent) est valide.
En fin de boucle la somme des offset.Parent imbriqués fourni le positionnement x ou y réel de l'objet.

Centrer un objet

Ce script permet de centrer un objet ou l'ensemble de votre site.

Retrouver les dimensions disponibles de l'écran de l'internaute

Des tooltip dans votre page


Ce script permet de réaliser des bulles d'aide sur des éléments HTML, particulièrement utiles lors du survol de liens hypertextes. Il permet d'avoir des bulles d'aide qui s'affichent et s'effacent progressivement (effet progressif de transparence).



Changer dynamiquement le style d'une page

Principe

Le principe consiste à changer dynamiquement le fichier CSS. La page est automatiquement et sans rechargement modifiée.

Code exemple

Exemple

fichier css : Demo_Style_Clair.css fichier css : Demo_Style_Sombre.css


Formatage des dates

Ce script permet de présenter une date à la demande en fonction d'une ligne de commande dont les éléments sont définis dans le tableau disponible dans la démo.

Par exemple \N\o\u\s \s\o\m\m\e\s \l\e l j F, \i\l \e\s\t G:i:s \(\s\e\m\a\i\n\e W \d\e Y) donnera le résultat suivant :
Nous sommes le Jeudi 10 Avril, il est 22:00:33 (semaine 15 de 2014)


Des objets utiles

Une calculatrice simple


Un calendrier


Des fonctions natives utiles

La fonction replace()


Définitions Fonctions Tests
Une fonction qui permet de supprimer tous les espaces dans un chaine. Par exemple vous permettez la saisie d'un numéro de téléphone sous la forme 06 01 02 03 04, mais au niveau du test et du stockage vous voulez 0601020304 test = "06 01 02 03 04";
test = test.replace(new RegExp(' ', 'g'),'');		 Entrez votre chaine :


Des fonctions qui permettent de remplacer dans une chaine, des caractères accentués par leurs équivalents non accentués. test = "ma chaine";
test = test.replace(/[éêèë]/gi,"e");
test = test.replace(/[àâ]/gi,"a");
test = test.replace(/[ù]/gi,"u"); 		Entrez votre chaine :



Des script utiles

fonctions de manipulation de tableaux

Supprimer les doublons d'une table simple : RemoveDoublons()

Ordonner une table dans l'ordre croissant ou décroissant : sort(function()

fonctions mathématiques

Générer un nombre aléatoire à n chiffres

fonction : nb_aleatoire(nbCh). Exp : si nbCh =2 le nombre aléatoire résultant sera compris entre 10 et 99, si nbCh = 4 le nombre aléatoire résultant sera compris entre 1000 et 9999.

Générer un nombre aléatoire compris entre 0 et n

fonction : rndnumber(nbr). Exp : si nbr = 12 la fonction retournera un nombre aléatoire compris entre 0 et 12.

Transforme une valeur en Ko, Mo, Go

Transforme un nombre en secondes en un format lisible

Teste si un numéro est pair ou impair

Transforme une valeur hexa en valeur rgb

Conversion d'un nombre hexadécimal en nombre décimal

Conversion d'un nombre décimal en nombre hexadécimal


Application au projet de site web



Respectons la propriété intellectuelle