Bases de programmation scientifique avec le langage Javascript.
Frédéric Faure
Université Grenoble Alpes, France
(version: 16 juin 2018)

Table des matières

1 Introduction
1.1 Installation de l'éditeur Brackets
1.2 Utilisation de la console javascript
1.3 Voir le code html d'une page
2 Objets de bases
2.1 Entrée/sortie:
2.2 Types de base
2.3 Fonctions
2.4 Appel de fonction différé
2.5 Types plus élaborés
3 Les forms en html
4 Capturer des évènements extérieurs
5 Cookies
6 Fichiers
7 Des onglets dans une page web
8 Promises
9 Arrow function expressions () => {}
10 Keyboard events
11 Trucs utiles en html/javascript
11.1 Reload the web page
11.2 Créer des objets html5 de façon dynamique par javascript
12 Calcul scientifique
13 Threads
13.1 Introduction
13.2 Documentation:
13.3 Exemple simple
13.4 OffScreenCanvas
14 Graphisme
14.1 avec Canvas: dessin en pixels
14.2 Avec SVG: dessin vectoriel, (pour dessins plus élaborés)
14.3 Avec WebGL
14.4 avec JSROOT
14.5 Graphisme 3D avec Three.js
14.6 Graphisme avec matplotlib de python
14.7 Autres graphismes
15 Notes musicales en html5
16 Librairie Web Audio
16.1 Introduction
16.2 Exemple de son oscillator sur la sortie out
16.3 Exemple de son Buffer data sur la sortie out
16.4 Exemple de capture du son entrée micro et connecte à sortie
16.5 Exemple de capture du son entrée micro et récupère les données dans un tableau de chiffres
16.6 Comment définir son propre audio node avec AudioWorklet
16.7 AudioWorklet and Webassembly
16.8 Slides, presentations
16.9 Examples
16.10 Audio references:
16.11 Tutorial
17 Web Midi
17.1 Script qui détecte et permet de (dé)connecter les controlleurs, et montre les messages MIDI in
17.2 Examples
17.3 Informations:
17.4 Autres ressources MIDI
18 USB Devices
19 WebXR: virtual reality (VR) and augmented reality (AR) on the Web.
20 Ecriture mathématiques en html5
21 Echange de données sur internet avec AJAX
22 Utilisation des capteurs d'un smartphone
23 Speech recognition avec web-speech-api
24 Webassembly, convertir du code C++ en code javascript
25 Node.js et concurrence
26 My examples

1 Introduction

Documentations:

1.1 Installation de l'éditeur Brackets

Installer l'éditeur Brackets sur son ordinateur. Rajouter le module « Beautify »: menu Fichier et choisissez Gestionnaire d'extensions. Parmi les extensions disponibles, recherchez "Beautify" puis installez l'extension.
Ecrire un fichier essai.html:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">Date actuelle?</button>
<p id="demo"></p>
</body>
</html>
Pour l'éxécuter depuis Brackets, Fichier/Aperçu en direct.
Résultat.

1.2 Utilisation de la console javascript

Taper: 2+2. Résultat: 4

1.3 Voir le code html d'une page

Par exemple, essayer cet exemple, taper ctrl-U, ce qui affiche le code suivant:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>

2 Objets de bases

Essayer les exemples suivants dans une console javascript. (voir section 1.2)

2.1 Entrée/sortie:

Ecrire:
var prenom = prompt("Entrez votre prénom :"); //entree
console.log("Bonjour, " + prenom); //sortie dans console
alert("Bonjour, " + prenom); //sortie sur fenetre
Remarque 2.1. Le texte après // est un commentaire sans signification pour l'ordinateur.

2.2 Types de base

Référence
Ecrire:
a = 3 // type number
b = "toto" // type string
c = (2==2) // type boolean
var d // undefined yet
typeof(a) + "," + typeof(b) + "," + typeof(c) + "," + typeof(d)
Résultat:
"number,string,boolean,undefined"
Remarque 2.2. Pour avoir une variable globale, ne pas mettre var

2.3 Fonctions

Référence: fonctions
Ecrire:
function f(x, y)
{
return x*y;
}
console.log(f(3,4))
Résultat:
12

2.4 Appel de fonction différé

2.4.1 Executer une fonction au demarrage du document html

Pour qu'une fonction javascript “fonction()” soit executée au démarrage du document:
document.body.onload = fonction

2.4.2 Executer une fonction dans 3 secondes

Utiliser setTimeout()
Cela ne bloque pas le reste du code. Mais cela est dans le meme thread.

2.4.3 Executer une fonction de façon répété toutes les 3 secondes

Utiliser setInterval().
Cela ne bloque pas le reste du code. Mais cela est dans le meme thread.

2.4.4 Demander un appel répété d'une fonction (60 fois/sec.): requestAnimationFrame()

Utiliser requestAnimationFrame
Comment changer la fréquence?
DOc

2.5 Types plus élaborés

