แบบสำรวจการวิจัย: บอกให้เราทราบเกี่ยวกับประสบการณ์การใช้งาน Blockly
เริ่มแบบสำรวจ
การสร้างโค้ด
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
การสร้างโค้ดคือกระบวนการเปลี่ยนบล็อกในพื้นที่ทํางานให้เป็นสตริงโค้ดที่ดําเนินการได้
การสร้างโค้ดมีความสําคัญอย่างยิ่ง เนื่องจากเป็นสิ่งทําให้บล็อกทําสิ่งต่างๆ ได้จริง เช่น ประเมินนิพจน์ทางคณิตศาสตร์ ย้ายตัวละครผ่านเขาวงกต หรือกําหนดค่าร้านค้าออนไลน์
คุณไม่สามารถ "เรียกใช้" บล็อกโดยตรง แต่ให้สร้างสตริงโค้ด แล้วเรียกใช้สตริงเหล่านั้นแทน
เครื่องมือสร้างรหัสภาษา
หากต้องการสร้างโค้ด คุณต้องเลือกภาษาแบบข้อความที่ต้องการสร้าง เนื่องจากแต่ละภาษามีเครื่องมือสร้างโค้ดของตัวเอง
เครื่องมือสร้างโค้ดภาษา (หรือที่เรียกกันทั่วไปว่าเครื่องมือสร้างโค้ด) คือคลาสที่จัดการกฎในการสร้างโค้ดสำหรับภาษาหนึ่งๆ โดยเฉพาะ แต่ไม่ใช่สำหรับแต่ละบล็อก เช่น จัดการเรื่องต่างๆ เช่น การจัดรูปแบบความคิดเห็น การเยื้องคำสั่ง และการยกข้อความ
Blockly มีเครื่องมือสร้างโค้ดในตัว 5 รายการ ดังนี้
- JavaScript ES5
- Python 3
- Lua 5.1
- Dart 2
- PHP 7
หากรายการนี้ไม่มีภาษาที่คุณต้องการสร้างโค้ด คุณสามารถสร้างเครื่องมือสร้างรหัสภาษาที่กำหนดเองได้ ดูตัวอย่างง่ายๆ ได้ที่ Codelab สร้างเครื่องมือสร้างที่กำหนดเอง ซึ่งจะสร้างเครื่องมือสร้างโค้ดภาษา JSON ดูตัวอย่างที่ซับซ้อนมากขึ้นได้ที่เครื่องมือสร้างโค้ด JavaScript โปรดทราบว่าคุณต้องเขียนตัวสร้างโค้ดบล็อกสําหรับบล็อกในตัวที่ต้องการใช้ด้วย
เครื่องมือสร้างโค้ดบล็อก
แต่ละบล็อกมีหน้าที่สร้างโค้ดของตนเอง เมื่อสร้างบล็อก คุณจะต้องเขียนเครื่องมือสร้างโค้ดบล็อกแยกต่างหากสำหรับแต่ละภาษาที่ต้องการรองรับ
เครื่องมือสร้างโค้ดบล็อกคือฟังก์ชันที่แสดงผลโค้ดของบล็อกนั้นในรูปแบบสตริง เช่น บล็อกที่เปรียบเทียบตัวเลข 2 รายการจะแสดงผลสตริงในรูปแบบ 'a < b' และบล็อกที่แสดงคำสั่ง if จะแสดงผลสตริงในรูปแบบ 'if (...) {\n...\n};\n'
import {javascriptGenerator} from 'blockly/javascript';
import {pythonGenerator} from 'blockly/python';
// Write block-code generators for JavaScript and Python.
javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };
เครื่องมือสร้างโค้ดบล็อกจะเรียกใช้โดยเครื่องมือสร้างโค้ดภาษา
ดูข้อมูลเพิ่มเติมได้ที่เครื่องมือสร้าง
สร้างและเรียกใช้โค้ด
แอปพลิเคชันจะสร้างรหัสได้ทุกเมื่อ เช่น อาจมีการสร้างโค้ดเมื่อผู้ใช้ปลายทางคลิกปุ่มหรือทุกครั้งที่ผู้ใช้ทําการเปลี่ยนแปลง
หลังจากสร้างโค้ดแล้ว คุณต้องหาวิธีเรียกใช้
การเลือกวิธีดำเนินการจะขึ้นอยู่กับแอปพลิเคชันนั้นๆ และอยู่นอกขอบเขตของ Blockly
ดูข้อมูลเพิ่มเติมได้ที่สร้างและเรียกใช้โค้ด
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-25 UTC
[null,null,["อัปเดตล่าสุด 2025-07-25 UTC"],[[["\u003cp\u003eCode generation transforms Blockly blocks into executable code strings in various programming languages like JavaScript, Python, Lua, Dart, and PHP.\u003c/p\u003e\n"],["\u003cp\u003eBlockly offers built-in code generators for these languages, accessible through modules, Unpkg, or local scripts, along with the option to create custom generators.\u003c/p\u003e\n"],["\u003cp\u003eGenerating code involves defining how individual blocks translate to code in each target language, including handling fields, inner blocks, and code concatenation.\u003c/p\u003e\n"],["\u003cp\u003eCode generation can be triggered on demand or continuously as the user interacts with the blocks, allowing for dynamic updates and code execution.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can add preamble or postscript code to the generated output for including external definitions or initiating specific behaviors.\u003c/p\u003e\n"]]],["Code generation transforms visual blocks into executable code strings. A code generator handles language-specific formatting. Blockly offers built-in generators for JavaScript, Python, Lua, Dart, and PHP, accessible via modules, Unpkg, or local scripts. Custom generators are also supported. Each block's code generation rules must be defined per language. Generation occurs on demand or continuously via event listeners. Optional preamble/postscript code can be added. Execution of generated code is application-specific, and for JavaScript, JSInterpreter is suggested.\n"],null,["# Code generation is the process of turning the blocks on a workspace into a\nstring of code that can be executed.\n\nCode generation is extremely important, because it is what allows your blocks to\nactually *do* things, like evaluate arithmetic expressions, move a character\nthrough a maze, or configure an online shop!\n\nYou can't \"run\" blocks directly. Instead you generate code strings, and then\nexecute those.\n\nLanguage code generators\n------------------------\n\nTo generate code, you have to pick what text-based language you want to\ngenerate. This is because each language has its own code generator.\n\nA **language code generator** (commonly called a **code generator**) is a class\nthat handles the rules for generating code that are specific to a given\nlanguage, but not specific to an individual block. For example, it handles\nthings like formatting comments, indenting statements, and quoting strings.\n\nBlockly provides 5 built-in code generators:\n\n- JavaScript ES5\n- Python 3\n- Lua 5.1\n- Dart 2\n- PHP 7\n\nIf this list doesn't include the language you want to generate code for, you can\ncreate a custom language code generator. For a simple example, see the [Build a\ncustom generator](https://blocklycodelabs.dev/codelabs/custom-generator/index.html?index=..%2F..index#0) codelab, which creates a JSON language\ncode generator. For a more complex example, see the [JavaScript code\ngenerator](https://github.com/google/blockly/blob/master/generators/javascript/javascript_generator.ts). Note that you also need to write block-code\ngenerators for any built-in blocks that you want to use.\n\nBlock-code generators\n---------------------\n\nEach block is responsible for generating its own code. When you create a block,\nyou need to write a separate block-code generator for each language you want to\nsupport.\n\nA **block-code generator** is a function that returns the code for that block as\na string. For example, a block that compares two numbers returns a string of the\nform `'a \u003c b'` and a block that represents an if statement returns a string of\nthe form `'if (...) {\\n...\\n};\\n'`. \n\n import {javascriptGenerator} from 'blockly/javascript';\n import {pythonGenerator} from 'blockly/python';\n\n // Write block-code generators for JavaScript and Python.\n javascriptGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n pythonGenerator.forBlock['my_custom_block'] = function(block, generator) { /* ... */ };\n\nBlock-code generators are called by language code generators.\n\nFor more information, see [Block-code\ngenerators](/blockly/guides/create-custom-blocks/code-generation/block-code).\n\nGenerate and run code\n---------------------\n\nYour application can generate code at any time. For example, it might generate\ncode when the end-user clicks a button or every time the user makes a change.\n\nAfter you've generated the code, you need to figure out how to execute it.\nDeciding how to execute it is very application-specific, and outside the scope\nof Blockly.\n\nFor more information, see [Generate and run\ncode](/blockly/guides/app-integration/run-code)."]]
