Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 1 de 29
INFORMACIÓN GENERAL
IDENTIFICACIÓN DE LA GUÍA: JQUERY
FECHA DE APLICACIÓN: 16/05/11
PROGRAMA DE FORMACIÓN: Análisis y Desarrollo de SI
ID: 35613
CENTRO: Automatización Industrial
• Realizar la codificación de los módulos del sistema y el programa principal, a partir
de la utilización del lenguaje de programación seleccionado, de acuerdo con las
especificaciones del diseño.
CRITERIOS DE EVALUACIÓN:
• Utiliza las herramientas de desarrollo para la codificación de los módulos del
sistema, aplicando funciones propias del lenguaje de programación seleccionado,
de acuerdo con las necesidades del sistema de información.
NOMBRE DEL INSTRUCTOR- TUTOR: MAURICIO CASTAÑO BERNAL
DESARROLLO DE LA GUIA
INTRODUCCIÓN
Que es el jQuery?
El jQuery es una librería de JavaScript para acceder a los objetos del DOM de un
modo simplificado.
Las aplicaciones en internet son cada vez más complejas, ya que incorporan
efectos visuales, drag and drop, auto-completar, animaciones etc. el desarrollar
todos estos conceptos desde cero puede resultar complicado sobretodo si
tenemos que presentar la solución con muy poco tiempo, en este tipo de
situaciones el empleo de librerías como el jQuery nos facilitan el desarrollo de la
aplicación. Otra ventaja paralela es despreocuparnos cuando codificamos en la
compatibilidad de navegadores, ya que la librería resolverá esto.
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 2 de 29
Para utilizar la librería como dijimos debemos descargarla del sitio oficial y en cada
página que lo requiera agregar:
<script type="text/javascript" src="jquery.js"></script>
pagina1.html
<html>
<head>
<title>Problema</title>
</head>
<body>
<h2>Captura del evento click de un control HTML de tipo button.</h2>
<a href="pagina2.html">Método tradicional con las funciones
del DOM </a><br>
<a href="pagina3.html">Utilizando la librería jQuery</a><br>
</body>
</html>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 3 de 29
pagina2.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
funciones1.js
addEvent(window,'load',inicializarEventos,false);
function inicializarEventos()
{
var boton1=document.getElementById('boton1');
addEvent(boton1,'click',presionBoton,false);
}
function presionBoton(e)
{
alert('se presionó el botón');
}
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
pagina3.html
<html>
<head>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 4 de 29
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones2.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
Siempre debemos disponer esta inclusión de la librería antes de incluir los otros
archivos *.js que utilizan esta librería, es por eso el orden:
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones2.js"></script>
funciones2.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(presionBoton)
}
function presionBoton()
{
alert("Se presionó el botón");
}
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#titulo1");
x.click(presionTitulo1)
x=$("#titulo2");
x.click(presionTitulo2)
}
function presionTitulo1()
{
var x;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
}
function presionTitulo2()
{
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
}
Como va ser costumbre siempre que trabajemos con esta librería primero creamos
un objeto jquery a partir de la referencia a 'document' y luego llamamos al método
ready indicándole el nombre de la función que debe ejecutarse luego de generarse
el árbol de elementos HTML para la página:
var x;
x=$(document);
x.ready(inicializarEventos);
{
var x;
x=$("#titulo1");
x.click(presionTitulo1)
x=$("#titulo2");
x.click(presionTitulo2)
}
function presionTitulo2()
{
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
}
Hasta ahora hemos presentado los siguientes métodos que tiene jquery:
ready
click
Como podemos ver es muy fácil acceder al estilo de un elemento HTML para
actualizarlo en forma dinámica luego que la página fue cargada.
La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1,
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 8 de 29
etc.):
$("nombre del elemento")
Problema
Confeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se
presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("tr");
x.click(presionFila);
}
function presionFila()
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 9 de 29
{
var x;
x=$(this);
x.css("background-color","eeeeee");
}
Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos
cambiar el contenido de muchos elementos con una sola llamada al método text,
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 10 de 29
por ejemplo:
var x=$("p");
x.text("Este texto aparece en todos los párrafos del documento");
El código anterior crea un objeto jQuery con la referencia a todos los párrafos
contenidos en el documento. Luego si llamamos al método text enviándole una
cadena, esta aparecerá en todo el documento remplazando el contenido de los
párrafos actuales.
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="Obtener el texto contenido en un
párrafo" id="boton1"><br>
<input type="button" value="Modificar el texto de un párrafo"
id="boton2"><br>
<input type="button" value="Modificar el texto de los elementos
td de una tabla" id="boton3"><br>
<p id="parrafo1">Texto del primer párrafo</p>
<table border="1">
<tr>
<td>celda 1,1</td><td>celda 1,2</td>
<td>celda 2,1</td><td>celda 2,2</td>
</tr>
</table>
</body>
</html>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 11 de 29
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(extraerTexto);
x=$("#boton2");
x.click(modificarTexto);
x=$("#boton3");
x.click(modificarDatosTabla);
}
function extraerTexto()
{
var x=$("#parrafo1");
alert(x.text());
}
function modificarTexto()
{
var x=$("#parrafo1");
x.text("Nuevo texto del párrafo");
}
function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}
Como vemos esta página tiene tres botones, al presionarse el primero se dispara
la función:
function extraerTexto()
{
var x=$("#parrafo1");
alert(x.text());
}
Crea un objeto de la clase jQuery con la referencia a todos los elementos td del
documento (es decir los td de todas las tablas) y posteriormente mediante el
método text modifica el contenido de todos ellos (todos los td del documento se
cambian por el string "nuevo texto")
confeccionaremos una página que muestre un párrafo, luego una tabla que
contenga dos párrafos y por último otra tabla que contenga dos párrafos.
Capturaremos el evento click de todos los párrafos del documento y mostraremos
un mensaje indicando:'se presionó un párrafo del documento', también
capturaremos el evento click del los dos párrafos de la segunda tabla y
mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<p>Párrafo fuera de la tabla</p>
<table border="1">
<tr>
<td><p>Párrafo dentro de la primer tabla.</p></td><td><p>Párrafo
dentro de la primer tabla.</p></td>
</tr>
</table>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 13 de 29
<br>
<table border="1" id="tabla2">
<tr>
<td><p>Párrafo dentro de la segunda tabla.</p></td><td><p>Párrafo
dentro de la segunda tabla.</p></td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("p");
x.click(presionParrafoDocumento);
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
}
function presionParrafoDocumento()
{
alert('se presionó un párrafo del documento');
}
function presionpresionParrafoSegundaTabla()
{
alert('se presionó un párrafo contenido en la segunda tabla.');
}
El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la
función 'presionParrafoDocumento':
x=$("p");
x.click(presionParrafoDocumento);
Luego cuando ejecutemos este documento cada vez que presionemos un párrafo
de la página mostrará el mensaje 'se presionó un párrafo del documento'.
También asociamos otra función para el evento click de los párrafos contenidos
dentro de la segunda tabla:
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
Esto significa que los párrafos contenidos en la segunda tabla tienen asociados
dos funciones para el evento click, luego cuando presionemos alguno de los
párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 14 de 29
Para probar estos dos eventos implementaremos una página que contenga tres
botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de
texto del mismo, retornando el color original cuando retiramos la flecha del control.
Implementaremos una página que contenga tres hipervínculos, cuando ingrese la
flecha del mouse al hipervínculo cambiaremos el color de fondo, retornando el
color original cuando retiramos la flecha del elemento.
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<a href="http://www.lavoz.com.ar">La Voz del Interior</a>
<br>
<a href="http://www.lanacion.com.ar">La nación</a>
<br>
<a href="http://www.clarin.com.ar">El clarín</a>
<br>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
}
function entraMouse()
{
$(this).css("background-color","#ff0");
}
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 15 de 29
function saleMouse()
{
$(this).css("background-color","#fff");
}
Otras de las funcionalidades que nos permite la librería JQuery, es la manipulación dinámica de los
elementos de las páginas web html y la manipulación de la información enviada a los lenguajes de
programación dinámicos, como php, asp y jsp.
JQuery dispone de una serie de métodos que nos facilitan el tratamiento de los
elementos del Dom.
Confeccionaremos un problema que haga uso de estos métodos.
Problema: Implementar una página que contenga una lista con cuatro items.
Probar distintos métodos para manipular la lista (borrar, insertar)
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Métodos para manipular nodos del DOM con jQuery.</h1>
<ul>
<li>Primer item.</li>
<li>Segundo item.</li>
<li>Tercer item.</li>
<li>Cuarto item.</li>
</ul>
<input type="button" id="boton1" value="Eliminar la lista completa."><br>
<input type="button" id="boton2" value="Restaurar Lista"><br>
<input type="button" id="boton3" value="Añadir un elemento al final de la lista"><br>
<input type="button" id="boton4" value="Añadir un elemento al principio de la lista"><br>
<input type="button" id="boton5" value="Eliminar el último elemento."><br>
<input type="button" id="boton6" value="Eliminar el primer elemento."><br>
<input type="button" id="boton7" value="Eliminar el primero y segundo elemento."><br>
<input type="button" id="boton8" value="Eliminar los dos últimos."><br>
</body>
</html>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 16 de 29
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#boton1");
x.click(eliminarElementos)
x=$("#boton2");
x.click(restaurarLista)
x=$("#boton3");
x.click(anadirElementoFinal)
x=$("#boton4");
x.click(anadirElementoPrincipio)
x=$("#boton5");
x.click(eliminarElementoFinal)
x=$("#boton6");
x.click(eliminarElementoPrincipio)
x=$("#boton7");
x.click(eliminarPrimeroSegundo)
x=$("#boton8");
x.click(eliminarDosUltimos)
}
function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}
function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}
function anadirElementoFinal()
{
var x;
x=$("ul");
x.append("<li>otro item al final</li>");
}
function anadirElementoPrincipio()
{
var x;
x=$("ul");
x.prepend("<li>otro item al principio</li>");
}
function eliminarElementoFinal()
{
var x;
x=$("li");
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 17 de 29
var cantidad=x.length;
x=x.eq(cantidad-1);
x.remove();
}
function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}
function eliminarPrimeroSegundo()
{
var x;
x=$("li:lt(2)");
x.remove();
}
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.slice(x.length-3, x.length);
x.remove();
}
Para borrar todos los elementos contenidos en una lista obtenemos la referencia
de la lista mediante la función $ y seguidamente llamamos al método empty:
function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}
Para restaurar la lista utilizamos el método html insertando directamente los item a
partir del elemento ul:
function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}
Para eliminar un elemento del principio es similar a borrar el último, pero aquí no
necesitamos saber la cantidad de elementos que almacena el objeto jQuery ya
que debemos acceder al primero (el primero se almacena en la posición cero):
function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}
Para eliminar los dos elementos finales podemos rescatarlos mediante el método
gt (great than) que retorna un objeto jQuery con todos los elementos que superan
la posición que le indicamos en el parámetro:
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 19 de 29
Para eliminar los dos elementos finales podemos rescatarlos mediante el método
gt (great than) que retorna un objeto jQuery con todos los elementos que superan
la posición que le indicamos en el parámetro:
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.slice(x.length-3, x.lentgh);
x.remove();
}
Otro de los selectores útiles para realizar el desplazamiento entre el arreglo de los
elementos de la pagina que se cargan en el JQuery es el metodo .slice(start, [end]), que
permite seleccionar los elementos del arreglo de componentes desde un inicio hasta un fin, o
partir de determinada posición.
Ejemplos
$('li').slice(2).css('background-color', 'red');
Ejercicio
Crear una página para un local de comidas rápidas, donde cada una de las mesas posee un
dispositivo electrónico que permite por medio de el mouse adicionar los productos que los clientes
desean consumir en ese momento, haciendo clic en un listado que posee la totalidad de los
productos ofrecidos por el restaurante
pagina1.html
<html>
<head>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 20 de 29
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
<div id="descripcion" class="recuadro">
<p>HTML es el lenguaje que se emplea para el desarrollo de páginas
de internet.</p>
<p>Este lenguaje está constituido de elementos que el navegador interpreta
y las despliega
en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer
imágenes
sobre una página, hipervínculos que nos permiten dirigirnos a otra
página, listas, tablas
para tabular datos, etc.</b>
<p>Para poder crear una página HTML se requiere un simple editor
de texto (en nuestro caso
emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.),
emplearemos
el navegador que en este preciso momento está utilizando (recuerde que
usted está viendo
en este preciso momento una página HTML con su navegador).</p>
<p>Lo más importante es que en cada concepto desarrolle los ejercicios
propuestos y modifique
los que se presentan ya resueltos.<p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una persona que
nunca antes trabajó
con el mismo. No pretende mostrar todas los elementos HTML en forma alfabética.</p>
<p>Como veremos, de cada concepto se presenta una parte teórica,
en la que se da una
explicación completa, luego se pasa a la sección del ejercicio resuelto
donde podemos
ver el contenido de la página HTML y cómo la visualiza el navegador.
Por último y
tal vez la sección más importante de este tutorial es donde se propone
que usted
haga páginas en forma autónoma (donde realmente podrá darse
cuenta si el concepto quedó firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 21 de 29
function ocultarRecuadro()
{
var x=$("#descripcion");
x.hide("slow");
}
function mostrarRecuadro()
{
var x=$("#descripcion");
x.show("fast");
}
estilos.css
.recuadro {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
x.show("fast");
}
Lo muestra con una animación que tarda tantos milisegundos como le indicamos:
show([cantidad de milisegundos])
Lo muestra con una animación que tarda tantos milisegundos como le indicamos y
ejecuta al final la función que le pasamos como segundo parámetro:
show([cantidad de milisegundos],[función])
Estos dos métodos son similares a show y hide pero con la diferencia que fadeIn
hace aparecer los elementos HTML con opacidad. El método fadeOut decolora
hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.
Problema: Confeccionar una página que muestre un recuadro con texto. Disponer
dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 23 de 29
</head>
<body>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
<div id="descripcion" class="recuadro">
<p>HTML es el lenguaje que se emplea para el desarrollo de páginas
de internet.</p>
<p>Este lenguaje está constituido de elementos que el navegador interpreta
y las despliega en la pantalla
de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes
sobre una página, hipervínculos
que nos permiten dirigirnos a otra página, listas, tablas para tabular
datos, etc.</b>
<p>Para poder crear una página HTML se requiere un simple editor
de texto (en nuestro caso emplearemos este
sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador
que en este preciso
momento está utilizando (recuerde que usted está viendo en este
preciso momento una página HTML con su
navegador).</p>
<p>Lo más importante es que en cada concepto desarrolle los ejercicios
propuestos y modifique los que se
presentan ya resueltos.<p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una persona que
nunca antes trabajó con el mismo.
No pretende mostrar todas los elementos HTML en forma alfabética.</p>
<p>Como veremos, de cada concepto se presenta una parte teórica,
en la que se da una explicación completa,
luego se pasa a la sección del ejercicio resuelto donde podemos ver el
contenido de la página HTML y cómo
la visualiza el navegador. Por último y tal vez la sección más
importante de este tutorial es donde se
propone que usted haga páginas en forma autónoma (donde realmente
podrá darse cuenta si el concepto quedó
firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}
function ocultarRecuadro()
{
var x=$("#descripcion");
x.fadeOut("slow");
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 24 de 29
function mostrarRecuadro()
{
var x=$("#descripcion");
x.fadeIn("slow");
}
estilos.css
.recuadro {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Lo muestra con una animación que tarda tantos milisegundos como le indicamos:
fadeIn([cantidad de milisegundos])
Lo muestra con una animación que tarda tantos milisegundos como le indicamos y
ejecuta al final la función que le pasamos como segundo parámetro:
fadeIn([cantidad de milisegundos],[función])
El método toggle permite cada vez que se ejecute cambiar de estado la visibilidad
del elemento HTML, es decir si está visible pasa a oculto y si se encuentra oculto
pasa a visible.
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(ocultarMostrarRecuadro);
}
function ocultarMostrarRecuadro()
{
var x=$("#descripcion");
x.toggle("slow");
}
estilos.css
.recuadro {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 27 de 29
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
La función ocultarMostrarRecuadro:
function ocultarMostrarRecuadro()
{
var x=$("#descripcion");
x.toggle("slow");
}
jQuery dispone de un método que nos permite asociar una función que se
ejecutará por cada elemento que contenga la lista del objeto jQuery.
Dentro de esta función podemos manipular el elemento actual.
La sintaxis del iterador each es:
var x;
x=$([elementos]);
x.each([nombre de funcion])
Problema: Resaltar con fondo amarillo todos los párrafos que tienen menos de
100 caracteres.
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
Sistema Integrado de
Mejora Continua
Institucional Versión: 01
Servicio Nacional de Aprendizaje - SENA
Regional Caldas. Código: F08-6060-002
GUÍA DE APRENDIZAJE.
Página 28 de 29
<div id="parrafos">
<p>párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 -
párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1 -
párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1 -
párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo
1 - párrafo 1 - párrafo 1 - párrafo 1</p>
<p>párrafo 2 - párrafo 2 - párrafo 2 - párrafo 2</p>
<p>párrafo 3 - párrafo 3 - párrafo 3 - párrafo
3 - párrafo 3 - párrafo 3 - párrafo 3 -
párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
3 - párrafo 3 - párrafo 3 -
párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
3 - párrafo 3 - párrafo 3 - párrafo 3 -
párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo
3 - párrafo 3</p>
<p>párrafo 4 - párrafo 4 - párrafo 4 - párrafo
4 - párrafo 4</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#parrafos p");
x.each(resaltarParrafos);
}
function resaltarParrafos()
{
var x=$(this);
if (x.text().length<100)
{
x.css("background-color","#ff0");
}
}
function resaltarParrafos()
{
var x=$(this);
if (x.text().length<100)
{
x.css("background-color","#ff0");
}
}
FORMULACIÓN DE ACTIVIDADES:
• Aplicar en cada uno de los proyectos de aprendizaje, la característica de paginas
dinámicas sin recarga
BIBLIOGRAFIA DE ANEXOS:
• Introducción a Ajax.pdf
• http://www.javascriptya.com.ar/jquery/
EVALUACIÓN:
• La actividad será evaluada teniendo en cuenta la lista de chequeo ADSI-AJX-
03