Dibujar una escalera con javascript

Dibujar una escalera con javascript

Print Friendly, PDF & Email
Valora esta entrada

En este ejercicio vamos a combinar css y javascript de un modo divertido.

A pesar de que escribiremos la página web con javascript es verdad que algunos estilos deberán ser declarados de inicio.

Las siguientes entradas te pueden ser de utilidad.

Existen muchas formas de solucionar el ejercicio. Sin embargo en este caso el ejercicio está orientado a nivel principiante de alguien que justo está empezando a aprender.

¡Vayamos al ejercicio!

Vamos a repasarlo mediante un ejercicio.

Enunciado

Se desea escribir en un documento web una escalera de color #cccccc; como el indicado en la imagen.

Utiliza la instrucción document.write( ) para ello.

enunciado ejercicio javascript escalera de color
enunciado ejercicio javascript escalera de color

Solución del ejercicio

La solución pasa por saber escribir el primer peldaño.

document.write('<div style="width:'+50*i+'px"></div>');

Una vez escribimos el primer peldaño los siguientes se pueden dibujar iterativamente.

La etiqueta elegida es un div cuyo background-color es #cccccc;

Se usan los siguientes estilos:

<style>
div{
	display:block;
	height:50px;
	background-color:#ccc;
}
</style>

¿Como queda el documento js?

for(i=1;i<=10;i++){
	document.write('<div style="width:'+50*i+'px"></div>');
};

Como observación al salir del for el valor de i es 11.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.