site sans réclame HTMLCont@ctS'abonner • DEWEY 004.671

Quelques détails sur le javascript

L

Le javascript a été inventé pour rendre les pages HTML dynamiques et aurait été implémenté pour Netscape 2.0 en quelques jours seulement. De mauvaises langues disent que cela se voit. Cela reste néanmoins pratique pour des applications côté client, pour ne pas solliciter le serveur comme le fait PHP. Mais par ailleurs, les méthodes AJAX font justement collaborer PHP et javascript pour des pages très réactives, par exemple où l'introduction d'un code postal permet la demande de la ville correspondante au serveur, sans devoir changer de page.

2016.06.11 - Page incomplète, commencée selon mes nécessités, en phase de généralisation. Tests sur Firefox 45 (2016) et partiellement sur MacOSX et Android 4.

Cette page peut servir d'introduction, une documentation plus précise se trouve à la page developer.mozilla.org/en-US/docs/Web/JavaScript

1. Généralités

1.1 Script
1.2 Syntaxe
1.3 Mise en œuvre

2. Variables

2.1 Nombres
2.2 Booléens
2.3 Chaînes
2.4 Tableaux

3. Structures

3.1 Comparateurs
3.2 Conditions
3.3 Boucles
3.4 Fonctions
3.5 Erreurs

4. Interactions

4.1 Boîtes
4.2 Contenu
4.3 Formulaires
4.4 Événements

C. Autres classes

C.1 Date et heure
C.2 Mathématique

G. Graphisme

G.1 Texte
G.2 Lignes
G.3 Courbes
G.4 Rectangles
G.5 Effets

1. Généralités

Cette page nécessite au moins une connaissance des principes de l'HTML.

1.1 Script

Un script de javascript s'écrit traditionnellement entre les balises <script type="text/javascript"> et </script>, elles-mêmes placées entre les balises <head> et </head>. Il est possible de placer un script entre <body> et </body>, mais la page HTML étant un flux, il n'est pas dit qu'une fonction sera disponible si elle est écrite après le code qui l'appelle.

Le navigateur IExplorer ayant tardé à accepter la balise <script>, il convenait de cacher le code entre <!-- et -->, ce qui explique que vous verrez encore ces quelques signes dans certains exemples.

Il est encore possible d'éditer le code dans une page extérieure chargée par la balise suivante (à placer entre <head> et </head>

<script type="text/javascript" src="moncode.js"></script>

1.2 Syntaxe

La syntaxe est à peu de choses près celle du C/C++/PHP... ce qui signifie des scripts de type:

function cube(x);
  {
  return power(x,3);
  }
for(var i; i<10; i++)
  {
  alert(cube(i));
  }

Les instructions sont séparées par un point-virgule ou une fin de ligne.

Les commentaires sont introduits comme en C:

// commentaire sur une ligne

/* un commentaire qui peut
s'étendre sur plusieurs lignes */

1.3 Mise en œuvre

La façon la plus simple est d'insérer un bout de code dans une balise HTML, à l'aide d'un événement:

<p>
<span onMouseover="alert('Bonjour, Monde')">Survolez-moi avec la souris!<span>

Survolez-moi avec la souris!

Le script, le plus souvent inclus dans la page HTML ou dans une page chargée, est composé de de différentes fonctions appelées par des éléments HTML (boutons <input>, survol ou clic de souris...).

Pour lancer une ou plusieurs fonctions au chargement de la page, il suffit de les mentionner dans la balise <body onLoad="fct1(); fct2();">. Comme l'HTML traite un flux de données, il convient que les fonctions soient écrites avant leur appel. Dans le cas d'un appel dans la balise <body>, il faut qu'elles soient écrites entre <head> et </head>).

Une instruction très simple permet d'afficher le traditionnel «Hello World!»:

alert("Hello World!");

Il est possible de lire et de modifier le contenu de la page de façon précise, voire de composer des graphiques à la volée.

2. Variables

Une variable est un conteneur de valeur, modifiable. On définit, redéfinit une variable, dont on peut récupérer la valeur. Un nom de variable peut contenir des lettres, des tirets bas _ et des chiffres, mais ne peut commencer par un chiffre. Ces mots suivant sont réservés par javascript et ne peuvent donc pas servir de nom de variable:

abstract · boolean · break · byte · case · catch · char · class · const · continue · default · do · double · else · extends · false · final · finally · float · for · function · goto · if · implements · import · in · instanceof · int · interface · long · native · new · null · package · private · protected · public · return · short · static · super · switch · synchronized · this · throw · throws · transient · true · try · var · void · while · with

