-
Notifications
You must be signed in to change notification settings - Fork 21
/
WhatAreStateMachines.html
38 lines (37 loc) · 8.54 KB
/
WhatAreStateMachines.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>What are state machines? | JSSM, a JavaScript state machine - the FSM for FSL</title><meta name="description" content="Documentation for JSSM, a JavaScript state machine - the FSM for FSL"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script><link rel="stylesheet" href="../assets/pages.css"/></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">JSSM, a JavaScript state machine - the FSM for FSL</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">JSSM, a JavaScript state machine - the FSM for FSL</a></li><li><span>Tutorials</span></li><li><a href="WhatAreStateMachines.html">What are state machines?</a></li></ul><h1> What are state machines? </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography">
<a href="#what-are-finite-state-machines" id="what-are-finite-state-machines" style="color: inherit; text-decoration: none;">
<h1>What are Finite State Machines?</h1>
</a>
<p><code>Finite State Machine</code>s are a classic tool from the 1950s, meant to allow a
system to be better defined. In formal and high safety systems they are a
critical tool. FSL, the <code>Finite State Language</code>, exists to make them easier to
write, debug, and maintain.</p>
<p>Most likely, you're already pretty familiar with a lot of state machines. On
those grounds, we teach state machines by example.</p>
<p> </p>
<p> </p>
<a href="#the-light-switch" id="the-light-switch" style="color: inherit; text-decoration: none;">
<h2>The light switch</h2>
</a>
<p>An easy starting example is the idealized light switch: it's either turned <code>On</code>,
or turned <code>Off</code>. When the switch is <code>On</code>, it can be turned <code>Off</code>, but when it's
<code>On</code>, it can't be turned <code>On</code> <em>again</em>; the rules are similar for <code>Off</code>.</p>
<p>In FSL, we write states as just their names, and then connections as arrows
<code>-></code>; as such, we would write a light switch this way:</p>
<pre><code class="language-fsl"><span class="hl-9">On</span><span class="hl-1"> </span><span class="hl-0">-></span><span class="hl-1"> </span><span class="hl-9">Off</span><span class="hl-1"> </span><span class="hl-0">-></span><span class="hl-1"> </span><span class="hl-9">On</span><span class="hl-1">;</span>
</code></pre>
<p>Or, to save time, we can use a double-sided arrow <code><-></code>:</p>
<pre><code class="language-fsl"><span class="hl-9">On</span><span class="hl-1"> </span><span class="hl-0"><-></span><span class="hl-1"> </span><span class="hl-9">Off</span><span class="hl-1">;</span>
</code></pre>
<p>It might also be reasonable to say that to <code>toggle</code> is to switch from either
state to the other, without needing to know ahead of time. We call that an
<code>action</code>, and write it in single quotes <code>'</code>, inbetween the state and the
relevant arrow.</p>
<pre><code class="language-fsl"><span class="hl-9">On</span><span class="hl-1"> </span><span class="hl-7">'toggle'</span><span class="hl-1"> </span><span class="hl-0">-></span><span class="hl-1"> </span><span class="hl-9">Off</span><span class="hl-1"> </span><span class="hl-7">'toggle'</span><span class="hl-1"> </span><span class="hl-0">-></span><span class="hl-1"> </span><span class="hl-9">On</span><span class="hl-1">;</span>
</code></pre>
<p>The placement of the action on double-sided arrows matches the arrow itself:</p>
<pre><code class="language-fsl"><span class="hl-9">On</span><span class="hl-1"> </span><span class="hl-7">'toggle'</span><span class="hl-1"> </span><span class="hl-0"><-></span><span class="hl-1"> </span><span class="hl-7">'toggle'</span><span class="hl-1"> </span><span class="hl-9">Off</span><span class="hl-1">;</span>
</code></pre>
<p>And were we to graph this, it might look like so:</p>
<p><img src="./SimpleLightSwitch.png" alt=""></p>
</div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Exports</a></li><li class="current pages-entry pages-entry-menu pages-entry-depth-0"><a>Tutorials</a></li><li class="current pages-entry pages-entry-page pages-entry-depth-1"><a href="WhatAreStateMachines.html">What are state machines?</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="GettingStarted.html">☕ <wbr/>Quick <wbr/>Start</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="todo.html">Language reference</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="todo.html">API reference</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="todo.html">Example machines</a></li><li class=" pages-entry pages-entry-menu pages-entry-depth-1"><a>Howtos and <wbr/>Recipes</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="todo.html">Environments</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="todo.html">Bundling</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="todo.html">Publishing</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="Styling.html">Theme, style, color</a></li><li class=" pages-entry pages-entry-menu pages-entry-depth-1"><a>Comparisons</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="FeatureComparison.html">Feature comparison</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-2"><a href="Shootout.html">LOC <wbr/>Shootout</a></li><li class=" pages-entry pages-entry-menu pages-entry-depth-0"><a>Tools</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="live_editor.html">Live <wbr/>Editor</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-1"><a href="todo.html">Github <wbr/>Action</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-0"><a href="community.html">Community</a></li><li class=" pages-entry pages-entry-page pages-entry-depth-0"><a href="CHANGELOG.long.html">Changelog</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul></ul></nav></div></div></div><footer class="with-border-bottom"><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li><li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="container tsd-generator"><p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div><div class="overlay"></div><script src="../assets/main.js"></script></body></html>