Bucaro TecHelpHTTPS Encryption not required because no account numbers orpersonal information is ever requested or accepted by this site Custom Search

# Basic State Machines

A State Machine is a program, logic circuit, or mechanical device, that has a finite number of legal states. For example a traffic control signal can be in the state of red, yellow, or green. It can't be in the state red and green because that might cause a disaster. It can't be in the state of violet because nobody would know what that means.

Sometimes a state machine is called a finite state machine. It's possible to have an infinite state machine, but that doesn't have many practical uses. A state machine begins from a start state, it then transitions from one legal state to another legal state. You can view a state as a set of specific set of input and output conditions. An action is a change that causes the state machine to transition to another legal state.

Which state the state machine to transition to depends not only upon the current action, but also on what its past states were. So which state an action causes a transition to depends no only on the current state, but on the past state or past states. To accomplish this, a state machine has finite amount of internal memory.

A state machine can be represented with a special kind of flow chart called a state diagram. On a state diagram, each state is represented by a circle, and each transition is represented by an arrow. Sometimes the circles contain labels like "state 1, state 2, state 3, ..." or "S1, S2, S3, ...". Transition arrows can be labeled with letters like "A, B, C, ..." Then a separate table or chart specifies each state and transition.

A very common, very simple, example of a state machine is a traffic control signal. The legal states are red, yellow, and green. When red it transitions directly to green. When green, it must transition to yellow before it can transition to red. Shown below is JavaScript code for the traffic control signal state machine.

```<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<style>
#lite
{
width:24px;
height:58px;
border-style: solid;
}
#redbulb
{
border-style: solid;
background-color:red;
}
#yellowbulb
{
border-style: solid;
background-color:#650000;
}
#greenbulb
{
border-style: solid;
background-color:#650000;
}
</style>

<script>
var myTimer;
var lastColor ="off";
var currentColor = "off";

function myState()
{
switch(lastColor + "|" + currentColor)
{
case "off|off":
document.getElementById("redbulb").style.backgroundColor = "red";
currentColor = "red";
break;

case "off|red":
lastColor ="red";
document.getElementById("redbulb").style.backgroundColor = "#650000";
currentColor = "green";
document.getElementById("greenbulb").style.backgroundColor = "green";
break;

case "red|green":
lastColor ="green";
document.getElementById("greenbulb").style.backgroundColor = "#650000";
currentColor = "yellow";
document.getElementById("yellowbulb").style.backgroundColor = "yellow";
break;

case "green|yellow":
lastColor ="yellow";
document.getElementById("yellowbulb").style.backgroundColor = "#650000";
currentColor = "red";
document.getElementById("redbulb").style.backgroundColor = "red";
break;

case "yellow|red":
lastColor ="red";
document.getElementById("redbulb").style.backgroundColor = "#650000";
currentColor = "green";
document.getElementById("greenbulb").style.backgroundColor = "green";
break;
}
myTimer = setTimeout(myState, 3000);
}

</script>

</body>

<div id="lite">
<span id="redbulb">    </span>
<span id="yellowbulb">    </span>
<span id="greenbulb">    </span>
</div>

</body>
</html>
```

As you know, to use this code you simply have to cut and paste it into a text file (Windows Notepad), save it with the file extension .htm, and then load it into your web browser.

 .menubtn { margin-top:10px; margin-left:50px; width:220px; opacity:1; border-style:solid; border-color:#009000; background-color:#66ff66; transition-property: opacity; transition-duration: 1s; transition-timing-function: ease-out; } .menubtn:hover { opacity:1; background-color:#e5ff23; } Menu - More Java Script Programming RSS Feed  Follow @Stephen Bucaro
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268