โครงสร้างของบล็อก

เอกสารนี้จะอธิบายส่วนต่างๆ ของบล็อก

การติดต่อ

การเชื่อมต่อจะกำหนดตำแหน่งที่บล็อกเชื่อมต่อได้และบล็อกประเภทใดที่เชื่อมต่อได้

การเชื่อมต่อมี 4 ประเภทดังนี้

ประเภทการเชื่อมต่อ รูปภาพ
การเชื่อมต่อเอาต์พุต การเชื่อมต่อเอาต์พุต
การเชื่อมต่ออินพุต การเชื่อมต่ออินพุต
การเชื่อมต่อก่อนหน้า การเชื่อมต่อก่อนหน้า
การเชื่อมต่อถัดไป การเชื่อมต่อครั้งถัดไป

การเชื่อมต่อเอาต์พุตและการเชื่อมต่ออินพุตเชื่อมต่อกันได้ และการเชื่อมต่อถัดไปและการเชื่อมต่อก่อนหน้าเชื่อมต่อกันได้ คุณยังจำกัดการเชื่อมต่อเพิ่มเติมได้ด้วยการตรวจสอบการเชื่อมต่อ

คุณสามารถปรับแต่งรูปร่างของการเชื่อมต่อได้โดยใช้โปรแกรมแสดงผลที่กำหนดเอง

การเชื่อมต่อระดับบนสุด

บล็อกมีการเชื่อมต่อ 3 รายการที่คุณเลือกใช้ได้

บล็อกอาจมีการเชื่อมต่อเอาต์พุตเดียว ซึ่งแสดงเป็นขั้วต่อแบบตัวผู้แบบ Jigsaw ที่ขอบด้านหน้าของบล็อก การเชื่อมต่อเอาต์พุตจะส่งค่า (นิพจน์) ของบล็อกไปยังบล็อกอื่น บล็อกที่มีการเชื่อมต่อเอาต์พุตเรียกว่าบล็อกค่า

บล็อก math_number

บล็อกอาจมีการเชื่อมต่อก่อนหน้าที่ด้านบน (แสดงเป็นรอยบาก) และการเชื่อมต่อถัดไปที่ด้านล่าง (แสดงเป็นแท็บ) ซึ่งช่วยให้วางบล็อกซ้อนกันได้ในแนวตั้งเพื่อแสดงลำดับคำสั่ง บล็อกที่ไม่มีการเชื่อมต่อเอาต์พุตเรียกว่าบล็อกคำสั่ง และมักจะมีการเชื่อมต่อทั้งก่อนหน้าและถัดไป

บล็อก variables_set

ดูข้อมูลเพิ่มเติมได้ที่การเชื่อมต่อระดับบนสุด

ช่อง

ช่องจะกำหนดองค์ประกอบ UI ส่วนใหญ่ภายในบล็อก ซึ่งรวมถึงป้ายกำกับสตริง เมนูแบบเลื่อนลง ช่องทําเครื่องหมาย รูปภาพ และอินพุตสําหรับข้อมูลตัวอักษร เช่น สตริงและตัวเลข เช่น บล็อกลูปนี้ใช้ช่องป้ายกํากับ ช่องเมนูแบบเลื่อนลง และช่องตัวเลข

บล็อกที่มีหลายช่อง

Blockly มีช่องในตัวจํานวนหนึ่ง รวมถึงอินพุตข้อความ เครื่องมือเลือกสี และรูปภาพ นอกจากนี้ คุณยังสร้างช่องของคุณเองได้ด้วย

ดูข้อมูลเพิ่มเติมได้ที่ฟิลด์

อินพุต

อินพุตคือคอนเทนเนอร์สำหรับฟิลด์และการเชื่อมต่อ บล็อกสร้างขึ้นโดยการเรนเดอร์อินพุตในแถวอย่างน้อย 1 แถวเหมือนอิฐ

อินพุตมี 4 ประเภทที่แตกต่างกัน ซึ่งทั้งหมดมีช่อง (รวมถึงป้ายกำกับ) และ 2 ประเภทมีการเชื่อมต่อเดียว นอกจากนี้ คุณยังสร้างอินพุตที่กําหนดเองได้อีกด้วย ซึ่งรองรับการแสดงผลที่กําหนดเอง

ประเภทการป้อนข้อมูล ประเภทการเชื่อมต่อ รูปภาพ
อินพุตจำลอง ไม่มี อินพุตจำลอง
อินพุตสิ้นสุดแถว ไม่มี อินพุตสิ้นสุดแถว
การป้อนค่า การเชื่อมต่ออินพุต อินพุตค่า
การป้อนข้อมูลคำสั่ง การเชื่อมต่อถัดไป การป้อนข้อมูลคำสั่ง

