JavaScript 생성 및 실행

Blockly 애플리케이션은 출력 언어로 JavaScript를 생성하는 경우가 많으며, 일반적으로 웹페이지 (동일하거나 삽입된 WebView일 수 있음) 내에서 실행됩니다. 다른 생성기와 마찬가지로 첫 번째 단계는 JavaScript 생성기를 포함하는 것입니다.

import {javascriptGenerator} from 'blockly/javascript';

작업공간에서 JavaScript를 생성하려면 다음을 호출하세요.

javascriptGenerator.addReservedWords('code');
var code = javascriptGenerator.workspaceToCode(workspace);

결과 코드는 대상 웹페이지에서 바로 실행할 수 있습니다.

try {
  eval(code);
} catch (e) {
  alert(e);
}

기본적으로 위의 스니펫은 코드를 생성하고 평가합니다. 하지만 몇 가지 개선사항이 있습니다. 한 가지 개선사항은 런타임 오류가 조용히 실패하는 대신 표시되도록 평가가 try/catch로 래핑된다는 것입니다. 또 다른 개선사항은 code가 예약어 목록에 추가되어 사용자의 코드에 해당 이름의 변수가 포함된 경우 충돌하는 대신 자동으로 이름이 변경된다는 것입니다. 모든 로컬 변수는 이러한 방식으로 예약해야 합니다.

강조 표시 블록

코드가 실행될 때 현재 실행 중인 블록을 강조 표시하면 사용자가 프로그램의 동작을 이해하는 데 도움이 됩니다. JavaScript 코드를 생성하기 전에 STATEMENT_PREFIX를 설정하여 문별로 강조 표시할 수 있습니다.

javascriptGenerator.STATEMENT_PREFIX = 'highlightBlock(%1);\n';
javascriptGenerator.addReservedWords('highlightBlock');

highlightBlock를 정의하여 작업공간에 블록을 표시합니다.

function highlightBlock(id) {
  workspace.highlightBlock(id);
}

이렇게 하면 highlightBlock('123'); 문이 모든 문 앞에 추가됩니다. 여기서 123은 강조 표시할 블록의 일련번호입니다.

무한 루프

결과 코드는 항상 구문상 올바르지만 무한 루프가 포함될 수 있습니다. 중단 문제 해결은 Blockly의 범위를 벗어나므로 (!) 이러한 사례를 처리하는 가장 좋은 방법은 카운터를 유지하고 반복이 실행될 때마다 카운터를 감소시키는 것입니다. 이를 위해 모든 루프와 모든 함수에 삽입될 코드 스니펫에 javascriptGenerator.INFINITE_LOOP_TRAP를 설정하면 됩니다. 예는 다음과 같습니다.

window.LoopTrap = 1000;
javascriptGenerator.INFINITE_LOOP_TRAP = 'if(--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = javascriptGenerator.workspaceToCode(workspace);

예

다음은 JavaScript를 생성하고 실행하는 실시간 데모입니다.

JS-Interpreter

사용자의 블록을 제대로 실행하는 데 관심이 있다면 JS-Interpreter 프로젝트를 사용하는 것이 좋습니다. 이 프로젝트는 Blockly와는 별개이지만 Blockly를 위해 특별히 작성되었습니다.

  • 어떤 속도로든 코드를 실행할 수 있습니다.
  • 실행을 일시중지/다시 시작/단계별로 실행합니다.
  • 블록이 실행될 때 강조 표시합니다.
  • 브라우저의 JavaScript와 완전히 격리됩니다.

인터프리터 실행

먼저 GitHub에서 JS-Interpreter를 다운로드합니다.

그런 다음 페이지에 추가합니다.

<script src="acorn_interpreter.js"></script>

이를 호출하는 가장 간단한 방법은 JavaScript를 생성하고 인터프리터를 만들고 코드를 실행하는 것입니다.

var code = javascriptGenerator.workspaceToCode(workspace);
var myInterpreter = new Interpreter(code);
myInterpreter.run();

인터프리터 단계

코드를 더 느리게 또는 더 제어된 방식으로 실행하려면 run 호출을 단계별로 실행되는 루프로 대체하세요 (이 경우 10ms마다 한 단계).

function nextStep() {
  if (myInterpreter.step()) {
    setTimeout(nextStep, 10);
  }
}
nextStep();

각 단계는 줄이나 블록이 아니라 JavaScript의 의미 단위이며 매우 세분화될 수 있습니다.

API 추가

JS-Interpreter는 브라우저와 완전히 격리된 샌드박스입니다. 외부 세계와 상호작용하는 작업을 실행하는 블록에는 인터프리터에 추가된 API가 필요합니다. 자세한 내용은 JS-Interpreter 문서를 참고하세요. 하지만 먼저 알림 및 프롬프트 블록을 지원하는 데 필요한 API는 다음과 같습니다.

function initApi(interpreter, globalObject) {
  // Add an API function for the alert() block.
  var wrapper = function(text) {
    return alert(arguments.length ? text : '');
  };
  interpreter.setProperty(globalObject, 'alert',
      interpreter.createNativeFunction(wrapper));

  // Add an API function for the prompt() block.
  wrapper = function(text) {
    return prompt(text);
  };
  interpreter.setProperty(globalObject, 'prompt',
      interpreter.createNativeFunction(wrapper));
}

그런 다음 initApi 함수를 전달하도록 인터프리터 초기화를 수정합니다.

var myInterpreter = new Interpreter(code, initApi);

알림 및 프롬프트 블록은 인터프리터에 맞춤 API가 필요한 기본 블록 세트의 유일한 두 블록입니다.

highlightBlock() 연결 중

JS-Interpreter에서 실행할 때 사용자가 프로그램을 단계별로 실행하면 highlightBlock()가 샌드박스 외부에서 즉시 실행되어야 합니다. 이렇게 하려면 함수 인수를 캡처하는 래퍼 함수 highlightBlock()를 만들고 이를 네이티브 함수로 등록합니다.

function initApi(interpreter, globalObject) {
  // Add an API function for highlighting blocks.
  var wrapper = function(id) {
    return workspace.highlightBlock(id);
  };
  interpreter.setProperty(globalObject, 'highlightBlock',
      interpreter.createNativeFunction(wrapper));
}

더 정교한 애플리케이션은 강조 표시 명령에 도달할 때까지 일시중지 없이 단계를 반복적으로 실행한 다음 일시중지할 수 있습니다. 이 전략은 줄별 실행을 시뮬레이션합니다. 아래 예에서는 이 방법을 사용합니다.

JS-Interpreter 예시

다음은 JavaScript를 단계별로 해석하는 실시간 데모입니다. 이 데모에는 대기 블록이 포함되어 있으며, 이는 다른 비동기 동작(예: 음성 또는 오디오, 사용자 입력)에 사용할 수 있는 좋은 예입니다.