Bienvenidos sean a este post, hoy veremos un par de formas de como habilitar a jQuery en nuestros codigos.
Localmente
Cuando nos referimos localmente es a una intranet o tenerlo habilitado en nuestro sitio, para ello debemos ir a la pagina de jQuery y luego a la secion de Download para descargar la libreria completa, tendran muchas opciones pero les recomiendo centrarse en las primeras opciones como se ve en la siguiente imagen
Dado que son archivos .js nos permiten implementar tanto en Windows, como Linux o cualquier otro servidor Web, elijan al mas apropiado para sus necesidades pero en cualquier caso no deben seleccionarlo sino usar el boton derecho y seleccionar la opcion de Guardar enlace como, tal como se ve en la siguiente imagen
Una vez descargado simplemente debemos almacenarlo en nuestro directoriio del sitio en cuestion, ya sea un Apache, IIS, Nginx o cualquiera, por ejemplo en el raiz del directorio principal pueden crear un directorio con el nombre de jquery y dentro guardar el archivo, y ya esta implementado, para entenderlo vamos a ver un ejemplo simple y para ello deben crear un archivo dentro del directorio raiz del servidor con el nombre de ejemplo.html y le agregaremos el siguiente codigo:
ejemplo.html
<html>
<head>
<script src="jquery/jquery-3.6.4.js"></script>
<title>Pagina de Prueba</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
<script>
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
});
});
</script>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
</body>
</html>
Aqui aplicamos nuestro primer codigo de jQuery, si bien ahondaremos un poco mas sobre varios de estos temas, el simbolo de dolar ($) es un selector de elementos por eso en los parentesis pasaremos el elemento a seleccionar, en el primer caso la imagen que mostramos en la pagina, lo siguiente es el evento que asociaremos a ese elemento, en este caso el click sobre este, como argumento usaermos a function para asociarle una funcion que basicamente vuelve a seleccionar el elemento de imagen y por medio de hide lo esconderemos, es decir si hacemos click sobre la imagen se escondera, el resto es lo que comentamos al comienzo, vamos a ver como trabaja mediante el siguiente video
Esto es una de las formas de implementar el jQuery para nuestros codigos, a continuacion vamos a ver la otra forma de implementarlo.
Nota: Si quieren instalar un servidor web para experimentar les recomiendo este post.
Remotamente
Si analizan el ejemplo anterior, basicamente lo que hacemos es cargar un archivo .js con todas las nuevas funciones y las implementamos en nuestro codigo, por lo tanto que nos impide que lo hagamos a traves de internet? absolutamente nada, ya que el mismo jQuery nos brinda esta posibilidad mediante el acceso por CDN, les dejo el url donde estan las direcciones para conectarse:
En la primera parte de estas tienen las distintas versiones que podremos utilizar para nuestras paginas, les muestro una imagen de como se ve la parte que nos interesa
Debajo tienen mas opciones para otro tipo de implementaciones pero para este momento las primeras opciones son las que mas nos interesan, en cada version tienen las distintas opciones que podemos elegir, en este caso si seleccionan cualquiera de ellas nos abrira una ventana como se ve en la siguiente imagen
En este caso simplemente deben copiar el segmento completo del tag script y es el que usaremos en nuestros codigos, para entenderlo mejor vamos a tomar el codigo anterior y vamos a implementar esta opcion, para ello modificaremos el codigo de la siguiente manera:
<html>
<head>
<script
src=https://code.jquery.com/jquery-3.6.4.min.js
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<title>Pagina de Prueba</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
<script>
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
});
});
</script>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
</body>
</html>
El codigo hace exactamente lo mismo, lo unico que modificamos fue esta linea:
<script src="jquery/jquery-3.6.4.js"></script>
Por este segmento:
<script
src=https://code.jquery.com/jquery-3.6.4.min.js
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
El resto es exactamente lo mismo, y en este caso solo cambiamos el lugar de carga del archivo .js, en este caso tambien podemos usar solamente el src para cargar el archivo pero como vimos en la ultima imagen estas dos opciones se usan para que el navegador garantice que el archivo cargado este completamente integro, si vuelven a probar la pagina deberia seguir funcionando de la misma forma y recuerden que lo unico a tener en cuenta es que la pagina debe tener acceso a internet porque de lo contrario no funcionara, antes de continuar con el ultimo tema veamos una variante mas que podemos usar:
<html>
<head>
<script
src=https://code.jquery.com/jquery-3.6.4.min.js
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="jq01.js"></script>
<title>Pagina de Prueba</title>
<style>
<!--
#foto
{
width: 720;
height: 405;
}
//-->
</style>
</head>
<body>
<img id="foto" src="https://cdn.hobbyconsolas.com/sites/navi.axelspringer.es/public/styles/hc_1440x810/public/media/image/2018/06/hollow-knight.jpg?itok=fPwNUzP8" border="0">
</body>
</html>
En este caso pasamos todo el codigo del tag script a un archivo llamado jq01.js y lo llamamos desde el tag script, es otra forma de trabajar para mayor practicidad y facilitando la visualizacion de nuestro codigo, obviamente por un tema de practicidad no trabajare de esta forma en los posts basicos pero cuando los ejemplos tomen otro tamaño si lo usaremos, con esto comentado vamos a hablar sobre como elegir la forma de trabajar.
Basicamente es si la pagina desde el cliente o navegador tiene acceso o no a internet, por ejemplo si ustedes lo quieren implementar en una intranet de una empresa el cual gran porcentaje de los usuarios no poseen acceso a internet sino solamente a la intranet les conviene implemntarlo localmente como vimos al inicio pero si es en un sitio de internet donde esto no es un inconveniente siempre es mas practico hacerlo desde el servidor de origen pero esto no quita que ante una caida del sitio pueda afectar a nuestra pagina o sitio, por lo tanto son temas que deben evaluar a la hora de implementarlo, por un tema de practicidad nuevamente en este curso el resto de los ejemplos lo implementaremos con la opcion remota, por ultimo para finalizar les recomiendo siempre utilizar el jQuery desde su pagina o con los accesos que ellos brinden porque si buscan por internet encontraran otros pero no seran 100% seguros.
En resumen, hoy hemos visto como habilitar jQuery en nuestros codigos HTML, tanto de forma local para un servidor como accediendo desde los servidores del jQuery, a su vez vimos el primer ejemplo de como se implementa para ambos casos, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 