Exécuter une action JavaScript

Vue d'ensemble

L'action Exécuter JavaScript vous permet de programmer des événements spécifiques et de lire/fixer des variables Labvanced, mais aussi de contrôler des objets dans votre étude en entrant du JavaScript personnalisé qui s'exécutera comme une action lorsqu'il sera déclenché.

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

Lorsque l'action Exécuter JavaScript ci-dessus est sélectionnée, vous verrez une option pour Environnement d'exécution ainsi que l'éditeur de code où le code JavaScript doit être écrit (où se trouvent certaines 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 :

  • Interpréteur Acorn : Idéal pour les scénarios où seules des opérations de lecture/écriture de variables ont lieu.
  • JavaScript natif : Permet l'exécution de JavaScript personnalisé pour la manipulation directe du Document Object Model (DOM) au sein des expériences, permettant l'édition des éléments à l'écran, ce qui est utile pour intégrer des jeux basés sur JavaScript interactifs et créer un contenu plus dynamique via JavaScript.

Utilisation du JavaScript natif

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

Un ID facile à envisager est l'identifiant background, ce qui permet à d'autres objets Labvanced d'être également présents sur le cadre 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 doit avoir une position absolute pour laquelle vous devez alors définir la largeur et la hauteur :

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 JavaScript natif pour implémenter le jeu Pong dans Labvanced : https://www.labvanced.com/page/library/75148

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