Déclaration

Une variable doit avoir été «initialisée» avant de pouvoir servir.

On peut déclarer explicitement(avec le mot réservé var) une variable avant de l'utiliser.

var nbr; nbr=0.123; // .123 est incorrect!
var str="ceci-cela";
var tableau=new Array();
tableau[0]=123;

Une variable peut se déclarer de façon implicite (sans le mot réservé var):

nbr=10;
str="ceci-cela";
tabl=new Array(123, 443);

Les variables ont généralement une portée globale: elles sont appelables ou modifiables à n'importe quel endroit du script. Néanmoins, les variables déclarées par var à l'intérieur d'une fonction ont une portée locale, limitée à la partie de script interne à cette fonction: elles ne seront appelables et modifiables que là. Il peut donc coexister deux variables différentes de même nom. Attention cependant, une variable déclarée de façon implicite dans une fonction garde une portée globale.

Types

Les données n'ont pas toutes la même nature: les nombres permettent des calculs, les chaînes représentent un agrégat de caractères, les booléens représentent le «vrai» et le «faux» logiques, le type «tableau» représentent une collection de données. De la même manière, les variables peuvent contenir des données de type nombre, chaîne, booléen ou tableau.

Le javascript n'est cependant pas fortement typé, c'est-à-dire qu'il est capable d'interpréter le type d'une variable selon le contexte: "10"+5 a pour résultat "105", et "10"/5 égale 2.

typeof expression renvoie boolean, number, string, symbol, function, object ou undefined (lorsqu'aucune valeur n'est attribuée à une variable).

Attention: typeof ["cha", "badaba", "da"] retourne objet. Utiliser Array.isArray(tabl) pour s'assurer que tabl est bien un tableau (doit retourner true ou false).

Il existe des fonctions de conversion de type: Number(""), var_nbr.toString(), String(nombre) et Boolean()

null est une donnée sans valeur.

2.1 Nombres

Javascript ne fait pas de différence entre nombres entiers et nombres réels (avec le point pour séparateur décimal). Un nombre inférieur à 1 doit afficher le 0 avant le point décimal: 0.43 et non .43.

Un nombre peut être écrit sous forme exponentielle: 23e4 ou 23E4 (23 multiplié par 104) ; 23e-4 ou 23E-4 (24 divisé par 104).

Number.MAX_VALUE est la plus grande quantité possible: 1.7976931348623157e+308 (pourrait dépendre du système)
Number.MIN_VALUE est la plus petite quantité possible entre deux valeurs: 5e-324 ; la moitié de ce nombre = 0

Font également partie de la classe Number:

Number.POSITIVE_INFINITY = Infinity, tout ce qui dépasse MAX_VALUE
Number.NEGATIVE_INFINITY = -Infinity
Number.NaN = (Not a Number), par exemple la division d'un infini par un autre infini, ou le résultat d'une opération où intervient une chaîne non numérique.

Tests

isInteger() renvoie true si une valeur est entière
isFinite() renvoie true si une valeur est finie
isNaN() renvoie true si l'élément est NaN
Number.isSafeInteger() renvoie true si un nombre est un entier compris entre -(253-1) et 253-1 (bornes incluses). Un nombre exprimé sous forme de chaîne, NaN, Infinity ou undefined retournent false.

Opérateurs

Les opérateurs sont habituels: +, -, * pour la multiplication, / pour la division, % pour l'opération modulo (reste)

- sert également à renverser le signe d'une variable: nbr=-nbr

= sert à l'affectation d'une valeur à une variable: nbr=3 ; mais jamais à tester l'égalité.

Notations raccourcies

Il est possible d'utiliser une notation raccourcie lorsqu'une variable réceptionne directement sa valeur modifiée par une opération:

nbr+=5 ajoute 5 à nbr ; peut remplacer nbr=nbr+5
nbr-=3 retire 3 à nbr ; peut remplacer nbr=nbr-3
nbr*=4 multiplie nbr par 4 ; peut remplacer nbr=nbr*4
nbr/=2 divise nbr par 2 ; peut remplacer nbr=nbr/2

Attention! nbr-=var retranche la valeur de var à la variable nbr ; nbr=-var affecte à nbr l'inverse de la valeur de var

nbr++ augmente la variable nbr de 1 (incrémentation)
nbr-- soustrait 1 de la variable nbr (décrémentation)

Priorité décroissante des opérateurs

