Le code suivant figure dans le corps du document : 

<form id= "form_test_id" ><code> 

<div style="display:inline-block; margin-left:24px;">
<label for="char_id">Caractère: </label><input type="text" id="char_id" size="1" value="" onchange = 'char_change();'><input type="text" id="control_id" size="9" value="" disabled><br>
<br>
<label for="entity_id">entité: </label><input type="text" id="entity_id" value="" size="9" disabled>
</div>

<div style="display:inline-block;  margin-left:24px;">
<label for="decimal_id">décimal: </label><input type="text" id="decimal_id" value="" size="4" onchange = 'decimal_change();'>
<br><br>
<label for="hexadecimal_id">hexadécimal: 0x</label><input type="text" id="hexadecimal_id" value="" size="4" onchange = 'hexadecimal_change();'>
</div><br>
</code></form>
Changez une valeur et cliquez ailleurs dans la page ou pressez retour pour afficher le résultat.<br>

Le code suivant figure en bas de page :

<script type="text/javascript">

const hexadecimal= document.getElementById('hexadecimal_id');
const decimal= document.getElementById('decimal_id');
const char_obj= document.getElementById('char_id');
const entity= document.getElementById('entity_id');

var entities_array = [
	["", "space", 32], 
	["&excl;", "exclamation mark", 33], 
	["&quot;", "quotation mark", 34],  
	...
	["&diams;", "black diamond suit", 9830]];

var entities_reverse_array= new Array();
function make_entities_reverse_array() {
	for (var i= 0; i < entities_array.length; i++) { 
		if (entities_array[i][0] != "") { entities_reverse_array[entities_array[i][2]]= entities_array[i][0]; } 
		} 
	}
	
var char_old; var char_current;
var decimal_old; var decimal_current;
var entity_old; var entity_current;
var hexadecimal_old; var hexadecimal_current;
	
function char_change() {
	if (char_old != char_obj.value) {
		char_to_decimal(char_obj.value);
		decimal_to_hexadecimal(decimal.value);
		decimal_to_entity(decimal.value);
		char_old = char_obj.value;
		}
	}
	
function char_to_decimal(c) {
	decimal.value= c.charCodeAt(0);
	}
	
function decimal_change() {
	if (decimal_old != decimal.value) {
		decimal_to_hexadecimal(decimal.value);
		decimal_to_char(decimal.value);
		decimal_to_entity(decimal.value);
		decimal_old = decimal.value;
		}
	}
	
function decimal_to_hexadecimal(decimal_v) {
	hexadecimal.value= parseInt(decimal_v, 10).toString(16);
	}
	
function decimal_to_char(decimal_v) {
	if ((decimal_v >= 32) && decimal_v != 127) char_obj.value= String.fromCharCode(decimal_v); 
    else char_obj.value= "";
	}
	
function decimal_to_entity(decimal_v) {
	var temp= entities_reverse_array[decimal_v];
	if (temp == undefined) {temp= "utilisez &#" + decimal_v;}
	entity.value= temp; 
	}
	
function hexadecimal_change() {
	if (hexadecimal_old != hexadecimal.value) {
		hexadecimal_to_decimal(hexadecimal.value);
		decimal_to_entity(decimal.value);
		// decimal_to_char(decimal.value);
        hexadecimal_to_char(hexadecimal.value);
		hexadecimal_old = hexadecimal.value;
		}
	}
	
function hexadecimal_to_decimal(hexadecimal_v) {
	decimal.value= parseInt(hexadecimal_v, 16); 
	}	
	
function hexadecimal_to_char(hexadecimal_v) {
	if (hexadecimal_v >= 0x20) {
    	var temp= '0x'+ hexadecimal_v;
		char_obj.value= String.fromCharCode(temp);
        }
    else char_obj.value= "";
	}	
	
window.onload= function() { 
	make_entities_reverse_array();
	};
</script>

Histoire