เราจะอธิบายอินพุตเหล่านี้ผ่านตัวอย่างต่างๆ ดูข้อมูลเกี่ยวกับการกำหนดอินพุต การเชื่อมต่อ และช่องที่ประกอบกันเป็นบล็อกได้ที่โครงสร้างบล็อกใน JSON และโครงสร้างบล็อกใน JavaScript

อินพุตจำลอง

อินพุตจำลองเป็นเพียงคอนเทนเนอร์สำหรับฟิลด์เท่านั้น โดยไม่มีการเชื่อมต่อ ตัวอย่างเช่น บล็อกตัวเลขต่อไปนี้มีการป้อนข้อมูลจำลองรายการเดียวซึ่งมีช่องตัวเลขรายการเดียว

บล็อกตัวเลขที่มีอินพุตจำลองและช่องตัวเลข

ตัวอย่างที่ซับซ้อนมากขึ้นคือบล็อกที่บวกตัวเลข 2 รายการเข้าด้วยกัน ข้อมูลนี้สร้างขึ้นจากอินพุตจำลองรายการเดียวที่มี 3 ช่อง (ตัวเลข ป้ายกำกับ และตัวเลข) ดังนี้

บล็อกการเพิ่มที่สร้างจากอินพุตจำลองที่มี 3 ช่อง

หรืออินพุตจำลอง 3 รายการ โดยแต่ละรายการมีช่องเดียว

บล็อกการบวกที่สร้างขึ้นจากอินพุตจำลอง 3 รายการ โดยแต่ละรายการมีฟิลด์เดียว

อินพุตของส่วนท้ายแถว

Blockly ใช้วิธีการหาค่าประมาณเพื่อตัดสินใจว่าจะแสดงผลอินพุตทั้งหมดในแถวเดียว หรือแสดงผลอินพุตแต่ละรายการในแถวของตัวเอง หากต้องการตรวจสอบว่าอินพุตเริ่มต้นแถวใหม่ ให้ใช้อินพุตสิ้นสุดแถวเป็นอินพุตก่อนหน้า

อินพุตสิ้นสุดแถวอาจมีช่อง แต่จะไม่มีการเชื่อมต่อ เช่นเดียวกับอินพุตจำลอง ตัวอย่างเช่น นี่คือบล็อกการเพิ่มที่สร้างจากอินพุตสิ้นสุดแถวที่มี 2 ช่องและอินพุตจำลองที่มี 1 ช่อง อินพุตสิ้นสุดแถวจะบังคับให้ระบบแสดงผลอินพุตจำลองในแถวใหม่

บล็อกการเพิ่มที่แยกออกเป็น 2 แถวโดยอินพุตสิ้นสุดแถว

อินพุตค่า

ช่องจะยอมรับเฉพาะข้อมูลที่จำกัด เช่น ช่องตัวเลขจะยอมรับเฉพาะตัวเลข แต่หากต้องการเพิ่ม 2 ตัวแปรเข้าด้วยกัน หรือจะเพิ่มผลลัพธ์ของการเรียกใช้กระบวนไปยังผลลัพธ์ของการคำนวณอื่น หากต้องการแก้ปัญหานี้ ให้ใช้การเชื่อมต่ออินพุตแทนช่อง ซึ่งช่วยให้ผู้ใช้ใช้บล็อกค่าเป็นค่าอินพุตได้

อินพุตค่ามีช่องตั้งแต่ 0 ช่องขึ้นไปและลงท้ายด้วยการเชื่อมต่ออินพุต บล็อกต่อไปนี้จะแทนที่ช่องตัวเลขในบล็อกการเพิ่มด้วยการเชื่อมต่ออินพุต ซึ่งสร้างขึ้นจากอินพุตค่า 2 รายการ โดยรายการแรกไม่มีช่องใดๆ และรายการที่ 2 มีช่องป้ายกำกับ ทั้ง 2 เส้นสิ้นสุดที่การเชื่อมต่ออินพุต

บล็อกการเพิ่มที่มีอินพุตค่า 2 รายการ

อินพุตของรายการเคลื่อนไหว

