Activa JavaScript para disfrutar de los vídeos de la Mediateca.
Pintar un rombo con Javascript (i)
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
Hola, vamos a resolver el problema propuesto.
00:00:00
Queríamos obtener un rombo, de cual sabíamos exactamente cuál iba a ser su tamaño.
00:00:06
Aquí en pantalla tenemos uno dibujado, sin embargo, vamos a ver, vamos a pedir los datos,
00:00:14
vamos a ponerle de 13 niveles de altura, y efectivamente saldría este de aquí.
00:00:20
Vamos a ver cómo es el código que nos hace falta para obtener este resultado.
00:00:26
bueno, este es un programa que ya tiene una pequeña entidad
00:00:31
y entonces vamos a intentar en el body introducir lo que es prácticamente imprescindible
00:00:34
en nuestro caso tenemos el body
00:00:40
una etiqueta para pintar la palabra rombo
00:00:44
y después una zona donde pone script
00:00:49
y esto es lo que voy a pedir
00:00:52
de momento voy a pedir un valor que sea impar
00:00:53
con lo cual voy a poner niveles a cero
00:00:58
voy a ir preguntando mientras que niveles
00:01:01
no sea divisible entre dos
00:01:03
voy a ver hasta que lo consiga
00:01:07
y una vez que consiga un valor impar
00:01:08
pues ya salgo de aquí y voy a pintar el rombo
00:01:10
¿de acuerdo?
00:01:13
con lo cual llamaré a la función rombo con ese valor
00:01:14
vamos a ver la función rombo
00:01:17
que la tendremos por aquí arriba
00:01:19
la función rombo pues necesita
00:01:20
vamos a volver a la figura para verla más claramente
00:01:24
necesita unos espacios, unos espacios iniciales
00:01:27
y un asterisco, tanto en la primera como en la última línea
00:01:32
y en el resto, la estructura es siempre la misma
00:01:37
unos cuantos espacios, un asterisco, otros tres cuantos espacios
00:01:40
y otro asterisco, y ahí acaba
00:01:44
además si uno mira, está la primera línea
00:01:47
que tiene poco que ver con el resto
00:01:51
después todas estas líneas desde aquí hasta aquí
00:01:53
en el cual se va decrementando los espacios iniciales
00:01:58
e incrementando los intermedios
00:02:02
ese proceso se invierte desde aquí hasta aquí
00:02:04
y finalmente esta línea que es exactamente igual que la primera
00:02:08
bueno, sabiendo esto vamos a dividir nuestro código en nuestras cuatro partes
00:02:12
la primera línea en el cual se anuncia cuántos son los espacios iniciales
00:02:17
que son justamente por la mitad de los niveles menos 1.
00:02:22
El 1 es justo para pintar el asterisco.
00:02:26
Con lo cual vamos a llamar a una función que se llama línea límite,
00:02:29
línea límite es la primera y la última,
00:02:33
en la cual incluyamos cuántos espacios le hacen falta
00:02:35
y los vayamos ya decrementando para la siguiente pasada.
00:02:40
No quiero tocar el código. Ahí está.
00:02:44
Bueno, la segunda parte vamos recorriendo todos los niveles.
00:02:47
empezamos con que los espacios intermedios solamente hay uno
00:02:51
y en cada pasada los incrementaremos en dos valores
00:02:55
y los espacios iniciales vamos decrementándolos pasada a pasada
00:02:59
y para cada uno de ellos llamaremos a línea
00:03:03
indicándole cuántos espacios iniciales hay y cuántos intermedios
00:03:05
la siguiente parte del código
00:03:09
inicializaremos los espacios iniciales que hacen falta y los espacios intermedios
00:03:12
y vamos a pasar esa misma línea
00:03:18
y ahora lo que hacemos es incrementar los espacios iniciales
00:03:20
y decrementar los intermedios
00:03:23
y la última línea, si hace falta
00:03:25
puesto que puede haber que solamente se pida un nivel
00:03:28
y entonces no nos haga falta
00:03:30
la pintamos con los espacios iniciales correspondientes
00:03:31
visto esto, vamos a ver estas funciones que han ido surgiendo
00:03:35
la primera que tenemos es límite-línea
00:03:39
en la cual solamente pintamos una línea con un asterisco
00:03:43
con lo cual pintamos tantos espacios como nos digan, pintamos un asterisco y pintamos un fin de línea.
00:03:45
La otra función que tenemos que ver es línea, que le pasamos cuántos espacios tiene al inicio, cuántos entre medias,
00:03:53
entonces pintamos los espacios al inicio, pintamos un asterisco, pintamos los espacios al intermedio, otro asterisco y el fin de línea.
00:04:02
Bueno, pintar un fin de línea, pues no ni más ni menos que hacer un documental write de br.
00:04:11
pintar un asterisco, pintar un asterisco
00:04:15
como su propio nombre indica
00:04:18
y pintar
00:04:20
un montón de espacios, pues voy a pintar
00:04:22
el carácter este de aquí
00:04:24
que ya saben ustedes que es la entidad
00:04:26
correspondiente al espacio en HTML
00:04:28
tantas veces como nos lo digan
00:04:29
bueno, aquí simplemente
00:04:32
lo que hacemos es que caracteres
00:04:34
va recorriendo
00:04:36
y va pintando ese carácter
00:04:37
tantas veces como nos haga falta
00:04:40
con esto
00:04:42
ya tenemos completamente finalizado
00:04:43
nuestro ejercicio
00:04:47
les dejo este vídeo
00:04:48
y ya les contaré alguna característica más
00:04:50
curiosa de este problema
00:04:53
que intentaremos solventar con el siguiente ejemplo
00:04:55
hasta luego
00:04:57
- Idioma/s:
- Materias:
- Informática, Tecnologías de la Información
- Autor/es:
- Amadeo Mora
- Subido por:
- Amadeo M.
- Licencia:
- Reconocimiento - No comercial - Compartir igual
- Visualizaciones:
- 480
- Fecha:
- 14 de marzo de 2020 - 17:21
- Visibilidad:
- URL
- Centro:
- IES CLARA DEL REY
- Duración:
- 05′ 01″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1364x768 píxeles
- Tamaño:
- 40.19 MBytes
