Manual jQuery-Primer Ejemplo jQuery
jueves, 9 de diciembre de 2010
, Posted by edukt at 13:55
Hola Mundo en jQuery
Para el primer ejemplo jQuery necesitamos:
1-Incluir una referencia a la librería
2-Manejar un evento que responda cuando la página se cargo en el navegador.
3-Desplegar una alerta que indique que el manejador de eventos se llamó y que jQuery está funcionando.
Lo primero es incluir una referencia al archivo .css y a los archivos JavaScript en la cabecera de nuestro archivo HTML.
El archivo estilo.css contiene el siguiente código:
@charset "utf-8";
/* CSS Document */
body {
font: 62.5% Arial, Verdana, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
.poema {
margin: 0 2em;
}
.highlight {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
margin: 0.5em 0;
background-color: #ffc;
}
/* CSS Document */
body {
font: 62.5% Arial, Verdana, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
.poema {
margin: 0 2em;
}
.highlight {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
margin: 0.5em 0;
background-color: #ffc;
}
El archivo JavaScript que se encarga de seleccionar la clase poema-estrofa y le aplica el estilo.highlight es ejemplo.js que tiene el siguiente código:
$(document).ready(function() {
$('.poema-estrofa').addClass('highlight');
});
$('.poema-estrofa').addClass('highlight');
});
El mecanismo tradicional para el control JavaScript es llamar el código desde los manejadores de eventos. Muchos manejadores están disponibles para iniciar eventos, como clics del mouse y pulsaciones de teclas. Si no tuviéramos jQuery disponible para nuestro uso, sería necesario contar con el manejador de evento onload, que se activa después que la página junto con todas sus imágenes, se han cargado. Para disparar el código del evento onload, debemos colocar el código dentro de una función:
function PoemaEstrofa()
{
$('.poema-estrofa').addClass('highlight')
};
function PoemaEstrofa()
{
$('.poema-estrofa').addClass('highlight')
};
Luego se deberia hacer referencia a nuestra función desde el body. Esto hace que nuestro código se ejecute después de que la página se ha cargado completamente.Hay inconvenientes con este enfoque. Si se quiere aplicar este efecto hay que realizar modificaciones en los body de cada una de las páginas, aumentando la posibilidad de error y complicando los flujos de trabajo paralelos para los diseñadores y programadores.
jQuery elimina este problema debido a que nos permite programar las llamadas a funciones del DOM sin esperar a que las imágenes se carguen por medio del contructor $ (document). ready (). Con nuestra función definida, podemos escribir:
Esta técnica no requiere ninguna modificación de HTML. En cambio, el comportamiento se une por completo desde el archivo JavaScript.
Utilizando funciones anónimas, podemos escribir el código tal como se presenta :
$(document).ready(function() {
$('.poema-estrofa').addClass('highlight');
});
Mediante el uso de la palabra clave function sin un nombre, se define una función exactamente donde se necesita, y no antes. Las estrofas poema están en cursiva y encerrados en cajas, según lo especificado por
la hoja de estilo estilo.css, debido a la inserción de la clase highlight por medio del código JavaScript.
Ahora tenemos una idea de por qué un desarrollador podría optar por utilizar un Framework de JavaScript en lugar de escribir todo el código desde cero, incluso para las tareas más básicas. También hemos visto algunas de las formas en las que sobresale jQuery como Framework, y por qué podríamos optar por otras opciones.
Currently have 0 comentarios: