דף זה תורגם על ידי Cloud Translation API.

המבנה של בלוק

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

חיבורים

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

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

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

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

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

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

לכל בלוק יש שלושה חיבורים, והשימוש בהם הוא אופציונלי.

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

בלוק math_number.

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

בלוק variables_set.

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

שדות

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

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

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

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

קלט

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

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

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

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

מקורות קלט מדומים

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

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

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

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

או שלוש קלטות דמה, שכל אחת מהן מכילה שדה אחד:

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

קלט בסוף השורה

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

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

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

קלט ערכים

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

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

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

קלט של דוחות

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

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

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

בלוק if-then-else עם קלט נפרד של הצהרות ל-then ול-else.

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

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

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

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

אפשר להתחיל לשחק!

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

סמלים

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

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

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

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

רכיב Blockly	מחלקה בסיסית	מחלקות משנה
חסימה	`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'
      ],
    },
  ]
}