إنشاء JavaScript وتشغيلها

غالبًا ما تنشئ التطبيقات المحظورة 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 إلى قائمة المواقع الإلكترونية المحجوزة. بحيث إذا كانت التعليمات البرمجية للمستخدم تحتوي على متغير بهذا الاسم، إعادة تسميتها تلقائيًا بدلاً من أن تتضارب. يجب أن تكون أي متغيرات محلية حجزها بهذه الطريقة.

مجموعات اللحظات المميّزة

يساعد إبراز المجموعة التي يتم تنفيذها حاليًا أثناء تشغيل الرمز البرمجي المستخدمين فهم سلوك برنامجهم. يمكن إجراء التمييز على على مستوى كل بيان على حدة من خلال ضبط STATEMENT_PREFIX قبل إنشاء رمز JavaScript:

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

حدِّد highlightBlock لوضع علامة على الكتلة في مساحة العمل.

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

ينتج عن ذلك إضافة العبارة highlightBlock('123'); إلى قبل كل عبارة، حيث يشير 123 إلى الرقم التسلسلي للجزء المطلوب بارزة.

تكرارات لانهائية

على الرغم من أنّه يتم ضمان صحة البنية النحوية للرمز البرمجي الناتج في جميع الأوقات، إلا أنّه قد يحتوي على حلقات لا نهائية. نظرًا لأن حل يعد إيقاف المشكلة أكثر من يتمثل أفضل نهج للتعامل مع هذه الحالات في نطاق كتلة (!) هو الاحتفاظ بالعدّاد وخفضه في كل مرة يتم فيها إجراء تكرار. لتحقيق ذلك، ما عليك سوى ضبط 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

إذا كنت جادًا في إدارة الوحدات الإعلانية للمستخدم بشكل صحيح، مشروع ترجمة JavaScript هو السبيل لذلك. هذا المشروع منفصل عن Blockly، ولكنه مكتوب خصيصًا لـ Blockly.

• تنفيذ الرمز البرمجي بأي سرعة
• الإيقاف المؤقت/الاستئناف/التنفيذ خطوة بخطوة.
• تمييز الوحدات أثناء تنفيذها.
• معزولة بالكامل عن JavaScript في المتصفح.

تشغيل ميزة "الترجمة الفورية"

أولاً، نزِّل JS-Interpreter من GitHub:

بعد ذلك، يمكنك إضافته إلى صفحتك:

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

وأبسط طريقة لطلب البيانات هي إنشاء ملفات JavaScript ومترجم، وتشغيل التعليمة البرمجية:

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

تخطّي أداة الترجمة الفورية

لتنفيذ الرمز البرمجي بشكل أبطأ أو بطريقة أكثر تحكّمًا، استبدِل الطلب إلى run بحلقة تتضمّن خطوات (في هذه الحالة خطوة واحدة كل 10 مللي ثانية):

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

لاحظ أن كل خطوة ليست خطًا أو كتلة، إنها وحدة دلالية في لغة JavaScript، بما أنّها قد تتضمّن محتوى أكثر دقة.

إضافة واجهة برمجة تطبيقات

إن مترجم JavaScript عبارة عن وضع حماية معزول تمامًا عن المتصفح. تتطلّب أيّ كتل تُنفِّذ إجراءات مع العالم الخارجي إضافة واجهة برمجة تطبيقات إلى مترجم النصوص البرمجية. للحصول على وصف كامل، يُرجى مراجعة مستندات أداة ترجمة JavaScript: في البداية، نقدّم لك واجهة برمجة التطبيقات اللازمة لإتاحة التنبيهات وعمليات حظر الطلبات:

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);

مجموعات التنبيهات والطلبات هما الكتلتان الوحيدتان في المجموعة التلقائية من الوحدات التي تتطلّب واجهة برمجة تطبيقات مخصَّصة للمترجم الفوري

يتم الآن الاتصال بـ highlightBlock()

عند تشغيل ميزة "الترجمة الفورية" في JavaScript، يجب تنفيذ "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));
}

قد ترغب التطبيقات الأكثر تطورًا في تنفيذ الخطوات بشكل متكرر بدون سيتوقف مؤقتًا إلى أن يتم الوصول إلى أمر تمييز، ثم توقف مؤقتًا. تحاكي هذه الاستراتيجية والتنفيذ سطرًا تلو الآخر. يستخدم المثال أدناه هذه الطريقة.

مثال على ترجمة JavaScript

في ما يلي عرض توضيحي مباشر لتفسير JavaScript خطوة بخطوة. و هذا العرض التوضيحي يتضمّن كتلة انتظار، وهو مثال جيد يمكن استخدامه مع السلوكيات غير المتزامنة الأخرى (مثل الكلام أو الصوت أو إدخال المستخدم).