Vader[FR] : ce n'est pas un blog, c'est un Sith

II) Mode de fonctionnement de JavaScript

Vader[FR] — 2012-03-25T10:48:19Z

Principe d'action de JavaScript

une fonction en javascript préalablement déclarée sera lancée par un évènement sur un objet de la page.

par exemple si l'on déclare la fonction ouvrir, acceptant en paramètre l'url d'une page web à ouvrir :

puis dans la page, on met un bouton, qui lancera ladite fonction lors de l'évènement onClick :

Cliquer sur le bouton lancera la fonction ouvrir, avec comme paramètre l'adresse de Google, qui s'ouvrira dans une nouvelle fenêtre ou un nouvel onglet.
La fenêtre étant référencée dans la page courante, par la variable fenetre, il sera possible de la refermer par un deuxième bouton qui aurait lancé une autre fonction, faisant fenetre.close();

Les évènements varient selon les objets.

Par exemple :

l'élément body dispose (entre autres) de l'évènement onLoad, qui se produira lorsque la page se chargera dans le navigateur.
les liens disposent (entre autres) de l'évènement onClick, qui se produira lorsque l'on clique dessus.
les images disposent (entre autres) des évènements onMouseOver, onMouseOut, qui se produiront respectivement lorsque la souris passera au dessus de l'image et lorsque la souris quittera l'image
les boutons , et boutons de formulaire disposent (entre autres) de l'évènement onClick.

la liste complète des éléments et de leurs évènements serait trop longue à détailler ici : il existe des sites dédiés au JavaScript.

Intégrer du JavaScript à une page web

Comme indiqué dans l'article précédent, il y a deux manières d'intégrer du code javascript dans une page web :

en mettant le code directement dans la page
en liant la page à un fichier de scripts javascript

la manière la plus propre est de lier la page à un fichier de script.
Cela évite en effet d'avoir a éditer toutes les pages dans lesquelles un même code aurait pu être incorporé.

la déclaration de liaison d'un fichier de script se fait dans l'entête de la page, entre les balises au même niveau que la déclaration du titre de la page et des feuilles de style CSS.


Titre de la page

On peut bien sûr déclarer plusieurs feuilles de style et plusieurs fichiers de scripts.

Fonctions disponibles et objets javascript

Les éléments et fonctions de javascript étant nombreux, quelques exemples concrets valent mieux qu'un long discours...

III) exemples de scripts JavaScript

Vader[FR] — 2012-03-02T15:25:38Z

Générateur de liens

génération de liens pour une galerie d'images

Pour pouvoir récupérer plus facilement les images d'une galerie, ce script simple génère tous les liens dans la même page, à partir de la racine du chemin de l'image et du nombre d'images à générer.
On peut aussi préciser le nombre de zéros avant le numéro de l'image.

Ce script est très simple, puisqu'il se contente d'associer racine+numéro+extension pour générer n liens de type http://le_site/image01.jpg, http://le_site/image02.jpg...

par exemple ici

il est possible (par un clic droit sous FF, par ex) de copier l'adresse de l'image.

en l'occurrence ici http://worldofwarcraft.judgehype.com/screenshots/images/fonds/metalgear04.jpg

donc en prenant ces paramètres :

racine = http://worldofwarcraft.judgehype.com/screenshots/images/fonds/metalgear
nombre d'images = 20 (ou plus)
nombre de chiffres= 2
extension = jpg

cela génère les liens de la galerie.

Cependant, ce script étant très simple, il ne fonctionne que sur les galeries suivant cette règle de nommage, et seulement si l'image est atteignable directement.
Ainsi, les sites utilisant le flash player pour afficher une galerie ne pourront être récupérés.

function generer(){ //alert("generation"); // récupération des valeurs des champs du formulaire var racine=this.document.form_gen.racine.value; var nombre=this.document.form_gen.nombre.value; var taille=this.document.form_gen.taille.value; var extension=this.document.form_gen.extension.value; for (i=1;i<=nblignes;i++) { // pos[i]=i; // this.document.write ou innerhtml= ? // écriture directe dans le document // on détermine la puissance de 10 du nombre, donc le nombre de zéros devant var puissance=1; for (j=1;jGénérateur de liens"); // pour chaque image de 1 à n for (i=1;i<=nombre;i++) { var numero=""; // le nombre de zéros devant le chiffre // trouver puissance de 10 corrrespondant à i var puissancen=1; var taillen=0; while (puissancen<=i){ puissancen=puissancen*10; taillen=taillen+1; //	alert("nombre de zéros défini"); } for (z=1;z<=(taille-taillen);z++){ numero=numero+"0"; } numero=numero+i; var texte="
"; // ecriture du lien //alert("ecriture"); fenetre.document.write(texte); } //alert("terminé"); fenetre.document.write(""); // controle d'erreur : on arrête le chargement de la page 15 secondes après génération du dernier lien // car pour une raison inconnue, même après que tout soit chargé, la page continue de charger dans le vide. fenetre.setTimeout("stop()",15000); //return 0; }; // fin for
} // fin fonction

Le script est inclut dans le fichier html :


Générateur de liens

Recadrage de blocs

redimensionnement/repositionnement des cadres articles/sous rubriques d'une rubrique, en fonction de leur présence ou non.

Dans la page d'une rubrique, il peut y avoir des articles, des sous-rubriques, ou les deux.

Ce script traite donc les 2 cas possibles, le 3ème cas "par défaut" étant géré par le CSS.