( ) et virgule séparatrice de liste
! ++ -- - (inversion de la valeur d'une variable)
* /
+ -
< <= >= >
== !=
&&
||
? : (if then else en mode raccourci)
= += -= *= /= %=

Bases

Les entiers peuvent être écrits sous différentes bases:

Transformations

parseInt("",base) tente d'interpréter une chaîne de caractères, éventuellement selon la base précisée (nombre de 2 à 36), en s'arrêtant au premier caractère non utilisable, les caractères acceptés (de 0 à 9 et de a à z) dépendant de la base. La notation exponentielle n'est pas reconnue
parseFloat("") tente de convertir une chaîne en nombre réel. Les caractères acceptés sont les chiffres de 0 à 9, E, e, ., + et -.

D'autres fonctions transforment les nombres en chaînes:

nbr.toString(base) permet de convertir un nombre en chaîne à la base voulue, sans préfixe 0x ou 0 ;base 10 par défaut nbr.toExponential() convertit un nombre en chaîne sous sa forme exponentielle (du genre 1,23e8)
nbr.toFixed(n) convertit une variable nombre en chaîne, avec n chiffres après la virgule
nbr.toPrecision(n) convertit un nombre en chaîne de longueur n. Si la longueur de la chaîne excède n, seule la partie avant l'exposant est concernée

2.2 Booléen

Les deux valeurs booléennes sont true et false. Une condition avec true est toujours vraie et toujours fausse avec false. Ils sont produits par les comparateurs et les tests.

&& «et» logique
|| «ou» logique
not inversion logique

Les valeurs reconnues comme fausses sont: null, NaN (not a number), 0 (zéro), "" (chaîne vide) et undefined.

2.3 Chaînes 2016.06.19

N'importe quel suite de caractères entourées de guillemets. Concaténation avec + ou +=.

Pour une variable chaine:

chaine.length contient le nombre de caractères d'une chaîne
chaine.charAt(n) choisit un caractère selon l'index (de 0 à length-1)
chaine.indexOf(ch,n) retourne la position d'une chaîne dans une autre, en commençant éventuellement à l'offset n. -1 en cas d'échec
chaine.lastIndexOf("",n) retourne la position de la première occurrence en commençant par la fin
chaine.substring(deb,fin) retourne la sous-chaîne de la position deb à fin (non incluse)
chaine.slice(deb,fin) retourne une partie de chaîne à partir de l'index deb, jusqu'au bout si la fin n'est pas précisée
chaine.substr(deb,n) retourne la sous-chaîne de longueur n à partir de la position deb

chaine.toLowerCase() toutes les lettres minuscules
chaine.toUpperCase() toutes les lettres en MAJUSCULES
chaine.toLocaleLowerCase() toutes les lettres en minuscules, selon la locale spécifiée par l'hôte
chaine.toLocaleUpperCase() toutes les lettres en MAJUSCULES, selon la locale spécifiée par l'hôte

chaine.endsWith(ch) vérifie que la chaîne se termine par une autre; retourne true ou false
chaine.includes(ch) vérifie que la chaîne en contient une autre; retourne true ou false
chaine.startsWith(ch) vérifie que la chaîne commence par une sous-chaîne; retourne true ou false

chaine.charCodeAt(n) retourne le code ascii/unicode du caractère à l'index
String.fromCharCode(n) convertit un code ascii/unicode en un caractère. Ne s'appliquant pas sur un objet «chaîne», il faut préciser le préfixe String.

chaine.concat() joint deux ou plusieurs chaines. Les nombres sont convertis en chaînes
chaine.localeCompare(autre) compare deux chaîne. Retoune -1 si la première chaîne se classe alphabétiquement avant la seconde, 1 pour l'inverse, 0 pour la stricte égalité
chaine.repeat(n) retourne une nouvelle chaîne répétée n fois
"chaine".replace("hai","or") retourne une chaîne dont une sous-chaîne a été remplacée par une autre

chaine.split(ch) morcèle une chaîne (avec le découpeur ch) et retourne les morceaux dans un tableau
chaine.trim() supprime les espaces en début et fin de chaîne

a=123; ch=a.toString() et String(123) retournent la chaîne "123"

Expressions régulières

Pour avoir une idée de ce que sont les expressions régulières, voyez ici.

chaine.match(exp_reg) retourne une sous-chaîne correspondant à une expression régulière
chaine.search() retourne la position d'une sous-chaîne dans une chaîne (expression régulière!)

2.4 Tableaux

Tableaux indexés

Un tableau est une suite indexée d'éléments divers: chaînes, nombres et même tableaux peuvent y cohabiter (cela ressemble plus à l'objet list du python). On déclare un tableau de n éléments avec

