Archive for Javascript

Control de tiempo usando setInterval() – practica Cronometro en JavaScript

Bienvenidos a otra publicación estimados lectores. Esta ocasión veremos la función setInterval, que nos sirve para realizar control de tiempo en javascript. Esto quiere decir, ejecutar una pieza de codigo cada determinado tiempo, de manera que podemos aprovecharlo para hacer una aplicación tan sencilla como un cronometro para comprender mejor su funcionamiento.

Implementación de setInterval()

setInterval es una función del objeto window, y consta de 2 parametros principalmente, su uso mas basico el el siguiente, donde el primer parametro describe una funcion anonima que contiene el codigo a ejecutar cada cierto tiempo, y el segundo parametro es el tiempo en milisegundos que separa cada intervalo de ejecución.

//Forma 1
setInterval(function(){/* codigo a ejecutar*/}, time);
/*donde time es el tiempo en milisegundos*/

//Forma 2 (usando window)
window.setInterval(function(){/* codigo a ejecutar*/}, time);

Para destruir el intervalo de tiempo basta con usar la funcion clearInterval() el usarla sin especificar parametros detendra el funcionamiento de los procesos que actualmente se esten ejecutando por medio de una funcion de setInterval.

En el siguiente ejemplo veremos como hacer un cronometro en el que usamos esta función para contar minutos y segundos, y que podemos detenerla usando un identificador en la funcion de setInterval y clearInterval. Solo es necesario copiar y pegar en un archivo html.

Codigo fuente ejemplo de cronometro de minutos y segundos

<!DOCTYE html>
<html>
<head>
	<script type="text/javascript">
	//setInterval
	var cronometro;

	function detenerse()
	{
		clearInterval(cronometro);
	}

	function carga()
	{
		contador_s =0;
		contador_m =0;
		s = document.getElementById("segundos");
		m = document.getElementById("minutos");

		cronometro = setInterval(
			function(){
				if(contador_s==60)
				{
					contador_s=0;
					contador_m++;
					m.innerHTML = contador_m;

					if(contador_m==60)
					{
						contador_m=0;
					}
				}

				s.innerHTML = contador_s;
				contador_s++;

			}
			,1000);

	}

	</script>
</head>
<body onload="carga()">
	<p>
		<span id="minutos">0</span>:<span id="segundos">0</span>
	</p>
	<input type="button" onclick="detenerse()" value="deternse"/>
</body>
</html>



Ajax en jQuery

Bien muchos ya seremos algo familiares con la tecnica AJAX, para establecer una comunicación servidor-cliente de manera asincrona. En este articulo veremos como realizar un ejemplo de petición AJAX desde javascript a una aplicación PHP utilizando el metodo jQuery.ajax(). También recordemos que la ventaja de utilizar jQuery es que no tenemos que preocuparnos por la compatibilidad con los distintos navegadores, puesto que jquery maneja los casos y excepciones correctamente para ejecutar el codigo en los navegadores que existen actualmente.

El uso basico es el siguiente:

jQuery.ajax({
		url:'colocar la url de la aplicacion web  a enviar peticion',
		type:'get o post ',
		data:{
              /*Aqui colocar los nombres de datos a enviar al servidor*/
		}

	}).done(
		function(resp)/*resp sera la respuesta obtenida desde el servidor*/
		{

			/*Codigo*/
		}
	);

Basicamente lo que estamos haciendo es especificar en el metodo .ajax() una URL a la que vamos a enviar información, el metodo que puede ser ‘get’ o ‘post’ y datos a enviar, del mismo modo la funcion .done() evalua un codigo nuestro una vez que se ha obtenido una respuesta del servidor. El parametro resp dentro de la funcion anonima en este metodo done() representa el valor de dicha respuesta.

Veamos el siguiente ejemplo. Enviaremos un numero desde jquery a una aplicación PHP, la aplicación del servidor(php) respondera con una respuesta dependiendo del valor del numero.

Ejemplo:

El PHP:

<?php

$data = $_GET['number'];

if($data >=10)
	echo "Numero ".$data;
else
	echo "Cualquier otro numero :(";
?>

 Archivo html con el javascript:

<!DOCTYE html>
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript">
	/*AJAX*/
	jQuery.ajax({
		url:'http://localhost/php/test.php',
		type:'get',
		data:{
			number:'15',
			informacion:10,
			data:'hola'
		}

	}).done(
		function(resp)
		{
			alert(resp);
		}
	);

	</script>
</head>
</html>

 

Explicación en Video:

Eventos en Javascript (onclick, onload, onmouseover,onmouseout)

