Arts numériques

Faire scroller la page doucement avec jQuery

Stéphane Noel — 2012-12-02T22:56:35Z

Jquery permet de se dÃ©placer dans une page avec douceur. Il est possible de le faire avec juste la librairie.

La mÃ©thode standard

Comme toujours, pour que le javascript fonctionne, il faut
– un code html adaptÃ© au script et bien formÃ©
– l'inclusion de la librairie jQuery
– le code jQuery d'initilalisation

Un code html adaptÃ©

Dans notre cas, le code comporte une partie pour la navigation et des Ã©lÃ©ments dans la page vers lesquels scroller.

La navigation cÃ´tÃ© html sera une liste d'ancres. En html, une ancre est un lien interne Ã une page, pointant vers un Ã©lÃ©ment possÃ©dant l'attribut "name" . Ils s'Ã©crivent comme suit :

Premier lien

mÃ¨nera vers

Nous avons donc ce code qui a l'avantage d'Ãªtre dÃ©gradable. En absence de javascript, les liens fonctionneront, mais en sautant.

 
   #1
 #2
 #3
 
 
   Un intertitre 1 Top
 Une banque est une entreprise 
 
  Un intertitre 2 Top
 Le concept de dette est fortement associÃ© au mÃ©canisme de crÃ©ation monÃ©taire dans le systÃ¨me financier moderne. 
 
  Un intertitre 3 Top
 Une banque est une entreprise qui fait le commerce de l'argent. .

Inclure jQuery

Dans le header, on place un appel vers les deux fichiers javascript : la librairie et le plugin :
– JQuery sur le site mÃ¨re

Nous les plaÃ§ons dans un dossier Ã cÃ´tÃ© de la page html.

Activer le tout

En dessous des deux appels de javascript, on placera le code suivant :

Pour un scroll horizontal, on modifiera l'animation

$('html, body').animate( { scrollLeft: $(page).offset().left }, speed );

Voir la documentation sur le site de jQuery pour scrollTop et scrollLeft

Personnaliser plus

Ce script possÃ¨de de nombreuses variantes que l'on peut trouver en cherchant sur le net, et plusieurs plugins pour jquery ont Ã©tÃ© crÃ©Ã©s, pour paramÃ©trer facilement la vitesse et la fluiditÃ© du scroll. Chercher avec les mots clÃ©s "jquery scroll plugin" par exemple.

IntÃ©grer colorbox dans wordpress

Stéphane Noel — 2010-04-20T10:58:07Z

Ajouter un systÃ¨me de visualisation de galerie dans son thÃ¨me est assez simple mais il faut Ãªtre rigoureux. Une petite marche Ã suivre est donc utile ici.

Didacticiel ou plug and play ?

Le but de cet article est de parcourir un cas pratique de mise en place d'un plugin javascript manuellement. Pour ceux qui veulent juste employer colorBox dans wordpress, il existe une solution toute faite, un plugin Wordpress beaucoup plus simple et rapide.
TÃ©lÃ©charger le plugin "jQuery Colorbox" sur le site officiel de Wordpress

Colorbox ?

Colorbox est un systÃ¨me de type "lightbox". En cliquant sur la vignette dans une page web, on ouvre l'image en grand avec un commentaire et un fond partiellement obscurci. Un grand classique du web 2.0.
Comme les autres systÃ¨mes de galerie, colorbox permet de faire entrer dans ces cadres d'autres types de contenu, notamment grace Ã ajax.

Colorbox n'est pas le seul systÃ¨me existant. Je le prend ici pour ce didacticiel car il est rÃ©cent, bien conÃ§u et s'appuie sur jQuery, une des bibliothÃ¨ques javascript (ou framework) les plus utilisÃ©es.

Sommaire

Pour placer colorbox dans son theme, on devra
– TÃ©lÃ©charger le plugin
– Placer la css, les images et la feuille de script de colorbox dans le theme
– TÃ©lÃ©charger Ã©ventuellement jQuery et le placer dans le thÃ¨me
– crÃ©er sa propre feuille javascript (pour activer le plugin) dans le dossier de thÃ¨me encore
– placer les codes d'inclusion javascript et css dans le header du thÃ¨me