var tabl=new Array(n); // n n'est pas obligatoire ;

On le remplit avec tabl[indice]=valeur et on lit une de ses valeurs avec variable=tabl[indice]. Le premier élément est à l'indice 0: un tableau de 14 éléments a des indices de 0 à 13.

Notes: l'appel à un élément inexistant retourne undefined.

tabl.length retourne le nombre d'éléments du tableau tabl
Array.isArray(tabl) retourne true si tabl est un tableau
("abaque" in tabl) retourne true si le tableau tabl contient la chaîne "abaque"
tabl.join("-") joint les éléments du tableau dans une chaîne, reliés par une éventuelle chaîne entre parenthèses, la virgule par défaut, "" pour rien

tabl.sort() trie les éléments par ordre alphabétique, que les éléments soient des chaînes ou des nombres: 443 précède 5!
tabl.reverse() inverse l'ordre des éléments d'un tableau

Ces changements sont acquis, il ne faut pas récupérer le résultat (tri ou renversement) dans une variable.

Tableaux à plusieurs dimensions

Il faut initialiser chaque élément comme un tableau. Les éléments sont accessibles par tableau[x][y]. Pour un tableau de cinq sous-tableaux:

tabl= new Array(5);
tabl[0]=new Array(3);
tabl[1]=new Array(3);
tabl[2]=new Array(3);
tabl[3]=new Array(3);
tabl[4]=new Array(3);
tabl[1][2]=valeur;

Tableaux associatifs

Un tableau associatif n'utilise pas d'index (nombre entier) mais des chaînes pour retrouver les valeurs:

var tableau={"zero":"GA", "un":"BU", "deux":"ZO", "trois":"MEUH"};
val=tableau[zero] // val vaut GA

Il est possible de «nourrir» le tableau de cette façon:

tab={}; tab["cent"]="hundred"; tab["mille"]="thousand";

On y perd cependant l'ordre et on le parcourt avec une boucle particulière. Dans l'exemple suivant, i aura pour valeurs successives toutes les chaînes utilisées comme indice, tabl[i] contenant les valeurs stockées.

for(i in tabl)
  { 
  …
  }

Les tableaux associatifs n'ont pas de longueur de tableau, parce qu'il s'agit d'un objet, type qui ne dispose pas de longueur.

3. Structures

Les structures permettent l'exécution de partie de code sous condition. De façon générale, une structure a pour forme motcle(condition) { code }

3.1 Comparateurs

Les comparateurs servent à tester des (in)égalités afin de permettre au script de s'orienter. On les utilise dont surtout dans les conditions et boucles.

< strictement inférieur   <= inférieur ou égal   > strictement supérieur   >= supérieur ou égal

== même valeur, même si les types diffèrent: "1"==1 renvoie true ; à ne pas confondre avec l'affection =
!= différent; teste les valeurs, pas les types: "1"!=1 renvoie false
=== strictement égal, même valeur et même type: "1"===1 renvoie false
!== teste l'inégalité de valeur ou de type: "1"!==1 renvoie true

Les chaînes possèdent leurs méthodes semblables aux comparateurs.

3.2 Conditions

if(condition) { … } else if(…) { … } else { … } enchaînement de conditions. Au cas où la condition du if n'est pas rencontrée, la condition d'un ou plusieurs else if est évaluée, et en dernier ressort, le code après else est appliqué.

Il est possible de composer des conditions avec le «et» ou le «ou» logique:

(cdt1 && cdt2) // est vrai si les deux conditions sont en même temps vraies
(cdt1 || cdt2) // est vrai si au moins l'une des deux conditions est vraie

(…) ? … : … ; est la condition rapide héritée du langage C:

(expr. logique) ? code_si_vrai : code_si_faux

3.3 Boucles

continue retourne en début de boucle, à l'itération suivante, normalement utilisée dans une condition
break sort directement de la boucle

while(condition) { … } permet l'exécution d'une partie de code à condition et tant que la condition définie est vraie.
do { … } while() parcourt la boucle et la réitérera tant que la condition est vraie (correspond au REPEAT ... UNTIL condition des bons vieux BASIC, qui parcourt la boucle au moins une fois)
for(init; cond; iter) { … } réitère une portion de code tant que la condition est vraie. init initialise une ou plusieurs variable(s), cond est la condition d'itération, et iter une opération sur la ou les variable(s) après chaque itération (souvent une incrémentation)
for(variable in objet) { … } réitère un code avec une variable qui parcourt un objet, souvent un tableau associatif

