Faire une bibliothèque javascript
Programmer une simulation

1) Introduction

Le langage javascript à l'inconvenient d'être très verbeux avec de nombreux niveaux de parenthèses, lourd à lire, c'est pourquoi la subdivision d'un programme en fonctions que l'on assemble est d'autant plus utile. L'ensemble de ces fonctions forme une bibliothèque. Comme nous avons le soucis de susciter l'envie de programmer, dans le développement de cette bibliothèques on passera par des étapes productive. On choisit donc les voies qui permettent ces étapes productives. La première fonction que l'on conçoit est drawList qui affiche une liste de valeurs sous forme d'une courbe. Remarquez le nom de la fonction qui se décompose en draw et List, la méthode commence toujours par une minuscule puis les monèmes qui suivent commence par des majuscules.

La liste est un tableau de nombres où l'indice commence à 0. C'est une structure particulièrement simple qu'il est judicieux d'utiliser comme premier objet de base.

À partir de cette bibliothèque, il sera possible de programmer un constructeur d'applications, c'est un langage rudimentaire pouvant disposer ces différentes fonctions, et qui va engendrer le code javascript et html correspondant.

On regroupe dans un catalogue toutes les fonctions dans le but d'être utilisées par le programmeur avec le moins d'effort possible. Cela entraine une mise en forme particulière du catalogue de la bibliothèque.

2) La fonction drawList

La fonction drawList(W, L, 4, 8, to, ta, t, ts) dessine une courbe dans le canevas W en tenant compte de sa taille c'est à dire des attributs width et height de W. La courbe définie par la liste L trace les points (i,L[i]) reliés par segment de droite au point précédent. L'abscisse i variant de 0 à L.length-1. L'ordonnée L[i] varie du minimum au maximum de L. Le graphique est segmenté en au moins 4 larges segments en ordonnée et 8 larges segments en abscisse.

drawList(W,	// Canevas
L,	// Liste de valeurs
4,	// Nombre de larges segments en ordonnée
4,	// Nombre de larges segments en abscisse
to,	// Titre de l'axe de l'ordonnée
ta,	// Titre de l'axe des abscisses
t,	// Titre
ts,	// Sous-titre
)

La commande suivante met en mémoire dans la variable W1 l'élément de la page web dont l'identifiant est "c1".

W1= document.getElementById("c1")

Cet élément W1 correspond à l'élément définie dans le fichier html par :

<canvas id="c1" width="800" height="400"></canvas>

Les valeurs affichées sur les axes sont notées avec un minimum de chifffres et avec une unité de grandeur pour éviter les exposants. On utilise les huits unités de grandeur suivantes :

Unité		Valeur
T	Tera	1012
G	Giga	109
M	Mega	106
K	Kilo	103
	unité	1
m	milli	10-3
µ	micro	10-6
n	nano	10-9
p	pico	10-12

3) Quelques fonctions rudimentaires pour manipuler les listes

Math.min(...L) retrourne la plus petite valeurs de la liste de nombres L, et Math.max(...L) retrourne la plus grande valeurs de L. Néanmoins si la liste est grande il faudra utiliser les commandes suivantes :
L.reduce((a, b) => Math.min(a, b), Infinity) et L.reduce((a, b) => Math.max(a, b), -Infinity)

Math.random() retourne un nombre au hasard dans l'intervalle [0,1[.

L'instruction var L = new Array(); for (var i=0;i<200;i++){L[i] = rand(100)} crée une liste L de 200 valeurs aléatoires entre 0 et 100.

L'instruction L.sort(function(a,b){return a>=b}) trie la liste L.

Voici un exemple de liste de 200 valeurs au hasard comprises entre 0 et 100, puis la même liste mais triée :