-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·295 lines (274 loc) · 13.2 KB
/
index.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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
<!--script src="http://code.jquery.com/jquery-1.9.1.js"></script-->
<head>
<link rel="stylesheet" href="cssFramework/css/foundation.css" />
<link href="jquery-linedtextarea/jquery-linedtextarea.css" type="text/css" rel="stylesheet" />
</head>
<title>Turing Machine</title>
<body style="background-image:url('tiny_grid.png');">
<!--div class='row large-8' align="center">
<h1>Turing Machine</h1>
</div-->
<br>
<nav class="row top-bar large-8" data-topbar align="center">
<ul class="title-area">
<li class="name">
<h1><a href="#">Turing Machine Simulator</a></h1>
</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">About</a></li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li ><a href="#">Home</a></li>
</ul>
</section>
</nav>
<br>
<style type="text/css">
.sideNav{
position: absolute;
opacity: 10%;
left:20px;
background-color:rgba(255,255,100,0.3);
border: 1px dotted #aaa;
top:120px;
}
li{
padding-left: 10px;
}
</style>
<div class="small-2 panel columns sideNav">
<ul class="side-nav">
<h3>Instrucciones:</h3>
<li><a data-reveal-id="instructions">Meter datos en Modo Avanzado:</a></li>
</ul>
<ul class="side-nav">
<h3>Teoria:</h3>
<li><a data-reveal-id="teoTM">Que es una Maquina de Turing?</a></li>
<li><a data-reveal-id="teoFormal">Descripcion formal de una MT</a></li>
</ul>
<ul class="side-nav">
<h3>Ejemplos:</h3>
<li><a id="Eww">Cadena w#w</a></li>
<li><a id="02">Cadena 0^2^n</a></li>
</ul>
</div>
<div class="row panel large-6">
<a onclick='$("#modoGUI:visible").slideToggle(); $("#modoAvanzado:hidden").slideToggle(); $("#editor").focus(); $("#editorContainer").toggle();'class="button active [ small radius round]" style="background-color:#226577;">Modo Avanzado</a>
<a onclick='$("#modoGUI").slideToggle(); $("#modoAvanzado:visible").slideToggle(); $("#editorContainer").toggle();'class="button gray [ small radius round]" style="background-color:#55aa33;">Modo GUI</a>
<br>
<!--div id="container" style="border: 1px solid gray; background-color:white; width:660;"></div>
<div id="panel" style="position:absolute; height:350px; width:11.3%; top:110px; left:88%; background:#00799f;" class="row push-11 panel">
<style type="text/css">
.btn-Panel{
font-size:6rem;
}
</style>
<button id="btnEstado" class="btn-Panel [ small tiny radius round ]">q</button>
<button id="btnTrans" class="btn-Panel [ small tiny radius ]">δ</button>
</div>
<button id="btnUndo" class="[ small ]" style="top: 5px;">Deshacer</button>
<button id="btnRedo" class="success [ small ]" style="top: 5px;">Rehacer</button>
<br-->
<div id="modoGUI">
<label><h5 style"font-weight:bold;">Q : Ingrese conjunto de estados. Ex: "q0,qA,qR,q1...,qi" </h5></label>
<input id="inputEstados" type="text" required>
<label><h5>Γ : Ingrese el alfabeto de la cinta. Ex: "_,#,..." </h5></label>
<input id="inputCintaAlphabet" type="text" required>
<label><h5>Σ : Ingrese el alfabeto de la maquina. Ex: "0,1..." </h5></label>
<input id="inputAlphabet" type="text" required>
<label><h5>δ : Agregue transiciones.</h5></label>
<div class="row">
<div class="large-4 columns">
<select id="listaTransiciones" size="6">
</select>
</div>
<div class="large-6 columns">
<button class="button [ small ] large-4" onClick="agregarTransicion();">Agregar</button>
<button class="button alert [ small ] large-4" onClick="quitarTransicion();">Quitar</button>
</div>
<style type="text/css">
.small-1 {
width: 11.33333%; }
</style>
<div class="small-8 columns">(
<select id="T_from" class="small-2"></select>
,
<select id="T_with" class="small-1"></select>
)-->
(
<select id="T_moveTo" class="small-2"></select>
,
<select id="T_write" class="small-1"></select>
,
<select class="small-1" id="direccion">
<option value="1">R</option>
<option value="0">L</option>
</select>
)
</div>
</div><br>
<div class='row'>
<div class="columns large-2 left">
<label>q0: </label>
<select id="q0_inicial">
<option value="1">q0</option>
</select>
</div>
<div class="columns large-2 left">
<label>qA: </label>
<select id="qA_accept">
<option value="1">qA</option>
</select>
</div>
<div class="columns large-2 left">
<label>qR: </label>
<select id="qR_reject">
<option value="1">qR</option>
</select>
</div>
</div>
<div class="large-10">
<button id="get" class="button radius" onclick="cleanGUI();">Limpiar</button>
<button id="get" class="button success radius" onclick="crearTuringMachine(); $('#modoGUI').slideToggle(); $('#writeString').focus();">Crear TM</button>
</div>
</div>
<div id="log">
<textarea id="txtLog" readonly="true" style="resize:vertical; height:200px;"></textarea>
</div>
<div class="row collapse">
<div class="large-8 small-9 columns">
<input id="writeString" type="text" placeholder="Write String">
</div>
<div class="large-4 small-3 columns">
<a id="buttonCompute" onclick="compute();" class="alert button" style="line-height:4px;" >Compute String</a>
</div>
</div>
<style type="text/css">
#editor{
border-radius: 2;
padding: 0;
padding-left:10px;
padding-top:5px;
height: 19rem;
width:90%;
color:white;
background-color:#272822;
font-size:17;
font-family: "Consolas", "Menlo", "Courier", monospace;
}
#editor:focus{
-webkit-box-shadow: 5px 0 10px #999999;
-moz-box-shadow: 5px 0 10px #999999;
box-shadow: 5px 0 10px #999999;
border-color: #999999;
}
</style>
<div id="modoAvanzado" >
<textarea id="editor" class="lined"></textarea>
<!--div style="font-family:'Consolas'; font-size:17; position:absolute; background-color:transparent; color:blue; width:100px; height:100px; top:152px; left:93px;">Estados:</div-->
<button onclick="cleanEditor();" class="large [ small ]">Limpia<r/button>
<button onclick="createTM(); $('#writeString').focus(); " class="success [ small ]">Crear TM</button>
</div>
</div>
<footer class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-6 columns">
<p>© Copyright no one at all. Go to town.</p>
</div>
<div class="large-6 columns">
<ul class="inline-list right">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
<div id="instructions" class="reveal-modal" data-reveal>
<h2>Modo Avanzado</h2>
<p class="lead">Tutorial.</p>
<p>El formato es el siguiente:</p>
<div class="columns row">
<img align="left" src="tuto/formato.jpg">
<p><info style="font-weight:bold;">Estados:</info> debes meter cada estado separado por ",". Ejemplo:</p>
<img src="tuto/estados.jpg" align="right">
<br><br>
<p><info style="font-weight:bold;">Alfabeto:</info> debes meter cada simbolo separado por ",". Ejemplo:</p>
<img src="tuto/alfabeto.jpg" align="right"><br><br>
<p><info style="font-weight:bold;">Cinta:</info> debes meter cada simbolo separado por ",". El simbolo "_" esta implicito en el lenguaje puede agregarlo o no, asi como los simbolos del afabeto. Ejemplo:</p>
<img src="tuto/cinta.jpg" align="right"><br><br>
<p><info style="font-weight:bold;">Transiciones:</info>Hay dos manares de ingresar un transicion asi como en los Ejemplos:</p>
<img src="tuto/transicion2.jpg" align="right"><br>
<img src="tuto/transicion.jpg" align="right"><br><br><br>
<p><info style="font-weight:bold;">q0:,qA:,qR:</info> Para q0, qA y qR todo el string luego de ":" se toma como el estado correspondiente. Ejemplo:</p>
<img src="tuto/q0AR.jpg" align="right">
<br><br>
</div>
<a class="close-reveal-modal">×</a>
</div>
<div id="teoTM" class="large-3 reveal-modal" width="1000" data-reveal >
<h2>Que es una maquina de Turing?</h2>
<p class="lead" >Definicion no formal</p>
<p style="font-family: Calibri; font-size:18;"> Una Maquina de Turing es un modelo de computacion. Puedes pensar que es una maquina en la cual puedes escribir una palabra como <info style="font-weight:bold;">entrada</info> y esta lo procesara y la <info style="font-weight:bold;">salida</info> sera si o no dependiendo si la palabra satisface cierta propiedad. Para entender este modelo, puedes imaginar una cinta infinta dividida en celdas:<br>
<img src="tuto/empty_tape.png"><br>
Cada celda puede contener un simbolo o ser vacia(ε). En la imagen de arriba cada celda esta vacia. La cinta tiene una cabeza de lectura-escritura.
Cada Maquina de Turing tiene un conjunto de <info style="font-weight:bold;">estados</info>. Donde una Maquina de Turing esta corriendo, exactamente un estado a la vez. Cuando una maquina inicia procesando una palabra, la cabaza se encuentra en un estado especial llamado "estado inicial".
La palabra en proceso esta determinada por las instrucciones de la maquina, las que llamaremos <info style="font-weight:bold;">transiciones</info> de ahora en delante. Una transicion le dice a la maquina qi:El estado actual, a:El simbolo que lee la cabeza --> qj:El estado a moverse, b:que escribir en la celda que apunta la cabeza Dir: Direccion a mover la cabeza. En otras palabras, cada transicion esta en la forma:</p>
<blockquote>Si esta en un estado qi leyendo un simbolo a, entonces muevase a un estado qj, escriba un simbolo b y muevase a lo mas una celda en direccion izquierda o derecha (La cabeza tambnien puede quedarse en la misma posicion).</blockquote>
<p style="font-family: Calibri; font-size:18;"> Nota que qj puede ser el mismo estado qi y "b" puede ser igual a "a".De ahora en delante, la palabra w en proceso por la Maquina de Turing M sera llamada la ejecucion de M sobre w. Al inicio de la ejecucion, la entrada w se encuentra en algun lugar en la cinta y la cabeza de lectura-escritura apunta al primer simbolo de la entrada.
Ahora Considera una Maquina de Turing con un estado incial q0 y supone que una de sus transicion es:
</p>
<blockquote>Si esta en estado q leyendo un simbolo a, entnces debe quedarse en el estado q, escribir el simbolo a y mover la cabeza una celda a la derecha.</blockquote>
<p style="font-family: Calibri; font-size:18;">
Si le damos a esta maquina la entrada HolaMundo!, al inicion de la ejecucion la cinta se veria asi:
<br>
#image#
<br>
En la primera transicion, la cabeza escribira a y se movera un espacio a la derecha. La maquina se quedara en el mismo estado.
Asi es como se veria la cinta despues de aplicar la transicion:
<br>
#image#
<br>
La ejecucion se detendra cuando no haya una transicion por ser aplicada. Por ejemplo si la maquina anterior no tiene transcion de la forma "Si esta en estado qi leyendo simbolo e, entonces deberia...", la ejecucion consisiteria en una sola transicion.
Finalmente, Hay un conjunto de estados, llamados estados de aceptacion, usualmente denotados por F, el cual es subconjunto de Q. Una vez la ejecucion con la entrada w ha finalizado, decimo que la maquina acepta w si el estado en que se detuvo la ejecucion es un estado de aceptacion.</p><a class="close-reveal-modal">×</a>
</div>
<div id="teoFormal" class="reveal-modal" data-reveal>
<h2>Descripcion Formal</h2>
<p class="lead">Una MT es una 7-tupla (Q,Σ,Γ,δ,q0,qA,qR)</p>
<p>Donde:</p>
<p><info style="font-weight:bold;">1.</info> Q: es un conjunto finito de estados,</p>
<p><info style="font-weight:bold;">2.</info> Σ: es el alfabeto de entrada. Y no contiene el simbola espacio _,</p>
<p><info style="font-weight:bold;">3.</info> Γ: es el alfabeto de la cinta, donde _ ∈ Γ y Σ ⊆ Γ, </p>
<p><info style="font-weight:bold;">4.</info> δ: QxΓ--->QxΓx{L,R} es la funcion transicion,</p>
<p><info style="font-weight:bold;">5.</info> q0 ∈ Q es el estado inicial</p>
<p><info style="font-weight:bold;">6.</info> qA ∈ Q es el estado de aceptacion, y</p>
<p><info style="font-weight:bold;">7.</info> qR ∈ Q es el estado de rechazo donde qR≠qA.</p>
</div>
<script src="cssFramework/js/jquery.js"></script>
<script src="cssFramework/js/foundation.min.js"></script>
<script src="jquery-linedtextarea/jquery-linedtextarea.js"></script>
<script src="cssFramework/js/modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).foundation();
$(".lined").linedtextarea(
//{selectedLine: 1}
);
$("#modoGUI").hide();
cleanEditor();
cleanGUI();
$("#editor").focus();
});
</script>
<script type="text/javascript" src="def.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="readTxt.js"></script>