Hola estimados lectores y bienvenidos a este tutorial, los eventos en JavaScript basicamente son una de las propiedades que nos acercan mas a crear páginas web totalmente dinamicas, esto se debe a que cuando hablamos de un evento, quiere decir que al “ocurrir una acción” en nuestro sitio web, nosotros podemos disparar una secuencia de codigo, a esto se le llama evento.

Ejemplos de eventos pueden ser dar click a un boton, poner el mouse sobre un elemento del nuestro sitio, o incluso cargar el que la página web se haya cargado completamente, los siguientes son algunos de los eventos mas comunes en javascript.

El evento onclick:

Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.

Ej:

<button value="esto es un boton" onclick="mi_funcion()"/>

Los eventos onmouseover y onmouseout:

Al diferencia de “onclick”, este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”, respectivamente “onmouseout” se dispara cuando el puntero sale del area de un elemento del DOM.

Ej:

<div id="contenedor" onmouseover="alert('entraste en el area del contenedor')" onmouseout="alert('haz salido del area del contenedor')"/>

 

El evento onload:

Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.

Ej:

<body onload="mi_funcion()">
<!-- codigo html -->
</body>

 

 

Codigo de practica con eventos onclick, onload, onmouseover, onmouseout

<!DOCTYPE html>
<html>
	<head>
	<script type="text/javascript">
	//EVENTOS EN javascript

	function hacer_click()
	{
		alert("Me haz dado un click");
	}

	function hacer_hover()
	{
		alert("Estas sobre mi!");
	}

	function salir_del_hover()
	{
		alert("Adios!");
	}

	function cargar_pagina()
	{alert("Ya se ha cargado el sitio web");}
	</script>
	</head>

	<body onload="cargar_pagina()">
		<form>
			<input type="button" value="dame click!"  onmouseout="salir_del_hover()" onmouseover="hacer_hover()" onclick="hacer_click()"/>
		</form>
	</body>

</html>

 Video tutorial de eventos en Javascript:

Tutorial JavaScript – La propiedad .length para cadenas de texto

En este tutorial de JavaScript vamos a ver la propiedad length, para ello debemos de tener un conocimiento básico sobre JavaScript y HTML. Length se utiliza para devolver la longitud de una cadena de texto. Su sintaxis:

String.length

Donde “String” representa una variable que contiene texto.

Veamos el siguiente codigo donde se ve un ejemplo mas claro.

Ejemplo de sintaxis:

<script type="text/javascript">

var cadena = "Soy una cadena de texto.";

alert(cadena.length);

</script>

 

Creamos una variable con el nombre de `cadena’ y almacenamos el texto `Soy una cadena de texto.’.

var cadena = "Soy una cadena de texto.";

 

Con el método alert() sacamos una ventana en pantalla mostrando la  información obtenida por  la propiedad length.

alert(cadena.length);

 

En la ventana de alerta de JavaScript aparece el número 24 que es la longitud de la variable `cadena’ (length cuenta los espacios de la cadena de texto).

También length se utiliza para la matriz (Array);  Esta matriz se utiliza para almacenar valores, al igual que una variable, con la diferencia de que en la matriz se almacena más de un valor y se recuperan con el nombre de la variable y con su índice.

<script type="text/javascript">

var comunidad = new Array();

comunidad[0]="Andalucía";

comunidad[1]="Aragón";

comunidad[2]="Asturias";

comunidad[3]="Baleares";

comunidad[4]="Canarias";

comunidad[5]="Cantabria";

for (var i = 0; i < comunidad.length; i++)

{

document.write(comunidad[i]);

document.write("<br />");

}

</script>

 

Creamos la matriz:

var comunidad = new Array();

Ahora almacenamos a la variable comunidad los valores,  con el nombre de la variable seguido del índice, comienza del 0, 1, 2, 3,..etc. Dentro de corchetes.

comunidad[0]="Andalucía";

comunidad[1]="Aragón";

comunidad[2]="Asturias";

comunidad[3]="Baleares";

comunidad[4]="Canarias";

comunidad[5]="Cantabria";

 

Para utilizar la propiedad length utilizaremos el bucle for, a continuación ejecuta un código hasta que se cumple una condición definida su finalización. Ampliación del bucle for AQUÍ.

for (var i = 0; i < comunidad.length; i++)

{

document.write(comunidad[i]);

document.write("<br />");

}

 

La propiedad length cuenta el número de índice que contiene la matriz (cuenta la longitud). El bucle for iniciar con la variable ` i ´ y su valor 0, y hace la condición de si ` i ´ es menor que 5 (la longitud de la matriz) que ` i ´ aumente su valor a 1.

document.write(comunidad[i]);

 

Imprime por pantalla cada vez los valores que contiene la matriz.