384400/ -javascript.md

## -javascript.md

      
    Raw
  

                -javascript.md
            
          
    Comment assurer uniquement un support en JavaScript ?

Nous souscrivons à la plupart des arguments en faveur du maintien du support de JavaScript, comme ceux développés dans [punkchip] (http://www.punkchip.com/why-support-javascript-disabled/) (le texte est en anglais).
En effet, le contenu des sites justifie rarement l'emploi exclusif (ou maladroit !) de JavaScript.
Cependant, JavaScript peut être nécessaire pour assurer une interaction riche avec les visiteurs. 1 à 2 % d'internautes rétifs ne justifie pas un double développement ou un appauvrissement des fonctionnalités permises par l'état de l'art. Au surplus, ces internautes qui désactivent JavaScript dans leur navigateur sont plutôt des technophiles (soucieux de vitesse, de sécurité...), car les autres ne modifient pas la configuration d'origine ; les premiers connaissent les avantages et les inconvénients de la technologie. Enfin, l'interaction exclusive avec JavaScript, comme les requêtes en Asynchronous JavaScript And Xml (Ajax), peut être un choix délibéré, comme celui de ne plus prendre compte les versions antédiluviennes d'Internet Explorer hormis pour la présentation !
La balise <noscript> aurait un support insuffisant selon les navigateurs.
La présente solution a la mérite d'être reproductible et fiable de pages en pages.
Le premier exemple repose uniquement sur JavaScript.
Dans le deuxième fichier, si la bibliothèque jQuery n'est pas disponible ou reconnue, le contenu de la page ne s'affichera pas. En revanche, si elle est inteprétée, nous pouvons être (à peu près) certain que toutes les fonctionnalités de la version de jQuery seront opérationnelles.
Le troisième exemple est une variante en JavaScript pur : la classe de l'élément <html> est modifiée après détection.
Dans tous les cas, il semble souhaitable, sur le plan d'accessibilité, d'afficher un message d'avertissement si JavaScript est désactivé ou inactif.
En revanche, il convient de ne pas sécuriser une page avec JavaScript. (Les exemples sont présentés ici uniquement à titre didactique.) Par exemple, le site d'un quotidien régional français limite la lecture de certains articles à ses abonnés payants : il suffit de désactiver JavaScript pour accéder intégralement à ses contenus !

  
## javascript-a.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Comment assurer uniquement un support en JavaScript ?</title>
<meta name="description" content="Comment assurer uniquement mais proprement un support en JavaScript ?" />
<style>
.show-content {
  display: block;
}
.hide-content {
  display: none;
  visibility: hidden;
}
</style>
</head>
<body>
  <div id="no-js-content" class="show-content">
    <p>Pour pouvoir accéder au contenu de cette page, JavaScript doit être activé dans votre navigateur.</p>
  </div><!-- #nojs-content .show-content -->
  <div id="js-content" class="hide-content">
    <h1>Bienvenue&#160;!</h1>
  </div><!-- #js-content .hide-content -->
<script>
/* 'classList', d'un emploi plus commode, n'est pas reconnu par tous les navigateurs. */
document.getElementById('no-js-content').className = document.getElementById('no-js-content').className.replace('show-content', 'hide-content');
document.getElementById('js-content').className = document.getElementById('js-content').className.replace('hide-content', 'show-content');
</script>
</body>
</html>

## javascript-b.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Comment assurer uniquement un support en JavaScript grâce à la bibliothèque jQuery ?</title>
<meta name="description" content="Comment assurer uniquement mais proprement un support en JavaScript grâce à la bibliothèque jQuery ?" />
<style>
.show-content {
  display: block !important;
}
.hide-content {
  display: none !important;
  visibility: hidden !important;
}
</style>
</head>
<body>
  <div id="no-js-content" class="show-content">
    <p>Pour pouvoir accéder au contenu de cette page, JavaScript doit être activé dans votre navigateur.</p>
  </div><!-- #nojs-content .show-content -->
  <div id="js-content" class="hide-content">
    <h1>Bienvenue&#160;!</h1>
  </div><!-- #js-content .hide-content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
jQuery(document).ready(function ($) {
  jQuery('#no-js-content').removeClass('show-content').addClass('hide-content');
  jQuery('#js-content').removeClass('hide-content').addClass('show-content');
});
</script>
</body>
</html>

## javascript-c.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<title>Comment assurer uniquement un support en JavaScript ?</title>
<meta name="description" content="Comment assurer uniquement mais proprement un support en JavaScript ?" />
<style>
.no-js #support, .js #no-support {
  display: none;
  visibility: hidden;
}
.no-js #no-support, .js #support {
  display: block;
}
</style>
</head>
<body>
  <div id="no-support">
    <p>Pour pouvoir accéder au contenu de cette page, JavaScript doit être activé dans votre navigateur.</p>
  </div><!-- #no-support -->
  <div id="support">
    <h1>Bienvenue&#160;!</h1>
  </div><!-- #support -->
<script>
document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('no-js', 'js');
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Comment assurer uniquement un support en JavaScript ?</title>
	<meta name="description" content="Comment assurer uniquement mais proprement un support en JavaScript ?" />
	<style>
	.show-content {
	display: block;
	}
	.hide-content {
	display: none;
	visibility: hidden;
	}
	</style>
	</head>
	<body>
	<div id="no-js-content" class="show-content">
	<p>Pour pouvoir accéder au contenu de cette page, JavaScript doit être activé dans votre navigateur.</p>
	</div><!-- #nojs-content .show-content -->
	<div id="js-content" class="hide-content">
	<h1>Bienvenue !</h1>
	</div><!-- #js-content .hide-content -->
	<script>
	/* 'classList', d'un emploi plus commode, n'est pas reconnu par tous les navigateurs. */
	document.getElementById('no-js-content').className = document.getElementById('no-js-content').className.replace('show-content', 'hide-content');
	document.getElementById('js-content').className = document.getElementById('js-content').className.replace('hide-content', 'show-content');
	</script>
	</body>
	</html>
	<!doctype html>
	<html class="no-js">
	<head>
	<meta charset="utf-8" />
	<title>Comment assurer uniquement un support en JavaScript ?</title>
	<meta name="description" content="Comment assurer uniquement mais proprement un support en JavaScript ?" />
	<style>
	.no-js #support, .js #no-support {
	display: none;
	visibility: hidden;
	}
	.no-js #no-support, .js #support {
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="no-support">
	<p>Pour pouvoir accéder au contenu de cette page, JavaScript doit être activé dans votre navigateur.</p>
	</div><!-- #no-support -->
	<div id="support">
	<h1>Bienvenue !</h1>
	</div><!-- #support -->
	<script>
	document.getElementsByTagName('html')[0].className = document.getElementsByTagName('html')[0].className.replace('no-js', 'js');
	</script>
	</body>
	</html>