et enfin, dans l'administration de wordpress, incorporer des images (vignettes avec lien vers l'image grand format)

Ooouf. Le tout devrait prendre moins d'un quart d'heure si on fait Ã§a dans l'ordre.

1. TÃ©lÃ©charger

On tÃ©lÃ©charge le module de colorbox ici
Si vous n'avez pas encore utilisÃ© jQuery dans votre thÃ¨me, tÃ©lÃ©chargez le Ã partir du site de jQuery.

Petite remarque de compatibilitÃ© : alors que j'Ã©cris ce didacticiel (20 avril 2010) les versions de colorbox et jquery sont parfaitement compatible. Il se peut que ce ne soit plus le cas dans quelques annÃ©es, pour des tas de raisons. VÃ©rifiez donc cette compatibilitÃ©, Ã§a Ã©vite des pleurs de rage)

2. Installer les fichiers dans le thÃ¨me

Le plugin colorbox est livrÃ© avec de la documentation et des dÃ©mos, ce qui est bien pratique mais un peu confusant pour le nÃ©ophyte. Nous allons prendre dans le dossier juste ce qui nous intÃ©resse :
– La version "minifiÃ©e" (compressÃ©e au maximum) du fichier javascript, qui se trouve dans le dossier "colorbox" et s'appelle jquery.colorbox-min.js.
– La css et le dossier d'images qui se trouve dans le dossier de l'exemple 1.

Nous placerons ces fichiers et dossiers dans le thÃ¨me, dans un dossier "colorbox" pour ne pas mÃ©langer ces fichiers au reste de votre thÃ¨me.
Si vous n'avez pas encore jQuery (absolument nÃ©cessaire au bon fonctionnement de colobox), placez le au premier niveau de votre thÃ¨me.

3. Charger Jquery et colorbox dans le code du header

Il faut maintenant charger ces fichiers dans le html, pour pouvoir l'utiliser partout oÃ¹ c'est nÃ©cessaire. Pour cela, on ouvrira le fichier "header.php" (si votre thÃ¨me l'utilise, ce qui est probablement le cas) et on placer les codes suivant Ã l'intÃ©rieur de la balise "head" :

   /colorbox/colorbox.css" />

Ã‡a devrait donner quelque chose comme Ã§a :

4. Activer ColorBox et paramÃ©trer son comportement

Il nous reste a crÃ©er un fichier "monscript.js" que l'on placera au premier niveau du thÃ¨me (on a dÃ©clarÃ© dans le head son existance ici plus haut). On y placera le code suivant :

$(document).ready(function(){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").colorbox({transition:"none", maxWidth:"80%", maxHeight:"80%"});
});

Ce code dit : "lorsque la page est chargÃ©e, active colorBox sur tous les liens qui mÃ¨nent vers une image, que tu affiches dans une fenÃªtre de maximum 80% de la hauteur et largeur de la fenÃªtre du navigateur". Ce code va donc affecter automatiquement tous les liens vers des images, qu'ils soient un texte ou une image.

5. InsÃ©rer des images dans les articles

La machinerie est en place. Il faut maintenant l'activer en plaÃ§ant des images dans vos articles. Attention a bien vÃ©rifier que le champ "cible du lien" est rempli avec l'adresse web du fichier, pour que colorBox puisse s'appliquer.
Attention : Si vous voulez placer une lÃ©gende pour l'image, il faut placer une balise title sur le lien (la balise a) et non sur l'image. Editer dans ce cas le code html du texte de l'article.

Plus loin avec colorBox

ColorBox peut Ãªtre personnalisÃ© plus loin au niveau de l'affichage.
On peut le modifier niveau des effets, en faire un diaporama, etc. On modifiera pour Ã§a le script d'activation minimal ici plus haut avec des paramÃ¨tres, voir pour Ã§a la page de documentation ou les exemples.
ColorBox peut aussi ouvrir des pages en ajax plutÃ´t que de simples images, voir encore une fois la documentation Ã ce sujet.

Il est possible aussi d'ouvrir et de modifier le fichier css du plugin pour modifier bords, couleurs, fond du bloc. et y placer d'autre boutons.

Voir en ligne : Le site du plugin

Ouvrir une nouvelle fenêtre en javascript

Stéphane Noel — 2009-11-03T14:35:03Z

A manipuler avec précaution, l'ouverture de nouvelles fenêtre a fait les beaux jours du net art des années 90', mais a aussi été une des première forme d'intrusion intempestive des pubs dans nos navigateurs.

Syntaxe générale

window.open('url_a_ouvrir','nom_de_la_fenêtre','attribut1,attribut2') ;

Dans la commande window.open, trois arguments entre guillemets, séparés par des virgules :
– L'adresse de la page à ouvrir, en relatif (mapage.html) ou en absolu (http://www.monsite.com). On peut aussi ne rien mettre entre les guillemets, ce sera alors une fenêtre vide.
– Le nom de la fenêtre. C'est utile si on veut par la suite agir sur cette fenêtre pour la déplacer, lui envoyer des contenus, écrire dedans.
– les attributs, séparés par des virgules. permettent de spécifier comment apparait cette fenêtre : taille, scrollbar ou pas, emplacement, etc.

Attributs

Les attributs sont :
– width : la largeur de la fenêtre. (ex : width=250)
– height : hauteur de la fenêtre. (ex : height=400)
– top : la position depuis le haut de l'écran (ex : top=100)
– left : la position depuis la gauche de l'écran (ex:left=10)
– resizable : permet à l'utilisateur de changer la taille de la fenêtre une fois créée. Peut prendre la valeur yes ou no. (ex : resizable=yes)
– scrollbars : fait apparaitre ou non la scrollbar. Peut prendre la valeur yes ou no. (ex : scrollbar=no)
– toolbar : fait apparaitre ou pas la barre d'outil du navigateur. Valeurs yes ou no.
– location : fait apparaitre ou pas la barre d'adresse. valeur yes ou no.
– status : fait apparaitre ou non la barre de statut, dans le bas de la fenêtre. Valeur yes ou no.
– menubar : fait apparaitre ou pas la barre de menu (fichier, édition, etc.). Valeur yes ou no.
– copyhistory : copie ou pas l'historique de navigation de la fenêtre d'origine dans la fenêtre créée.

Des exemples

click !

Ouvre une fenêtre vide, dans un onglet sous Firefox.

click !

Ouvre le site de Google dans une fenêtre de 400 sur 200.

click google avec plein d'option

Ouvre le site avec des options diverses. Attention, il peut y avoir des espaces entre les virgules mais pas de retour à la ligne.

Ecrire des graffittis avec jquery, php et mysql

Stéphane Noel — 2008-12-08T23:27:33Z

Un exemple simple et complet : intervenir sur une page en cliquant dessus, sauvegarder le rÃ©sultat dans une base de donnÃ©e pour pouvoir les afficher au rechargement de la page.

Ce code est perfectible : on peut imaginer pouvoir demander une image au lieu d'Ã©crire du texte, de fabriquer une texte en image avec gd2, de choisir une couleur, de naviguer dans la profondeur des messages, de recharger rÃ©guliÃ¨rement la page en ajax pour en faire un espÃ¨ce de chat...

1) La page d'initialisation de la base de donnÃ©e

On externalise cette part du code pour la rÃ©employer 2 fois.

2) La page elle-mÃªme

Contient les fonctions qui crÃ©e le formulaire et fait la requÃªte ajax, plus le listage des messages dÃ©jÃ Ã©crit au chargement.

    Add your comment on the metawall      ".stripslashes($row['contenu'])."

\n"; } } ?>

3) La page qui entre les message dans la db

