1.- Introducción a Javascript – Curso Básico de #Javascript #1

Javascript es un lenguaje de programación interpretado, es decir, que no ocupa compilarse, es un lenguaje que a pesar no ser Orientado a Objetos cien por ciento, es un potente lenguaje con el cual podemos realizar cosas grandiosas en los sistemas o páginas web.

El lenguaje es fácil de utilizar, ya que es débilmente tipado, sus variables no tienen tipo inmediato, por lo cual podemos crear scripts rápidamente.

Una de las ventajas en el aprendizaje de javascript es que no se necesita de instalar compiladores, ni configurar nada, basta con tener un navegador web y un editor de texto y comenzar a codificar.

Para ello podemos utilizar cualquier navegador para verificar las cosas que vamos ir haciendo, y a su vez son libres de tomar cualquier editor para ello, pueden utilizar desde block de notas, aptana, dreamweaver, sublime etc etc. Este no es ningún problema ya que en este curso solo veremos javascript sin ir más allá a un lenguaje de servidor (php, asp, jsp).

Comenzaremos con lo primero, como comienzo a poner código de javascript. Crearemos un archivo de nombre introduccion.html que contendrá el siguiente código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>introducción</title>

    </head>

    <body>
    </body>
</html>

Ahora para comenzar a introducir código de javascript vamos a poner lo siguiente dentro de la etiqueta <head>:


<script>
alert("Hola mundo")

</script>

Para que nuestro script completo quede así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>introducción</title>
 
       <script>
        document.writeln("Hola Mundo!")
       </script>
 
    </head>
 
    <body>
    </body>
</html>

Ahora damos doble clic a nuestro archivo que creamos, en caso de que ningún navegador lo abra podemos abrir primero el navegador y después arrastrar el archivo a este, eso será suficiente para ejecutarlo.

Cuando el navegador abre el script, nos mostrara algo parecido a esto:

Lo que en realidad estamos haciendo, es especificarle al navegador mediante las etiquetas <script></script> que lo que este dentro de ellas es código javascript, y lo que hace document.writeln() es escribir el texto en el navegador (después veremos más sobre el objeto document).

Existen otras 2 maneras para ejecutar código javascript, una la veremos más adelante en el capítulo de eventos, pero por ahora veamos la otra manera que es quizá la más utilizada y consiste en hacer un archivo con extensión .js y ahí poner nuestro código javascript, y después hacer referencia a este archivo desde nuestro script.

Para ello creamos un archivo de nombre pato.js en la misma ruta que nuestro archivo antes creado.

En este archivo agregamos el siguiente código:

document.writeln("Hola pato");

A continuación vamos a el archivo introducción.js y agregamos el siguiente código enseguida del anterior (ósea entre las etiquetas <head></head> pero después del anterior código creado):

<script src="pato.js" language="javascript" type="application/javascript"></script>

Y nos debe quedar nuestro archivo introducción.html así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>introducción</title>
		<script>
        document.writeln("Hola Mundo!")
        </script>
    	<script src="pato.js" language="javascript" type="application/javascript"></script>
    </head>

    <body>
    </body>
</html>

Ejecutamos nuestro archivo introducción.js en el navegador (o arrastramos) y debemos obtener lo siguiente:

hola mundo hola pato

De esta manera utilizando la etiqueta <script> pero especificando mediante su atributo src un archivo de extención js (.js) asignamos todo el código de dicho archivo a nuestro script, de esta manera podemos organizar mejor nuestro código, y no tener todo el código en un archivo. Los otros atributos de la etiqueta <script> (type y language) se utilizan por estándar, ya que al nacer javascript  (por el año de 1995) existían otros lenguajes parecidos y el navegador necesitaba saber cual es el que interpretaría, aunque hoy en día javascript ya tomo dominio total.

Para ver el código en ejecución den clic aquí.

Ir al Capitulo Siguiente (2.- Variables y Funciones).

Curso Básico de Javascript

Este curso esta creado para personas que ya tienen conocimiento de programación en otros lenguajes, así como conocimiento en HTML y CSS básico; el curso se enfoca en explicar javascript desde cómo funcionan las variables, hasta la creación de elementos en tiempo de ejecución.

