JavaScript - Esperar un evento

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.

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í.

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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

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 clara

No me gusta: Está respuesta no esta clara o no es útil

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

Comentar

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.

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

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

Comentar

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

<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.

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.

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

Comentar

Selección automática dropdown

Mensaje para aceptar las cookies