המבנה של בלוק

במסמך הזה נסביר על החלקים השונים של בלוק.

חיבורים

חיבורים מגדירים לאילו בלוקים אפשר להתחבר ולאילו בלוקים אפשר להתחבר אליהם.

יש ארבעה סוגים של חיבורים:

סוג החיבור תמונה
חיבור הפלט חיבור פלט
חיבור קלט חיבור קלט
החיבור הקודם חיבור קודם
החיבור הבא החיבור הבא

אפשר לחבר יחד חיבורי פלט וחיבורי קלט, וגם חיבורים הבאים וחיבורים קודמים. אפשר להגביל עוד יותר את החיבורים באמצעות בדיקות חיבור.

אפשר להתאים אישית את הצורות של החיבורים באמצעות רכיב עיבוד בהתאמה אישית.

חיבורים ברמה העליונה

לבלוקים יש שלושה חיבורים שאפשר להשתמש בהם או לא.

לבלוק יכול להיות חיבור פלט יחיד, שמיוצג כחיבור פאזל זכרי בקצה המוביל של הבלוק. חיבור פלט מעביר את הערך (הביטוי) של בלוק לבלוק אחר. בלוק עם חיבור פלט נקרא בלוק ערך.

בלוק math_number.

יכול להיות שלבלוק יהיה חיבור קודם בחלק העליון שלו (מיוצג כחריץ) וחיבור הבא בחלק התחתון שלו (מיוצג ככרטיסייה). הם מאפשרים להציב בלוקים אחד מעל השני, כדי לייצג רצף של הצהרות. בלוק בלי חיבור פלט נקרא בלוק הצהרה, ובדרך כלל יש לו חיבורים קודמים וחיבורים הבאים.

בלוק variables_set

מידע נוסף זמין במאמר חיבורים ברמה העליונה.

שדות

השדות מגדירים את רוב רכיבי ממשק המשתמש בבלוק. הם כוללים תוויות מחרוזות, תפריטים נפתחים, תיבות סימון, תמונות וקלט לנתוני literal כמו מחרוזות ומספרים. לדוגמה, בלוק הלולאה הזה משתמש בשדות של תוויות, בשדה של תפריט נפתח ובשדות של מספרים.

בלוק עם כמה שדות.

‫Blockly מספק מספר שדות מובנים, כולל שדות לקלט טקסט, בוררי צבעים ותמונות. אפשר גם ליצור שדות משלכם.

מידע נוסף זמין במאמר בנושא שדות.

קלט

שדות להזנת נתונים הם קונטיינרים של שדות וחיבורים. בלוק נוצר על ידי עיבוד הקלט שלו בשורה אחת או יותר כמו לבנים.

יש ארבעה סוגים שונים של קלט, שכולם יכולים להכיל שדות (כולל תוויות), ושניים מהם מכילים חיבור יחיד. אפשר גם ליצור קלט בהתאמה אישית, שתומך בעיבוד בהתאמה אישית.

סוג קלט סוג החיבור תמונה
קלט פיקטיבי ללא קלט פיקטיבי
קלט בסוף השורה ללא קלט בסוף השורה
ערך קלט חיבור קלט ערך קלט
קלט של הצהרה החיבור הבא קלט של דף חשבון

נציג את סוגי האותות האלה באמצעות סדרת דוגמאות. מידע על הגדרת הקלט, החיבורים והשדות שמרכיבים בלוק מופיע במאמרים מבנה הבלוק ב-JSON ומבנה הבלוק ב-JavaScript.

קלט פיקטיבי

קלט פיקטיבי הוא רק מאגר לשדות – אין לו חיבור. לדוגמה, בלוק המספרים הבא כולל קלט פיקטיבי יחיד שמכיל שדה מספר יחיד.

בלוק מספרים עם קלט פיקטיבי ושדה מספרים.

דוגמה מורכבת יותר: בלוק שמחבר שני מספרים. אפשר ליצור את זה מקלט פיקטיבי יחיד עם שלושה שדות (מספר, תווית, מספר):

בלוק חיבור שנבנה מקלט פיקטיבי עם שלושה שדות.

או שלוש כניסות פיקטיביות, כל אחת עם שדה יחיד:

בלוק של פעולת חיבור שנבנה משלושה קלטי דמה, כל אחד במשקל של שדה יחיד.

הקלדות בסוף השורה

‫Blockly משתמשת בהיוריסטיקה כדי להחליט אם להציג את כל קלט בשורה אחת או להציג כל קלט בשורה נפרדת. כדי לוודא שקלט מסוים יתחיל שורה חדשה, צריך להשתמש בקלט לסיום שורה כקלט הקודם.

