Tài liệu này khám phá các phần khác nhau của một khối.
Kết nối
Kết nối xác định vị trí mà các khối có thể kết nối và loại khối mà chúng có thể kết nối.
Có 4 loại kết nối:
| Loại kết nối | Hình ảnh |
|---|---|
| Đầu nối đầu ra |  |
| Đầu nối đầu vào |  |
| Kết nối trước |  |
| Lần kết nối tiếp theo |  |
Các kết nối đầu ra và kết nối đầu vào có thể kết nối với nhau, đồng thời các kết nối tiếp theo và kết nối trước đó có thể kết nối với nhau. Bạn có thể hạn chế thêm các kết nối bằng kiểm tra kết nối.
Bạn có thể tuỳ chỉnh hình dạng của các mối kết nối bằng trình kết xuất tuỳ chỉnh.
Các mối kết nối cấp cao nhất
Các khối có 3 cổng kết nối không bắt buộc.
Một khối có thể có một kết nối đầu ra duy nhất, được biểu thị dưới dạng một giắc cắm ghép hình răng cưa ở cạnh trước của khối. Một kết nối đầu ra sẽ truyền giá trị (biểu thức) của một khối đến một khối khác. Khối có kết nối đầu ra được gọi là khối giá trị.
Một khối có thể có một kết nối trước đó ở trên cùng (được biểu thị dưới dạng một rãnh) và một kết nối tiếp theo ở dưới cùng (được biểu thị dưới dạng một thẻ). Các khối này cho phép xếp chồng theo chiều dọc, biểu thị một chuỗi câu lệnh. Một khối không có kết nối đầu ra được gọi là khối câu lệnh và thường có cả kết nối trước và kết nối tiếp theo.
Để biết thêm thông tin, hãy xem phần Các kết nối cấp cao nhất.
Trường
Trường xác định phần lớn các phần tử giao diện người dùng trong một khối. Những thành phần này bao gồm nhãn chuỗi, trình đơn thả xuống, hộp đánh dấu, hình ảnh và dữ liệu đầu vào cho dữ liệu chữ, chẳng hạn như chuỗi và số. Ví dụ: khối vòng lặp này sử dụng các trường nhãn, trường trình đơn thả xuống và trường số.
Blockly cung cấp một số trường tích hợp sẵn, bao gồm cả đầu vào văn bản, bộ chọn màu và hình ảnh. Bạn cũng có thể tạo các trường riêng.
Để biết thêm thông tin, hãy xem phần Trường.
Thông tin đầu vào
Đầu vào là vùng chứa cho các trường và kết nối. Một khối được tạo bằng cách kết xuất các đầu vào của khối đó thành một hoặc nhiều hàng như các viên gạch.
Có 4 loại đầu vào, tất cả đều có thể chứa các trường (bao gồm cả nhãn) và 2 loại trong số đó chứa một kết nối duy nhất. Bạn cũng có thể tạo các dữ liệu đầu vào tuỳ chỉnh hỗ trợ hoạt động kết xuất tuỳ chỉnh.
| Loại mục nhập | Loại kết nối | Hình ảnh |
|---|---|---|
| Đầu vào giả | Không có |  |
| Đầu vào cuối hàng | Không có | |
| Nhập giá trị | Đầu nối đầu vào | |
| Nhập nội dung khai báo | Lần kết nối tiếp theo |  |
Chúng ta sẽ tìm hiểu những dữ liệu đầu vào này thông qua một loạt ví dụ. Để biết thông tin về cách xác định các đầu vào, kết nối và trường tạo nên một khối, hãy xem Cấu trúc khối trong JSON và Cấu trúc khối trong JavaScript.
Đầu vào giả
Đầu vào giả chỉ là một vùng chứa cho các trường – nó không có kết nối. Ví dụ: khối số sau đây có một đầu vào giả duy nhất chứa một trường số duy nhất.
Ví dụ phức tạp hơn, hãy xem xét một khối cộng hai số với nhau. Bạn có thể tạo khối này từ một đầu vào giả duy nhất có 3 trường (số, nhãn, số):
hoặc 3 đầu vào giả, mỗi đầu vào có một trường duy nhất:
Đầu vào cuối hàng
Blockly sử dụng phương pháp phỏng đoán để quyết định có kết xuất tất cả các đầu vào trong một hàng duy nhất hay kết xuất từng đầu vào trong hàng riêng. Nếu bạn muốn đảm bảo rằng một đầu vào bắt đầu một hàng mới, hãy sử dụng đầu vào cuối hàng làm đầu vào trước đó.
Giống như đầu vào giả, đầu vào cuối hàng có thể chứa các trường nhưng không có kết nối. Ví dụ: sau đây là khối cộng được tạo từ một đầu vào cuối hàng có 2 trường và một đầu vào giả có 1 trường. Đầu vào cuối hàng buộc đầu vào giả được kết xuất trong một hàng mới.
Giá trị đầu vào
Các trường có giới hạn về những gì chúng có thể chấp nhận. Ví dụ: các trường số chỉ chấp nhận số. Nhưng nếu bạn muốn cộng hai biến với nhau thì sao? Hoặc thêm kết quả của một lệnh gọi quy trình vào kết quả của một phép tính khác? Để giải quyết vấn đề này, hãy sử dụng các kết nối đầu vào thay vì các trường. Điều này cho phép người dùng sử dụng các khối giá trị làm giá trị đầu vào.
Một đầu vào giá trị chứa từ 0 trường trở lên và kết thúc bằng một kết nối đầu vào. Khối sau đây sẽ thay thế các trường số trong khối cộng bằng các kết nối đầu vào. Thao tác này được tạo từ 2 đầu vào giá trị – đầu vào đầu tiên không chứa bất kỳ trường nào và đầu vào thứ hai chứa một trường nhãn. Cả hai đầu đều là cổng kết nối đầu vào.
Thông tin đầu vào của bảng sao kê
Loại đầu vào cuối cùng là đầu vào câu lệnh, chứa 0 hoặc nhiều trường và kết thúc bằng một kết nối tiếp theo. Kết nối tiếp theo cho phép bạn lồng một ngăn xếp các khối câu lệnh vào bên trong khối của mình. Ví dụ: hãy xem xét khối lặp lại sau đây. Hàng thứ hai của khối này bao gồm một đầu vào câu lệnh có một trường nhãn duy nhất và một kết nối tiếp theo.
Các đầu vào của câu lệnh luôn được hiển thị trong hàng riêng. Bạn có thể thấy điều này trong khối if-then-else sau đây, có một đầu vào giá trị ở hàng đầu tiên và đầu vào câu lệnh ở hai hàng tiếp theo.
Đầu vào nội tuyến so với đầu vào bên ngoài
Bạn có thể kết xuất các giá trị đầu vào nội tuyến hoặc bên ngoài. Chế độ cài đặt này kiểm soát việc các giắc cắm cho đầu vào giá trị được kết xuất bên trong khối (nội tuyến) hay ở cạnh ngoài (bên ngoài), cũng như việc đầu vào được kết xuất trong cùng một hàng hay các hàng khác nhau.
Khi tạo một khối tuỳ chỉnh, bạn có thể chỉ định khối cần dùng hoặc để Blockly quyết định thay bạn. Để biết thêm thông tin, hãy xem phần Đầu vào nội tuyến so với đầu vào bên ngoài.
Chơi ngay!
Cách tốt nhất để tìm hiểu về đầu vào, trường và mối kết nối là tạo các khối trong Công cụ dành cho nhà phát triển Blockly và chọn các chế độ cài đặt khác nhau cho trình đơn thả xuống inputs (automatic, external, inline).
Biểu tượng
Ngoài các đầu vào, mối kết nối và trường, các khối có thể có một hoặc nhiều biểu tượng. Các khối này có nhiều mục đích sử dụng, chẳng hạn như hiển thị cảnh báo, nhập nhận xét cấp khối hoặc hiển thị giao diện người dùng của chương trình sửa đổi. Ví dụ: đây là một khối có biểu tượng bình luận và trình chỉnh sửa được liên kết.
Để biết thêm thông tin, hãy xem bài viết Icons.
Các khối và đối tượng JavaScript
Các khối, đầu vào, kết nối, trường và biểu tượng đều là các đối tượng JavaScript.
| Thành phần Blockly | Lớp cơ sở | Lớp con |
|---|---|---|
| Chặn | Block |
BlockSvg |
| Đầu vào | Input |
DummyInput |
EndRowInput |
||
ValueInput |
||
StatementInput |
||
| dữ liệu nhập tuỳ chỉnh | ||
| Kết nối | Connection |
RenderedConnection |
| Trường | Field |
FieldTextInput |
FieldNumber |
||
FieldLabel |
||
| trường tuỳ chỉnh | ||
| v.v. | ||
| Biểu tượng | Icon |
CommentIcon |
MutatorIcon |
||
WarningIcon |
||
| biểu tượng tuỳ chỉnh |
Các đối tượng trong một khối tạo thành một đối tượng có hình dạng cây. Việc hiểu cách biểu diễn đồ hoạ của một khối tương ứng với cây này sẽ hữu ích khi bạn viết mã để thao tác với các khối theo phương thức lập trình. Ví dụ: một khối controls_for:
tương ứng với cây đối tượng JavaScript sau đây.
// <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'
],
},
]
}