lunes, julio 26, 2021

Intro a jquery. Comenzamos por el típico hola mundo

Deberías leer

Antonio García Pratshttp://antoniogarciaprats.eu/
Estudios de Licenciatura en CC Quimicas e Ingeniería Técnica en Informática de Gestión por la Universidad de Jaén. Social Media autodidacta. Siempre en búsqueda de nuevos retos que proporcionen algún sentido a mi existencia.

Jquery es un framework basado en Javascript. Con él es posible simplificar el código más habitual que usamos en nuestros desarrollos web. Supone una integración entre el DOM, HTML, CSS, AJAX, y Javascript. Su primera versión data del año 2006 por John Resig. Desde entonces se han ido publicando bastantes revisiones.

Un framework tiene como objetivo simplificar las tareas más habituales que desarrollamos aportando funciones y código. Además, con Jquery resuelve gran parte de la problemática que surge al trabajar con los diferentes navegadores disponibles actualmente en el mercado.

Jquery es Open Source (código abierto), lo que significa que puede descargarte de forma gratuita pudiéndose utilizar en cualquier tipo de proyecto, ya sea personal o profesional.

En este artículo va a servir de intruduccion a un pequeño tutorial en la que iremos viendo las diferentes funciones y el código más habitual de éste framework. Comenzaremos por descargarlo desde su página oficial. Existen dos versiones: una extendida y otra minificada. Generalmente para los proyectos comerciales se utilizará la segunda. Pero ya es una opción que dejo al lector de este artículo.

Nuestro objetivo es crear una simple página web que muestre un texto. Cuando iniciemos la página cambiará el texto de color. Con este sencillo programa veremos la estructura básica comunes a casi todos los proyectos que realizaremos con éste framework.

Lo primero es incluir la librería en nuestro código HTML.

<script src="jquery.min.js"></script>

A continuación vamos a incorporar un grupo de instrucciones que nos permitirán averiguar cuando se ha cargado el DOM de la página. Sólo entonces se podrá usar el documento. Utilizaremos el siguiente bloque:

$(document).ready ( function () {
    //Insertar el código
});

el cuál se ejecutará sólo una vez y lo hará cuando la página esté cargada completamente.

Para terminar el primer ejemplo, vamos a hacer que cambie el color del texto que se visualiza en la pantalla. Al bloque anterior añadiremos lo siguiente:

$("body").css("color", "#F749DA");

Vamos a terminar viendo el código completo.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hola Mundo JQuery</title>
 </head>
 <body>
     
    <h1>Hola Mundo para Jquery</h1>

    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid assumenda architecto consequuntur reiciendis vel totam, voluptas numquam? Tenetur, corrupti vero. Reprehenderit, suscipit magnam? Adipisci, eveniet corporis non impedit repudiandae asperiores?
    </p>

    <script src="jquery.min.js"></script>
    <script>
        $(document).ready ( function () {
            $("body").css("color", "#F749DA");
        });
    </script>

 </body>
 </html>

Continuaremos con más artículos que nos permita seguir adquiriendo conocimientos sobre JQuery.

Artículo anteriorPlan de marketing
Artículo siguienteMenu deslizante con JQuery
- Advertisement -spot_img

Más publicaciones

Dejar respuesta

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Últimas publicaciones