בדומה לקלט פיקטיבי, קלט בסוף השורה יכול להכיל שדות אבל לא מכיל חיבור. לדוגמה, הנה בלוק של פעולת חיבור שנבנה מקלט של סוף שורה עם שני שדות ומקלט פיקטיבי עם שדה אחד. הקלט בסוף השורה מכריח את הקלט הפיקטיבי לעבור לשורה חדשה.

בלוק של תרגיל חיבור שמפוצל לשתי שורות בגלל קלט של סוף שורה.

ערכי קלט

יש מגבלות על סוגי הערכים שאפשר להזין בשדות. לדוגמה, בשדות של מספרים אפשר להזין רק מספרים. אבל מה קורה אם רוצים לחבר בין שני משתנים? או להוסיף את התוצאה של קריאה לפרוצדורה לתוצאה של חישוב אחר? כדי לפתור את הבעיה הזו, צריך להשתמש בחיבורי קלט במקום בשדות. כך משתמשים יכולים להשתמש בבלוקים של ערכים כערכי קלט.

קלט ערך מכיל אפס שדות או יותר ומסתיים בחיבור קלט. הבלוק הבא מחליף את שדות המספרים בבלוק החיבור בחיבורי קלט. הוא מורכב משני קלטים של ערכים – הראשון לא מכיל שדות, והשני מכיל שדה של תווית. שני הכבלים מסתיימים בחיבורי קלט.

בלוק חיבור עם שני ערכי קלט.

הקלט של הדוח

סוג הקלט האחרון הוא קלט של הצהרה, שמכיל אפס או יותר שדות ומסתיים בחיבור הבא. בחיבור הבא אפשר להכניס בלוק של הצהרות לתוך הבלוק. לדוגמה, נניח שיש לכם את בלוק החזרה הבא. השורה השנייה של הבלוק הזה כוללת קלט של הצהרה עם שדה תווית יחיד וחיבור הבא.

בלוק חוזר עם קלט הצהרה להטמעה של הצהרות חוזרות.

הנתונים של הדוחות תמיד מוצגים בשורה נפרדת. אפשר לראות את זה בבלוק if-then-else הבא, שכולל קלט ערך בשורה הראשונה וקלט הצהרה בשתי השורות הבאות.

בלוק if-then-else עם קלט נפרד של משפטי then ו-else.

קלט מוטבע לעומת קלט חיצוני

אפשר לעבד את הקלט בתוך הדף או בנפרד. ההגדרה הזו קובעת אם המחברים של קלט הערכים מוצגים בתוך הבלוק (בתוך השורה) או בקצה החיצוני (מחוץ לשורה), וגם אם הקלט מוצג באותה שורה או בשורות שונות.

אותו בלוק שעבר עיבוד פעם אחת עם קלט מוטבע ופעם אחת עם קלט חיצוני.

כשיוצרים בלוק בהתאמה אישית, אפשר לציין באיזה בלוק להשתמש או לאפשר ל-Blockly להחליט בשבילכם. מידע נוסף זמין במאמר בנושא קלט מוטבע לעומת קלט חיצוני.

אז קדימה, לכו לשחק!

הדרך הכי טובה ללמוד על קלט, שדות וחיבורים היא ליצור בלוקים בכלי הפיתוח של Blockly ולבחור הגדרות שונות בתפריט הנפתח inputs (automatic,‏ external,‏ inline).

סמלים

בנוסף לקלט, לחיבורים ולשדות, יכולים להיות לבלוקים סמלים. יש להם מגוון שימושים, כמו הצגת אזהרות, הזנת הערות ברמת הבלוק או הצגת ממשק המשתמש של הפונקציה לשינוי המאפיינים. לדוגמה, הנה בלוק עם סמל של תגובה והכלי לעריכה שמשויך אליו.

בלוק עם סמל של תגובה וכלי לעריכת תגובה פתוחה.

מידע נוסף זמין במאמר בנושא Icons.

בלוקים ואובייקטים של JavaScript

בלוקים, קלט, חיבורים, שדות וסמלים הם אובייקטים של JavaScript.

רכיב Blockly מחלקה בסיסית Subclasses
חסימה Block BlockSvg
קלט Input DummyInput
EndRowInput
ValueInput
StatementInput
קלט מותאם אישית
חיבור Connection RenderedConnection
שדה Field FieldTextInput
FieldNumber
FieldLabel
שדה מותאם אישית
וכו'
סמל 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'
      ],
    },
  ]
}