El curso está diseñado para ser leído y comprendido en poco tiempo, e igual cualquier duda estoy a la disposición de la persona que desee preguntar.

El curso se divide en 10 partes, las cuales muestro a continuación:

1.- Introducción a javascript.

2.- Variables y Funciones.

3.-Estructuras de Control

4.- Arreglos

5.- Programación Orientada a Objetos POO

6.- Eventos

7.- El objeto document

8.- La interfaz Node

9.- Modificación de elementos HTML con Javascript.

10.- Creación de elementos HTML con Javascript.

Group_concat en #SQLServer, concatenar campos de un agrupamiento como en #mysql.

En este artículo explico cómo realizar una concatenación de un campo de una agrupación en SQL Server (algo parecido a lo que se obtiene con la función group_concat de mysql). Esto sirve para obtener en un registro todos los campos distintos de dicha agrupación. Por ejemplo, tenemos la siguiente tabla de nombre EstadoMunicipio:

tabla sql server - estados municipios

Suponiendo que deseamos agrupar los estados y obtener en un campo al lado la concatenación de sus municipios, eso en mysql se hace con una función llamada group_concat, en SQL Server no existiendo dicha función (que nos facilita todo) podemos obtener el mismo resultado utilizando la función Stuff de Sql Server, pero de una manera especial, como planteo en el siguiente query:

SELECT 
     Estado,
     STUFF(
         (SELECT  municipio +', ' 
          FROM EstadoMunicipio
          WHERE estado = a.estado
          FOR XML PATH (''))
          , 1, 0, '')  AS [Municipios Concatenados]
FROM EstadoMunicipio AS a
GROUP BY Estado

Este es el resultado:

resultado query group_concat sql server

De esa manera podemos realizar algo como lo que hace la función group_concat de mysql.

Si desean utilizar este query, basta con que sustituyan el nombre de la tabla EstadoMunicipio por el nombre de la que tengan ustedes, sustituyan también el nombre del campo municipio, el nombre del campo estado (que es el que utilizamos para agrupar) y la unión realizada en el where, por el campo por el cual están agrupando.

Labels en #GoogleMaps, ¿Cómo poner texto a los #markers? #APIV3

En este articulo hablare de cómo poner texto a los markers de google maps, para ello utilizaremos una librería (son escasas) la cual nos solucionara todo el problema, cabe mencionar que yo solo conozco a lo mucho 3 librerías que hacen esto, pero para mí esta es la mejor.

Para ver el código corriendo den clic aquí.

Para descargar la librería MarkerWithLabel den clic aquí.

Primero haremos la referencia al api de google maps y a la librería de la siguiente manera.

&lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=true"&lt;/script&gt;
&lt;script src="https://secureservercdn.net/160.153.137.5/357.e61.myftpupload.com/tutoriales/scripts/MarkerWithLabel.js"&lt;/script&gt;

Estando ya la referencias proseguimos a el código.

Código CSS:


.labels {
color: #000;
background:#fff;
border:1px solid #000;
display:none;
text-align:left;
font.weight:bold;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 12px;
text-align: center;
width: 100px;
white-space: nowrap;
z-index:9999999;
position:relative
}

Código HTML:


&lt;body&gt;
&lt;div id="mapa" style="height:600px;"&gt;&lt;/div&gt;

&lt;/body&gt;

Código Javascript:


inicializaMapa();

