The purpose of this guide is to provide an example of using Aussom-Script in the browser.
Below is an example of a simle aussom-script application which modifies the DOM and implements a click event listener. Below the example I'll talk through the major points.
<!DOCTYPE html>
<html>
<head>
<title>Aussom Test</title>
<!-- Need to first include aussom-script.js, this is the only dependency. -->
<script type="text/javascript" charset="utf-8" src="aussom-script.js"></script>
<!-- Create a new script section with type "text/aussom-script" to
define your Aussom application code. -->
<script type="text/aussom-script" charset="utf-8">
class AussomTest {
public main(args) {
// Create a new div.
c.info("Instantiating new div.");
ndiv = new Element('div');
ndiv.setCss("""
background-color: #3366FF;
border: 10px solid #333333;
padding: 10px;
margin: 10px;
""");
c.info("Setting HTML text.");
ndiv.add(new Text("New div from Aussom!"));
c.info("Adding event listener.");
ndiv.addListener("click", ::onClick);
c.info("Appending the div to the body.");
Doc.body().add(ndiv);
}
/**
* Event handler for click events, or any events
* for that matter.
*/
private onClick(string eventName, object event) {
c.log("Event fired: " + eventName);
}
}
</script>
</head>
<!-- We need to call the main() Javascript function which runs
the Aussom interpreter. -->
<body onload="main()">
<!-- Add HTML here -->
</body>
</html>
We can new-up new HTML elements using the Element aussom-script object. See the
html.aus doc for API details.
ndiv = new Element('div');
THis section is straigh forward, we're just setting the CSS for this div. Note that this setCss function will replace the current inline style with this. You can also set individual inline style attributes using setStyle, see html.aus for details.
ndiv.setCss("""
background-color: #3366FF;
border: 10px solid #333333;
padding: 10px;
margin: 10px;
""");
We can set any HTML event handler in this fashion. We just have to supply the event name (in this case click) and then function to call when the event occurs. In this case we want the onClick function we defined in our class to be called on click.
ndiv.addListener("click", ::onClick);
And later define the function:
private onClick(string eventName, object event) {
c.log("Event fired: " + eventName);
}
Finally we need to add the div Element object we created to the curret document body. We use the static class Doc to get the body Element object and then call add to add it to the body element.
Doc.body().add(ndiv);
Double click the file or however you load the HTML file in the browser and open up the developer tools console to view the console logging. You should see a div at the top of the page with a single div with the text New div from Aussom!.
When you click that div element on the page, you should see a new log record in the console when the onClick function is executed and the log record should read Event fired: click.
There are a number of classes in html.aus that provide API for doing other things in the browser such as the Http class which provides support for Ajax requests.
