En la clase anterior Barras gráficas usando la etiqueta <progress>, empezamos a ver gráficos en nuestros navegadores. La verdad es que se va agradeciendo después de unas veinte clases conociendo las etiquetas o elementos que nos van a hacer falta conocer para crear nuestro sitio web.
Pués continuamos con la racha, porque vamos a aprender a usar la etiqueta <progress>. Que además, para hacerla funcionar como es debido, necesitamos hacer uso de un tercer lenguaje, Javascript. Lo se, no hemos empezado aun con CSS3 y ya estamos con Javascript, como dijo El Chapulín Colorado, "que no panda el cunico, todos mis movimientos están fríamente calculados". Bueno dejemos las bromas aun lado y vamos al turrón.
La etiqueta <progress> nos permite mostrar gráficamente el progreso de una tarea. Por ejemplo, la carga de un archivo, la carga de una aplicación o el avance de algún progreso en concreto.
Estos son sus atributos
value="": que hace referencia al valor actual del progreso.max="": hace referencia al nivel máximo de progreso de la barra.
Así es la sintaxis de la etiqueta <progress>:
<progressvalue="10"max="100"></progress>
A continuación vamos a ver como hacer funcionar esta etiqueta con Javascript sin volvernos totalmente locos. Posiblemente, va a ser una de las clases más complejas hasta la fecha. Voy a explicarlo a mi manera y creo que sois suficientemente hábiles para entender este ejemplo. Lo primero que vais a ver es el código html con el script que hace funcionar la barra de carga y luego explico cada elemento, valor, variante, etc.
<progress value="0"max="100" id="barra"></progress>
<input type="button" value="Cargar" onclick="setInterval('cargalo()',1000)">
<script>
function cargalo(){
var barra=document.getElementById("barra");
barra.value+=5;
</script>
¡¡RECUERDA!! en HTML no pueden haber 2 etiquetas que tengan el mismo id.
En este ejemplo hemos creado un campo de tipo botón - <input type="button" - y cuando se haga clic en el botón, - setInterval - cada cierto tiempo se va a ejecutar la función cargalo - ('cargalo()',1000) - cada 1000 mili segundos.
En <script> definimos la función con function le decimos cargalo() definimos una variable var llamada barra y usando javascript seleccionamos un elemento por el id document.getElementById y hemos colocado ("barra"). Al colocar ("barra") lo que va hacer javascript es buscar la etiqueta con el id barra de esta linea de código <progress value="10" max="100" id="barra"></progress> ahora dentro de barra tenemos todas las propiedades de esta etiqueta. Hemos colocado value+=5; , es decir, que se le va agregar 5 al valor actual de la etiqueta <progress>. Al hacer clic en la etiqueta <input> esta función se va ejecutar cada segundo de forma automática y cada 5 segundos la barra irá creciendo hasta llegar al 100%
 |
| Vista desde el navegador Google Chrome |
Esto es solo un ejemplo del funcionamiento de javascript, no hace falta entenderlo por el momento. Pero si lo has entendido mucho mejor, ya que el uso de estas barras esta muy extendido en los sitios web.
Si copiáis el código en vuestro Sbime Text y ejecutáis el archivo en vuestro navegador, veréis como funciona la barra. Por supuesto, con los estilos css que le aplica el navegador por defecto, no vamos a entrar a aplicarle estilos a la barra en estos momentos.
Conclusiones
Puede que a alguno casi le estalle la cabeza, a mi la primera vez casi. Pero no os obsesionéis con entender el funcionamiento de Javascript. Aquí la cuestión es que entendáis el uso y la existencia de la etiqueta y no del script.
Nada más por ahora y os recuerdo que justo debajo, tenéis el listado de las clases que llevamos hasta la fecha. Me gustaría que compartieses esta publicación con tus amigos, nos regales un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.
0 Comentarios