File: Examples/Example_AnalyseString.html

Recommend this page to a friend!
  Classes of Emmanuel Podvin   jQuery FSM   Examples/Example_AnalyseString.html   Download  
File: Examples/Example_AnalyseString.html
Role: Example script
Content type: text/plain
Description: Example
Class: jQuery FSM
Animate page elements using Finite State Machines
Author: By
Last change: update to jquery 3.7.1
Date: 5 months ago
Size: 7,827 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <html> <head> <title>iFSM in action! String analysis with iFSM</title> <meta charset="utf-8"> <script type="text/javascript" src="../extlib/jquery.min.js"></script> <script type="text/javascript" src="../extlib/jquery.dotimeout.js"></script> <script type="text/javascript" src="../extlib/jquery.attrchange.js"></script> <script type="text/javascript" src="../iFSM.js"></script> <style type="text/css"> html { font-family: Helvetica, Arial, sans-serif; } body { padding: 0 20px; } button { margin: 0 2px; font-size: 20px; border: 1px solid #333; width: 100px; text-shadow: 0 -1px 0 #333; border-radius: 5px; } button.on { color: #dfd; background: #00aa00; background: -moz-linear-gradient(top, rgba(0, 153, 0, 1) 0%, rgba(0, 119, 0, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 153, 0, 1)), color-stop(100%, rgba(0, 119, 0, 1))); background: -webkit-linear-gradient(top, rgba(0, 153, 0, 1) 0%, rgba(0, 119, 0, 1) 100%); background: -o-linear-gradient(top, rgba(0, 153, 0, 1) 0%, rgba(0, 119, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(0, 153, 0, 1) 0%, rgba(0, 119, 0, 1) 100%); background: linear-gradient(top, rgba(0, 153, 0, 1) 0%, rgba(0, 119, 0, 1) 100%); } button.off { color: #fdd; background: #CC0000; background: -moz-linear-gradient(top, rgba(204, 0, 0, 1) 0%, rgba(153, 0, 0, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(204, 0, 0, 1)), color-stop(100%, rgba(153, 0, 0, 1))); background: -webkit-linear-gradient(top, rgba(204, 0, 0, 1) 0%, rgba(153, 0, 0, 1) 100%); background: -o-linear-gradient(top, rgba(204, 0, 0, 1) 0%, rgba(153, 0, 0, 1) 100%); background: -ms-linear-gradient(top, rgba(204, 0, 0, 1) 0%, rgba(153, 0, 0, 1) 100%); background: linear-gradient(top, rgba(204, 0, 0, 1) 0%, rgba(153, 0, 0, 1) 100%); } pre { font-size: 12px; background-color: black; color: green; } </style> <script type="text/javascript" id="iFSMscript"> var aStateDefinition = { OneB_Algo : { delegate_machines : { AlgoOneB : { submachine : { Start : { 'a' : { next_state : 'Leading', }, 'b' : { next_state : 'OneB', }, '$' : { propagate_event : 'Reject', }, }, Leading : { 'b' : { next_state : 'OneB', }, '$' : { propagate_event : 'Reject', }, }, OneB : { '$' : { propagate_event : 'Good', }, 'b' : { propagate_event : 'Reject', }, }, DefaultState : { start : { next_state : 'Start', }, } }, }, }, process : { next_state : 'Process', pushpop_state : 'PushState', }, }, SetAlgoPalindrome : { delegate_machines : { AlgoPalindrome : { submachine : { Start : { '$' : { propagate_event : 'Good', }, 'pop_b' : 'pop_a', 'pop_a' : { next_state : 'Reject', }, }, 'b' : { 'pop_b' : { pushpop_state : 'PopState', }, 'pop_a' : { next_state : 'Reject', }, '$' : { propagate_event : '$', next_state : 'Reject', }, }, 'a' : { 'pop_a' : { pushpop_state : 'PopState', }, 'pop_b' : { next_state : 'Reject', }, '$' : { propagate_event : '$', next_state : 'Reject', }, }, 'Reject' : { '$' : { propagate_event : 'Reject', }, }, DefaultState : { start : { next_state : 'Start', }, 'a' : { next_state : 'a', pushpop_state : 'PushState', }, 'b' : { next_state : 'b', pushpop_state : 'PushState', }, process : { propagate_event : 'ProcessPalindromString', }, } }, }, }, }, Good : { enterState : { init_function : function() { this.opts.outputText.html(this.opts.outputText.html() + '> ' + this.opts.inputText.val() + ':Gooood :-)<br>'); }, next_state : 'WaitNext', }, }, Reject : { enterState : { init_function : function() { this.opts.outputText.html(this.opts.outputText.html() + '> ' + this.opts.inputText.val() + ':Rejeeect :-(<br>'); }, next_state : 'WaitNext', }, }, Process : { enterState : { init_function : function() { var str = this.opts.inputText.val(); if (str == '') return false; for (var i = 0; i < str.length; i++) { res = str.charAt(i) this.trigger(res); //alert(res); } this.trigger('$'); }, pushpop_state : 'PopState', next_state_if_error : 'Reject', }, }, ProcessPalindromString : { enterState : { init_function : function() { var str = this.opts.inputText.val(); for (var i = 0; i < parseInt(str.length / 2); i++) { res = str.charAt(i) this.trigger(res); //alert(res); } starti = parseInt(str.length / 2); if (str.length % 2 == 1) starti++; for (var i = starti; i < str.length; i++) { res = str.charAt(i) this.trigger('pop_' + res); //alert(res); } this.trigger('$'); }, pushpop_state : 'PopState', }, }, WaitNext : { click : { propagate_event : 'process', pushpop_state : 'PopState', }, }, DefaultState : { click : { propagate_event : 'process', }, ResetOutput : { init_function : function() { this.opts.outputText.html(''); } }, ProcessPalindromString : { next_state : 'ProcessPalindromString', pushpop_state : 'PushState', }, SetOneBAlgo : { next_state : 'OneB_Algo', }, SetAlgoPalindrome : { next_state : 'SetAlgoPalindrome', }, Reject : { next_state : 'Reject', pushpop_state : 'PushState', }, Good : { next_state : 'Good', pushpop_state : 'PushState', }, start : { next_state : 'OneB_Algo', }, } }; $(document).ready(function() { $('#myButton').iFSM(aStateDefinition, { outputText : $('#result'), inputText : $('#aText') }); }); </script> </head> <body style="margin: 20px;"> <h1>Language Analysis with Push/Pop state and subMachine...</h1> <h2>Algo "only 1 'b'" : Has input only an unique "b" letter?</h2> <p>First example is inspired from this article : http://continuations.com/post/65432407939/tech-tuesday-finite-state-machines-continued</p> <p>Verify if the input string consisting of only two letters “a” and “b” and has exactly only one “b” in them.</p> <p> Example: <br> abaa -> ok <br> abbaa -> not ok </p> <h2>Algo "palindrome" : Is input a palindrome of 'a' and 'b' letters ?</h2> <p> Second example tests if the input is a palindrome, as this example, or not : <br>abba -> ok <br>abbaa -> not ok! </p> <h2>Test yourself:</h2> a Text to analyse: <input type="text" name="aText" id="aText"> <br> <br> <input type="radio" name="Algo" id="Algo" onClick="$('#myButton').trigger('SetOneBAlgo');" checked>Algo "only 1 'b'" <br> <!-- <input type="radio" name="Algo" id="Algo" onClick="$('#myButton').trigger('SetAlgoOneAAlgo');">Algo "only 1 'a'"<br>--> <input type="radio" name="Algo" id="Algo" onClick="$('#myButton').trigger('SetAlgoPalindrome');">Algo "Palindrom" <br> <br> <button id="myButton">Test</button> <button id="Reset" onClick="$('#myButton').trigger('ResetOutput');">Reset Output</button> <p id="result"></p> <br> <br> <pre> <script> document.write($('#iFSMscript').html()) </script> </pre> <p> provided by <a href="http://www.intersel.fr">Intersel</a> </p> </body> </html>