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

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

การติดต่อ

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

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

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

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

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

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

บล็อกมีการเชื่อมต่อ 3 รายการซึ่งจะใช้หรือไม่ก็ได้

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

บล็อก 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 รายการ

ข้อมูลรายการเคลื่อนไหว

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

บล็อกการทำซ้ำที่มีการป้อนคำสั่งเพื่อซ้อนคำสั่งที่ทำซ้ำ

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

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

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

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

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

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

ไปเล่นกันเลย

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

ไอคอน

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

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

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

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

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

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

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

บล็อกลูปที่มีฟิลด์ตัวแปร อินพุตค่าสำหรับ to, from และ by รวมถึงอินพุตคำสั่งสำหรับคำสั่งที่ทำซ้ำ

สอดคล้องกับโครงสร้างออบเจ็กต์ 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'
      ],
    },
  ]
}