JavaScript. tablaMultiplicar. | Mediateca de EducaMadrid

Vamos a ver un ejemplo de la tabla de multiplicar, vemos aquí he puesto un 5, pone todo 5, empieza a recorrerlo, de acuerdo, esto es un bucle y después hace una operación que está aquí, os dais cuenta, número 5, la i que se va incrementando dentro de un for y después lo que hace es poner aquí la multiplicación. 00:00:00

vamos a ver, imaginaros 00:00:20

que pongo un 5, vamos a ver, pongo un 8 00:00:22

mostrar y 00:00:24

otra vez lo mismo, de acuerdo 00:00:26

ya hemos visto como funciona 00:00:28

ahora vamos a ponernos por aquí 00:00:29

vemos unos documentos, un index 00:00:32

un javascript 00:00:34

aquí está la tabla multiplicar, está en la misma 00:00:35

la misma ruta 00:00:38

con lo cual lo pongo al lado, mira que al lado tienes 00:00:40

tabla multiplicar, lo tienes aquí, .js 00:00:42

este es .html 00:00:44

bien, ponemos 00:00:46

tabla de multiplicar está aquí 00:00:48

vale, un formulario se envía mostrar tabla, mostrar tabla está aquí, de acuerdo, el javascript que esta es la función, vale, miremos aquí, número, bueno, esto es una etiqueta label, etiqueta, introduce número, aquí viene, bien, ahora es el input que significa este cuadradito de tipo número y que es requerido que le pongas un número, oye mira, ponme algo, vale, un número, botón enviar, pues este de aquí, 00:00:49

que cuando yo le ponga, por ejemplo, un 80 ya es demasiado, un 7 porque es que si no, ahí, ya lo tienes, le das, enviar, venga, ahora viene aquí algo importante, esto es una capa y va a ser lo que se va a rellenar, es decir, esta operación que la tenemos aquí, tabla, si os doy cuenta, meter html y todo esto que hemos puesto que es una tabla, de acuerdo, que es una lista, de acuerdo, pues se va a meter aquí dentro, dentro de un div que es una capa, 00:01:18

Bien, entonces, si os dais cuenta, arrancamos el ejercicio vacío, que es como estaba primero, y ahora vamos a llenar la capa con un número. Vamos a poner un 2, y ahora, al hacer clic, se envía a este de aquí todo esto, ¿de acuerdo? Se calcula y con el innerHTML se mete aquí, en el div con la tabla, y se rellena. Lo vemos. Vale. 00:01:48

Ahora pasemos al siguiente código, ¿de acuerdo? Bueno, aquí te dice este event, lo podéis poner aquí, ¿de acuerdo? Lo ponéis aquí el event, quitáis el dis y se quitaría el error. 00:02:12

Vamos a probarlo, por ejemplo, bueno, después lo probamos. Esto únicamente es por la cuestión de la recarga de la página. 00:02:25

Tened en cuenta que cuando le doy a mostrar, ¿de acuerdo? Están intentando, tienes un evento, todo lo que pasa en la página, que no se recargue y tal, lo que hacen es capturarlo. 00:02:32

Bueno, dice el documento coger elemento por identificación número, que está aquí, identificación número, y ¿cuál es ese número? El 2. Pues ya están guardándote, vamos a ver, te están guardando aquí el número, el 2. 00:02:41

El número que te hace aquí, una comprobación con un if, 2 es mayor que 0, 2 es igual que 10, verdadero, ¿por qué? 00:02:57

Porque te están diciendo que si tú llegas aquí y por ejemplo le pones un 15, pues te va a decir que tienes esos valores para estar mostrando, ¿de acuerdo? 00:03:04

Es que si no, imaginaros que hacemos una tabla de multiplicar súper grande, ¿vale? 00:03:17

Entonces, bueno, aquí vamos a ver, ahora empieza, crea una variable tabla, documento, coger elemento por tabla, con lo cual te está cogiendo el div, ¿de acuerdo? Que es el que vas a rellenar, vale, y ahora tabla multiplicar otra variable y te pone un encabezado, bueno, este de aquí va a ser el que va a poner y el que va a meter luego aquí dentro, ¿de acuerdo? 00:03:21

Hace un for y te hace una operación matemática. ¿Qué te está haciendo? Te pone un h2, es un encabezado, ul es una lista, lo que vemos aquí, y una lista, cuando tiene números, desordenada, con un li. 00:03:43

Te va metiendo varios li, que lo vas viendo aquí, ul con varios li, lo que es una lista desordenada. De 0 hasta 10. De 0 a 10, un for, esto no escribe nada y va de 1 en 1. 00:03:59

Bueno, pues aquí ya, número, pues el número que tenías, ¿cuál era? El que hemos dicho, el 3, que es el que viene aquí, el 3, la i, que es esta de aquí, de 1 en 1 va, de 0 hasta 10, y después te multiplica, que es esta de aquí, la última, te multiplicará, vamos a ver, el número que has puesto, 3 por 0, 0, 3 por 1, 3, que es lo que te está haciendo esto de aquí, pero se refleja aquí. 00:04:10

después termina la tabla, perdona, la lista, de acuerdo 00:04:35

y con el innerHTML, tabla, que lo tenías aquí, que has puesto 00:04:39

que está aquí, identificado, lo has cogido por su identificador, le metes 00:04:43

todo el li, perdona, toda la tabla, toda la 00:04:47

lista que has hecho, y aquí aparece la lista 00:04:51

y después aquí lo único que te sale es la alerta, que hemos dicho antes, si pongo un número 00:04:54

más grande, por ejemplo, un, vamos a poner algo así 00:04:59

un 20, te sale una alerta y te dice lo que está diciendo 00:05:03

aquí, el número introducido debe estar entre estos valores 00:05:07

document, elemento, número, vale, value igual a vacío 00:05:09

vale, pues te deja otra vez, lo aceptas, te lo vacía 00:05:15

de acuerdo, donde está el número, lo que te está diciendo 00:05:19

el número donde está, aquí, de acuerdo, lo ha cogido y lo que hace 00:05:23

es que cuando pongo un número más grande, por ejemplo 00:05:27

luego vamos a ver, 21, este 21 que haya, desaparezca, tenemos el 21, aceptar y ha desaparecido, 00:05:30

vamos a meter un número, la del 6, mostrar y lo podemos ver de nuevo, de acuerdo, como 00:05:39

te va creando esto que está de nuevo vacío, lo hemos recargado, ponemos un 6 y la lista 00:05:46

entera que hemos puesto se va a introducir en el div, mostrar, de acuerdo, y ahí lo 00:05:53

tenéis. Ahora vamos a intentar un poco reparar esto, a ver, es que es un código un poco antiguo, ¿de acuerdo? Lo ponemos aquí, ahí, no ha saltado mucho y ahora 00:05:58

se ha quitado, ¿de acuerdo? Tenemos que salvar, salvamos el multiplicar, nos ponemos en esta otra de aquí y le pasamos el evento, los eventos que ocurran en el 00:06:10

formulario, de acuerdo, ya está, salvamos y recargamos la página, ponemos un 5, mostrar y funciona, bueno, la diferencia es, ha funcionado y está actualizado el código, o sea, queda un poco deprecado, antiguo 00:06:21

JavaScript. tablaMultiplicar. - Contenido educativo

Del mismo autor…

JavaScript. while.

Variables en JavaScripts.

Typeof. JavaScript.

Plantillas de cadenas. JavaScript. 1.4.1. Algunos operadores de interés.

Objetos en JavaScripts 1.3. Tipos de datos.

JavaScripts 1.3.1. Conversiones de tipos de datos. Parte III.