jquery archivos -

Podcast #28 – ¿Debería aprender Jquery en el 2020?

En este podcast te diré porque deberías aprender jquery en este 2020 a pesar de que sea una tecnología vieja, aún tiene mucha relevancia en el desarrollo de software.

Puedes escuchar todos mis podcast de programación dando clic aquí.

¿Cómo utilizar serialize de jquery en un elemento que no es form? #js #jquery

Para utilizar serialize() de jquery en un conjunto de elementos que estén dentro de un padre que no sea un formulario puede ser posible, para ello te muestro un ejemplo suponiendo que el padre se llama «PadreQueNoEsForm»:


var parametros=$("#PadreQueNoEsForm :input").serialize();

Curso de MVC .Net C# Entity Framework, autentificación #2

En este segundo video veremos cómo agregar Entity Framework a nuestro proyecto MVC .Net, ademas explicare puntos clave para evitar problemas a futuro, te ahorrare horas de stackoverfow.

Primer video del curso: https://www.youtube.com/watch?v=UZNoQMio4XM

Como hacer que una caja de texto solo permita letras y espacio con #jquery

Para obligar que una caja de texto solo acepte letras y espacios, sin caracteres especiales (¿¡¨*)¨o números, podemos hacerlo así de sencillo:

Código HTML

<input class="letras" type="text" >
<input class="letras" type="text" >
<input class="letras" type="text" >

Código Javascript/Jquery

$(".letras").keypress(function (key) {
            window.console.log(key.charCode)
            if ((key.charCode < 97 || key.charCode > 122)//letras mayusculas
                && (key.charCode < 65 || key.charCode > 90) //letras minusculas
                && (key.charCode != 45) //retroceso
                && (key.charCode != 241) //ñ
                 && (key.charCode != 209) //Ñ
                 && (key.charCode != 32) //espacio
                 && (key.charCode != 225) //á
                 && (key.charCode != 233) //é
                 && (key.charCode != 237) //í
                 && (key.charCode != 243) //ó
                 && (key.charCode != 250) //ú
                 && (key.charCode != 193) //Á
                 && (key.charCode != 201) //É
                 && (key.charCode != 205) //Í
                 && (key.charCode != 211) //Ó
                 && (key.charCode != 218) //Ú

                )
                return false;
        });

Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos.
Este código también tiene anexados los códigos para las letras con acentos y la ñ.

¿Cómo obtener el texto de un option en un select con jquery? #combobox #texto #jquery

Alguna veces es necesario obtener el texto de un elemento option(El texto visual, no el valor), el cual esta seleccionado en un elemento select(combobox), esto se puede hacer de la siguiente forma, ayudándonos de jquery:

Codigo HTML

<select id="miSelect">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option selected value="3">Tres</option>
    <option value="4">Cuatro</option>
    <option value="5">Cinco</option>
</select>

Codigo Jquery


$( "#miSelect option:selected" ).text();

1.- Introducción e Instalación de Jquery. – Curso Básico de #Jquery #1

Para comenzar este tutorial, si no sabes nada de javascript te recomiendo te pases por el curso básico de javascript que realice, esto servirá para que puedas comprender mejor todo lo que veremos en este curso.

Introducción

Hablar de jquery hoy en día es hablar de ajax, pero más allá de la funcionalidad que tiene para las peticiones ajax, existe otro fin con el cual trabaja esta grandiosa librería y es la manipulación de elementos DOM. La manipulación de dichos objetos viene desde realizar sus funcionalidades por medio de eventos hasta realizar animaciones y efectos para hacer que nuestras páginas tengan estética y elegancia.

Jquery es la librería de javascript mas utilizada en el mundo (si no me creen den clic aquí), fue hecha por John Resig y presentada el año 2006, y siendo la librería más utilizada, hay mucho material afuera con el cual se pueden abastecer para realizar cosas, entonces ¿por que nace este curso?, la mayoría del material es para personas que ya tienen nociones de programación avanzadas, o el material se encuentra en ingles, es por ello que realizo este curso básico, pensado en todas esas personas con el deseo de aprender y no tengan el conocimiento en ingles suficiente.

Instalación

Comenzaremos con la instalación de jquery, y para ello seguiremos los pasos siguientes:

Entraremos a la página oficial de jquery dando clic al siguiente enlace www.jquery.com
Descargamos la versión actual de Jquery, es fácil encontrar el botón de descarga, siempre es gigante y esta visible. Basta con dar clic y seleccionar una versión de la librería, ya sea comprimida o ya sea descomprimida, recomiendo descarga la comprimida (compressed), ya que pesa menos. Puede pasar que al dar clic en lugar de descargarse se abra en su navegador y se vea el código como tal, en tal caso lo copean y lo pegan en notepad y lo guardan con extensión de javascript (jquery.js)
Una vez descargada la librería (que es un archivo con extensión js) la pueden pegar en el proyecto que la utilizaran en el lugar que deseen, para hacer una prueba a continuación yo recomiendo que antes creen un archivo con extensión html (miarchivo.html) y en la misma carpeta copien jquery, para que así puedan hacer una prueba (claro si es la primer vez que descargan jquery).
Ahora solo basta con realizar la referencia a dicha librería desde su archivo con extensión html de la siguiente manera:

<!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>Untitled Document</title>

<!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo -->
<script src="jquery.js"></script>

</head>

<body>
</body>
</html>

Y así de fácil se instala jquery, ahora ya podemos hacer uso de su funcionalidad, cabe resaltar que debe tener la referencia en todas las paginas en la cual necesitemos de él, así que deben agregar la referencia en todas para así poder utilizarlo. Para verificar que lo instalamos bien podemos copiar el siguiente código y correrlo en un navegador:

<!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>Untitled Document</title>

<!-- asi hacemos referencia a jquery siempre y cuando se encuentre en la misma ubicación que este archivo -->
<script src="jquery.js"></script>

</head>

<body>

<!-- un div para poder usar jquery y ver su contenido -->
<div>Un contenido bien bonito en este div</div>

</body>
</html>

<script>
//codigo de jquery para verificar que este instalado bien

alert($("div").html())
</script>

Si nos muestra en una ventana alert() el mensaje «Un contenido bien bonito en este div«, jquery se instalo con éxito. Por el momento no importa que no entendamos lo que está dentro de la función alert(), en los siguientes capítulos explicare con detalle de que trata esa sintaxis.

Ir Capítulo Siguiente (2.- Selectores)

Curso Básico de Jquery

Este curso esta creado para todo aquel que inicie con jquery y no sepa como comenzar, que es, como instalarlo, en breves palabras, para dar sus primeros pasos en este grandioso framework.

El curso constara de 10 capítulos en los cuales iremos desde la instalación, hasta la manipulación de objetos dinámicamente. Cabe destacar que el curso esta hecho para principiantes o novatos, y por si estas aquí y no sabes ni siquiera javascript, te sugiero te des una vuelta por mi curso básico de javascript y terminando de leerlo vuelvas aquí, esta sugerencia te ayudara para poder comprender como nos ayuda jquery para la manipulación de los elementos HTML.

Antes de iniciar resalto, que en este curso no se vera ajax (para eso estoy haciendo otro curso especializado en eso), solo contemplaremos la manipulación de elementos HTML.

El curso esta conformado en los siguientes 10 capítulos:

1.- Introducción e Instalación de Jquery

7.- Las funciones Show y Hide

8.- Callbacks

9.- La función Animate

10.- Creación de Elementos HTML con jquery

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.

¿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.