function inicializaMapa() {

//posicion del mapa
var posicionCentro = new google.maps.LatLng(22.1111, -98.1111);

//opciones de mapa
var mapOptions = {
zoom: 13,
center: posicionCentro,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

//creamos el mapa en el div con el id "mapa"
map = new google.maps.Map(document.getElementById('mapa'),
mapOptions);

//aqui creamos el marker, solo que debe ser un tipo MarkerWithLabel, este objeto no lo proporcina la libreria de mismo nombre
markerConLabel= new MarkerWithLabel({
position:posicionCentro,
title: "marker con label",
labelContent: "Texto en mi marker",
labelAnchor: new google.maps.Point(50, 70),
labelClass: "labels", // the CSS class for the label
map: map
});

}

Como podemos observar tenemos  un div en donde pondremos nuestro mapa, una clase de CSS y una función que es la que inicializa el mapa.

En la función hacemos lo de siempre creando el mapa con una posición dada, pero lo interesante viene al momento de crear el marker, esta vez no utilizaremos el típico marker, si no que utilizaremos un objeto llamado MarkerWithLabel el cual nos proporciona la librería del mismo nombre. La creación es igual que un marker común y corriente a excepción de los siguientes métodos:

labelContent: sirve para poner el texto que deseamos ver.

labelAnchor: sirve para poner la posición de nuestro label respecto a nuestro marker, es parecido al left y top de CSS (solo que el top funciona al revez, mayor numero se desplaza hacia arriba y no hacia abajo).

labelClass: Es para darle una clase de CSS a nuestro label, esta esta definida en el código que puse anteriormente.

Espero les sirva de ayuda para cuando deseen poner texto (label) en un marker, ya que no hay muchas opciones.

Les anexo el api de la libreria MarkerWithLabel.js que contiene algunas otras funcionalidades.

Tutorial básico de selectores de #jquery. #selectors

Este articulo trata sobre lo más básico que se utiliza al programar con jquery, los selectores.

Seré breve ya que posteriormente haré algunos artículos más avanzados sobre este mismo tema, pero para este comenzaremos por definir que es un selector.

Un selector como su nombre lo dice, es un medio que nos proporciona jquery para seleccionar un elemento o conjunto de elementos DOM, y aplicar a estos una gama de acciones que de igual manera nos proporciona jquery.

Para ellos los selectores al igual que en CSS funcionan englobándose en 3 tipos y son los siguientes:

Selector por tipo de elemento

Este selector sirve para seleccionar un conjunto de elementos (o un elemento) por medio del nombre de estos, tal como se llama por ejemplo si deseamos seleccionar los table de HTML de toda una página basta con hacer los siguiente:

$("input");

Selector por clase

Este selector sirve para seleccionar un conjunto de elementos los cuales comparten una misma clase, para ellos aplicamos la función de jquery $() y dentro de esta el nombre de la clase, anteponiendo un punto, por ejemplo:

$(".NombreDeClase");

Selector por id

Este selector como los anteriores sirve para realizar una selección de un elemento del DOM, este selector es el único que nos dará solo un elemento, respetando el estándar de que un id en una página solo debe existir una vez, y se utiliza de la siguiente manera:

$("#IdDeMiElemento");

Ahora que ya sabemos que son los selectores vamos a la magia de estos, para ello utilizaremos el siguiente código HTML, un código simple que solo contiene unos divs dentro de otros y estos contienen input los cuales tienen libros, como cuando vamos a una biblioteca, los divs son los libreros, y los input el libro en sí.

<div id="divBiblioteca">

	<div class="Horror" >

    	<div id="Lovecraft">
            <input id="MontanasLocura" type="text"  value="En las montañas de la locura" />
            <input id="Necronomicon" type="text"  value="Necronomicon" />
        </div>

        <div class="EscritoresModernos" id="King">
            <input id="Cementerio" type="text"  value="Cementerio de Mascotas" />
            <input id="Eso" type="text"  value="Eso" />
        </div>
    </div>

    <div class="Negras" >

    	<div class="EscritoresModernos" id="Katzenbach">
            <input id="Psicoanalista" type="text"  value="El Psicoanalista" />
            <input id="ElLoco" type="text"  value="El Loco" />
        </div>
    </div>

</div>

<p>Dar clic en los links de abajo para obtener el resultado del selector</p>
<a href="" style="cursor:pointer;" onclick="jsTodosLosLibros()">Todos los Libros</a><br />
<a href="" style="cursor:pointer;" onclick="jsEscritoresModernos()">Escritores Modernos</a><br />
<a href="" style="cursor:pointer;" onclick="jsStephenKing()">Libros de Stephen King</a>


Tenemos 3 funciones las cuales tienen los 3 tipos de selectores explicados anteriormente, cada función se invoca por medio de los links (<a>) y dentro de las funciones podemos ver el selector aplicado.

//Esta funcion utiliza el selector tipo Elemento, y obtenemos todos los input los cuales tienen los nombres de todos los libros
function jsTodosLosLibros(){
	cadenaLibros=""
	$("input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

//Esta funcion utiliza el selector de clase y obtenemos los que tienen la clase EscritoresModernos
function jsEscritoresModernos(){
	cadenaLibros=""
	$(".EscritoresModernos input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

//Esta funcion selecciona el div con id #King y sus hijos que son tipo input
function jsStephenKing(){
	cadenaLibros=""
	$("#King input").each(function(){
		cadenaLibros+=$(this).attr("value")+"n"
	})

	alert(cadenaLibros)
}

Y para ver este ejemplo corriendo, den clic aquí.

Este es un pequeño tutorial de selectores, próximamente pondré algo más avanzado.

¿Cómo ocultar o mostrar un grupo de #markers en el #API de #GoogleMaps? #ApiV3

En este artículo tratare de explicar de la manera más breve que puedo (y aun así salió mucho código), como podemos ocultar o mostrar un grupo de markers, y a su vez poder diferenciar unos de otros, para ello recurro a la utilización del javascript y la magia que nos permite crear objetos dinámicamente.

Para ver el script corriendo y en vivo dar clic aquí.

markers show hide

Para ello utilizo el API V3 de Google Maps para javascript.

Tenemos el siguiente código HTML el cual es sencillo, un grupo de checkbox que ejecutan una función de javascript, y un div el cual tiene de id “mapa”.

<div>
<p>Muestra u Oculta los markers (iconos) segun se desee.</p>
	<input checked="checked" onclick="jsMuestraOculta('Rojos')" type="checkbox" id="chkRojos" /><label for="chkRojos">Rojos</label>
    <input checked="checked" onclick="jsMuestraOculta('Azules')" type="checkbox" id="chkAzules"  /><label for="chkAzules">Azules</label>
</div>

<div style="height:500px;" id="mapa"></div>

A continuación muestro lo interesante, dos funciones de javascript, las cuales hacen todo el trabajo.


//en esta lista guardaremos los markers para poder tener acceso desde cualquier funcion de javascript
 var lstMarkers= [];

//variable global que guardara el objeto mapa de google, es global para tener acceso a ella en cualquier funcion
var map;

//inicializamos el mapa ejecutando la funcion de abajo que crea los markers
inicializaMapa();

function inicializaMapa() {

            //posicion del mapa
			var posicionCentro = new google.maps.LatLng(22.1111, -98.1111);
			//posiciones de los markers
			var posicionAzul1 = new google.maps.LatLng(22.1111, -98.1011);
			var posicionAzul2 = new google.maps.LatLng(22.1211, -98.1311);
			var posicionRojo1 = new google.maps.LatLng(22.1311, -98.1111);
			var posicionRojo2 = new google.maps.LatLng(22.1111, -98.1211);

            //opciones de mapa
            var mapOptions = {
                zoom: 13,
                center: posicionCentro,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

           //creamos el mapa en el div con el id "mapa"
            map = new google.maps.Map(document.getElementById('mapa'),
            mapOptions);

		/* agregamos 2 iconos rojos y 2 iconos azules
		para ello crearemos 4 objetos de javascript que contendra el marker y aparte una bandera
		la cual dira que tipo es, si es tipo ROJO o tipo AZUL
		*/
		var TipoMarkerAzul1=new Object();
		var TipoMarkerAzul2=new Object();
		var TipoMarkerRojo1=new Object();
		var TipoMarkerRojo2=new Object();

		//procedemos a crear el marker y asignarselos a los objetos junto a su tipo
		TipoMarkerAzul1.tipo="Azul";
        TipoMarkerAzul1.marker = new google.maps.Marker({
            position: posicionAzul1,
            map: map,
			icon:"img/icons/markerAzul.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerAzul2.tipo="Azul";
        TipoMarkerAzul2.marker = new google.maps.Marker({
            position: posicionAzul2,
            map: map,
			icon:"img/icons/markerAzul.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerRojo1.tipo="Rojo";
        TipoMarkerRojo1.marker = new google.maps.Marker({
            position: posicionRojo1,
            map: map,
			icon:"img/icons/markerRojo.png",
            title: 'Luminaria Principal'

        });

		TipoMarkerRojo2.tipo="Rojo";
        TipoMarkerRojo2.marker = new google.maps.Marker({
            position: posicionRojo2,
            map: map,
			icon:"img/icons/markerRojo.png",
            title: 'Luminaria Principal'

        });

		//una vez creador los objetos junto con su marker y tipo los agregaremos a la lista global que creamos con anterioridad
		lstMarkers.push(TipoMarkerAzul1);
		lstMarkers.push(TipoMarkerAzul2);
		lstMarkers.push(TipoMarkerRojo1);
		lstMarkers.push(TipoMarkerRojo2);
		//el metodo push sirve para agregar un elemento a una lista o arreglo en javascript
    }

//función que realiza la operacion de evaluar los markers y si estos se ocultaran o mostraran dependiendo el checkbox presionado
function jsMuestraOculta(tipoIcono){

	    //esta variable sirve para saber si mostraremos u ocultaremos los markers
		var muestra=false;

		//evaluamos si el checkbox presionado fue el rojo
		if(tipoIcono=="Rojos"){

			//si el checkbox esta checado la variable muestra la ponemos como true
			if(document.getElementById("chkRojos").checked)
				muestra=true;

				//recorremos todos los markes de la lista
				for(i=0;i&amp;lt;lstMarkers.length;i++){
					//comparamos si el marker actual en el recorrido es ROJO
					if(lstMarkers[i].tipo=="Rojo")
					{
						/*
						  Si el checkbox del tipo fue checado, mostramos el marker, en caso contrario lo ocultamos
						  El metodo setMap, es un metodo del API de google el cual recibe el mapa al que pertenece el marker
						     si a este metodo le damos null, el marker no pertenecera a ningún mapa, por lo cual desaparecerá,
							 en cambio si le damos el objeto mapa, se agregara al mapa nuevamente por lo cual se mostrara
						*/
						if(muestra)
							lstMarkers[i].marker.setMap(map);
						else
							lstMarkers[i].marker.setMap(null);
					}
				}

		//si el presionado fue el Azul, realizamos lo mismo que en el if de arriba solo con los tipos markers Azules
		}else if(tipoIcono=="Azules"){

			if(document.getElementById("chkAzules").checked)
				muestra=true;

			for(i=0;i&amp;lt;lstMarkers.length;i++){

					if(lstMarkers[i].tipo=="Azul")
					{
						if(muestra)
							lstMarkers[i].marker.setMap(map);
						else
							lstMarkers[i].marker.setMap(null);
					}
			}
		}
}


La función inicializaMapa(), prácticamente como podemos observar se ejecuta al entrar al script; esta función prácticamente crea 4 markers y el mapa de google, los 4 markers se diferencian por que 2 tienen un icono azul y los otros un icono rojo.

Dentro de la función viene la explicación a detalle, pero brevemente explico; esta función lo que hace prácticamente es 4 objetos de javascript los cuales tienen dos atributos, un atributo que dice el tipo de marker que es, ya sea tipo Azul o tipo Rojo, y otro atributo que guarda el marker, un objeto que nos proporciona el API V3 de Google Maps. Estos objetos que llamo TipoMarker[Color][Numero] los asigno a una lista global llamada lstMarkers, para poder hacer un recorrido en otra función y evaluar.

La otra función que tiene de nombre jsMuestraOculta(), recibe una cadena la cual nos dice que checkbox fue presionado, ya sea el que muestra u oculta los iconos Azules, o el que muestra u oculta los iconos Rojos.

Brevemente explico lo que realiza (en el código de la función vienen comentarios que explican con más detalle). Esta función evalúa los elementos de la lista, y a su vez el checkbox si esta habilitado o des des-habilitado, dependiendo esto y el tipo de checkbox presionado (Azul o Rojo) proseguimos a mostrar u ocultar.

Espero les sirva este pequeño tutorial de cómo poder hacer algunas cosas interesantes con el API de Google Maps.

Para ver el script corriendo y en vivo dar clic aquí.

¿Como crear un #div que bloquee la pantalla del navegador mientras se realiza una acción? #javascript

Hoy escribo sobre un tema bastante común que se tiene cuando se planea un sistema el cual tendrá algunas operaciones que ocupan realizarse con peticiones ajax y estas duraran bastante tiempo, y en ese tiempo debemos evitar que el usuario de nuevamente clic al botón que comenzó la petición ajax, para ello les mostrare como hacer rápidamente una ventana que bloquea la pantalla web.

En el siguiente código podemos observar dos funciones una de nombre jsRemoveWindowLoad() que solo sirve para quitar el div bloqueador que vamos a crear y la función jsShowWindowLoad() que prácticamente es la que abrirá  el div el cual bloqueara nuestra pantalla.

function jsRemoveWindowLoad() {
	// eliminamos el div que bloquea pantalla
    $("#WindowLoad").remove();

}

function jsShowWindowLoad(mensaje) {
	//eliminamos si existe un div ya bloqueando
    jsRemoveWindowLoad();

    //si no enviamos mensaje se pondra este por defecto
    if (mensaje === undefined) mensaje = "Procesando la información&amp;lt;br&amp;gt;Espere por favor";

    //centrar imagen gif
    height = 20;//El div del titulo, para que se vea mas arriba (H)
    var ancho = 0;
    var alto = 0;

	//obtenemos el ancho y alto de la ventana de nuestro navegador, compatible con todos los navegadores
    if (window.innerWidth == undefined) ancho = window.screen.width;
    else ancho = window.innerWidth;
    if (window.innerHeight == undefined) alto = window.screen.height;
    else alto = window.innerHeight;

	//operación necesaria para centrar el div que muestra el mensaje
    var heightdivsito = alto/2 - parseInt(height)/2;//Se utiliza en el margen superior, para centrar

   //imagen que aparece mientras nuestro div es mostrado y da apariencia de cargando
    imgCentro = "<div style='text-align:center;height:" + alto + "px;'><div  style='color:#000;margin-top:" + heightdivsito + "px; font-size:20px;font-weight:bold'>" + mensaje + "</div><img  src='img/load.gif'></div>";

        //creamos el div que bloquea grande------------------------------------------
        div = document.createElement("div");
        div.id = "WindowLoad"
        div.style.width = ancho + "px";
        div.style.height = alto + "px";
        $("body").append(div);

        //creamos un input text para que el foco se plasme en este y el usuario no pueda escribir en nada de atras
        input = document.createElement("input");
        input.id = "focusInput";
        input.type = "text"

		//asignamos el div que bloquea
        $("#WindowLoad").append(input);

		//asignamos el foco y ocultamos el input text
        $("#focusInput").focus();
        $("#focusInput").hide();

		//centramos el div del texto
        $("#WindowLoad").html(imgCentro);

}

La funcionalidad de jsShowWindowLoad() sirve para mostrar un div encima de todos los controles en pantalla, este div aparece al momento de ejecutar dicha función, y este div puede desaparecer al invocar la otra función de nombre jsRemoveWindowLoad(). Para entender la funcionalidad de jsShowWindowLoad() anexe comentarios explicando parte por parte. Esto es lo que hace el javascript pero en cuanto a css ocuparemos el siguiente código para que nuestro div aparesca encima y con un estilo más estético:


#WindowLoad
{
    position:fixed;
    top:0px;
    left:0px;
    z-index:3200;
    filter:alpha(opacity=65);
   -moz-opacity:65;
    opacity:0.65;
    background:#999;
}

Este código lo que hace es poner el div encima de todos los controles, además de dar una opacidad para así aun se vea lo que está detrás.

Para ver un ejemplo funcionando dar clic aqui.

Espero les sea de ayuda.

¿Cómo utilizar los métodos #parent() y #find() de #jquery? #ejemplos

Este articulo trata sobre los métodos parent() y find() de jquery. Estos métodos son demasiado poderosos cuando se manejan de manera adecuada, ya que se puede navegar por medio de todo el contenido HTML de un sitio, y a su vez, realizar modificaciones dinámicas, o obtener algún elemento o un conjunto de estos para realizar alguna animación o calculo.

Para ver su funcionamiento utilizaremos el siguiente código HTML que describe un div padre con muchos hijos dentro los cuales llame de acuerdo a un árbol genealógico (padre, hijo, nieto, bisnieto).


<div id="divPadre">
   <div id="divHijoPrimero">
      <div id="divNietoPrimero">
         <div id="divBisnieto"></div>
      </div>
   </div>
   <div id="divHijoSegundo">
      <div id="divNietoSegundo"></div>
   </div>
</div>

Comenzaremos por seleccionar el div bisnieto con el siguiente selector:

obj=$("#divBisnieto");

Esto nos dará el objeto divBisnieto, pero supongamos que quisiéramos obtener el div padre (osea el div que contiene a los demás), para ello utilizaremos el método parent() de jquery de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

Como podemos observar cada que utilizamos el método parent() lo que hacemos es dirigirnos al padre inmediato del objeto HTML que tenemos en el selector.

Ahora supongamos que teniendo el divBisnieto seleccionado queramos seleccionar un elemento fuera del padre inmediato de divBisnieto, por ejemplo el div con id divNietoSegundo, para ello utilizaremos el método find() el cual al contrario de parent() nos permite realizar una selección sobre los elementos dentro de un objeto ya seleccionado anteriormente, y lo hacemos de la siguiente manera:

//tres veces parent nos sacaría hasta el div padre, el cual contiene a los demás divs
obj=$("#divBisnieto").parent().parent().parent();

//y ya teniendo en la variable obj el padre de todos los divs utilizamos find
objDivNietoSegundo=obj.find("#divNietoSegundo")

Recuerden que pueden utilizar el método find() de igual manera que los selectores comunes $() con la diferencia que solo abarcara los elementos hijos del selector ya utilizado.

Espero les sirva este rápido tutorial y utilicen estos métodos ya que pueden hacer cosas muy interesantes.

¿Como recorrer elementos HTML por medio de jquery? y realizar operaciones con su contenido HTML

El propósito de esta entrada es aprender a utilizar jquery mas allá de hacer animaciones y cosas de estética, aprenderemos a utilizar jquery para realizar recorrido por elementos DOM y aplicar alguna operación matemática por medio de los valores dados.

Para ello utilizare una tabla HTML en la cual plasme 3 productos, que bien pueden representar los productos de un carrito de compras o alguna otra cosa parecida.

<table class="productos">
    <tr>
        <th>sudadera</th><td>180</td>
    </tr>
    <tr>
        <th>camisa</th><td>130</td>
    </tr>
    <tr>
        <th>pantalon</th><td>200</td>
    </tr>
</table>
<input type="button" value="Calcular" onclick="jsCalculaTotal()" />
<br />
<p>Resultado: <b id="resultado"></b></p>

También se puede observar que hay un botón el cual invoca la función de nombre jsCalculaTotal(), esta función realizara todo el proceso. Y debajo del botón existe un elemento con un id de nombre “resultado”, aquí es donde plasmaremos el resultado.

Nuestra tabla tiene una clase llamada “productos” esta será útil para realizar la selección de los elementos

Para realizar el recorrido utilizaremos el método each() de jquery el cual recorre lo obtenido por el selector y se le puede realizar alguna operación uno a uno de los elementos.


function jsCalculaTotal(){
	resultado=0;

	$(".productos td").each(function(){
		var valorASumar=$(this).html();
		resultado+=parseInt(valorASumar);
	})
	//imprimimos el resultado en el componente con la clase "resultado"
	$("#resultado").html(resultado)
}

En este caso realizaremos el recorrido por los td de nuestra tabla, para ello utilizamos el selector $(“.productos td”) esto nos seleccionara todos los td hijos de el elemento que contiene la clase “productos”, seguido de este selector agregamos el método each() y vamos recorriendo uno a uno los elementos y por medio del método html() de jquery obtenemos el contenido del elemento que es el precio del artículo, y a su vez sumándolos en una variable llamada resultado, (por si desconocen el método parseInt(), este es un método de javascript el cual convierte un valor a entero, ya que si no lo hacemos así obtendríamos una concatenación al utilizar +=).

recorrido jquery de elementos html

Espero les sirva para poder realizar cosas mas allá de este simple ejemplo, y poder sacar potencial de jquery para realizar modificaciones dinámicas.