Ecrire:
a = {name:'john', age:34} // type object
console.log(a.name)
b = [1,2,3,4] // type object (array)
console.log(b[1])
c = function myFunc(){}; // type function
console.log(typeof(a) + "," + typeof(b) + "," + typeof(c))
d = {name:'john', age:15, year : function(today) { return today - this.age; } } //objet that contains a function
console.log('year of birth :' + d.year(2018))
Résultat
john
2
object,object,function
year of birth :2003

3 Les “forms” en html

Une « form » (ou « widget ») est un objet qui sert dans l'interface avec l'utilisateur. Par exemple un boutton, un menu déroulant, une entrée pour écrire un texte un chiffre.
Référence sur form en html.
Voici un exemple (voir le code source avec ctrl-U): code.html.
Voici d'autres exemples.

4 Capturer des évènements extérieurs

Le principe est d'associer l'éxécution d'une fonction que l'on souhaite à un évènement extérieur.
On utilise la fonction addEventListener(). Cela permet de capturer différents évènements, comme click de souris, etc. Voici la liste des évènements possibles.
Remarque:

5 Cookies

Exemple simple avec un cookie. See the code.

6 Fichiers

7 Des onglets dans une page web

Voir onglets

8 Promises

See Promises

9 Arrow function expressions () => {}

Arrow functions

10 Keyboard events

See Keyboards
and article

11 Trucs utiles en html/javascript

11.1 Reload the web page

Reference on reload()
 
location.reload(); // recharge la page depuis le cache
location.reload(true); // recharge la page depuis le serveur

11.2 Créer des objets html5 de façon dynamique par javascript

Par exemple pour créer un bouton, on souhaite écrire le code suivant de façon dynamique:
<button type="button" onclick="notes2()">Dessin music</button>
Pour cela, le plus simple est d'écrire par exemple:
<p id="zone_test"></p>
 
<script>
document.getElementById("zone_test").innerHTML =" <button type=\"button\" onclick=\"notes2()\">Dessin music</button>";
</script>
 
Remarque 11.1. Attention avec le c++ (emscripten) il faut écrire \\\” pour que cela donne \” en javascript!. Ainsi:
os<<" <button type=\\\"button\\\" onclick=\\\"notes2()\\\">Dessin music</button>";
emscripten_run_script(os.str().c_str());

11.2.1 Création d'une liste de sélection. Solution 1. (mieux)

 
<p id="zone_test"></p>
 
<script>
var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';
sel.innerHTML = "<option value=\"0\">C</option> <option value=\"1\">C#</option> ";
 
var myDiv = document.getElementById("zone_test");
myDiv.appendChild(sel);
</script>

11.2.2 Création d'un bouton

 
<p id="zone_test"></p>
 
 
<script>
var myDiv = document.getElementById("zone_test");
 
var sel2 = document.createElement("button");
sel2.onclick = function() { A(); }
sel2.innerHTML = 'click me';
myDiv.appendChild(sel2);
 
function A()
{
alert("psst2");
}
 
</script>

11.2.3 Création d'une liste de sélection. Solution 2. (moins bien)

Exemple ici.
 
<p id="zone_test"></p>
 
<script>
var myDiv = document.getElementById("zone_test");
var array = ["v1", "v2"];
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
myDiv.appendChild(selectList);
for (var i = 0; i < array.length; i++)
{
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = array[i];
selectList.appendChild(option);
}
<script>

12 Calcul scientifique

Voir mathjs ou numericjs

13 Threads

Cela concerne des processus qui tournent en parallèle.

13.1 Introduction

Dans l'exemple suivant un calcul est lancé ( n=0 → 1 0 6 ) et ne s'arrête pas avant n=1 0 6 . On observe que la fenêtre et les boutons sont bloqués.
Voici un exemple, voir le code avec Ctrl-U.

13.2 Documentation:

Lire multithreading-javascript
Lire workers et webworker

13.3 Exemple simple

Voici un exemple, voir le code avec Ctrl-U et voir aussi le fichier worker.js

13.4 OffScreenCanvas

Pour effectuer du graphique dans un thread séparé:
Offscreencanvas

14 Graphisme

14.1 avec Canvas: dessin en pixels

Voir Canvas
CanvasRendering

14.2 Avec SVG: dessin vectoriel, (pour dessins plus élaborés)

SVG

14.3 Avec WebGL

WebGL

14.4 avec JSROOT

14.4.1 histogrammes

Documentation:
Voici un exemple, voir le code avec Ctrl-U et voir la doc.

14.5 Graphisme 3D avec Three.js

14.5.1 Exemples simples commentés

le code s'obtient par ctrl U.

14.6 Graphisme avec matplotlib de python

14.7 Autres graphismes

15 Notes musicales en html5

16 Librairie Web Audio

Permet la gestion du micro / Hautparleurs en temps réel.
Références:

16.1 Introduction

