Math, Tags, Pound Signs and Web Pages

We're going to start with the BoxLang component based format which looks very similar to HTML tags. For example, the <bx:output> component is used to tell the BoxLang server that we want it to process any BoxLang code it finds between the <bx:output> component and the </bx:output> component. Just like in HTML tags,BoxLang components mostly need to be closed.

BoxLang components also can have properties and values. For example,

	<bx:loop from="1" to="10" index="i">
	....
	</bx:loop>

means to start at 1 and do whatever is in between the components 10 times using the variable "i" as a counter. We'll look more at the <bx:loop> component soon but for now, see how the component (bx:loop) has properties (for, to, index) and values (1,10,i)? For the most part, like any other programming language, the thought process is:

  1. What am I trying to accomplish?
  2. What is the component I need to do that?
  3. What are the properties and values that that component needs in order to do what I want?

Here are some other key issues:

  • All BoxLang pages end in ".bxm", ".bx", or ".bxs". We'll look at .bx and .bxs later so for now, make sure that all of your BoxLang pages end in .bxm.
  • The component format is used almost exclusively when you need to put your BoxLang on the same page or amidst your HTML.
  • BoxLang makes extensive use of the # symbol. It uses it as a signal to the BoxLang Server that it needs to process something. For example, a simple math problem is wrapped in #s like this: #5+3#. When the BoxLang server sees that, it evaluates (or processes) what is in between and displays 8. A simple .bxm page that does this math problem would look like this:
<!doctype html> <--- Every HTML page needs a doc type
<html>   <--- The start of every HTML page
	<head>   <--- The top part of every HTML page
	    <meta charset="utf-8" /> <--- The encoding type that the text of the page is in This means this page is encoded in Unicode-8
	  	<title>Untitled Document</title> <--- The Title of the page, just like every other HTML should have
	</head>   <--- The end of the head tag
	<body>   <--- The start of the body tag, again like every HTML page
      	<bx:output> <--- Tells the BoxLang server to pay attention to this area of the page (this speeds up the process by having the BoxLang server only pay attention the portions for which it is needed).
      	     #5+3# <--- The actual BoxLang code that does the math.
      	</bx:output> <--- The end of the bx:output component
	</body> <--- The end of the body tag
</html> <--- The end of the html document

If the math problem #5+3# is NOT inside of a <bx:output> component, it is just returned to the user as straight HTML so, since #5+3# in HTML is, well....#5+3# (not 8) it doesn't do much good.

Exercise

The following exercise is meant to go into your learnbx folder in the root of your project site.

1
Create a file in your learnbx folder called ```math```

install-bx-module bx-sites

2
Scaffold

bxSites new

Lesson 2 of 12 - Learn BoxLang