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:
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
Ejercicio con solución dónde se usa setInterval y el posicionamiento relativo y absoluto de una caja html. Serie de ejercicios javascript.
Explicación teórica y ejemplo práctico del uso de las instrucciones try + throw, catch y finally en javascript. Utilizamos esta estructura para validar un campo en un formulario. Sin embargo se puede ...
Ejercicio con solución dónde se muestra como hacer un script que cuenta todas las vocales y espacios en blanco de un texto introducido por el usario.
No Comments