switch permet le choix d'un code selon les valeurs n1, n2... correspondent à la variable:

switch(variable)
  {
  case n1: code; break;
  case n2: code; break;
   …
  default: code
  }

3.4 Fonctions

À développer...

function nom(param) { … }
return valeur stoppe l'exécution de la fonction et retourne (éventuellement) une valeur

Rappel: une valeur déclarée dans une fonction avec le mot réservé var n'a pas de portée en dehors de la fonction.

3.5 Erreurs

À développer...

try { essai } catch { code alternatif } finally { toujours }
throw génère une erreur debugger permet l'appel d'une fonction de débuggage

4. Interactions

4.1 Boîtes de dialogue

Le préfixe window. n'est pas obligatoire.

window.alert("") ouvre une boîte délivrant un message, éventuellement issu d'un code

<script>
function jdm() { a=new Date(); alert(a.getDate());}
</script>
<p>
<span onMouseover="jdm();">Jour du mois (à survoler)</span>

confirm() permet de récupérer false ou true selon le bouton choisi ([Annuler] ou [OK])

tf=window.confirm("Red?");
alert(tf);

prompt() permet à l'utilisateur d'éditer un champ, récupéré dans une variable

quest=window.prompt("What's your quest?");
quest=window.prompt("What's your quest?", "Graal"); // champ prérempli

cpt=setTimeout("votre_fonction()", ms) temporise (en millisecondes) un appel à une fonction
clearTimeout(cpt) permet d'arrêter le temporisateur et donc le déclenchement de la fonction (à lier à un événement)

4.2 Modification de contenu

document.write(code); remplace la page courante par le contenu de la variable code.

document.getElementById("").innerHTML="" remplace le contenu de la balise dont l'identifiant est précisé, par ce qui suit le signe =. Pour une balise HTML dont l'id est id43:

document.getElementById("id43").innerHTML="Vous avé gagnez $468.000 à la lotterie Micro-soft";

4.3 Formulaires

Il est possible de tester ou modifier des formulaires ou du contenu ou des attributs de balise.

Récupérer une valeur

On récupère une donnée d'un formulaire par l'id du widget (textarea, menu déroulant, input...):

ma_variable=document.getElementById("mon_id").value;

Dans le cas d'un menu déroulant, il peut être intéressant de préciser des valeurs différentes de ce qui y apparaît ("1" pour "un"...). Dans la partie HTML:

<option>
<select id="mon_menu">
<option value="1">Un</option>
<option value="10">Cent</option>
<option value="1000">Mille</option>
</option>

Dans la partie script, il sera possible de convertir la valeur (chaîne) en nombre:

nombre=document.getElementById("mon_menu").value;
nbr=Number.ParserInt(nombre);

Cases à cocher

Pour récupérer la valeur "coché" ou non d'un checkbox dont l'id (unique!) est "membre":

document.getElementById("membre").checked;

Cette valeur est souvent testée dans une condition:

if(document.getElementById("membre").checked==true)
  { ... }

Pour récupérer la valeur "coché" ou non d'un radiobutton dont le name (multiple) est couleurs:

booleen=document.getElementsByName("couleurs")[1].checked

Attention! Elements prend ici toujours s puisque les radioboutons ne s'utilisent pas seuls. Cette méthode renvoie en fait un tableau de valeurs dont il faut préciser l'indice du bouton à tester. Pour n radioboutons, les indices vont de 0 à n-1, selon l'ordre de la page HTML.

Il est possible de modifier l'état d'un bouton de formulaire avec du code. Dans les deux exemples qui suivent, il faut survoler un texte pour changer l'état du bouton, ce qui est moins pratique que simplement cliquer dans le petit carré (checkbox) ou le petit rond (radiobutton), mais c'est pour montrer que le clic n'est pas nécessaire.

document.forms.id_formulaire.id_checkbox.checked=true force l'activation d'une boîte à cocher (false pour désactiver):

<script>
function yeap()
  { document.forms.oiseau.choix.checked=true; }
</script>

<form id="oiseau">
<input type="checkbox" id="choix">Ibis
</form>
<p>
<span onMouseover="yeap();"><b>Survoler ici</b></span>

document.forms.id_formulaire.name_radio[n].checked=true force l'activation d'un radiobouton particulier, ce qui désactive les autres:

