03 May Dibujar una escalera con javascript
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.

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!
Entradas relacionadas:
En esta entrada explicamos los tipos de cookies que existen y mostramos una biblioteca de funciones que nos permite crear, modificar, eliminar y detectar cookies con javscript.
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
Ejercicio con solución de la serie ejercicios javascript puro dónde se muestra como modificar el href de todos los enlaces de una web.
La consola del navegador es una herramienta imprescindible para cualquier aprendiz de Javascript. ¿Podemos darle un poco más de color y utilidad?
¿Estás estudiando javascript o otro lenguaje de programación? Las prisas nunca son buenas para ello. ¿Qué respondo a mis alumnos?
Ejercicio javascript que regula el control de accesos a una página web según edad del visitante. Incluye solución.
No Comments