Script dyna.js

Le script dyna.js permet de modifier de manière dynamique les propriétés et le contenu des divisions d'une page Web dynamique.

Une page Web « dynamique » est une page Web composée de plusieurs divisions ou couches. Une division est définie dans le code HTML de la page avec la balise <DIV>. Il est ensuite possible d'accéder aux propriétés de cette division (position, dimensions, couleur de fond, etc.) et de modifier son contenu après le chargement de la page, en faisant appel au DOM (Document Object Model) du navigateur. Le meilleur moyen d'accéder au DOM reste le JavaScript.

C'est l'emploi conjugué des divisions HTML et du JavaScript que l'on appelle DHTML (Dynamic-HTML).

Au chargement de la page, ce script vérifie que le navigateur du client accepte le DHTML, et détermine quel DOM est utilisé par le navigateur. En effet, plusieurs DOM existent. Ce script reconnaît les plus répandus, dont celui défini par la norme DOM-1 du W3C et utilisé par les navigateurs de dernière génération.

Plusieurs fonctions permettent ensuite :

• de créer dynamiquement une nouvelle division ;
• de montrer et de cacher une division ;
• d'obtenir et de modifier l'index de superposition (Z-index) d'une division ;
• d'obtenir et de modifier les positions horizontale et verticale d'une division ;
• d'obtenir et de modifier la largeur et la hauteur d'une division ;
• d'obtenir et de modifier la couleur d'arrière-plan d'une division ;
• d'obtenir et de modifier l'image d'arrière-plan d'une division ;
• de modifier le contenu d'une division, c'est-à-dire le code HTML qui la compose.

Depuis :

JsLib 1.0

accepteDHTML

booléen accepteDHTML()

Indique si le navigateur accepte le DHTML. Cette fonction renvoie true si le navigateur utilisé fournit un moyen « connu » d'accéder au DOM (Document Object Model) du document HTML avec JavaScript. Trois méthodes sont testées  :

• document.getElementById() (navigateurs de 5^ème génération) ;
• document.all[] (Internet Explorer 4, Opera 4/5/6) ;
• document.layers[] (Netscape Navigator 4).

Retourne :

true si le navigateur accepte le DHTML, false sinon.

cacherDivision

booléen cacherDivision(chaîne id)

Rend invisible la division spécifiée. Si la division est visible, cette fonction la cache.

Paramètres :

id - l'identifiant de la division à cacher.

Retourne :

true si la division a été cachée, false sinon.

creerDivision

booléen creerDivision(chaîne id, entier x, entier y, entier largeur, entier hauteur)

Crée une nouvelle division d'identifiant spécifié. La division est créée à la position spécifiée par x et y, avec les dimensions spécifiées. A sa création, la division est masquée. Ainsi, le contenu de la division peut être défini avant qu'elle ne soit visible par l'utilisateur.

Paramètres :

id - l'identifiant de la division à créer.

x - l'abscisse du coin supérieur gauche de la division.

y - l'ordonnée du coin supérieur gauche de la division.

largeur - la largeur de la division.

hauteur - la hauteur de la division.

Retourne :

true si la création a été effectuée, false sinon.

deplacerDivisionDe

booléen deplacerDivisionDe(chaîne id, entier px, entier py)

Déplace la division spécifiée du nombre de pixels spécifié. La division est ici déplacée de manière relative à sa position précédente. Les valeurs px et py sont le nombre de pixels à ajouter aux coordonnées du coin supérieur gauche de la division. S'ils valent tous deux 0, la division conservera sa position. Ces paramètres peuvent être inférieurs à 0 : dans ce cas, la division sera déplacée vers le haut et vers la gauche.

Paramètres :

id - l'identifiant de la division à déplacer.

px - le nombre de pixels à utiliser pour déplacer la division sur le plan horizontal.

py - le nombre de pixels à utiliser pour déplacer la division sur le plan vertical.

Retourne :

true si le déplacement a été effectué, false sinon.

deplacerDivisionVers

booléen deplacerDivisionVers(chaîne id, entier x, entier y)

Déplace la division spécifiée vers les coordonnées spécifiées. Les coordonnées x et y sont respectivement l'abscisse et l'ordonnée du coin supérieur gauche de la division dans la page. S'ils valent tous deux 0, la division sera placée dans l'angle supérieur gauche de la zone de navigation. Ces paramètres peuvent être inférieurs à 0 : dans ce cas, seule une partie de la division sera visible sur la page.

Paramètres :

id - l'identifiant de la division à déplacer.

x - l'abscisse du coin supérieur gauche de la division (distance en pixels entre le côté gauche de la page et le côté gauche de la division).

y - l'ordonnée du coin supérieur gauche de la division (distance en pixels entre le haut de la page et le haut de la division).

Retourne :

true si le déplacement a été effectué, false sinon.

modifierCodeDivision

booléen modifierCodeDivision(chaîne id, chaîne code)

Modifie le code HTML contenu dans la division spécifiée. Le nouveau contenu remplace l'ancien contenu. Le texte spécifié peut contenir n'importe quelle balise HTML. Cette fonction permet aussi d'effacer le contenu d'une division en passant en paramètre une chaîne vide.

Paramètres :

id - l'identifiant de la division dont on veut modifier le contenu.

code - le code HTML à écrire dans la division.

Retourne :

true si la modification a été effectuée, false sinon.

modifierCouleurFondDivision

booléen modifierCouleurFondDivision(chaîne id, chaîne couleur)

Modifie la couleur de fond de la division spécifiée. Le paramètre couleur peut se présenter sous deux formes : un code hexadécimal RGB (exemple : #FF0000) ou un nom de couleur HTML (exemple : red). Lorsque le paramètre couleur est une chaîne videou le mot transparent, la division devient transparente et laisse apparaître le contenu de la page ou de la division qu'elle recouvre.

Paramètres :

id - l'identifiant de la division dont on doit modifier la couleur de fond.

couleur - le code RGB ou le nom HTML de la nouvelle couleur de fond de la division.

Retourne :

true si la modification a été effectuée, false sinon.

modifierDimensionsDivision

booléen modifierDimensionsDivision(chaîne id, entier largeur, entier hauteur)

Modifie les dimensions de la division spécifiée. La largeur et la hauteur spécifiées doivent être des entiers positifs. Si l'une ou l'autre est égale à 0, le redimensionnement revient à masquer la division.

Paramètres :

id - l'identifiant de la division à redimensionner.

largeur - la nouvelle largeur de la division, en pixels.

hauteur - la nouvelle hauteur de la division, en pixels.

Retourne :

true si la modification a été effectuée, false sinon.

modifierHauteurDivision

booléen modifierHauteurDivision(chaîne id, entier hauteur)

Modifie la hauteur de la division spécifiée. La hauteur spécifiée doit être un entier positif. Si la hauteur est égale à 0, le redimensionnement revient à masquer la division.

Paramètres :

id - l'identifiant de la division à redimensionner.

hauteur - la nouvelle hauteur de la division, en pixels.

Retourne :

true si la modification a été effectuée, false sinon.

modifierImageFondDivision

booléen modifierImageFondDivision(chaîne id, chaîne image)

Modifie l'image de fond de la division spécifiée. Comme pour la page Web, l'image de fond recouvre la couleur de fond de la division. Le paramètre image doit être l'URL absolue ou relative du fichier image (GIF, PNG, JPEG) à utiliser comme image de fond. Lorsque le paramètre image est une chaîne vide, l'image de fond utilisée jusque là est masquée.

Paramètres :

id - l'identifiant de la division dont on doit modifier l'image de fond.

image - l'URL (absolue ou relative) de la nouvelle image de fond de la division.

Retourne :

true si la modification a été effectuée, false sinon.

modifierLargeurDivision

booléen modifierLargeurDivision(chaîne id, entier largeur)

Modifie la largeur de la division spécifiée. La largeur spécifiée doit être un entier positif. Si la largeur est égale à 0, le redimensionnement revient à masquer la division.

Paramètres :

id - l'identifiant de la division à redimensionner.

largeur - la nouvelle largeur de la division, en pixels.

Retourne :

true si la modification a été effectuée, false sinon.

modifierPosGaucheDivision

booléen modifierPosGaucheDivision(chaîne id, entier x)

Modifie la position horizontale de la division spécifiée. La coordonnée x est l'abscisse du coin supérieur gauche de la division dans la zone de navigation. Ce paramètre peut être inférieur à 0 : dans ce cas, seule une partie de la division sera visible sur la page.

Paramètres :

id - l'identifiant de la division à déplacer.

x - l'abscisse du coin supérieur gauche de la division (distance en pixels entre le côté gauche de la page et le côté gauche de la division).

Retourne :

true si le déplacement a été effectué, false sinon.

modifierPosHautDivision

booléen modifierPosHautDivision(chaîne id, entier y)

Modifie la position verticale de la division spécifiée. La coordonnée y est l'ordonnée du coin supérieur gauche de la division dans la zone de navigation. Ce paramètre peut être inférieur à 0 : dans ce cas, seule une partie de la division sera visible sur la page.

Paramètres :

id - l'identifiant de la division à déplacer.

y - l'ordonnée du coin supérieur gauche de la division (distance en pixels entre le haut de la page et le haut de la division).

Retourne :

true si le déplacement a été effectué, false sinon.

modifierZIndexDivision

booléen modifierZIndexDivision(chaîne id, entier z)

Modifie l'index de superposition de la division spécifiée. L'index de superposition d'une division, ou z-Index, précise la manière dont se superposent plusieurs divisions placées les unes sur les autres. La division ayant le z-Index le plus faible sera à l'arrière-plan, celle ayant le z-Index le plus élevé sera au premier-plan.

Paramètres :

id - l'identifiant de la division dont on doit modifier le z-Index.

z - un entier positif correspondant au nouveau z-Index de la division.

Retourne :

true si la modification a été effectuée, false sinon.

montrerDivision

booléen montrerDivision(chaîne id)

Rend visible la division spécifiée. Si la division est masquée, cette fonction la rend visible.

Paramètres :

id - l'identifiant de la division à rendre visible.

Retourne :

true si la modification a été effectuée, false sinon.

obtenirCouleurFondDivision

chaîne obtenirCouleurFondDivision(chaîne id)

Retourne la couleur de fond de la division spécifiée. La valeur retournée peut se présenter sous deux formes : un code hexadécimal RGB (exemple : #FF0000) ou un nom de couleur HTML (exemple : red).

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

une chaîne représentant la couleur de fond de la division.

obtenirDivision

objet obtenirDivision(chaîne id)

Retourne une référence sur la division d'identifiant spécifié. Si la division d'identifiant spécifié n'existe pas, la fonction renvoie une chaîne vide.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

une référence sur la division d'identifiant spécifié.

obtenirHauteurDivision

entier obtenirHauteurDivision(chaîne id)

Retourne la hauteur de la division spécifiée, en pixels.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

un nombre entier positif égal à la hauteur de la division.

obtenirHauteurZone

entier obtenirHauteurZone()

Retourne la hauteur de la zone de navigation (hauteur utile de la fenêtre). Il s'agit de la hauteur de la zone modifiable de la fenêtre en pixels : les dimensions de la barre de titre, de la barre d'outils, de barre d'état, etc. ne sont pas prises en compte.

Retourne :

un nombre entier positif égal à la hauteur en pixels de la zone de navigation.

obtenirImageFondDivision

chaîne obtenirImageFondDivision(chaîne id)

Retourne l'URL de l'image de fond de la division spécifiée. Il s'agit de l'URL absolue ou relative du fichier image (GIF, PNG, JPEG) utilisé comme image de fond.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

une chaîne correspondant à l'URL de l'image de fond de la division.

obtenirLargeurDivision

entier obtenirLargeurDivision(chaîne id)

Retourne la largeur de la division spécifiée, en pixels.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

un nombre entier positif égal à la largeur de la division.

obtenirLargeurZone

entier obtenirLargeurZone()

Retourne la largeur de la zone de navigation (largeur utile de la fenêtre). Il s'agit de la largeur de la zone modifiable de la fenêtre en pixels : les dimensions de la barre de titre, de la barre d'outils, de barre d'état, etc. ne sont pas prises en compte.

Retourne :

un nombre entier positif égal à la largeur en pixels de la zone de navigation.

obtenirPosGaucheDivision

entier obtenirPosGaucheDivision(chaîne id)

Retourne la position horizontale de la division spécifiée. Il s'agit de l'abscisse en pixels du coin supérieur gauche de la division dans la zone de navigation.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

un nombre entier positif égal à la position horizontale de la division.

obtenirPosHautDivision

entier obtenirPosHautDivision(chaîne id)

Retourne la position verticale de la division spécifiée. Il s'agit de l'ordonnée en pixels du coin supérieur gauche de la division dans la zone de navigation.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

un nombre entier positif égal à la position verticale de la division.

obtenirZIndexDivision

entier obtenirZIndexDivision(chaîne id)

Retourne l'index de superposition de la division spécifiée. L'index de superposition d'une division, ou z-Index, précise la manière dont se superposent plusieurs divisions placées les unes sur les autres.

Paramètres :

id - l'identifiant de la division concernée.

Retourne :

un nombre entier positif égal à l'index de superposition de la division.