Exécuter une action JavaScript

Aperçu

L'action Run JavaScript vous permet de programmer des événements spécifiques et de lire/définir des variables Labvanced, mais aussi de contrôler des objets, dans votre étude en saisissant du JavaScript personnalisé qui s'exécutera en tant qu'action lorsqu'il sera déclenché.

L'action Exécuter JavaScript dans le menu d'action Labvanced.

Lorsque l'action Run JavaScript ci-dessus est sélectionnée, vous verrez une option pour Execution Environment ainsi que l'éditeur de code où le code JavaScript doit être écrit (où se trouvent quelques instructions utiles) :

L'éditeur de code JavaScript dans Labvanced.

Options de l'environnement d'exécution

Ici, vous pouvez spécifier la nature du JavaScript que vous exécutez, les options incluent :

Acorn Interpreter : Idéal pour les scénarios où seule la lecture/écriture de variables se produit.
Native JavaScript : Permet l'exécution de JavaScript personnalisé pour la manipulation directe du Document Object Model (DOM) au sein des expériences, permettant la modification des éléments à l'écran, ce qui est utile pour intégrer des jeux interactifs basés sur JavaScript et créer un contenu plus dynamique via JavaScript.

Utilisation du JavaScript natif

Lors de l'utilisation du Native JavaScript pour contrôler les éléments au sein du Document Object Model (DOM), un facteur important à considérer est de savoir à quel nœud HTML s'attacher, ainsi que de considérer quelques directives de style.

Un ID facile à considérer est l'identifiant background, ce qui permet d'avoir d'autres objets Labvanced sur le cadre également, comme dans l'exemple ci-dessous :

const container = document.getElementById('background');
container.appendChild(gameContainer);

Dans les exemples décrits ici, gameContainer est donc le conteneur principal / div du contenu personnalisé et devrait prendre une position absolute pour laquelle vous devez ensuite définir les width et height :

const gameContainer = document.createElement('div');
gameContainer.style.position = 'absolute';
gameContainer.style.width = window.innerWidth +"px";
gameContainer.style.height = window.innerHeight +"px";

Les résultats d'une telle approche peuvent être vus ici dans cette démo où nous avons utilisé l'option Native JavaScript pour implémenter le jeu Pong dans Labvanced : https://www.labvanced.com/page/library/75148

Pour toute question concernant l'utilisabilité générale de l'action Run JavaScript, n'hésitez pas à nous contacter par e-mail ou chat.