danielhagnoul

Envoyé par danielhagnoul

C'est réalisable !

En partant de How to get the pixel color from a canvas on click or mouse event with Javascript on arrive facilement à gérer un clic sur une couleur précise.

Ici on autorise un clic sur une des petites fenêtres du bus, couleur '#2cb0cf'.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<canvas id="canvas" width="150" height="150"></canvas>

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
window.addEventListener('load', ev => {
    // le DOM

...

Il n'est pas possible de distinguer un reload d'un load puisque les deux génèrent le même type d'événement 'load', mais on peut se servir du sessionStorage.

Exemple :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    console.log(`La page est chargée ou rechargée : ${ev.type}`);
 
    // recharge la page web toutes les 5 secondes

...

Envoyé par https://developer.mozilla.org/fr/docs/Glossaire/IIFE

IIFE (Immediately Invoked Function Expression) (Expression de fonction invoquée immédiatement) est une fonction JavaScript qui est exécutée dès qu'elle est définie.

C'est un modèle de conception qui est également connu sous le nom de Fonction anonyme auto-exécutable et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le groupement opérateur(). Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la

...

Depuis la version 1.8.1, ajout de kWrap et de kObjIterate, voir les billets précédents.

Pour le tester :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/locale/fr.js"></script>
<script src="https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.5.js"></script>

...

On construit des objets de différentes manières et on liste la composition des objets.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// construction d'un objet à partir d'Array
let Obj = Object.fromEntries([
    ['foo', 1],
    ['bar', 2]
]);
 
// objet JSON classique
let unObj = {
    nom: 'Jean',
}
 
//ajout de unObj dans Obj
Obj.monObj = unObj;
 
// construction d'un auttre objet
let autreObj = {
    ...Obj, // clonage

...