Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Esperar un evento

JavaScript - Esperar un evento

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Sergio

Esperar un evento

Publicado por Sergio (7 intervenciones) el 12/05/2014 00:41:01
Hola a todos, mi nombre es Sergio.

No he podido hacer algo en javascript, y me gustaría saber si alguien sabe como se hace.

La idea es que tengo una funcion y cuando llega a una parte tiene que esperar a que el usuario haga algo y si lo hace continuar desde donde estaba.

1
2
3
4
5
6
function Main()
{
       alert("Hola");
       EsperarQueOprimaBoton();
       alert("Adios");
}



ya intente varias formas pero no lo consigo, no me sirve que en el evento del boton se ponga otra function, lo que necesito es que todo el codigo espere a que el usuario oprima el boton y continuar desde donde estaba cuando lo haga.

Debería poderse hacer, ya que con el mismo alert() el codigo se detiene hasta que el usuario oprima aceptar.

Una de las formas que intente fue poner yield; en medio del código mas o menos así.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var B1;
function Main()
{
       B1 = document.getElementById("B1");
       B1.onclick=Continuar;
 
       alert("Hola");
       yield;
       alert("Adios");
}
 
function Continuar()
{
       // esto lo cambie de muchas formas :/, asigne la function a variables, a la function le puse *

       // la verdad es que no conozco muy bien los generadores-interactores.

        Main().next();
 
}

Bueno intente varias formas con el yield pero nada, también se me ocurrió usar el SetInterval y Settimeout, pero no tienen el efecto que deseo, la cosa es que estoy viendo las posibles limitaciones de javascript y pues no me sirve poner el codigo en otra function, porque el resto del código seguiría.

Lo máximo que logre, fue que al darle al boton se reiniciara el Main, y a base de condiciones evitar los alert, pero no quiero eso, si no se puede entenderé XD

Les agradezco la atención, y haber si alguien da con la solución :P
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Esperar un evento

Publicado por xve (2100 intervenciones) el 12/05/2014 07:38:24
Hola Sergio, la verdad es que me da la sensación, de que se tiene que poder hacer de otra manera, sin tener que parar la interrupción del codigo para luego continuar, me suena a cuando programaba con BASIC que el código era lineal.

Exactamente nos puedes comentar que quieres hacer? haber si encontramos la manera de hacerlo diferente, sin tener que interrumpir un código para luego continuar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Esperar un evento

Publicado por GDP (20 intervenciones) el 12/05/2014 10:41:03
Es una idea, sin mas.

Pero, porque no pones parte del codigo que cargue al comienzo (con eso terminas la funcion). Y posteriormente, con el onclick que cargue la segunda funcion con el codigo restante?

Si no es la solucion que buscabas, es que no lo he entendido bien :P
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Esperar un evento

Publicado por Sergio (7 intervenciones) el 12/05/2014 17:12:14
Gracias por contestar, bueno es que pues todabia estoy aprendiendo y no tengo a nadie que me enseñe entonces me gusta crear cosas raras :P, por ejemplo en php cree un control parecido al datagrid de c# para cargar los datos, y guardarlos en una tabla con scroll y otras cosas XD.

Ahora con javascript, pues se me ocurrió hacer una consola parecida a la de otros lenguajes, (sin necesidad alguna, solo como para ver como se hace y esas cosas XD), entonces pues la estoy asiendo con un textarea, la cosa es que si le quiero enseñar a alguien a programar se pueda usar esta y sea intuitiva (como un pseint pero en navegador :P).

Entonces empece, cree una clase Console y puse los constructores, eventos, propiedades y esas cosas (que no tenia ni idea de como se hacia en javascript pero pues aprendí XD), entonces en los métodos, cree el escribir, el limpiar y cuando empece con el LeerLinea, problemas :(.

El que esta aprendiendo no tiene porque saber códigos complicados ni nada, entonces un código de alguien que use el control iría en una clase especifica que llame Main :P, este seria un ejemplo de como se usaría.

1
2
3
4
5
6
7
8
9
Class Main
{
     Escribir("Ingrese un numero");
     var num1 = LeerLinea();
     Escribir("Ingrese otro numero");
     var num2 = LeerLinea();
     var respuesta = num1 +  num2;
     Escribir(respuesta);
}

Bueno el problema aquí es que si uso un LeerLinea tendría que ser similar al promp, que espera a que el usuario entre el dato y oprima enter. Pero este efecto no lo he podido lograr, lo que si pude hacer gracias al yield; es que el código se detuviese, y todo el código se volviera a ejecutar cuando se oprime enter y el LeerLinea tendría como 2 funciones, la primera habilitar el textarea para escribir y bloquear el código. Y la segunda si lo anterior ya paso asignar el dato guardado (todo con vectores que aumenten de tamaño es un super enredo eso y me da pena mostrarles XD).

De hecho funciona bien, pero pues quería ver si se puede sin tener que re-ejecutar el código una y otra vez, me parece como ineficaz la verdad.

Y lo dicho no lo hago porque sea super necesario solo por la curiosidad de un niño XD, me gusta crear cosas complejas y ver donde están mis limites y los de los lenguajes :P (todo lo hice con geany de linux me gusta bastante XD).

Otro proyecto que tengo es crear mi, mini-motor de datos, que pueda usar para programas sencillos y que sea gratis :P, esa cosa me a sacado canas, pero hay voy :P.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Esperar un evento

Publicado por GDP (20 intervenciones) el 13/05/2014 10:47:48
Pues entonces, aparte de tu duda (a ver si tengo tiempo de mirarla luego otra vez :P) comparte cuando tengas algo, que tienes un proiecto interesante en mente :)