Cette page est appellÃ©e par jquery. Ce code de dÃ©mo n'est pas dÃ©gradable. Son activation par cliquer-pointer est trop appuyÃ© sur le javascript pour l'Ãªtre...

4) Les styles css

Dans le fichier style.css, quelques lignes.

body { font-family:arial, sans-serif; font-size:11px; } .clicform { background-color:#fff; border:1px solid #ccc; } .clicform textarea{ heigth:4em; } .contenu { position:absolute; } .clicform textarea, .contenu { font-size:21px; font-weight:bold; color: #666; width:200px; } .validbutton { font-size:12px; }

Ajouter Ã ceci Ã©videmment la librairie http://jquery.com...

Code dÃ©gradable, non intrusif, non obstructif

Stéphane Noel — 2008-12-02T12:29:40Z

Le javascript permet d'Ã©tendre les possibilitÃ©s de votre navigateur, de rendre plus fluide l'expÃ©rience de surf, de rendre plus rapide certaines opÃ©rations via ajax, mais javascript :
– n'est pas activÃ© sur tous les navigateurs
– reste liÃ© Ã l'environnement de l'utilisateur, et peut crasher

DÃ¨s lors, que faire si le javascript est inopÃ©rant ?

La bonne conduite du web, les recommandations du w3c, veulent que le code soit dÃ©gradable, non intrusif et non obstructif. Qu'est ce que Ã§a signifie ?

Non obstructif

"Non-obstructivif" signifie que l'absence d'interprÃ©tation du javascript ne doit pas empÃªcher le visiteur d'une page d'avoir accÃ¨s Ã l'ensemble des informations qu'elle contient. Un bouton "en savoir plus" par exemple, destinÃ© Ã faire apparaitre une portion supplÃ©mentaire de texte, ne doit pas reposer uniquement sur javascript pour Ãªtre vu. On fera en sorte que par dÃ©faut, le texte entier soit visible, et que le javascript au chargement de la page, cache une partie du contenu puis le rÃ©vÃ¨le sur simple clic.
"Non-obstructif" signifie aussi que l'information que permet d'obtenir une fonctionnalitÃ© en javascript sera accessible par un autre moyen. Ainsi, un bloc d'information chargÃ© Ã la place d'un autre par un chargement en ajax risque d'Ãªtre inaccessible si javascript est indisponible. On veillera dans ce cas Ã ce que des liens apparaissent par dÃ©faut, puis soient chachÃ©s au moment du chargement de javascript.

DÃ©gradable

Un code dÃ©gradable signifie que l'ensemble des fonctionnalitÃ©s que propose votre page sont pensÃ©e pour faire face au cas oÃ¹ le javascript est inopÃ©rant, ou qu'il soit dÃ©sactivÃ©, incompatible avec le navigateur d'un visiteur ou encore arrÃªtÃ© par un bug.

C'est le prolongement du concept de non-obstructivitÃ©.

Ã‡a semble Ã©vident mais dans les faits cela demande un surcroit de travail, puisque l'on a deux cas de figure et non un seul, et donc c'est parfois laissÃ© de cÃ´tÃ©.

Un exemple de dÃ©gradabilitÃ©

Prenons un cas concret : vous avez fait un code simple qui affiche une image dans un popup lorsque l'on clique sur sa vignette. On imagine ici une fonction "popup()" qui ouvre une fenÃªtre avec l'image dont la source lui est envoyÃ©e.

ProblÃ¨me : si javascript n'est pas activÃ© ou qu'un bug existe dans mon code, cette image restera invisible. Il faut donc faire en sorte que l'image soit accessible sans javascript.

On fera donc un code du type :

De cette maniÃ¨re, si le javascript n'est pas disponible, l'image s'affichera dans la fenÃªtre du navigateur. Pas des plus Ã©lÃ©gant, mais la dÃ©gradabilitÃ© signifie que l'information reste accessible, pas que l'on fait aussi bien que le javascript.
Notons qu'on s'arrangera pour que javascript inhibe le comportement du lien pour Ã©viter d'avoir un popup + l'image qui s'ouvre dans la page par l'action du href du lien. C'est le fameux surcroit de travail dont je parlais, ici pas trÃ¨s lourd.

Le web 2.0 regorge de bloc loadÃ©s en ajax, de formulaire dynamique, ces cas de figure demandent quand Ã eux plus de travail pour une dÃ©gradabilitÃ© efficace. Les librairies javascript se chargent souvent d'une partie de celle-ci, heureusement.

Code non-intrusif

Le w3c ne recommande pas seulement la dÃ©gradabilitÃ©, il demande aussi une sÃ©paration des codes. Qu'il n'y aie pas intrusion du code javascript (ni css d'ailleurs) dans le code html, d'oÃ¹ le terme "non-intrusif".

Or, dans notre exemple simple, j'ai placÃ© du code directement dans les balises html, dans les deux cas. Comment faire pour arriver Ã associer du javascript dans une page web sans le placer dans le code ?

D'abord il nous faudra placer le code javascript dans un fichier externe en plaÃ§ant dans le head un appel Ã un fichier .js :

Ensuite, on utilisera une librairie javascript (ici, jquery) pour placer le javascript dans la page aprÃ¨s son chargement :

Et dans le html

LÃ , c'est plus propre. Le code jquery permet Ã tout lien qui tag "a" et la classe "popup" d'ouvrir l'image mise dans le href avec la fonction popup, au lieu d'ouvrir l'image dans la page.

VoilÃ , notre code est non intrusif et dÃ©gradable. En outre, nous avons au passage fait un script gÃ©nÃ©rique : je peux l'utiliser pour toute vignette Ã laquelle j'associe la classe "popup". Pratique.

Agir sur les fenÃªtres

Stéphane Noel — 2008-12-02T11:07:10Z

Le net art faisait la part belle aux expÃ©rimentations sur son outil premier, le navigateur. Les javascripts ici sommairement prÃ©sentÃ©s leur rend hommage.

Move !

Pour bouger la fenÃªtre du navigateur, on s'adresse Ã l'objet window.

Deplacer la fenÃªtre

Ici on fait sauter la fenÃªtre d'un endroit Ã un autre. La taille est relative Ã l'Ã©cran. Attention, javascript est "case sensitive", les majuscules sont importantes.

100 pixels vers le haut

Les deux chiffres Ã passer sont bien entendu la distance de dÃ©placement en pixels.

Resize !

FenÃªtre de taille 400X300 - FenÃªtre de taille 200X600

ResizeTo modifie la taille de la fenÃªtre Ã la taille indiquÃ©e.

Agrandir de 10 pixels - Reduire de 10 pixels

resizeBy modifie la taille actuelle de la fenÃªtre avec les valeurs indiquÃ©es.

Scroll !

Aller plus haut - Aller plus bas

AmÃ¨ne la page jusqu'Ã une coordonnÃ©e fixe de la page en dÃ©plaÃ§ant les ascenceurs de la page.
NB : Pour que ce code fonctionne la page doit Ãªtre assez longue pour avoir des ascenceurs.

ScrollBy fait le mÃªme travail, mais par rapport Ã l'endroit actuel de la page.

Scroller plus haut - scroller plus bas

Quelle est la taille de l'Ã©cran ?

DÃ¨s que l'on voudra avoir un meilleur contrÃ´le du mouvement de ces fenÃªtres, on aura besoin de connaitre la taille de l'Ã©cran sur laquelle elles sont affichÃ©es. C'est facile avec screen.width et screen.height.


Quelle est la rÃ©solution de cet Ã©cran ?

Un fichier de test, rapidement

Un navigateur automatique avec opendir et jquery

Stéphane Noel — 2008-11-26T00:11:35Z

Une application simple, melant php et jquery, permettant avec un seul fichier de naviguer dans les pages html d'un dossier. Ce script fabrique un menu dÃ©roulant comprenant toutes les pages html trouvÃ©es dans le dossier oÃ¹ il est dÃ©posÃ© avec php, et permet d'afficher le contenu de ces pages sans rechargement grÃ¢ce Ã jquery.
Ce code a Ã©tÃ© produit pour un besoin personnel, il n'est pas dÃ©gradable.

Voici le code php/html/javascript complet. Pour le faire fonctionner, il faut placer le fichier de la librairie jquery avec comme nom "jquery.js" dans un dossier "includes". Ceci pour clairement sÃ©parer dans le dossier les pages html des autres Ã©lÃ©ments. Le script php ne sÃ©lection que les pages html, mais tout de mÃªme, c'est plus propre.





Presentation technique et technologie - StÃ©phane NoÃ«l






\n"; foreach ($files as $file) { $title = Title($file); // on liste un lien par option en filtrant le nom a afficher echo "\n"; } echo "\n"; // Function to get a human readable title from the filename function Title($filename) { $title = substr($filename, 0, strlen($filename) - 5); $title = str_replace('-', ' ', $title); $title = str_replace('_', ' ', $title); $title = ucwords($title); return $title; }
?> PrÃ©cÃ©dent - Suivant

Stéphane Noel — 2008-04-21T17:38:22Z

Il utilise jQuery, la librairie javascript, pour Ã©viter un travail trop long Ã php : en effet on risque un timeout si le texte est trop long. Ici, toute les secondes une requÃªte est envoyÃ© Ã un fichier php, qui gÃ©nÃ¨re une image sur base d'un mot.

Ce script est basique et largement perfectible : taille de l'image, de la police, couleurs, typo, texte peuvent Ãªtre gÃ©nÃ©rÃ©s diffÃ©remment.

Attention, si vous dÃ©posez le script sur un serveur, celui-ci doit disposer de la librairie gd2, et le dossier "mots" doit Ãªtre accessible en Ã©criture (chmod 777).

> Voir le script en action ici.

Les timers javascript

Stéphane Noel — 2007-11-18T21:35:31Z

Le javascript comporte une sÃ©rie d'outil, le timer est de ceux qui pourrit la vie des internautes mais fera le bonheur de plusieurs d'entre vous. ExÃ©cuter une action aprÃ¨s un certain dÃ©lai, exÃ©cuter une action toutes les x secondes, les usages possibles sont multiples et potentiellement envahissants.

setTimeout() et clearTimeout()

window.setTimeout("mafonction()",1000); function mafonction(){ alert("Here i am !"); }

Ce code va appeler la fonction mafonction() aprÃ¨s une seconde (le temps est exprimÃ© ici en milliÃ¨mes de secondes). On peut arrÃªter un timer avant son timeout, en utilisant la fonction clearTimeout(). Mais il faut alors "nommer" notre timeout, comme ceci :

montimer=window.setTimeout("mafonction()",5000);

Ce qui permettra de le stopper comme ceci :

window.clearTimeout(montimer);

setInterval() et clearInterval()

window.setInterval("mafonction()",1000);

Ce code appelera la fonction mafonction() toutes les secondes jusqu'Ã ce que la page soit fermÃ©e ou que le timer soit stoppÃ© par la fonction clearInterval(). Mais llÃ aussi, il est nÃ©cessaire de nommer le timer :

montimer=window.setInterval("mafonction()",5000);

Ce qui permettra de le stopper comme ceci :

window.clearInterval(montimer);

Les fonctions

Stéphane Noel — 2007-10-25T21:09:46Z

Un des concepts importants de la programmation, les fonctions sont prÃ©sentes en javascript. Qu'est ce que c'est, comment les utiliser, c'est ici.

Les fonctions ont une fonction : l'Ã©conomie d'Ã©chelle. On centralise des portions de code de telle maniÃ¨re Ã pouvoir les rÃ©utiliser plusieurs fois, et donc devoir corriger Ã un seul endroit si Ã§a merde. C'est un "sous-programme" en soi, qui peut Ãªtre d'une grande complexitÃ©, avec des arguments transmis, etc. Allons-y doucement.

La fonction commence par le nom "function" suivi du nom de la fonction, que vous inventez, terminÃ© par une ouverture et fermeture de parenthÃ¨ses. Dans ces parenthÃ¨ses on verra qu'on peut mettre des choses. On ouvre et ferme ensuite des accolades, entre lesquelles on place le code de la fonction. Ce code sera exÃ©cutÃ© chaque fois que l'on appelle la fonction comme suit :

Clic

Ici, vous voyez que le code javascript remplace le lien dans le code de la page. Mais on peut faire ceci aussi :

waow

Appeller une fonction avec un argument

Mais une fonction reste statique si elle envoie le mÃªme contenu Ã chaque fois qu'on l'appelle. Il devient intÃ©ressant d'utiliser une fonction quand on peut lui envoyer des arguments.

Un exemple simple : un questionnaire Ã choix multiples. Trois rÃ©ponses Ã une question, une seule des trois est juste.
Dans la page, on mettra ceci :

Qui est prÃ©sident des USA aujourd'hui
  Abraham Lincoln
 Bill Clinton
 Georges Bush

Vous constaterez que entre les parenthÃ¨ses se trouvent un mot - lareponse - qui est rÃ©utilisÃ© dans la ligne juste aprÃ¨s. C'est une variable. Elle reÃ§oit l'information provenant des rÃ©ponses potentielles par l'appel de fonction "javascript:testereponse("quelquechose") ;" et la stocke pour Ãªtre rÃ©utilisÃ©e. Dans notre cas, la fonction affiche simplement ce qui lui est envoyÃ© dans une boite d'alerte.

Plusieurs argument dans la fonction

Notre bout de code est amusant, mais il ne teste par rÃ©ellement le rÃ©sultat donnÃ© Ã la rÃ©ponse : il affiche juste un bout de texte envoyÃ© par l'appel de fonction dans une boite d'alerte...
Pour faire un vrai test, avec un envoi vers une page en cas de rÃ©ussite, on va ajouter des variables passÃ©e par la fonction.

Qui est prÃ©sident des USA aujourd'hui
  Abraham Lincoln
 Bill Clinton
 Georges Bush

Trois arguments sont placÃ©s dans le script, parfois 2 seulement. Remarquez au passage que les textes Ã envoyer sont entourÃ©s de simples guillemets : c'est parce que l'appel Ã la fonction se trouve lui-mÃªme dans un double guillemets. La rÃ©ponse pour "Bill Clinton" a quelque chose en plus : un backslashe (\) devant le caractÃ¨re de simpe guillemets. Pourquoi ? Parce la rÃ©ponse est elle-mÃªme entre simple guillemets, et donc mettre un simple guillemet dans le texte correspond Ã indiquer au script que la variable se cloture alors qu'on est au milieu de la phrase. Erreur de script garantie.

Houlala, plein de choses nouvelles :
– On rÃ©cupÃ¨re trois valeurs potentielles dans 3 variables. Si "url" ne reÃ§oit rien, le script ne se plaint pas : simplement cette variable reste vide.

On teste la variable "test" : dans le code su lien, elle vaut soit "true" soit "false". True et false ne sont pas des variables, mais des valeur bolÃ©ennes. True, c'est "oui", 1, quelque chose, et false est "non", 0, rien.
le test if() {} else {} Ã©value ce qui se trouve entre parenthÃ¨ses et si le rÃ©sultat est positif (si x==10 par exemple), alors ce qui se trouve entre les premiÃ¨res accolades est exÃ©cutÃ©, et si le rÃ©sultat est nÃ©gatif, ce qui se trouve dans les accolades aprÃ¨s else sera exÃ©cutÃ©.
Dans notre cas, on stocke dans une variable "message" du texte et une variable.

Enfin, si quelque chose se trouve dans la variable url, l'adresse de la page sera changÃ©e via la commande window.location.href.

Voir en ligne : Page de documentation en franÃ§ais sur SELHTML