LZX applications can include procedural code, called as well as declarative XML tags. Within an LZX program, script can appear between <script> tagsbetween <method> tagsbetween <handler> tagsbetween quotation marks as an assigned value for an attribute

The quickest way to get a script running is to put it in script<script>[unknown tag] tags. Code in script tags is executed immediately. script<script> tags are only embeddable in the canvas<canvas>[unknown tag] . We can now use our knowledge of JavaScript to build on this foundation:

If you've never worked with JavaScript before, you may be surprised by some subtle features of the language. For example, consider this slight expansion of the preceding program: Everything there is fine, except the "badtext.setAttribute( ??? );" line. Four plus three should be 7, as in the line immediately above it, right? What happened is that we concatenated numbers to strings ((..." is " + first + second)). The next line shows one way to fix this problem. The line after that shows a better way. OpenLaszlo documentation is not intended to provide a complete reference for JavaScript. Later chapters do explain some advanced topics in scripting, but we recommend that you have a JavaScript reference handy while writing LZX.

Let's try a simple "for" loop: <canvas height="80" width="500" debug="true"> <-- the following code will not compile because of the angle bracket --> <script> for (var i = 0; i < 11; i++) { Debug.debug("%d", i); } </script> </canvas> Oops! Because LZX is an XML-based language, there are rules as to what is legal between tags (in particular, script<script> tags). The "<" character in the for loop is what is causing the problem. We are not allowed "<" or ">" characters between LZX tags. Fortunately there are ways around this. The next two examples are not interactive, but they are correct LZX programs <canvas height="120"> <script> for (var i = 0; i &lt; 11; i++) { Debug.debug("%d", i); } </script> </canvas> <canvas height="120"> <script> <![CDATA[ for (var i = 0; i < 11; i++) { Debug.debug("%d", i); } ]]> </script> </canvas> Either of the above two methods will work. Whichever you use is up to you, and of course the particular application. The CDATA method is perhaps a little more practical for larger blocks of code.

You can write functions in script<script> tags. Functions are global to the LZX document, and they follow the same scope rules as JavaScript.

Methods are in some ways similar to functions. They contain blocks of code between method<method>[unknown tag] tags, and are associated with particular classes. In the tutorial, we saw a few methods of the LzViewlz.view class that pertain to resources: play()play()stop()stop()getOffset()getOffset()getMaxOffset()getMaxOffset() Let's explore methods with a simple example of a window. The window<window>[unknown tag] element is actually a view, as we saw before. There are a few methods that apply to it. The windowwindow class extends LzViewlz.view class. This means that windows inherit all the attributes and methods of views. Let's break this statement apart: onclick="this.parent.setAttribute('title', 'You clicked it');" First, there's the onclick= Like all of the on[event] attributes, this one takes JavaScript that will be run in the context of the object when the event is received. The next part: this.parent is a reference to an object. In JavaScript, the scope is generally global unless you say otherwise. That means that any class or instance methods or variables must be preceded by the keyword this. As for the 'parent' part: Let's start by saying that the lzx viewsystem always assigns each view a variable 'parent' which points to that view's hierarchical parent. View hierarchies are discussed in detail in Now we're going to call a method. With very few exceptions, tags in an lzx file correspond to run-time objects of the view system. Using xml, we can configure those objects with attributes and child nodes. Using script, we can call their APIs. From the documentation, we know that the window<window> has a setAttribute()setAttribute() method that will change the window title to whatever string you give it. The last thing to note is the use of single quotes inside the function call.

Remember that windowwindow extends the LzViewlz.view class. That means that each window has all the attributes of a view<view>[unknown tag] . Here's an example of how to use script to manipulate some of those assets. We're just building on the previous example here. Instead of addressing the parent view of the button, we are going two up, then one down. this.parent.parent refers to the canvas, and we point to Window 2 by using its namename (windowTwo). We are also using the setAttribute()setAttribute() method, which takes two arguments: the attribute to set, and what to set it to. Next, let's find a way to move Window 2 over so that we can see what's behind it, without dragging it. Clicking the button twice doesn't help, because all that does is reset the x attribute to a constant amount (150px). Instead, we need to figure out where the second window is, and then add an increment to it each time the button is clicked. To do that, use the . operator to get the x attribute: this.parent.parent.windowTwo.x. So we could say: That works, but the code is getting pretty messy. It would be more elegant to encase all the code in a block and call it whenever the button is clicked???. To do what, we could write a function: Notice how we use the "canvas." syntax for pointing to the second window. We have to address the view absolutely. The code is a lot easier to understand, because we can break it up over several lines, comment it and assign appropriately-named variables. However, the function is pretty detached from the button. A more elegant way of achieving the same result would be to write a method of the button. Since methods are not not global, we have to call them relatively. In the case of the button, we use this.moveWindow(). In theory we could have a second button that, when clicked, would call a method of the first button. The only difference would be the addressing. Before we go any further with methods, let's take a proper look at addressing:

In LZX, objects can have namenames and/or idids by which they can be addressed. A namename needs to be referred to locally, so there can be more than one view with the same name in a file (they just can't be siblings). An idid is global, so there can't be two views with the same idid in a LZX file. Going back to the idea of having one button call the second button's method: Both buttons now cause the window to move. However, it's confusing that one button points to a method in another button. Since windowTwo is doing the moving, why not make the method part of the window, and have both buttons point to that? Instead of addressing it with the whole this.parent??? dot syntax, we can give it an idid, and access it globally: Just to illustrate idids and namenames, one button is addressing the window relatively using its namename, and the other globally, using its idid. Note that the idid and namename could have been the same, they were intentionally different in this example.

In the forgoing example we have two buttons that do the same thing. Why not make them do different things? Move the box left and right, perhaps? We might write another method to move the box to the left, but it would be more elegant to use the same method for both directions. Just as with functions, we can pass arguments to methods. Here's one possible solution: We can pass more than one argument to a method, just as with a function:

Continuing from the same example as above, let's look at ways to reduce the number of arguments being passed. Here we put the functionality into the button itself: The buttons have attributes which we have named "distance" and "direction". The values of those attributes need to be in double quoted strings, because the value needs to be a JavaScript expression, not a string or a number. That's the reason for the value="''". Alternatively we could give the attribute<attribute>[unknown tag] tag an attribute type="string", as shown in the "right 2" button. In this case the word "right" does not need to be single-quoted. This example is actually more lengthy than the previous one, but it demonstrates the power of object oriented programming in LZX. If the number of attributes were to grow, and if various buttons had different attributes, the code would still remain very clear.