อินพุตประเภทสุดท้ายคืออินพุตคำสั่ง ซึ่งมีช่องตั้งแต่ 0 ช่องขึ้นไปและลงท้ายด้วยการเชื่อมต่อถัดไป การเชื่อมต่อถัดไปช่วยให้คุณฝังบล็อกคำสั่งซ้อนกันภายในบล็อกได้ ตัวอย่างเช่น ลองดูบล็อก repeat ต่อไปนี้ แถวที่ 2 ของบล็อกนี้ประกอบด้วยอินพุตคำสั่งที่มีฟิลด์ป้ายกำกับเดี่ยวและการเชื่อมต่อถัดไป

บล็อก "ทำซ้ำ" ที่มีอินพุตคำสั่งเพื่อฝังคำสั่งที่ซ้ำกัน

อินพุตคำสั่งจะแสดงผลในแถวของตัวเองเสมอ คุณจะเห็นสิ่งนี้ในบล็อก if-then-else ต่อไปนี้ ซึ่งมีอินพุตค่าในแถวแรกและอินพุตคำสั่งใน 2 แถวถัดไป

บล็อก if-then-else ที่มีอินพุตคำสั่งแยกต่างหากสำหรับคำสั่ง then และ else

อินพุตในบรรทัดกับอินพุตภายนอก

อินพุตสามารถแสดงผลในหน้าหรือภายนอกก็ได้ ตัวเลือกนี้จะควบคุมว่าจะแสดงผลตัวเชื่อมต่อสำหรับอินพุตค่าภายในบล็อก (แทรกในบรรทัด) หรือที่ขอบด้านนอก (ภายนอก) รวมถึงว่าจะแสดงผลอินพุตในแถวเดียวกันหรือแถวอื่น

บล็อกเดียวกันแสดงผล 1 ครั้งด้วยอินพุตในบรรทัด และ 1 ครั้งด้วยอินพุตภายนอก

เมื่อสร้างบล็อกที่กำหนดเอง คุณจะระบุบล็อกที่จะใช้หรือให้ Blockly ตัดสินใจให้คุณก็ได้ ดูข้อมูลเพิ่มเติมได้ที่อินพุตในบรรทัดกับอินพุตภายนอก

ไปเล่นเลย

วิธีที่ดีที่สุดในการเรียนรู้เกี่ยวกับอินพุต ฟิลด์ และการเชื่อมต่อคือการสร้างบล็อกในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ Blockly แล้วเลือกการตั้งค่าต่างๆ สําหรับเมนูแบบเลื่อนลง inputs (automatic, external, inline)

ไอคอน

นอกจากอินพุต การเชื่อมต่อ และช่องแล้ว บล็อกยังมีไอคอนอย่างน้อย 1 รายการ ซึ่งมีประโยชน์หลายอย่าง เช่น การแสดงคำเตือน การป้อนความคิดเห็นระดับบล็อก หรือการแสดง UI ของตัวแปร ตัวอย่างเช่น นี่เป็นบล็อกที่มีไอคอนความคิดเห็นและเครื่องมือแก้ไขที่เกี่ยวข้อง

บล็อกที่มีไอคอนความคิดเห็นและเครื่องมือแก้ไขความคิดเห็นที่เปิดอยู่

ดูข้อมูลเพิ่มเติมได้ที่ไอคอน

บล็อกและออบเจ็กต์ JavaScript

บล็อก อินพุต การเชื่อมต่อ ฟิลด์ และไอคอนล้วนแต่เป็นออบเจ็กต์ JavaScript

คอมโพเนนต์ Blockly คลาสพื้นฐาน คลาสย่อย
บล็อก Block BlockSvg
อินพุต Input DummyInput
EndRowInput
ValueInput
StatementInput
อินพุตที่กำหนดเอง
การเชื่อมต่อ Connection RenderedConnection
ช่อง Field FieldTextInput
FieldNumber
FieldLabel
ฟิลด์ที่กำหนดเอง
ฯลฯ
Icon Icon CommentIcon
MutatorIcon
WarningIcon
ไอคอนที่กำหนดเอง

วัตถุในบล็อกจะรวมกันเป็นวัตถุรูปต้นไม้ การทําความเข้าใจวิธีที่การนําเสนอแบบกราฟิกของบล็อกสอดคล้องกับต้นไม้นี้มีประโยชน์เมื่อคุณเขียนโค้ดเพื่อจัดการบล็อกแบบเป็นโปรแกรม ตัวอย่างเช่น บล็อก controls_for

บล็อกลูปที่มีช่องตัวแปร อินพุตค่าสำหรับ "ถึง" "จาก" และ "ตาม" รวมถึงอินพุตคำสั่งสําหรับคำสั่งที่ซ้ำกัน

สอดคล้องกับต้นไม้ออบเจ็กต์ JavaScript ต่อไปนี้

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}