Velo applies syntax highlighting to the code that you write in the code editor. That means certain parts of your code appear in different colors and font weights depending on their purpose. Syntax highlighting makes it easier for you read and write your code.
In this article, we describe the highlighting of some of the most common syntactic elements. We use the following form and page code that calculates the area of a circle based on a given radius.
Keywords are words that have a special meaning in a programming language. For example, in JavaScript, let
, function
, and return
are all keywords.
Function declarations include a function name. The function name is used when calling the function in other parts of your code. For example, the calculateArea
function defined on line 11 in the example below is called on line 5.
Function declarations may include one or more function parameters. The function parameters serve as the names of the arguments passed to the function. For example, the calculateArea
function defined on line 12 in the example below contains one parameter named radius
. That parameter name is used on line 13 when calculating the area. When the function is called on line 5, the value
of the radiusInput
is the argument passed to the radius
parameter of the calculateArea
function.
String literals come in three different varieties in JavaScript:
Double quoted strings
Single quoted strings
Template strings
In Velo, you will often use string literals to select elements using the $w()
function as shown on line 4 in the example below. You might also use literal values to set the value of an element's property as shown on line 6, set the value of a variable, or pass them as arguments to functions.
Number literals are used to set the value of an element's property, set the value of a variable as shown on line 1 in the example below, or pass them as arguments to functions as shown on line 13.
Comments are parts of your code that are not executed when the code is run. Usually, you add comments to explain what a particular part of your code is doing.