·1 min de lecture

Javascript non-obstructif

Auteur(s) de l'article

Marc
Avant d’entrer dans le vif du sujet, il est important de comprendre plusieurs concepts.
La mise en place de codes Javascript non-obstructif permet de faire fonctionner le site sans l’utilisation du javascript. (aujourd’hui presque tout le monde active le javascript ce qui n’est donc pas l’argument principal).
Cette technique permet surtout de garder le code xhtml propre et de l’utiliser pour ce dont il est conçu, c’est-à-dire, l’organisation du contenu.
Un code xhtml tout basique, il s’agît d’un bouton de formulaire de ce type :
[code lang="html"]

[/code]
ce bout de code est sémantiquement correct, il décrit un bouton tel que spécifié dans les standards du W3C.
Mais nous aimerions que le design de celui-ci soit plus … disons …. attractif comme ça :
Et moi un beau bouton
Pour ce faire, il faut donc dynamiquement remplacer le code html du bouton par une balise de type lien. Nous en reparlerons, mais l’utilisation de la technique « sliding-doors » permet d’avoir un bouton redimentionnable.
Le framework jQuery permet facilement d’effectuer ce remplacement.
[code lang="javascript"]
$(document).ready(function() {
// dès que la page est chargée
// pour chaque élément contenant la class "submitbutton"
$('.submitButton').each(function(e){
//récupéré les attributs suivants
var val = $(this).attr('value');
var formsend = $(this).attr('name');
var bt_id = $(this).attr('id');
// remplacer le bouton par un lien
$(this).parent().html(''+val+'').click(function(){
// comportement du lien lors du clique
$('form#'+formsend).submit();
});

});
});
[/code]
La propreté du code dans une page web, c’est surtout les avantages suivants :
  • Une meilleure sémantique améliore grandement le référencement dans les moteurs de recherche
  • Une meilleure « maintenabilité » du code, et donc moins de frais :-)

Pour aller plus loin

Partager

Mise à jour le: December 12, 2020

Nous serions ravis de discuter avec vous

Nous contacter
Nous contacter

Lausanne

Rue de Genève 90b

+41 21 623 63 03

Newsletter

Formulaire d'inscription à la newsletter

Copyright © 2020 Antistatique

  • Projets
  • Services
  • Agence
  • Équipe
  • Blog
  • Contact

Always keep it simple & sunny!