A l'apparition des premiers ordinateurs personnels dans les années 80, le clavier est un élément essentiel d'entrée des données ou des commandes; il s'inspire de celui des machines à écrire.

La transmission des données ou leur stockage suppose un codage. Parmi les premiers codages utilisés on peut citer le code Morse qui est extensible et le codage Baudot qui comporte 2 fois 32 codes (sur 5 bits). L'ASCII (American Standard Code for Information Interchange) est une standardisation définie en 1963 par les pays occidentaux (en fait surtout par les Etats-Unis) et comporte 128 codes sur 5 bits. Il convient à l'anglais, mais non aux langues accentuées. Des variantes sont alors utilisées pour s'adapter aux différentes langues latines. D'autres codages voient le jour en URSS et en Asie.

La grande confusion qui s'installe ne se termine qu'avec l'arrivée du standard unicode dont la mise en oeuvre la plus fréquente est l'UTF-8. La longueur du codage est variable. Les 128 premiers caractères sont codés sur un octet, les suivants sur 2,3 ou 4 octets. Ceci permet une compatibilité avec l'ASCII: les 128 premiers codes UTF-8 sont les mêmes qu'en ASCII. UTF-8 a été présenté en 1993 et modifié en 2003; depuis 2008, c'est l'encodage le plus utilisé dans les pages web.

Avant son apparition les entités HTML étaient utilisées pour représenter les caractères non ASCI.

Entités

Les entités HTML sont des séquences de caractères (tous ASCII) initiées par le caractère & et se terminant par ; chaque séquence remplace un caractère. Elles ont été ou sont utilisées pour représenter les lettres accentuées ou des symboles particuliers (comme l'euro: €). Avec le développement de l'UTF-8, les entités représentant les lettres accentuées sont devenues inutiles. Certaines entités restent importantes pour représenter des caractères intervenant dans la syntaxe du balisage HTML et éviter la confusion avec le balisage: " pour ", & pour &, ' pour ', ⁢ pour <, > pour <.

Les premières entités ont été nommées par HTML 2; elles deviennent plus nombreuses au cours du temps (252 avec HTML4), et surtout avec HTML 5 qui remplace leur nom entity par named character reference; Tout caractère peut (lorsque le navigateur le gère) être affiché en utilisant une référence numérique décimale (ou hexadécimale): ♀ (ou ♀) affichent ♀. Les références numériques hexadécimales de caractère (hexadecimal numeric character reference) sont mieux gérées par les navigateurs que les références nommées (qui sont par contre plus faciles à mémoriser et à identifier par les humains).

Javascript peut bien sûr utiliser les entités, il suffit de les insérer dans une chaine comme n'importe quel caractère. Mais Javascript peut aussi utiliser les séquences d'échappement. Les séquences d'échappement commencent toutes par le caractère \ (backslash), suivi:
- d'une nouvelle ligne: le saut de ligne est ignoré par l'interpréteur;

document.write ( "le saut de ligne\
 est ignoré par l'interpréteur;");

s'affiche:

- d'un seul caractère: n'a d'intérêt qu'avec des lettres constituant des séquences réservées:
\b représente un retour en arrière; \r un retour chariot; \t une tabulation (mais elle peut être insérée dans une chaine de caractères avec le clavier sans être échappée); \n un saut de ligne;

document.write ( "ici,\nj'ai sauté une ligne;");

s'affiche:

A noter que tous ces caractères seront ignorés s'ils ne sont pas encadrés par une balise <pre></pre>. Les séquences qui suivent sont utilisées plus souvent dans la mesure ou elles permettent d'afficher des caractères pouvant modifier la syntaxe du document:
\" (guillemet), \' (apostrophe), \\ (la barre oblique inverse elle-même)

- d'un nombre hexadécimal précédé par x: affiche le caractère correspondant au code; le code doit être inférieur à FF: \xB6 affiche .

- d'un nombre hexadécimal précédé par u: affiche le caractère correspondant au code; le code doit être représenté par 4 chiffres: \u00B6 affiche , \u2665 affiche .

Références