Tag Archive for javascript

Introducción a JSON, sintaxis y ejemplos

JSON es una notación de objetos basada en JavaScript, utiliza una sintaxis que nos permite crear objetos de manera rapida y simple, estos objetos pueden ser utilizados de la manera que queramos y la notación se utiliza muy comúnmente para crear servicios REST, objetos, e incluso fue adoptada por algunas bases de datos como lo es MongoDB. A continuación el siguiente video tutorial demuestra una introducción. Codigo ejemplo puedes encontrarlo posteriormente.

Sintaxis de JSON

Para escribir JSON debemos tener en cuenta lo siguiente:
La creación de los objetos JSON implica escribir datos, para ello:

  • Losdatos estan separados por comas.
  • los datos se escriban en pares, siendo primero el nombre o atributo del mismo y luego el valor del dato.
  • Los objetos JSON estan rodeados por llaves “{}”
  • Llaves cuadradas [] guardan arreglos, incluyendo otros objetos JSON

Ejemplo de un objeto JSON que guarda un usuario y password:

var objetoJSON = {"usuario":"user","password":"123456"};

 

Video tutorial:


Codigo fuente:

<!DOCTYPE  html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<section id="tests">
		<h1>Tutorial JSON (JavaScript Object Notation)</h1>
		<div id="content" >

		</div>
	</section>
	<script type="text/javascript">

	var objetos = {"Personas":[
			{"nombre":"Jorge","edad":23},
			{"nombre":"Carlos","edad":17}
		]};

	document.getElementById('content').innerHTML = objetos.Personas[1].nombre ;
	/*Declarar un objeto JSON con una funcion en un atributo
	 notese el uso de "this" que hace referencia a el objeto en sí, es decir a persona*/
	var persona = {"name":"Jorge","edad":23,
				  "avisar":function(){alert("Hola soy "+this.name);}
				 };

	persona.avisar();
	</script>
</body>	
</html>

 

Tutorial de JavaScript-El Método substring (inicio, final)

El método substring devuelve una subcadena de la cadena de texto, que hemos obtenido mediante los dos parámetros que especificamos: `inicio, final’. El segundo parámetro es opcional.
El número que indicamos en el primer parámetro, comienza a contar por el número 0 en adelante y el segundo parámetro que es opcional comienza desde el número 1. Para ver cómo funciona el método substring utilizaremos alert() para sacar una ventana de alerta por pantalla con la subcadena devuelta. Si le pasamos como primer parámetro un número negativo obtenemos la cadena de texto original.

<script type="text/javascript">
alert("JavaScript Substring".substring(0, 10));
</script>

 

Como podemos ver en el ejemplo, obtenemos la subcadena `JavaScript’ al poner el primer parámetro 0, nos saca la ` J ’ hasta el segundo parámetro 10 que nos marca ` t ’ por lo que, sale en pantalla `JavaScript ’.
Ahora bien, si indicamos en el primer parámetro 4 y el segundo parámetro 20 obtenemos la subcadena `Script Substing’.

<script type="text/javascript">
alert("JavaScript Substring".substring(4,20));
</script>

En el caso de que sólo indiquemos un parámetro será el inicio de la subcadena y obtenemos el primer carácter indicado hasta el final de la cadena.

<script type="text/javascript">
alert("JavaScript Substring".substring(11));
</script>

 