[yo tambien soy bastante nuevo en js, no llevare mas que un par de meses tanteandolo jajaja]
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Sergio

Esperar un evento

Publicado por Sergio (7 intervenciones) el 15/05/2014 17:37:50
:P tu lo pediste, les dejo el código para ver si se les ocurre como solucionar mis bugs, y lo testeen XD.

El primer problema es que cada vez que el código necesita leer un dato, se tiene que reiniciar todo el código del Main(), si el código es corto no creo que sea problema, pero si es largo supongo que sera demasiado ineficiente.

El segundo es que si le das click derecho al textarea de la consolé y oprimes una letra como a, se selecciona el texto y lo puedes alterar, dañando por completo el evento :(.

aquí puedes descargar los códigos http://www.mediafire.com/download/poq0k3vv8kblbv5/codigos.rar

Si te da flojera descargar aquí pongo el código


Archivo 1 - index.html
Lo normal de un index XD, llamo las js, y uso un par de metas.

Aquí creo el objeto de la console, y le cambio el color a mi gusto XD, la main.js, se puede omitir y poner aquí, pero me gusta que estén separados, lo veo mas ordenado :P

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Html>
	<Head>
		<meta charset="utf-8">&#65279; <!-- esto porque quiero XD, a veces me trolean las ñ-->
		<meta http-equiv="expires" content="-1" /> <!-- Esto es para que no se guarde el cache -->
		<script type="text/javascript" src="console.js"></script>
		<script type="text/javascript" src="main.js"></script>
	</Head>
	<Body>
		<script>
			//instanciar la clase, se le puede asignar, alto, ancho y/o un textarea existente (en cualquier orden :P)

			Consola = new Consolecasser();
			//Por mis gustos personales me gusta que la consola sea negra con letras blancas, pero no lo puse por defecto por los css

			Consola.colorLetra = '#ffffff';
			Consola.colorFondo = '#000000';
			//Aqui arrancamos el Main del main.js, No es necesario que este en main.js PERO si que se llame Main

			Main();
		</script>
	</Body>
</Html>

Archivo 2 - main.js

Este es un código ejemplo, con todos los métodos que implemente en la clase, da la sensación de que el código espera pero no es así, se vuelve a ejecutar todo el código cada vez que espera al usuario :P, prueben cosas que no lo he probado mucho que digamos XD.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Main()
{
	Consola.Escribir("Ingrese un numero");
	var CN = Consola.LeerLinea();
	for (var i = CN; i > 0;i--)
	{
		Consola.Limpiar();
		Consola.Escribir(i);
		Consola.Esperar(100);
	}
	Consola.Limpiar();
	Consola.Escribir("Espero que le"," guste XD");
	Consola.Escribir("Control" + " hecho", " por" + ":");
	Consola.EscribirSinBajar("Sergio");
	Consola.EscribirSinBajar(" Santiago");
	Consola.EscribirSinBajar(" Castro");
	Consola.EscribirSinBajar(" Vidal");
 
}

Archivo 3 - console.js
Y lo mas importante la clase, como verán soy desordenado :(, si me quieren dar concejos de organización o de alternativas para hacer las cosas que puse y se vea mejor, se los agradecería.

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
//Clase Console

function Consolecasser()
{
	var ttconsole;	// referencia al textarea interno

	// Obtener Textarea

 
	var obt_con = false;
	for (var i = 0; i < arguments.length; i++)
	{
		if (typeof arguments[i] == "object")
		{
			if (arguments[i].type == "textarea")
			{
				ttconsole = arguments[i];
				obt_con = true;
				i = arguments.length;
			}
		}
	}
 
 
	// Crear textarea en caso de no haber referencia

	if (!obt_con)
	{
		ttconsole = document.createElement("textarea");
		ttconsole.rows = 25;
		ttconsole.cols = 80;
		ttconsole.id = "consolecasser";
		ttconsole.name = "consolecasser";
		document.body.appendChild(ttconsole);
	}
 
	//---------------------------- Obtener el tamaño del textarea ---------------------------------------------------

	var pos = new Array();
	var con = 0;
	//Obtener la cantidad de numeros resividos como parametros

 
	for (var i = 0; i < arguments.length; i++)
	{
		if (typeof arguments[i] == "number")
		{
			pos[con] = i;
			con++;
		}
		if (con == 2)
		{
			i = arguments.length;
		}
	}
 
	//Si la cantidad de numeros resividos es 0, se usaran valores por defecto

	if (con == 1)
	{
		ttconsole.rows = arguments[pos[0]];
		ttconsole.cols = arguments[pos[0]];
	}
	if (con == 2)
	{
		ttconsole.rows = arguments[pos[0]];
		ttconsole.cols = arguments[pos[1]];
	}
	;
	// ------------------------------------- propiedades -------------------------------------------

	this.colorFondo;//Color del fondo

	this.__defineGetter__("colorFondo", function() {
		 return ttconsole.style.backgroundColor;
		 });
	this.__defineSetter__("colorFondo", function(color){
      ttconsole.style.backgroundColor = color;
	});
 
	this.colorLetra; //Color de la letra

	this.__defineGetter__("colorLetra", function() {
		 return ttconsole.style.color;
		 });
	this.__defineSetter__("colorLetra", function(color){
      ttconsole.style.color = color;
	});
	// ------------------------------------- funciones ---------------------------------------------

	// Variables para cuando se reinicia el codigo

	var ejecuciones = 0;
	var ejecucion_actual = 0;
	var resultado = new Array();
	var resultado_actual = -1;
	// Funcion que comprueba si la funcion se ha ejecutado antes o no

	function Ejecutar()
	{
		if (ejecucion_actual < ejecuciones)
		{
			ejecucion_actual++;
			return false;
		}
		else
		{
			ejecucion_actual++;
			ejecuciones++;
			return true;
		}
	}
	//Funcion para limpiar el textarea

	this.Limpiar = function()
	{
		if (Ejecutar())
		{
			ttconsole.value = "";
		}
	}
	//Funcion para agregar string al value del textarea

	this.Escribir = function()
	{
		if (Ejecutar())
		{
			if (arguments.length > 0)
			{
				for (var i = 0; i < arguments.length; i++)
				{
					ttconsole.value+= arguments[i];
				}
			}
			ttconsole.value+= "\n";
		}
	}
	//Funcion para agregar string al value del textarea, no agrega un \n al final

	this.EscribirSinBajar = function()
	{
		if (Ejecutar())
		{
			if (arguments.length > 0)
			{
				for (var i = 0; i < arguments.length; i++)
				{
					ttconsole.value+= arguments[i];
				}
			}
		}
	}
	//Funcion para leer datos del textarea

	this.LeerLinea = function()
	{
		if (Ejecutar())
		{
			linea = 0;
			posa = ttconsole.value.length;
			ttconsole.onkeydown=VerificarTeclas2;
			yield;
		}
		resultado_actual++;
		return resultado[resultado_actual];
	}
	//Funcion esperar en consola

	this.Esperar = function(tiempo)
	{
		if (Ejecutar())
		{
			ejecucion_actual = 0;
			resultado_actual = -1;
			setTimeout(Main, tiempo);
			yield;
		}
	}
	// ------------------------------------- eventos -----------------------------------------------	

	// Asignar evento por defecto

	ttconsole.onmousedown=VerificarClick1;
	ttconsole.onkeydown=VerificarTeclas1;
	// Mouse

	// Anular los click del mouse

	function VerificarClick1(evt)
	{
		return false;
	}
	// Teclas

	// Anular todas las teclas del teclado	

	function VerificarTeclas1(evt)
	{
		return false;
	}
	// Anular las teclas de movimiento de texto, esperar enter para terminar el evento, guardar el texto ingresado y reinciar Main

	var posa = 0; //Posicion actual del texto del textarea (sin interaccion con el usuario)

	var linea = 0; //Contador del tamaño del string ingresado por el usuario

	function VerificarTeclas2(evt)
	{
		var tecla = evt.which;
		var  permitir = true;
		switch (tecla)
		{
			case 13: //Enter- termina el evento y reincia el Main

				resultado[resultado.length] = ttconsole.value.substring(posa,posa + linea);
				ttconsole.onkeydown=VerificarTeclas1;
				ejecucion_actual = 0;
				resultado_actual = -1;
				setTimeout(Main, 1);
			break;
			case 8: //Backspace - impedir borrar si el usuario no ha digitado nada

				if (linea > 0)
				{
					linea--;
				}
				else
				{
					permitir = false;
				}
			break;
					//Anular teclas de movimiento dentro del texto

			case 9:	case 33: case 34: case 35: case 36: case 37: case 38: case 39: case 40: case 93:
				permitir = false;
			break;
			default: // Si la tecla no fue anulada se aumentara el contador del texto en la linea, este se recupera al oprimir enter

				linea++;
		}
		return permitir;
	}
	//----------------------------------------------------------------------------------------------------------------------------

	ttconsole.focus(); //Hacerle focus al textarea

}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar