Programmer en Javascript

1) Introduction

Javascript est un langage de scripte executé par le navigateur coté client. C'est un langage object à prototype. Les objects ne sont pas des instances de classe, mais sont équipé de constructeur permettant de créer leur propriétés.

Les object javascripts :

Classe
Description
Exemple
boolean
 Les valeurs logiques 
true, false
number
 Les nombre flottant sur 64 bits 
21, 1.5, 2.5e3, 0xFF, 010
string
 Les chaines de carcatères 
"", "abc", 'abc', '\n', '\u000A
math
 Des méthodes mathématiques 
Math.PI, Math.sin, Math.exp
array
 Les liste d'objects 
[], [21,"abc",Math.cos]
object
 Les objects 
{toto:"titi", f:function(x){return x*x}, u:3}
function
 Les functions 
function sum(x,y){return x+y}
date
 Les dates 
new Date();

2) Les objets

function A(x,y) {this.x=x; this.y=y;} // crée la classe A
function B(u,v) {this.u=u; this.v=v;} // crée la classe B

A1= new A(12, "toto") // crée l'objet A1 de classe A
B1 = new B(7, A) // crée l'objet B1 de classe B

B1.v.y // retourne "toto"
B1.v.y = "titi" // modifie sa valeur en "titi"

3) Developpement de frameworks

Selon les principes généraux de la programmation, celle-ci est séparé en unités liée entres elles selon un graphe transitif antisymétrique. Une unité tient dans un fichier et éxecute des méthodes définies dans l'unité en question et dans des unités en amont, mais elle peut utiliser une interface graphique qui est alors une portion de code html dans la page web, les balise utilisé sont identifié par un attribut id spécifique qu'il convient de déclaré dans le contexte graphique

Le programme est séparé en autant de fichiers qu'il y a d'unités, et le développeur ne travail que sur un fichier à la fois, pour éviter les modifications accidentelles intempestives.

L'une unité est composée d'une entête, d'un contexte, d'un interface graphique, d'un corps, d'une synopsie, et d'un teste.

3.1) Tableau de saisies

La première unité que l'on conçoie est le tableau de saisie de plusieurs valeurs. Cela comprend un élément graphique, un tableau comprenant un titre, une liste de couple libellé-input pour la saisie.

Tableau de saisies

Liste des attributs id utilisés : V1, V2, V3

 
<table>
<tr><td colspan="2" align="center">TITRE</td></tr>
<tr><td>L1</td><td><input type="text" id="V1" value="100" ></td></tr>
<tr><td>L2</td><td><input type="text" id="V2" value="5000"></td></tr>
<tr><td>L3</td><td><input type="text" id="V3" value="10" ></td></tr>
</table>
 Affiche le titre TITRE
Affiche le libellé L1 et l'input de saisie initialisé à 100
Affiche le libellé L2 et l'input de saisie initialisé à 5000
Affiche le libellé L3 et l'input de saisie initialisé à 10

La difficulter consiste à formalise le procédé d'intégration de l'unité dans un site web en minimiser l'effort du developpeur.

3.1) Tableau de saisies textaera

Tableau de saisies
Liste des attributs id utilisés : data 
<textarea id="data"></textarea>
 Affiche un champ multilignes de saisie

3.2) Tableau de commandes

Une liste de bouton de commande

Tableau de saisies et de commandes
Liste des attributs id utilisés : B1, B2, B3 
<input type="button" name="B1" id="B1" value="B1">
<input type="button" name="B2" id="B2" value="B2">
<input type="button" name="B3" id="B3" value="B3">
Affiche le bouton B1
Affiche le bouton B2
Affiche le bouton B3
 
window.addEventListener("load", init, false)
 Associe à l'évènement "Chargement de la fenètre" l'action init(). 
function init(){
 document.getElementById("B1").addEventListener("click",initL,false)
 document.getElementById("B2").addEventListener("click",aff,false)
 document.getElementById("B3").addEventListener("click",aff2,false)
 initL()
 }
init() va associer au bouton d'id "B1" l'action initL(), au bouton d'id "B2" l'action aff(), et au bouton d'id "B3" l'action ok(), et puis va executer initL(). 
function initL(){
 V1=parseInt(document.getElementById("V1").value)
 V2=parseInt(document.getElementById("V2").value)
 V3=parseInt(document.getElementById("V3").value)
 M = document.getElementById("data").value.split('\n').parseFloat
 }
 initL() va initialiser les variables V1,V2,V3 avec les valeurs saisies dans les champs input d'id respectif "V1", "V2", "V3". 
function aff() {alert([V1, V2, V3]) }

aff() va afficher les valeurs V1, V2, V3 dans une fenètre alerte. 

function aff2() {alert(M) }
 ok() va afficher "ok" dans une fenètre alerte.

 

var WV1
var WV2
var WV3
window.addEventListener("load",init,false)
 Définie les éléments WV1,WV2,WV3
Associe à l'évènement "Chargement de la fenètre" l'action init(). 
function init(){
WV1 = document.getElementById("V1")
WV2 = document.getElementById("V2") 
WV3 = document.getElementById("V3")
WV1.addEventListener("change", changeV1, false)
WV2.addEventListener("change", changeV2, false)
WV3.addEventListener("change", changeV3, false)
}

init() trouve les éléments WV1,WV2,WV3
Associe à l'évènement "change la valeur de saisie V1" l'action changeV1()
Associe à l'évènement "change la valeur de saisie V2" l'action changeV2()
Associe à l'évènement "change la valeur de saisie V3" l'action changeV3()

 
function changeV1(){V1=parseInt(WV1.value)}
 changeV1() recopie la valeur saisie V1 
function changeV2(){V2=parseInt(WV2.value)}

