29-07-2008, 03:01 PM
(Modification du message : 09-09-2008, 11:15 AM par Sephi-Chan.)
Le Javascript non intrusif
(Javascript unobstrusive)
(Javascript unobstrusive)
- Un peu d'histoire
Au début de nos conceptions, nous utilisions Javascript tout comme aujourd'hui, mais il est venu le temps où nous devons devenir soucieux des standards du Web lorsque nous conceptualisons un nouveau site.
De nous jours, et ce qu'il aurait dû être depuis tout temps... Toutes personnes, saines ou handicapées, a le droit de naviguer sur un site Web que ce soit pour se cultiver, se divertir, et ce que tout un chacun peut et a le droit de faire.
N'oublions pas que nous entrons dans une nouvelle ère, celle du Web 2.0, c'est l'heure du Web Social !
Aujourd'hui, le pas à franchir en rebute encore plus d'un, cela paraît difficile, cela paraît incompréhensible, cela dit c'est bien loin de toutes ces notions.
Pour pallier cette difficulté, il faut se rappeler à quoi sert Javascript.
Le Javascript sert à interagir avec le navigateur quand l'internaute a effectué une action, on dit qu'il déclenche un événement.
Ainsi, on peut savoir si cet internaute a cliqué sur tel ou tel bouton, tel ou tel lien, on peut connaître les coordonnées de la souris, on peut également faire des contrôles sur les formulaires, etc.
En ajoutant du Javascript Synchrone ou Asynchrone plus communément appelée AJAX, on peut actualiser une ou toute partie de la page Web.
- Javascript, hier !
Code PHP :<?php
/**
* Javascript
*/
function Hello()
{
window.alert('Coucou !');
}
/**
* HTML
*/
<div id="content">
<h1>Le titre</h1>
<p>
Le contenu de la page avec plein de blabla...
// Première méthode
<a href="javascript:Hello();">Cliquez-moi !</a><br />
// Deuxième méthode
<a href="#onclick" onclick="Hello()">Cliquez-moi !</a>
</p>
</div>
Si vous ne réalisez pas de Javascript non intrusif, utilisez la deuxième méthode.
Il est plus clair d'utiliser les attributs prévus à cet effet :
- onclick,
- onkeypress,
- onmouseover,
- etc.
On parle de Javascript non intrusif lorsque le script :
- est discret pour l'utilisateur,
- n'est pas essentiel au bon fonctionnement du site,
- à une implémentation simple; accès aux élément du dom par simple ajout d'id ou de class.
Comme je dis toujours, on code statique d'abord et on dynamise ensuite !
Le Javascript non intrusif est dans la continuité de ce qui se fait avec le css, le css sépare la structure de la présentation tout comme le Javascript non intrusif sépare le comportement de la structure.
- Intrusif :
Code PHP :<?php
/**
* Javascript
*/
function Hello()
{
window.alert('Coucou !');
return false;
}
/**
* HTML
*/
<div id="content">
<h1>Le titre</h1>
<p>
Le contenu de la page avec plein de blabla...
<a href="#onclick" onclick="Hello()">Cliquez-moi !</a>
</p>
</div>
![[Image: mielwar.ban.png]](http://mielwar.z3d-conception.com/img/special/mielwar.ban.png)