En este ejemplo obtenemos la subcadena `Substing’. En el siguiente ejemplo vamos a hacer una pequeña validación en el que sólo debe teclear la letra. Utilizaremos un formulario con dos input, tipo texto y botón, y un script donde llamaremos una función en donde tenemos un bucle for y un condicional.
Primero creamos un formulario en con dos input, uno para introducir un nombre donde tiene un id que identifica el mismo con el nombre de entrada. El siguiente input es tipo button y contiene el evento onclick, este evento entra en la acción cuando el usuario hace clic en el botón, al hacer clic en el botón llamamos a la función chequear ().

<input type="text" id="entrada" placeholder="Nombre" />
<input type="button" value=" Chequear " onclick="chequear()" />

 

Lo segundo que haremos es crear dentro de la etiqueta , una función con el nombre de chequear. Ahora, dentro de la función creamos dos variables i con el valor 1 y la variable e con el valor que tengo el input con el id entrada, para ello utilizamos “document.getElementById(‘ entrada ‘).value”.

function chequear()
{
var e = document.getElementById(' entrada ').value;
var i = 1;
}

 

A continuación creamos un bucle for donde le pasamos tres parámetro; en la primera le creamos una variable c, donde le asignamos 0, el segundo parámetro hacemos la condición que mientras c sea menor que la longitud de la variable e (esta variable contiene el nombre que introduce el usuario), y en el tercer parámetro ponemos c++ que es para incrementar la variable c cada vez que termina la iteración del bucle.

for (var c=0; c<e.length; c++)
{
}

 

Creamos en el bucle for c una variable caracter, donde introducimos ”e.substring(c,i)”; en el método Substring() obtenemos la subcadena de la variable e, que es el nombre e introducimos la variable c y i como parámetro. Lo último es hacer una condición. Si la variable carácter es menor que “a” o mayor que “z” que saque por pantalla el mensaje “Sólo se admite letras.” , hacemos un return para finalizar la sentencia y al salir de la condición ponemos i++ para incrementar la variable si la condición no se cumple.

var caracter = e.substring(c,i);
if (caracter"z")
{
alert("Sólo se admite letras.");
return;
}
i++;

 

Código completo.

<!doctype html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Ejemplo en donde utilizamos la propiedad Substring</title>
	<script type="text/javascript">
		function chequear()
		{
			var e = document.getElementById(' entrada ').value;
			var i = 1;
			for (var c=0;  c<e.length;  c++)
			{
				var caracter = e.substring(c,i);
				if (caracter<"a" || caracter>"z")
				{
					alert("Solo se admite letras.");
					return;
				}
				i++;
			}
		}
	</script>
</head>
<body>
	<form>
		<input type="text" id="entrada" placeholder="Nombre" />
   		<input type="button" value=" Chequear " onclick="chequear()" />
	</form>
</body>
</html>

 

Como hacer un plugin de jquery basico

Cada vez los plugins de jQuery se hacen mas y mas comunes, asi que porque no hacer uno propio?

Hacer un plugin basicamente solo es necesario saber javascript/jquery y manejar una plantilla para extender jQuery con nuestro plugin.

Para ello debemos crear un archivo .js donde crearemos nuestro plugin y usar esta plantilla.

(function( $ ){
    $.fn.miPlugin= function() {
       /*Todo el codigo de tu plugin*/
  };
})( jQuery );

Donde “miPlugin” seria el nombre de la función mediante la cual mandaremos a llamar a nuestro plugin, en este caso para mandar a llamar la función es necesario mandar a llamar un objeto de jQuery y simplemente usar la función.

$('#elemento').miPlugin()

En el siguiente ejemplo tenemos un plugin muy sencillo que sirve para activar una animación personalizada cuando se haga un hover sobre un elemento. Primero dejare la plantilla usada en HTML y luego el plugin

Plantilla HTML

<!DOCTYPE html>
<head>

<style type="text/css">
	div{
		float:left;
		width: 400px;
		height: 200px;
		border-style: outset;
	}
</style>

</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-plug.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('').animar()

})

</script>

<div id="myDiv1"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

<div id="myDiv2"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

<div id="myDiv3"><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>

</body>

 

El plugin en javascript

/*
* Author: Jorge V
*/
(function( $ ){
    $.fn.animar= function() {

    	$this = $(this)
    	$this.hover(function(){
    		$this.animate({
    			height:'250px',
    			width:'230px'
    		})
    	})

  };
})( jQuery );

Video tutorial de como hacer este plugin basico

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>