changeV2() recopie la valeur saisie V2

 
function changeV3(){V3=parseInt(WV3.value)}
 changeV3() recopie la valeur saisie V3

 

3.2) Courbe

contexte

M = Liste de nombres
WCanvas = Elément canvas

 

Tableau de saisies et de commandes
Interface graphique Description

<canvas id="canvas" width="400" height="200"></canvas>
Canvas
Corps
 Description 
function rand(n) Math.floor(n * Math.random())
 rand(n) retourne un entier compris entre 0 et n-1 
function minMax(M){
  a=Infinity 
  b=-Infinity
  let L = M.length
  for(var i=0;i<L;i++){
    if (M[i]<a) {a=M[i]}
    if (M[i]>b) {b=M[i]}
  }
  return [a,b]
}

minMax(M) retourne le minimum et le maximum de la liste M sous la forme d'un couple. 

function draw(WCanvas,M,nlx,nl,legendY,legendX,titre1,titre2) {
  let m = 45 // marge
  let Lx = WCanvas.getAttribute("width")-2*m
  let Ly = WCanvas.getAttribute("height")-2*m

  let L = M.length
  let [a,b] = minMax(M)
  let ctx = WWWcanvas.getContext("2d")
  let d = (b-a)/nl
  let e = 0
  while (d<1) {d*=10,e--;}
  while (d>10) {d/=10,e++;}
  if(d<2) Q=1
  else if(d<4) Q=2
  else Q=5
   
// pour obtenir des entiers compris entre 0 et 999 
//Erreur à corriger, valable seulement si nl=1. 

  let e0=Math.floor(e/3)*3 
  let e1=e-e0
   
  Sig = new Array("p","n","µ","m",' ',"K","M","G","T")
  let s = Sig[4+e0/3];
   
  e0=Math.pow(10,e0)
  e1=Math.pow(10,e1)
  a/=e0
  b/=e0
  Q*=e1
  let a0 = Math.floor(a/Q)*Q
  a=a0
  
  let gx = Lx/(L-1)
  let gy = Ly/(b-a)
  function fx(x) x*gx + m
  function fy(y) Ly-(y-a)*gy + m
  let n = (b-a)/Q+2

  ctx.strokeStyle = "grey"
  ctx.beginPath()
  ctx.clearRect(0,0,Lx+2*m,Ly+2*m);
  for(let j=0; j<n; j++){
  g = a0 + j*Q
  if (g<b) {
  let y=fy(g)
  ctx.moveTo(m, y);
  ctx.lineTo(Lx+m, y);
  ctx.fillText(cc(g.toString()+" "+s,9), 3, y);
  }
  }
  
   

 

 

f

function cc(s,n){
while (s.length<n) s = " "+s
return s
}

ctx.stroke();
ctx.font = "9pt serif"
ctx.measureText("blabla")

ctx.strokeStyle = "grey"
ctx.beginPath()
ctx.fillText(cc(titre1,Lx*0.18), m, m/3);
ctx.fillText(cc(titre2,Lx*0.18), m, 2*m/3);
ctx.moveTo(m, m);
ctx.lineTo(m, Ly+m);
ctx.fillText(legendY, 5, m-12);
ctx.moveTo(m, Ly+m);
ctx.lineTo(Lx+m, Ly+m);
ctx.fillText(legendX, Lx + m -15, Ly + m + 25);
ctx.stroke();

ctx.strokeStyle = "red"
ctx.beginPath()
ctx.moveTo(fx(0),fy(M[0]/e0))
for(let i=1;i<L;i++) ctx.lineTo(fx(i),fy(M[i]/e0))
ctx.stroke()


let d = L/nlx
let e = 0
while (d>10) {d/=10,e++;}
if(d<2) Q=1
else if(d<4) Q=2
else Q=5

let e0=Math.floor(e/3)*3 // pour obtenir des entiers compris entre 0 et 999
let e1=e-e0

Sig = new Array("p","n","µ","m",' ',"K","M","G","T")
let sx = Sig[4+e0/3];
e0=Math.pow(10,e0)
e1=Math.pow(10,e1)
Q*=e1
let dx=Q*e0
ctx.strokeStyle = "grey"
ctx.beginPath()
for(let j=0; j<L; j+=dx){
let x=fx(j)
if (x<Lx+m) {
ctx.moveTo(x, Ly+m);
ctx.lineTo(x, m);
ctx.fillText(j/e0.toString()+" "+sx, x - 4, Ly + m + 12);
}
}
ctx.stroke();
}

//ctx.fillStyle = "rgba(255, 255, 0, .5)"

Array.prototype.bcherche = function(x){
var i=0, h=this.length-1,m;
while ((h-i)>1){
m=Math.floor((i+h)/2);
if (x==this[m]) {return m}
if (x<this[m]) {h=m-1} else {i=m+1}
}
if (x==this[i]) {return i}
if (x==this[h]) {return h}
if (x<this[i]) {return -i-1}
else {if (x<this[h]) {return -h-1} else {return -(h+1)-1}}
}

Array.prototype.bajoute = function(x){
var u=this.bcherche(x);
if (u>0) {return 0;}
this.splice(-u-1,0,x);
return 1;
}

Array.prototype.benleve = function(x){
var u=this.bcherche(x);
if (u<0) {return 0;}
this.splice(u,1);
return 1;
}

function Test(){
var A = new Array();
A.bajout(5);
A.bajout(10);
A.bajout(8);
A.bajout(123);
A.bajout(2);
A.bajout(5);
A.bajout(7);
for(var i=0;i<A.length;i++) {
document.getElementById('Log').firstChild.nodeValue += "\n"+ i +": " + A[i];
}
}