En el post anterior se intentó dar un vistazo general a el entorno de trabajo en JavaScript dentro de un navegador, mostrando cuáles eran sus propiedades principales, teniendo en cuenta que al iniciar la aplicación el entorno de trabajo está compuesto por todo lo que compone un objeto window, pero no sabemos mucho acerca de qué métodos o funciones podemos usar. A continuación veremos un poco de esto.
Recordemos, los procedimientos mostrados a continuación son métodos del objeto ventana y pueden ser invocados de manera directa puesto que el contexto de inicio de los scripts que se ejecutan en el navegador es la ventana misma.
- alert(mensaje): Es uno de los procedimientos más usados, éste despliega un diálogo con un mensaje específico
- close(): Cierra la ventana
- confirm(mensaje): Lanza un diálogo de confirmación y dependiendo de la respuesta retorna true o false
- open(url, nombre, parámetros, reemplazar): Crea una nueva ventana en la cual carga la url, con el nombre y los parámetros especificados, y dependiendo del último valor la url especificada reemplazará la url de la ventana actual.
- print(): Imprime el contenido de la página actual.
- prompt(mensaje, valor): Crea un diálogo con una caja de texto, el diálogo tiene un mensaje especificado en el primer parámetro y como valor inicial el valor (valga la redundancia) especificado en el segundo parámetro.
- setInterval(funcion_o_expr, milisecs): Llama a una función o evalúa una expresión cada cierto intervalo de milisegundos. se detiene cuando la función clearInterval(id) es llamada. Ésta retorna un identificador.
- clearInterval(id): Detiene la ejecución periódica de la acción creada con setInterval a la que está asociada el id entregado.
- setTimeout(): Llama a una función o evalúa una expresión después de un intervalo de tiempo especificado en milisegundos. Ésta retorna un identificador y es detenida por la función clearTimeout(id).
- clearTimeout(id): Detiene la ejecución de la acción lanzada por setTimeout asociada al id entregado.
Muy bien, todo esto es muy bonito, pero, ¿Para qué podría usar todo esto?. A continuación vamos a hacer un pequeño ejemplo en el cual vamos a usar solo un par de los procedimientos que fueron descritos anteriormente. Vamos a hacer un cronómetro.
A continuación está el código HTML:
<html>
<head>
<title>Mi Cronometro</title>
<style>
#reloj {
font-size:4em;
}
</style>
<script src="crono.js"></script>
</head>
<body>
<script>
var cronometro = new Cronometro();
</script>
<button onclick="cronometro.iniciar()">Inicio</button>
<button onclick="cronometro.detener()">Detener</button>
<button onclick="cronometro.reiniciar()">Reiniciar</button>
<div id="reloj">
0:0
</div>
</body>
</html>
Y el código JavaScript:
function Cronometro(lugarCarga){
var self = this;
self.interval = 0;
this.upd = function(){
var secs = self.interval/100;
var milis = self.interval%100;
self.lugarCarga.innerHTML = Math.floor(secs)+":"+milis;
}
this.paso = function(){
self.interval = self.interval + 1;
self.upd();
}
this.iniciar = function(){
self.lugarCarga = document.getElementById('reloj');
self.id_intervalo = setInterval(self.paso,10);
};
this.detener = function(){
clearInterval(self.id_intervalo);
};
this.reiniciar = function(){
self.interval = 0;
self.lugarCarga.innerHTML = "0:0";
};
}
Pueden encontrar los códigos de ejemplo en GitHub.
No hay comentarios:
Publicar un comentario