zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
169 lines (156 loc) • 6.92 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZPT-JS reference - Attributes - TALDeclare</title>
<script type="module" src="../js/zpt.js"></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS reference - Attributes - TALDeclare</h1>
<ul>
<li><a href="#syntax">Syntax</a>.</li>
<li><a href="#description">Description</a>.</li>
<li><a href="#differences">Differences with ZPT</a>.</li>
<li><a href="#examples">Examples</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'syntax'">Syntax</h2>
<pre class="syntax">
argument ::= declare_item [';' declare_item]*
declare_item ::= ('required') variable_name (variable_type (expression))
variable_name ::= Name
variable_type ::= Name
</pre>
<h2 data-attributes="id 'description'">Description</h2>
<p>
The <em>data-declare</em> statement declares a list of variables and some settings about them.
</p>
<p>
Each declaration can define:
</p>
<ul>
<li>
The <em>required</em> reserved word declares a required variable. It is optional. The default value is <code>false</code>.
</li>
<li>
The <em>variable name</em>. It is the only mandatory item.
</li>
<li>
The <em>variable type</em> (optional). It declares the type of the variable.
</li>
<li>
An expression working as default value (optional). It is evaluated only if the value of the variable is undefined.
</li>
</ul>
<p>
Some example of types:
</p>
<table class="comparison">
<tr>
<th>Type</th>
<th>Value example</th>
</tr>
<tr>
<td>number</td>
<td>NaN</td>
</tr>
<tr>
<td>number</td>
<td>5</td>
</tr>
<tr>
<td>array</td>
<td>[]</td>
</tr>
<tr>
<td>string</td>
<td>'any string'</td>
</tr>
<tr>
<td>function</td>
<td>function(){}</td>
</tr>
<tr>
<td>regexp</td>
<td>/a/</td>
</tr>
<tr>
<td>date</td>
<td>new Date()</td>
</tr>
<tr>
<td>object</td>
<td>{}</td>
</tr>
<tr>
<td>myconstructor</td>
<td>new MyConstructor()</td>
</tr>
</table>
<p>
Any value matches <em>undefined</em> or <em>null</em> types.
</p>
<p>
A <em>strict mode</em> is set to <code>true</code> inside the node with this attribute. <em>Strict mode</em> makes it easy to force to declare variables. If <em>strict mode</em> is <code>true</code> and ZPT-JS finds a not declared variable an error occurs. <em>Strict mode</em> can be defined in two ways:
</p>
<ul>
<li>Using a <em>data-declare</em> attribute. All the variables used in this node must be declared.</li>
<li>Using <a href="context.html#strictMode">zpt.context.setStrictMode( true )</a>. All the variables used in the root node must be declared.</li>
</ul>
<p>
An error occurs if:
</p>
<ul>
<li>A non declared variable is found.</li>
<li>The value of a required variable is <code>undefined</code>.</li>
<li>The type of a variable does not match with the declared one.</li>
</ul>
<p>
If an error occurs ZPT-JS stop processing the nodes and show the error (using a javascript <code>alert</code> by default). ZPT-JS uses the errorFunction defined in context. To customize it use the <a href="context.html#errors">setErrorFunction in context</a>.
</p>
<h2 data-attributes="id 'differences'">Differences with ZPT</h2>
<p>
This statement does not exist in ZPT.
</p>
<h2 data-attributes="id 'examples'">Examples</h2>
<p>
Declaring a number, a string, an array and a date:
</p>
<pre class="brush: html">
data-declare="aNumber number;
aText string;
anArray array;
aDateValue date"
</pre>
<p>
Declaring a number, a string, an array and a date (all required):
</p>
<pre class="brush: html">
data-declare="required aNumber number;
required aText string;
required anArray array;
required aDateValue date"
</pre>
<p>
Declaring a required variable (no type):
</p>
<pre class="brush: html">
data-declare="required myVar"
</pre>
<p>
Declaring some default values:
</p>
<pre class="brush: html">
data-declare="aNumber number 99;
aText string 'a default value'"
</pre>
</article>
</div>
</body>
</html>