জাভাস্ক্রিপ্ট তৈরি এবং চলমান

ব্লকলি অ্যাপ্লিকেশানগুলি প্রায়ই জাভাস্ক্রিপ্ট তৈরি করে তাদের আউটপুট ভাষা হিসাবে, সাধারণত একটি ওয়েব পৃষ্ঠার মধ্যে চালানোর জন্য (সম্ভবত একই, বা একটি এমবেডেড ওয়েবভিউ)। যেকোনো জেনারেটরের মতো, প্রথম ধাপ হল জাভাস্ক্রিপ্ট জেনারেটর অন্তর্ভুক্ত করা।

import {javascriptGenerator} from 'blockly/javascript';

ওয়ার্কস্পেস থেকে জাভাস্ক্রিপ্ট তৈরি করতে, কল করুন:

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

ফলাফলের কোডটি সরাসরি গন্তব্য ওয়েব পৃষ্ঠায় কার্যকর করা যেতে পারে:

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

মূলত, উপরের স্নিপেটটি কোড তৈরি করে এবং এটিকে ইভাল করে। যাইহোক, কিছু পরিমার্জন আছে. একটি পরিমার্জন হল যে ইভালটি একটি try / catch মধ্যে মোড়ানো হয় যাতে কোনও রানটাইম ত্রুটিগুলি দৃশ্যমান হয়, শান্তভাবে ব্যর্থ হওয়ার পরিবর্তে। আরেকটি পরিমার্জন হল যে code সংরক্ষিত শব্দের তালিকায় যুক্ত করা হয় যাতে ব্যবহারকারীর কোডে সেই নামের একটি পরিবর্তনশীল থাকলে সেটি সংঘর্ষের পরিবর্তে স্বয়ংক্রিয়ভাবে নামকরণ করা হবে। কোন স্থানীয় ভেরিয়েবল এই ভাবে সংরক্ষিত করা উচিত.

হাইলাইট ব্লক

কোড চলার সাথে সাথে বর্তমানে এক্সিকিউটিং ব্লক হাইলাইট করা ব্যবহারকারীদের তাদের প্রোগ্রামের আচরণ বুঝতে সাহায্য করে। জাভাস্ক্রিপ্ট কোড তৈরি করার আগে STATEMENT_PREFIX সেট করে বিবৃতি-দ্বারা-বিবৃতি স্তরে হাইলাইট করা যেতে পারে:

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

উদাহরণ

এখানে জাভাস্ক্রিপ্ট তৈরি এবং কার্যকর করার একটি লাইভ ডেমো রয়েছে।

JS-দোভাষী

আপনি যদি ব্যবহারকারীর ব্লকগুলি সঠিকভাবে চালানোর বিষয়ে গুরুতর হন, তাহলে JS-ইন্টারপ্রেটার প্রকল্পটি যাওয়ার উপায়। এই প্রকল্পটি Blockly থেকে আলাদা, কিন্তু বিশেষভাবে Blockly-এর জন্য লেখা হয়েছিল।

  • যেকোনো গতিতে কোড এক্সিকিউট করুন।
  • বিরতি/পুনরায় শুরু/পদক্ষেপের মাধ্যমে সম্পাদন।
  • তারা কার্যকর করার সাথে সাথে ব্লকগুলিকে হাইলাইট করুন।
  • ব্রাউজারের জাভাস্ক্রিপ্ট থেকে সম্পূর্ণ বিচ্ছিন্ন।

ইন্টারপ্রেটার চালান

প্রথমে, GitHub থেকে JS-Interpreter ডাউনলোড করুন:

Download ZIP FileDownload TAR BallView On GitHub

তারপর এটি আপনার পৃষ্ঠায় যোগ করুন:

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

এটিকে কল করার সবচেয়ে সহজ পদ্ধতি হল জাভাস্ক্রিপ্ট তৈরি করা, দোভাষী তৈরি করা এবং কোড চালানো:

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

দোভাষীকে ধাপ করুন

কোডটি ধীর গতিতে চালানোর জন্য বা আরও নিয়ন্ত্রিত পদ্ধতিতে, একটি লুপ দিয়ে run জন্য কলটি প্রতিস্থাপন করুন যা ধাপে যায় (এই ক্ষেত্রে প্রতি 10 মিসে একটি ধাপে):

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

মনে রাখবেন যে প্রতিটি ধাপ একটি লাইন বা একটি ব্লক নয়, এটি জাভাস্ক্রিপ্টের একটি শব্দার্থিক ইউনিট, যা অত্যন্ত সূক্ষ্ম-দানাদার হতে পারে।

একটি 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-ইন্টারপ্রেটারে চলাকালীন, স্যান্ডবক্সের বাইরে, ব্যবহারকারী প্রোগ্রামের মধ্য দিয়ে যাওয়ার সাথে সাথে highlightBlock() কার্যকর করা উচিত। এটি করার জন্য, ফাংশন আর্গুমেন্ট ক্যাপচার করতে একটি wrapper ফাংশন 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-দোভাষী উদাহরণ

এখানে ধাপে ধাপে জাভাস্ক্রিপ্ট ব্যাখ্যা করার একটি লাইভ ডেমো রয়েছে। এবং এই ডেমোতে একটি অপেক্ষা ব্লক অন্তর্ভুক্ত রয়েছে, অন্যান্য অ্যাসিঙ্ক্রোনাস আচরণের জন্য ব্যবহার করার একটি ভাল উদাহরণ (যেমন, বক্তৃতা বা অডিও, ব্যবহারকারীর ইনপুট)।