Build Instructions

Blocks

Blocks are the basic building units for creating web applications. They can be categorized by function as follows:

1. Blocks for building the user interface (UI): HTML and Style.
2. Blocks for implementing UI interaction: DOM.
3. Pre-built functions and tools: Widgets, Network, Utils, and Plugins.
4. JavaScript syntax blocks: Logic, Loops, Math, Text, List, as well as Variables and Functions.

Taking the Hello, World! app as an example, first build the UI using HTML and Style, then use DOM to handle the button click interaction. The interaction process uses JavaScript text block. For more complex apps, you'll need more syntax blocks for logic or pre-built functional widgets and tools. These blocks will be explained in detail in the corresponding sections.

Rules

Web applications are generally composed of three different types of markup (languages): HTML (Hypertext Markup Language) for representing UI elements, CSS (Cascading Style Sheets) for styling the appearance, and JavaScript for implementing application logic.

HTML blocks and some UI widget blocks generate HTML markup. Style blocks generate CSS and are applied to the HTML block they are styling. The rest generate JavaScript to manipulate UI elements, handle events, call APIs, or implement functional logic.

Block connection rules:

• HTML blocks can only be connected to other HTML blocks above/below, or inside a C-shaped socket, and must be connected under the root container.
• Style blocks can only be connected in series with other Style blocks and connected to the style socket of the HTML block they style.
• Blocks that generate JavaScript statements are called code blocks. A series of code blocks is called a code segment.
  • The initialize block contains the initialization code segment, which can exist on its own and runs automatically when the app starts.
  • Event blocks start the event's code, connecting the processing code blocks of the event. They can also exist as independent code segments, and run automatically when the event is triggered.
  • Function blocks are independent code segments defined by JavaScript syntax.
  • All code blocks must be connected to one of the above three types of code segments.