JavaScriptアクションの実行

概要

Run JavaScriptアクションを使用すると、特定のイベントをプログラムしたり、Labvanced変数を読み書きしたり、実験の中でカスタムJavaScriptを入力して実行することによって、オブジェクトを制御したりできます。

Labvancedアクションメニュー内のJavaScriptを実行アクション。

上記のRun JavaScriptアクションが選択されると、Execution Environmentのオプションと、JavaScriptコードを記述するためのコードエディタが表示されます（ここにはいくつかの役立つ指示があります）：

LabvancedのJavaScriptコードエディタ。

実行環境オプション

ここでは、実行するJavaScriptの性質を指定できます。選択肢は以下の通りです。

Acorn Interpreter: 変数の読み書きのみが行われるシナリオに最適です。
Native JavaScript: 実験内でドキュメントオブジェクトモデル（DOM）を直接操作するためのカスタムJavaScriptの実行を可能にし、インタラクティブなJavaScriptベースのゲームを統合したり、JavaScriptによってより動的なコンテンツを作成するための画面上の要素を編集することができます。

ネイティブJavaScriptの活用

ドキュメントオブジェクトモデル（DOM）内の要素を制御するためにNative JavaScriptを利用する場合、重要な要素の一つは、どのHTMLノードにアタッチするかを知っておくことと、一部のスタイルガイドを考慮することです。

考慮すべき簡単なIDはbackground識別子であり、他のLabvancedオブジェクトもフレームに保持できるようにします。以下の例のようにです：

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

ここに示した例では、gameContainerがカスタムコンテンツのメインコンテナ/ divであり、absoluteポジションを取る必要があり、widthとheightを設定する必要があります：

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

このアプローチの結果は、LabvancedでPong Gameを実装するためにNative JavaScriptオプションを使用したこのデモで見ることができます： https://www.labvanced.com/page/library/75148

Run JavaScriptアクションの一般的な使いやすさについての質問がある場合は、メールまたはチャットでお気軽にお問い合わせください。