Le fonctionnement est basé sur un flux audio selon le schéma suivant appelé « AudioContext »:
Source audio  ⇉  modules  ⇉ Destination
où les flèches correspondent à des connections que l'on peut mettre ou enlever.

16.1.1 La « source » peut être:

  1. « Oscillateur »: Un son parmi les wave-formes suivantes: « sinus, square, swatooth, triangle, wave-table » avec amplitude et fréquence ajustable, et un nombre fini de superposition de ces sons. Oscillator_Node , OscillatorNode
  2. « Buffer data »: un son défini par un tableau de valeurs: s( t ) =T( j/dt ) avec dt=1/48000 Hz de durér arbitraire. AudioBufferSourceNode
  3. « Buffer file »: un son lu à partir d'un fichier de valeurs (codé en ogg ou mp3 ou données brutes).
  4. Un micro ou source internet (streaming)

16.1.2 Un module (« Audio node ») peut être:

  1. Un filtre fréquentiel linéaire, i.e. convolution en temps:
    1. Passe bas,
    2. Retard,
    3. Réverbération
    4. Modification du volume(intensité)
  2. Réduction des pics d'intensité
  3. Distortion non linéaire
  4. Module qui « visualise » le signal (sans le changer): AnalyserNode
  5. Module qui sépare un flux en plusieurs flux: ChannelSplitterNode
  6. Module qui rassemble plusieurs flux en un seul flux: ChannelMergerNode

16.1.3 La destination peut être

les hauts parleurs ou un flux internet.

16.2 Exemple de son « oscillator » sur la sortie out

D'après la documentation OscillatorNode, voici les coefs de Fourier c n = a n +i b n ∈ C avec n ∈ N :
  1. Son « sine »: a n =0, b 1 =1, b n ≥ 2 =0.
  2. Son « square »: a n =0, b n odd = 4 n π , b n even =0.
  3. Son « sawtooth »: a n =0, b n = ( -1 ) n+1 2 n π .
  4. Son « triangle »: a n =0, b n = 8 ( π n ) 2 sin ( n π 2 ) .

16.3 Exemple de son « Buffer data » sur la sortie out

Dans cet exemple, on fabrique un signal « source » s( t ) de durée arbitraire que l'on joue en boucle. On le connecte au gain et on connecte le gain à la sortie.
Résultat (voir le code avec Ctrl-U):
index.html

16.4 Exemple de capture du son entrée micro et connecte à sortie

Dans cet exemple qui fonctionne avec Chrome (pas avec firefox??), on ouvre le micro en input et transmet le flux au gain, puis à la sortie.
Résultat (voir le code avec Ctrl-U):
index.html

16.5 Exemple de capture du son entrée micro et récupère les données dans un tableau de chiffres

Résultat (voir le code avec Ctrl-U): index.html

16.6 Comment définir son propre audio node avec AudioWorklet

Example qui joue du son
Utiliser Audio Worklet examples.
Lire cetteintroduction et doc avancée
Ref: Audioworklet.
Doc
Rem: la taille du buffer est de 128 données. Sinon il faut utiliser l'astuce du « ring buffer » expliqué ici: ring buffer

16.6.1 Exemple

Dans cet exemple, on fabrique un module (audionode) qui recoit les données en entrée et les renvoit multipliées par une valeur (le gain).
En entrée on branche un « oscillateur » à 440 Hz.
De plus on branche un oscillateur à 0.5 Hz sur le gain. En option dans le code on impose un comportement temporel du gain p( t )
Résultat (voir le code avec Ctrl-U): index.html

16.7 AudioWorklet and Webassembly

ref: Audioworklet and WEBASM
Librairie WebAudioet Emscripten? et docs
Audioworklet and Wasm example
web-audio-samples/audio-worklet/

16.7.1 Exemple:

github code

16.8 Slides, presentations

16.9 Examples

16.10 Audio references:

16.10.1 JUCE and WEBASM

JUCE and WEBASM
Video sur youtube

16.11 Tutorial

17 Web Midi

Il faut utiliser le navigateur chrome.

17.1 Script qui détecte et permet de (dé)connecter les controlleurs, et montre les messages MIDI in

Voici le script, voir le code avec Ctrl-U.
Ancien exemple: script.

17.2 Examples

17.3 Informations:

17.4 Autres ressources MIDI

18 USB Devices

This is useful to communicate with arduino devices.
USB:

19 WebXR: virtual reality (VR) and augmented reality (AR) on the Web.

20 Ecriture mathématiques en html5

21 Echange de données sur internet avec AJAX

22 Utilisation des capteurs d'un smartphone

Voir capteurs en javascript.

23 Speech recognition avec web-speech-api

recognition
speaking text
Web Speech API

24 Webassembly, convertir du code C++ en code javascript

Voir emscripting-a-c-library
Voir Chapitre 27 de ce didacticiel

25 Node.js et concurrence

What are callbacks?
Article sur la concurrence.
Node.js
NodeJs Tutorial on W3School

26 My examples

my examples