L'exemple suivant permet de ramener le checked sur le second item ([1]!) en survolant un mot. Le formulaire est identifié comme oiseau et les radioboutons ont choix pour nom. document.forms est ici facultatif.

<script>
function yeap()
  { document.forms.oiseau.choix[1].checked=true; }
<script>

<form id="oiseau">
<input type="radio" name="choix" checked="checked">Ibis
<input type="radio" name="choix">Pie
<input type="radio" name="choix">Hibou
</form>
<p>
<span onMouseover="yeap();"><b>Survoler ici</b></span>

4.4 Événements

Les événements envoient vers du code, sous la forme d'un attribut de balise. Pour l'événement imaginaire onEvent (code peut être une fonction):

<p onEvent="code;">

onClik clic sur un lien ou élément cliquable

onMouseOver survol d'un élément par la souris
onMouseOut abandon du survol de l'élément

onLoad chargement de la page HTML
onUnload abandon de la page HTML
onFocus un élément de formulaire est actif
onSelect sélection d'un champ (formulaire)
onBlur abandon d'un champ de formulaire
onChange modification d'un formulaire est modifiée.
onSubmit click d'un bouton «Submit» (envoi de formulaire)

C. Autres classes

C.1 Temps

nd=new Date(); renvoie une chaîne temporelle sous la forme "Fri Feb 29 08:43:43 1996". À partir de la variable créée, il est possible d'en extraire les informations suivante:

nd.getYear(); l'année, à partir de 1900 (116 pour 2016)
nd.getMonth(); l'heure, 0 à 11
nd.getDate(); le jour du mois, de 1 à 31
nd.getDay(); jour de la semaine

nd.getHours(); l'heure, de 0 à 23
nd.getMinutes(); la minute, de 0 et 59
nd.getSeconds(); la seconde, de 0 et 59

nd.getTime(); nombre de millisecondes depuis le 1 janvier 1970 00:00:00
nd.getTimezoneOffset(); nombre de minutes entre heure locale et UT

nd.toGMTString(); retourne une chaîne décrivant la date et l'heure en temps universel (UT, et non GMT!):

Sun, 19 Jun 2016 13:06:57 GMT

nd.toLocaleString() retourne une chaîne décrivant la date (sans le jour de la semaine) et l'heure locale:

19/06/2016 à 15:07:42

Mettre le jour et l'heure

nd.setYear(x); ajuste l'année, à partir de 1900 (116 pour 2016)
nd.setMonth(x); ajuste le mois, de 0 et 11
nd.setDate(x); ajuste le jour, de 1 à 31

nd.setHours(x); ajuste l'heure, de 0 et 23
nd.setMinutes(x); ajuste les minutes, de 0 et 59
nd.setSeconds(x); ajuste les secondes, de 0 et 59

nd.setTime(x); ajuste l'heure selon le nombre de millisecondes écoulées depuis le 1 janvier 1970 00:00:00

C.2 Mathématiques

Constantes

Math.E retourne e, la constante d'Euler: 2.718...
Math.LN2 retourne le logarithme népérien de 2: 0.693
Math.LN10 retourne le logarithme népérien de 10: 2.302...
Math.LOG2E retourne le logarithme en base 2 de e: 1.442...
Math.LOG10E retourne le logarithme en base 10 de e: 0.434)
Math.SQRT1_2 retourne la racine carrée d'1/2: 0.707...
Math.SQRT2 retourne la racine carrée de 2 : 1.414...

Fonctions

Math.abs() retourne la valeur absolue
Math.round() arrondit un nombre à l'unité près
Math.floor() retourne l'entier inférieure ou égal
Math.ceil() retourne l'entier supérieur ou égal
Math.min() retourne la valeur la plus basse de la série
Math.max() retourne la valeur la plus haute de la série

Math.exp(x) retourne la valeur de ex
Math.pow(x,y) retourne la valeur de x à la puissance y
Math.log() retourne le logarithme naturel (en base e)
Math.sqrt() retourne la racine carrée

