Posted By


lecksfrawen on 02/23/11

Tagged


Statistics


Viewed 389 times
Favorited by 0 user(s)

EjercicioPrueba


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- Inserto el doctype para que sea XHTML 1.0 transicional -->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html>
  4. <!-- Inicio la cabecera de mi documento HTML -->
  5. <head>
  6. <!-- Pongo el titulo de la pagina -->
  7. <title>Ejercicio</title>
  8. <!-- Mando llamar el framework de jquery desde google con el google API -->
  9. <script src="http://www.google.com/jsapi"></script>
  10. <script>
  11. google.load("jquery", "1.5.0");
  12. </script>
  13. <!-- Defino un par de estilos para poder mandarle alertas o error al
  14. usuario -->
  15. <style type="text/css">
  16. /* Defino una clase de alerta que me da un color de fondo
  17. amarillo claro */
  18. .warning {
  19. background-color: #FAFAD2;
  20. }
  21.  
  22. /* Defino una clase de error que me da un color de fondo rojo claro */
  23. .error {
  24. background-color: #FFF0F5;
  25. }
  26. </style>
  27. </head>
  28. <!-- Inicio el cuerpo de mi documento HTML -->
  29. <body>
  30. <!-- Escribo las instrucciones para el usuario en un parrafo -->
  31. <h2>Ejercicio</h2>
  32. <h3>Introducci&oacute;n</h3>
  33. <p>La forma de abajo captura los datos requeridos para el ejercicio.</p>
  34. <p>
  35. Comente todos los console.log() para que no haya problema en cargar el
  36. javascript. (A&uacute;n con la function stub de la linea 370, a veces no ejecuta el
  37. javascript si no se tiene abierto el firebug en firefox.)
  38. </p>
  39. <br />
  40. <p>
  41. Introduzca dos n&uacute;meros enteros, el N&uacute;mero B tiene que ser
  42. mayor al A
  43. </p>
  44. <!-- Creo una forma sin ninguna acción, porque lo capturara javascript -->
  45. <form id="ejercicio">
  46. <!-- Creo una etiqueta asociada a mi input para obtener el dato del primer
  47. numero -->
  48. <label for="numeroA">N&uacute;mero A</label>
  49. <!-- Creo un input que recibira el primer numero -->
  50. <input type="text" name="numeroA" id="numeroA"/>
  51. <!-- Creo un campo que mostrara errores o advertencias para mi primer
  52. numero -->
  53. <span id="msgA"></span>
  54.  
  55. <!-- Utilizo un salto de linea para mostrar el siguiente input debajo -->
  56. <br />
  57.  
  58. <!-- Creo una etiqueta asociada a mi input para obtener el dato del segundo
  59. numero -->
  60. <label for="numeroB">N&uacute;mero B</label>
  61. <!-- Creo un input que recibira el segundo numero -->
  62. <input type="text" name="numeroB" id="numeroB"/>
  63. <!-- Creo un campo que mostrara errores o advertencias para mi segundo
  64. numero -->
  65. <span id="msgB"></span>
  66.  
  67. <!-- Utilizo un salto de linea para mostrar el boton-input debajo -->
  68. <br />
  69.  
  70. <!-- Uso un boton para que el usuario le de click -->
  71. <input class="submit" type="submit" value="Enviar" id="submit"/>
  72. <span id="msgSubmit"></span>
  73.  
  74. <!-- Inserto un salto de linea entre mi resultado y los mensajes de error -->
  75. <br />
  76.  
  77. <!-- Elemento donde voy a ir mostrando el resultado -->
  78. <span>Resultado:</span><br />
  79. <ul id="result">
  80. </ul>
  81. </form>
  82. <!-- Usaré javascript para resolver el ejercicio, uso el framework de jQuery para simplificar cosas. -->
  83. <script type="text/javascript" >
  84. /**
  85. * Ejercicio
  86. *
  87. * @Author: Héctor De Diego Brito
  88. * @Date: 22 de febrero del 2011
  89. * @Version: v0.1
  90. */
  91. // Creo un array global donde vaya metiendo mis numeros la funcion
  92. // getRandom. Lo vacio cada vez que le da click para que no haya un
  93. // leak de memoria cuando vuelvo a llamar el metodo getRandom()
  94. var randomArray = [];
  95. // Creo mis indices
  96. var i = 0;
  97. var j = 0;
  98. var k = 0;
  99.  
  100. /**
  101. * Defino una funcion que obtiene los datos de los campos y los convierte
  102. * en enteros.
  103. */
  104. function getData() {
  105.  
  106. //console.log("Obteniendo la informacion de la forma");
  107. // Obtengo en la variable local valA el valor introducido en el campo
  108. // con id "numeroA"
  109. var valA = $("#numeroA").val();
  110. // Convierto a entero el dato obtenido
  111. valA = parseInt(valA);
  112. // Reviso si introdujeron letras o caracteres invalidos con la funcion
  113. // isNan
  114. if (isNaN(valA)) {
  115. // Mando un mensaje de error al span que cree de mensajes, concateno
  116. // funciones para primero cambiar el HTML y luego cambiar el CSS al
  117. // meterle una clase de CSS
  118. $("#msgA").html("El campo debe ser un numero")
  119. .addClass('warning');
  120. } else {
  121. // Si no es NaN me debe desaparecer el mensaje y quitar la clase de
  122. // CSS que me cambia el color de fondo
  123. $("#msgA").html("")
  124. .removeClass('warning');
  125. }
  126.  
  127. // Obtenigo en la variable local valB el valor introducido en el campo
  128. // con id "numeroB"
  129. var valB = $("#numeroB").val();
  130. // Convierto a entero el dato obtenido
  131. valB = parseInt(valB);
  132. // Reviso si introdujeron letras o caracteres invalidos con la funcion
  133. // isNan
  134. if (isNaN(valB)) {
  135. // Mando un mensaje de error al span que cree de mensajes, concateno
  136. // funciones para primero cambiar el HTML y luego cambiar el CSS al
  137. // meterle una clase de CSS
  138. $("#msgB").html("El campo debe ser un numero")
  139. .addClass('warning');
  140. } else {
  141. // Si no es NaN me debe desaparecer el mensaje y quitar la clase de
  142. // CSS que me cambia el color de fondo
  143. $("#msgB").html("")
  144. .removeClass('warning');
  145. }
  146.  
  147. // Imprimo en consola el valor del dato A
  148. //console.log("El valor de A: " + valA);
  149. // Imprimo en consola el valor del dato B
  150. //console.log("El valor de B: " + valB);
  151.  
  152. // Los if's anteriores solo me mandan los mensajes de alerta, en este
  153. // if valido que ambos datos sean numeros con logica negativa, ya que
  154. // la funciona isNan me regresa que es verdadero si es NAN, y quiero
  155. // verificar que no sean NaN (es decir, vacios, letras o simbolos)
  156. if (!isNaN(valA) && !isNaN(valB)) {
  157.  
  158. // Reviso que el primer numero sea menor al mayor y que no sean
  159. // iguales
  160. if ((valB > valA) && (valB != valA)) {
  161.  
  162. // Envio un mensaje a consola confirmando si ambos numeros son
  163. // int's
  164. //console.log("Ambos numeros son enteros");
  165. // Inicializo un arreglo local de dos espacios
  166. var resultSet = [2];
  167. // En la primera posicion de mi arreglo meto el valor A
  168. resultSet[0] = valA;
  169. // En la segunda posicion de mi arreglo meto el valor B
  170. resultSet[1] = valB;
  171. // Imprimo el contenido de mi arreglo en consola
  172. //console.log("El contenido de resultSet es " + resultSet);
  173. // Mando un mensaje de exito al usuario.
  174. $("#msgSubmit").html("Datos capturados")
  175. .removeClass('error');
  176. // Regreso en un arreglo mis dos datos
  177. return resultSet;
  178.  
  179. } else {
  180. $("#msgSubmit").html("El numero B tiene que ser mayor al numero A")
  181. .addClass('error');
  182.  
  183. return false;
  184.  
  185. }
  186.  
  187.  
  188. // En caso de que no sean numeros, mando un mensaje de error y no guardo
  189. // los datos en el arreglo.
  190. } else {
  191.  
  192. // Si ambos numeros son NaN, a un lado del input me debe salir un
  193. // Mensaje de error.
  194. $("#msgSubmit").html("Error. Introduzca numeros enteros")
  195. .addClass('error');
  196.  
  197. return false;
  198. }
  199.  
  200. }
  201.  
  202. // Reviso si el numero es impar
  203. function isOddNumber(someNumber) {
  204. //console.log("Revisando si el numero es impar");
  205. // Uso la forma corta/shorthand para hacer un if y la asigno directamente
  206. // al return: usando el operador Modulus puedo saber si el numero es impar
  207. // Manda verdadero cuando es impar
  208. return (someNumber%2 == 0) ? false : true;
  209. }
  210.  
  211. function endsWithOne(someOtherNumber) {
  212. //console.log("Revisando si el numero termina con uno");
  213.  
  214. // Primero convierto el numero a string
  215. var textNumber = someOtherNumber + "";
  216.  
  217. // A los strings los puedo manipular como arreglos
  218. var textLength = textNumber.length;
  219. // Imprimo en consola el dato de textLenght
  220. //console.log("textLength: " + textLength);
  221.  
  222. // Obtengo en lastCharacter el ultimo caracter de mi numero
  223. var lastCharacter = textNumber.substring(textLength,textLength - 1);
  224. // Imprimo en consola el dato de lastCharacter
  225. //console.log("lastCharacter: " + lastCharacter);
  226.  
  227. // Comparo si el ultimo caracter es un uno
  228. if (lastCharacter == "1") {
  229. // Si es uno, le concateno ".1"
  230. textNumber = textNumber + ".1"
  231. // Lo convierto a un numero con punto flotante
  232. floatNumber = parseFloat(textNumber);
  233. // Imprimo en consola el dato de floatNumber
  234. //console.log("floatNumber: " + floatNumber);
  235. //console.log("El numero termina con uno, sera añadido un .1");
  236.  
  237. // Regreso el resultado como un numero flotante y añadido un ".1"
  238. return floatNumber;
  239. } else {
  240. // Si no termina en 1 el numero lo convierto de vuelta a numero y
  241. // lo regreso de vuelta
  242. intNumber = parseInt(textNumber);
  243. // Imprimo en consola el dato de intNumber
  244. //console.log("intNumber: " + intNumber);
  245. //console.log("El numero no termina con uno, continuando");
  246. // Regreso el numero entero tal cual lo recibi
  247. return intNumber;
  248. }
  249.  
  250. }
  251.  
  252. // Creo una funcion que revise si el numero ya esta en mi arreglo
  253. function isInArray(array, el) {
  254. //console.log("Revisando si el numero esta en el array");
  255. // Hago un for fijando el largo del arreglo obtenido en el parametro a la
  256. // variable j, y cada vez reviso si el elemento existe en mi arreglo.
  257. for (var i = 0, j = array.length; i < j; i++) {
  258. // en get Random le paso un numero aleatorio con el parametro "el"
  259. // Con esto reviso si el numero aleatorio ya esta en mi arreglo
  260. if (array[i] == el) {
  261. //console.log("El numero si esta en el arreglo");
  262. // Regreso verdadero si esta en el array
  263. return true;
  264. }
  265. }
  266. // Regreso falso si no esta en el array
  267. return false;
  268. }
  269.  
  270.  
  271. /**
  272. * La siguiente función es recursiva (se vuelve a llamar a asi misma en el
  273. * return, por lo tanto se vuelve un poco pesada).
  274. * Creo un arreglo con longitud aleatoria multiplicada por el arreglo origen
  275. * recibido como parametro en esta funcion.
  276. * por la longitud de mi arreglo, usando la funcion isInArray reviso si los
  277. * datos ya existen o no en el arreglo origen y meten los datos
  278. * aleatoriamente en el arreglo hasta que porfin obtengo finalmente mi arreglo
  279. * con los indices aleatorios y sin repetirse.
  280. */
  281. function getRandom(array) {
  282. //console.log("Volviendo aleatorio el arreglo");
  283.  
  284. // Defino un arreglo local con longitud aleatoria basada en la longitud
  285. // de mi arreglo origen pasado en el parametro
  286. var rand = array[Math.floor(Math.random() * array.length)];
  287. // Si no esta en el arreglo global randomArray...
  288. if (!isInArray(randomArray, rand)) {
  289. // Lo inserto en él
  290. randomArray.push(rand);
  291. // Y regreso mi arreglo local rand generado en esta funcion
  292. return rand;
  293. }
  294. // Aqui esta la recursividad de mi funcion, se vuelve a llamar a asi
  295. // misma si está en el arreglo mi dato pasado.
  296. return getRandom(array);
  297. }
  298.  
  299.  
  300. /**
  301. * En esta funcion voy a obtener los numeros comprendidos entre el dato A
  302. * y el dato B, lo puedo hacer de forma simple con un ciclo for, fijando el
  303. * inicio en mi dato A (sin contar A misma) y dando como termino del ciclo
  304. * mi dato B, e irlos metiendo directamente a un arreglo llamado Z.
  305. */
  306. function obtainNumbersInBetween(numbersArray) {
  307.  
  308. //console.log("Obteniendo numeros entre A y B");
  309. // Capturo en otro arreglo local el par de numeros que obtuve en getData()
  310. var dataArray = numbersArray;
  311. // Registro en consola los datos de mi arreglo local.
  312. //console.log("Contenido de validatedDataArray: " + dataArray);
  313.  
  314. // Reviso que el array recibido en el parametro este definido, si no esta
  315. // definido mando un mensaje de error al usuario.
  316. if (typeof dataArray == "undefined") {
  317. // Añado un span con el mensaje de error
  318. $("#msgSubmit").append("<br /><span class'error' " +
  319. "id='msgUndefinedArray'>El array no fue salvado.</span>");
  320. return false;
  321. }
  322.  
  323. // Guardo en dos variables los datos obtenidos en getData()
  324. var dataA = dataArray[0];
  325. //console.log("Valor de dataA: " + dataA);
  326.  
  327. var dataB = dataArray[1];
  328. //console.log("Valor de dataB: " + dataB);
  329.  
  330.  
  331. // Inicializo vacio un arreglo local llamado conso
  332. var arrayZ = [];
  333. // Inicializo la variable que usare dentro de mi ciclo for para capturar
  334. // el resultado de la funcion endsWithOne()
  335. var oneEnding;
  336.  
  337. // Poblo inicialmente ciclo for con mi dato A como inicio y mi dato B
  338. // como el final. Internamente reviso 3 de las condiciones:
  339. // - a) Solo deben estar los numeros nones
  340. // - c) No se pueden repetir los numeros (porque son secuenciales)
  341. // - d) A todos los numeros que terminen en 1 (1, 11, 21, 31, ...)
  342. // sumarles 0.1
  343. // La condicion B la reviso con las dos funciones getRandom() e isInArray();
  344. for (i = dataA + 1, j = dataB; i < j; i++) {
  345. if (isOddNumber(i)) {
  346. var data = endsWithOne(i);
  347. arrayZ.push(data);
  348. }
  349. }
  350.  
  351. // El array que obtengo lo reviso al final del for
  352. //console.log("Valor de arrayZ tras el for: " + arrayZ);
  353.  
  354. return arrayZ;
  355. }
  356.  
  357. // Cuando la página ha sido cargada exitosamente ejecuta el siguiente script
  358. $(document).ready(function () {
  359. //console.log("Iniciando script");
  360.  
  361. /**
  362. * Creo una funcion dummy no operativa para evitar problemas con
  363. * javascript al no tener firebug instalado y activado.
  364. * Si la funcion console es de tipo indefinida, defino una funcion
  365. * anonima que no recibe argumentos y no hace nada.
  366. * Con esto evito que no se ejecute el javascript cuando firebug no
  367. * está activado.
  368. */
  369.  
  370. if(typeof console === "undefined") {
  371. console = { log: function() { } };
  372. }
  373.  
  374.  
  375.  
  376. /**
  377. * Cuando le de click al boton de submit capturara los datos de los
  378. * inputs en dos variables A y B, posteriormente obtiene los numeros
  379. * comprendidos entre estos dos numeros.
  380. */
  381. // Cuando envio el submit de la forma ejercicio haz lo siguiente:
  382. $("#ejercicio").submit(function (){
  383.  
  384. // Vacio el contenido de result
  385. $("#result").html("");
  386. // Mando llamar la funcion getData la cual captura los datos
  387. // Y paso a otro array el resultado del return.
  388. var resultingArray = getData();
  389.  
  390. var textoNuevo = "<p>Los numeros que ha introducido son</p><br />" +
  391. "<p>Numero A = " + resultingArray[0] + "</p>" +
  392. "<p>Numero B = " + resultingArray[1] + "</p>";
  393. $("#submit").html(textoNuevo);
  394.  
  395. // Creo el arreglo donde insertare el arreglo resultante
  396. var arrayToRandomize = [];
  397.  
  398. // Obtengo el arreglo donde reviso tres de las cuatro
  399. // condiciones (a,c y d)
  400. arrayToRandomize = obtainNumbersInBetween(resultingArray);
  401.  
  402. // Finalizando el script, imprimo estados finales:
  403. //console.log("Imprimiendo resultado en pantalla (HTML)");
  404. //console.log("Esto puede tardar un poco...");
  405. $("#result").append("<li>Nuevos datos:</li>");
  406. // Imprimo finalmente mi arreglo aleatoro.
  407. for (k = 0; k < arrayToRandomize.length; k++) {
  408. // Realizo la ultima condicion (b) randomizando el arreglo.
  409. // Aqui puede estar el cuello de botella en el script
  410. // Imprimo en el HTML mis resultados
  411. $("#result").append("<li>" + getRandom(arrayToRandomize) + "</li>");
  412. }
  413.  
  414. //console.log("Proceso terminado");
  415.  
  416. // Vacio el array cada vez que le da click para que no haya un leak
  417. // de memoria cuando vuelvo a llamar el metodo getRandom()
  418. randomArray = [];
  419. // Envio false para que no me refresque la pagina
  420. return false;
  421. });
  422.  
  423. });
  424. </script>
  425. </body>
  426. </html>

URL: pruebaHS

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.