function traitercadres(){ // ============= si bloc articles mais pas sous rubriques : // on enlève la marge du bas, prévue pour le bloc sous-rubriques if ((this.document.getElementById('rubrique_articles')!=null)&&(this.document.getElementById('rubrique_rubriques')==null)){ document.getElementById('rubrique_articles').style.bottom=0+"px"; }; // fin si articles mais pas sous rubriques // ============= si pas bloc articles mais sous rubriques : // on enlève la marge du haut, prévue pour le bloc articles if ((this.document.getElementById('rubrique_rubriques')!=null)&&(this.document.getElementById('rubrique_articles')==null)){ // ici, on pose le haut du bloc a 127px du bloc le contenant. // C'est la hauteur prise par le "chapeau" contenant le titre et la hiérarchie. document.getElementById('rubrique_rubriques').style.top=127+"px"; document.getElementById('rubrique_rubriques').style.height="auto"; }; // fin si sous rubriques mais pas articles
} // fin fonction

Redimensionnement d'images

redimensionnement proportionnel d'images

Un script pour redimensionner des images dans une page, en gardant les proportions de l'image.

Cela est utile pour les blocs de tailles variables.

On traite toutes les images d'un même cadre, que l'on charge au début dans un tableau.

function traiterimages(){ // initialisation de la variable a null. la variable existe mais ne contient rien var tabimage=null; // le cadre susceptible de contenir des images à redimensionner se nomme "contenu_article". // On ne traite qu'un seule cadre par page. // car on suppose qu'il n'y a qu'un seul cadre "contenu" // D'autres boucles conditionnelles if/else permettraient de traiter d'autres cadres. // Par exemple en les mettant à la suite dans un tableau. if (this.document.getElementById('contenu_article')!=null){ // si le cadre existe, récupérer ses hauteur et largeur actuelles, réelles var h_div=this.document.getElementById('contenu_article').offsetHeight; var l_div=this.document.getElementById('contenu_article').offsetWidth; // alert("le div image fait "+h_div+"x"+l_div+" (HxL)"); // récupération des images du div. Tous les éléments de type 0)){ //alert("taille tableau="+tabimage.length); // traitement des images une par une for (i=0;il_div){ // le "facteur de réduction" var reduction=l_img/l_div; // le script original prévoyait le cas d'images "trop hautes". // ici, le tableau d'image suppose qu'il y ait plusieurs images // par exemple dans le cas d'un article) // image plus LARGE que haute // appliquer réduction en largeur et hauteur var nh=h_img/reduction; var nl=l_img/reduction; // pour être au milieu, il faut que margeh=()h_div-nh/2 // var margeh=(h_div-nh)/2; // image.setAttribute("style","margin-top:"+margeh+"px;"); // appliquer la réduction //alert("la nouvelle image fera "+nh+"x"+nl+" dans un div de "+h_div+"x545 (HxL)"); image.setAttribute("height",nh); image.setAttribute("width",nl); // finsi } // if/else image trop grande (trop large) } // fin for chaque image } // finsi tableau non nul
} // fin fonction traitement d'image

Le script pour plusieurs images pour un cadre par page, adapté à ce site.


Script redimensionnement images: Script pour plusieurs images.

Le script pour une seule image pour un seul cadre par page, adapté à l'ancien site des Ateliers du Père Lachaise Associés.
Une image (l'œuvre) dans un cadre de taille variable, à côté d'un cadre texte de taille maximale fixe (détail de l'œuvre).


Script redimensionnement image: Script pour une image unique par page

Le contenu de ce fichier peut être incorporé dans un fichier contenant plusieurs fonctions/scripts JavaScript

Il est possible de dé-commenter une partie du code afin d'activer le cas d'image trop haute.

En cas de traitement d'image unique dans un bloc, traitée en hauteur et largeur, remplacer le tabimage par une variable initialisée à l'élément zéro du tableau : image=document.getElementById('contenu_article').getElementsByTagName('img')[0];
ce sera, de fait, la première image contenue dans le bloc.

Si besoin est de précision, me contacter.

I) Qu'est-ce que JavaScript ?

Vader[FR] — 2012-02-22T15:42:15Z

JavaScript est un langage interprété, contenu dans une page web, qui va être exécuté par le navigateur.
Cela n'a rien à voir avec le langage objet JAVA, qui, lui, est compilé.

Ce genre de programme (script) permet d'éditer en temps réel une page affichée, et donc d'alléger la charge du serveur, puisque les calculs sont effectués par le navigateur "client".

Par exemple, on peut utiliser JavaScript pour interroger le serveur, et en fonction de la réponse, modifier une partie de la page sans avoir à la recharger entièrement. Cela diminue la bande passante utilisée (pour info, ce concept se nomme AJAX).

Un exemple est le diaporama de la page de garde ici.

Le JavaScript peut être inclut à la page, ou dans un fichier de script joint, ce qui est plus simple pour gérer les différents scripts et les différentes pages utilisant le même script.

Auquel cas, le fichier contenant les scripts JavaScript aura pour extension .js

JavaScript est couramment utilisé pour charger des publicités dans les pages web, mais les applications sont multiples.

Sur le présent site, JavaScript est utilisé pour :

rediriger les navigateurs Internet Explorer sur une page d'avertissement
retailler automatiquement les images d'une page en gardant les bonnes proportions (ce qui n'est pas faisable en CSS).
retailler automatiquement les blocs d'une rubrique en fonction de la présence ou non d'articles et/ou de sous-rubriques
gérer les blocs dépliants et onglets