Math.random() retourne un nombre pseudo-aléatoire de 16 décimales, du segment [0,1[. Pour simuler le lancer d'une pièce de monnaie et d'un dé à six faces:

pf=Math.round(Math.random()); // retourne 0 ou 1
de=Math.round(.5+Math.random()*6); // retourne 1, 2, 3, 4, 5 ou 6

Trigonométrie

Math.PI retoune PI: 3.14159...

L'argument doit être exprimé en radian. Pour transformer un angle exprimé en degrés en valeur en radian:

angle=Math.PI*degre/180

Math.sin() retourne le sinus d'un angle
Math.cos() retourne le cosinus d'un angle
Math.tan() retourne la tangente d'un angle

Rappelons que l'argument d'asin() et acos() est borné par -1 et 1:

Math.asin() retourne l'arcsinus d'une valeur
Math.acos() retourne l'arccosinus d'une valeur

Math.atan() retourne l'arctangente ()
Math.atan2(dy,dx) retourne l'angle d'une pente ordonnée/abscisse).

G. Graphisme Premier jet 2016.06.18

Attention: pour le reste de la section Graphisme, ce qui suit est sous-entendu!

1. Pour afficher un graphisme il faut qu'une balise soit désignée pour le réceptionner

<canvas id="lieu" width="400" height="300" style="border:1px solid gray;">
La balise canvas n'est pas reconnu par le navigateur!
</canvas>

2. Dans le script même, avant de commencer l'affichage, au moins les deux premières lignes doivent figurer:

ici=document.getElementById("lieu");
ctx=ici.getContext("2d");
ctx.clearRect(0, 0, lieu.width, lieu.height);

ctx.fillColor="gray"; colore un affichage; plus finement avec "#RRVVBB"
ctx.fillStyle="red"; colore un remplissage; plus finement avec "#RRVVBB"

G.1 Texte graphique

ctx est expliqué ici.

ctx.fillText("Votre texte", posx, posy) dessine un texte rempli
ctx.strokeText("Votre texte", posx, posy) dessine un texte en trait contour

ctx.font="20px Arial bold"; retourne ou spécifie les paramètres de la fonte
ctx.textAlign retourne ou spécifie la position du texte par rapport à ses coordonnées: "center", "justify", "start" (ou "left"), "end" (ou "right")
ctx.textBaseline retourne ou spécifie la baseline utilisée, à savoir un décalage vertical par rapport à l'ordonnée d'un texte. Les valeurs du plus haut au plus bas sont: "top", "hanging", "middle", "alphabetic" (par défaut), "ideographic" et "bottom"
ctx.measureText("Votre texte").width retourne la largeur d'un texte selon les paramètres actuels de font, ce qui est utile pour

G.2 Lignes

ctx est expliqué ici.

ctx.beginPath() commence un chemin
ctx.lineTo() ajoute un point au chemin (il en faut au moins deux)
ctx.moveTo() (facultatif) lève le crayon pour continuer le chemin plus loin
ctx.closePath() (facultatif) sert à refermer le chemin en un circuit
ctx.stroke() trace effectivement le chemin défini
ctx.fill() remplit la figure définie par un chemin (en fait un circuit, même si closePath() n'est pas utilisé)

Styles de ligne

ctx est expliqué ici.

ctx.strokeStyle retourne ou définit la couleur, le gradient ou le style de la ligne
ctx.lineWidth retourne ou définit la largeur de ligne
ctx.lineCap retourne ou définit le style des fins de ligne: "butt" (la ligne s'arrête au point défini, par défaut), "square" (demi-largeur en plus) ou "round" (demi-rond ajouté)
ctx.lineJoin retourne ou définit le type d'angle formé par une ligne brisée: "round" (arrondi), "miter" (pointu) ou "bevel" (coupé)
ctx.miterLimit retourne ou définit la longueur maximale pour ctx.lineJoin="miter": pour une ligne ayant une certaine grosseur, la pointe d'un angle très aigu risque de se retrouver très loin du point de jonction du milieu des deux segments. n semble être le rapport limite entre d(jonction,pointe) et la demi-largeur de la ligne: au delà, basculement en mode "bevel" (10 par défaut).

G.3 Courbes

ctx est expliqué ici.

arc() crée un (arc de) cercle de centre (posX,posY) et de rayon r, le cercle étant défini avec un début 0 et une fin Math.PI*2

ctx.beginPath();
posX=150; posY=150; r=70; deg1=168; deg2=340;
pi=Math.PI; deb=pi*deg1/180; fin=pi*deg2/180;
ctx.beginPath();
ctx.arc(posX,posY,r,deb,fin);
ctx.fill();

Notes:

arcTo() trace un arc de cercle de rayon r tangeant aux deux droites se croisant au point (x1,y1) et contenant respectivement les points (x2,y2) et (x0,y0). Cet arc de cercle est prolongé par le segment entre le point (x0,y0) et l'arc de cercle:

ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.arcTo(x1,y1,x2,y2,r);
ctx.stroke();

quadraticCurveTo() crée une courbe Bézier quadratique, où (dx,dy) et (fx,fy) sont les points de début et fin de courbe, (px,py) est le point de contrôle:

ctx.beginPath();
ctx.moveTo(dx,dy);
ctx.quadraticCurveTo(px,py,fx,fy);
ctx.stroke();

bezierCurveTo() crée une courbe Bézier cubique, où (dx,dy) et (fx,fy) sont les points de début et fin de courbe, (p1x,p1y) et (p2x,p2y) sont les points de contrôle:

ctx.beginPath();
ctx.moveTo(dx,dy);
ctx.bezierCurveTo(p1x,p1y,p2x,p2y,fx,fy);
ctx.stroke();

isPointInPath() retourne true si le point spécifié appartient au chemin, false sinon

G.4 Rectangles

ctx est expliqué ici.

ctx.strokeRect(x,y,w,h) trace un rectangle non rempli (coordonnées du point supérieur gauche, largeur, hauteur)
ctx.fillRect(x,y,w,h) trace un rectangle rempli (coordonnées du point supérieur gauche, largeur, hauteur)
ctx.clearRect(x,y,w,h) efface les pixels d'une surface rectangulaire (coordonnées du point supérieur gauche, largeur, hauteur)

ctx.clip() clippe une région du canvas: la dernière figure tracée délimite l'espace des prochains affichages. Pour pouvoir revenir à la possiblilité d'afficher sur tout le canevas, il faut préalablement sauver l'état du contexte avec ctx.save()et utiliser ctx.restore() lorsque l'on veut supprimer les effets de clip(). Page html complète:

<html><head>
<script>
function texte() {
canevas=document.getElementById("ici");
ctx=canevas.getContext("2d");
ctx.rect(35,70,140,60);
ctx.stroke();
ctx.font="30px Arial";
ctx.save() // sauvegarde le contexte
ctx.clip();
ctx.fillStyle="red";
ctx.fillText("V'là l'bon vent",25,85); // affichage tronqué
ctx.restore() // restaure le contexte, sans la couleur rouge
ctx.fillText("V'là l'joli vent",25,135); // affichage entier }
</script>
</head><body onLoad="texte();">
<canvas id="ici" width="300" height="300" style="border:1px solid #b05">
</canvas>
</body></html>

G.5 Effets graphiques

ctx est expliqué ici.

Ombre

Disponibles pour l'affichage de lignes, textes et figures géométriques:

ctx.shadowColor retourne ou spécifie la couleur de l'ombre
ctx.shadowBlur retourne ou spécifie en pixels le niveau de diffusion de l'ombre (0 pour une ombre nette)
ctx.shadowOffsetX retourne ou spécifie le décalage horizontal à droite de l'ombre
ctx.shadowOffsetY retourne ou spécifie le décalage vertical vers le bas de l'ombre

Gradient linéaire

grad=ctx.createLinearGradient(x1,y1,x2,y1) crée un gradient linéaire du point (x1,y1) à (x2,y2)
grad.addColorStop(pc,"couleur") organise les plages (pourcentage de la longueur) et les couleurs

Entre les points (10,20) et (300,200), dégradé du vert le cyan du début à 30% de la surface, puis du blanc au violet de 30 à 100% de la surface:

grad=ctx.createLinearGradient(10,20,300,200);
grad.addColorStop(0,"green");
grad.addColorStop(0.3,"cyan");
grad.addColorStop(0.3,"white");
grad.addColorStop(1,"purple");
ctx.fillStyle=grad;
ctx.fillRect(10, 20, 300, 200); // mêmes dimensions pour bien voir l'entièreté du dégradé

Gradient radial

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2) définit deux cercles pour un gradient radial
grad.addColorStop(pc,"couleur") organise les plages (pourcentage de l'éloignement) et les couleurs

Pour un gradient radial du cercle de centre (100,100) et de rayon 20 au cercle de centre (125,125) et de rayon 125, avec un dégradé du bleu vers le vert (10%) puis vers le blanc sur (50%) et du blanc vers le violet pour les 40% qui restent:

grad=ctx.createRadialGradient(100,100,20,125,125,125);
grad.addColorStop(0,"blue");
grad.addColorStop(0.1,"green");
grad.addColorStop(0.6,"white");
grad.addColorStop(1,"purple");
ctx.fillStyle=grad;
ctx.fillRect(0, 0, 300, 300);

(à suivre)