Iniciación a HTML y jQuery

Todo sobre lenguajes de programación, IDEs, lenguajes de bases de datos, HTML, etc.
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

El primer ejemplo que pone Irenicus está muy bien, solo tocaría una cosa.

El link lo pondría como:

Código: Seleccionar todo

<a href="#" onclick="alert('¡Bienvenido a MundoBIP!');location.href='http://www.mundobip.com'">Enlace a MundoBIP</a>
Con esto, al realizar el click en el enlace, primero enseñaría el alert con el "¡Bienvenido a MundoBIP!" y luego haría el "location.href" que lo que hace es redirigir la página a otro sitio. (Se puede enlazar varias funciones javascript, poniendolas seguidas, separadas por ";")

En realidad el href, en los links se utiliza para redirigir a un sitio o hacer una acción cuando se clickea, pero si desde el navegador, pones el ratón encima de un link con href, verás que aparece el href escrito en la barra inferior del navegador... lo cual da información de a donde va la página, si no quieres mostrar esta información, el href="#" es la solución y lo que tenga que hacer, se lo pones en el evento onClick.

Porque ocultarías esa información.. en la programación dinámica, puedes poner acciones que se llamen desde una URL... y siempre va bien que los usuarios no sepan las URL que hacen ciertas acciones a simple vista, y además estéticamente queda mejor.

Ahora a por lo divertido... jQuery ;)

Código: Seleccionar todo

<script type="text/javascript">
   $(document).ready(function() {
         $("a").click(function() { alert("¡Hola MundoBIP!"); });
   });
</script>
Que hace este script?

Vamos por partes...

Código: Seleccionar todo

$(document).ready(
....
)
Significa... cuando el documento (la página web) esté completamente cargada, con todas sus imágenes, todos sus elementos y todo.. entonces ejecutas lo que viene a continuación. Esto se hace, porque si el navegador, no ha acabado de leer toda la página web y no tiene el árbol DOM completamente cargado en memoria, si intentas realizar alguna acción sobre sus elementos, puede que no los encuentre, es por eso que siempre suele esperarse a que el navegador le indique que ya está todo cargado.

Código: Seleccionar todo

 
$("a").click(function() { alert("¡Hola MundoBIP!"); });
Significa... como aparece en la documentación de jQuery, me coges los elementos "a" (los tag's "a" que son los links) y les añades el evento click (viene a ser el onClick que antes hemos especificado) y dentro del click se crea una función que hace un alert. Entonces el navegador, al ejecutar este script, se recorre todo el arbol DOM de la página, buscando los tags <a> y les añade en memoria el evento onClick con la función que le hayas especificado.

Las dos cosas juntas, es que cuando toda la web está cargada, coge los links (todos) y le añades el onClick="alert(...)"

Si esto lo ponemos en el ejemplo inicial:

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                 
<head>
<title>Título del ejemplo</title>
<meta name="description" content="Instalar jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
         $("a").click(function() { alert("¡Hola MundoBIP!"); });
   });
</script>
</head>
<body>
<a href="#">Enlace a MundoBIP</a>
</body>                                                                 
</html>
Del mismo modo... si en nuestro documento a parte de un link <a> tenemos un <div>, tenemos un <p>, tenemos un <table> u otro elemento... podrás seleccionarlo con jQuery con un $("div"), o $("p"), o $("table") ... y añadirle eventos o modificarlos.
Última edición por ari0k0 el 07 Jul 2010 16:23, editado 1 vez en total.
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

(He dado a citar en vez de editar) XD
echo de menos la opción de borrar mensaje.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Ah vale, ahora ya lo entiendo, no sabía que se podían enlazar funciones en javascript

Muy buenas lecciones estás dando arioko ;)
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

Bueno, un pasito más.

Reto 4: Ocultar y Mostrar elementos con jQuery
jQuery, tiene una función muy interesante... hide() y show(), la primera esconde un elemento, la segunda muestra un elemento, ojo, solo lo oculta, pero el elemento sigue en el código, hay otra que es remove() que esa si, elimina el elemento del árbol DOM.

¿Para que nos puede servir estas funciones?, por ejemplo, si queremos hacer una web de noticias, donde haya un texto de resumen y otro texto completo que inicialmente está oculto, y luego un link, que cuando lo clickeamos nos oculta el resumen de la noticia y nos muestra la noticia completa.

Los elementos que podría tener la web:
<div>texto_resumido: España tumba a Alemania en semifinales y disputará su primera final en un Mundial</div>
<div>texto_completo: ...Y los sueños, sueños son... Por fin. España disputará la primera final de su historia en un Mundial el próximo domingo, ante Holanda, después de dar una lección de fútbol, confianza y coraje a una Alemania acomplejada, que se despidió gracias a un grandioso gol de cabeza de Puyol (0-1)... bla bla bla (texto de 20minutos XD)</div>
<a>Mostrar noticia completa</a>
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

A ver que te parece arioko :P

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                 
<head>
<title></title>
<meta name="description" content="Instalar jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="show1">Mostrar</button>
<button id="hide1">Esconder</button>
<div id="res">España tumba a Alemania en semifinales y disputará su primera final en un Mundial</div>
<div id="comp">...Y los sueños, sueños son... Por fin. España disputará la primera final de su historia en un Mundial el próximo domingo, ante Holanda, después de dar una lección de fútbol, confianza y coraje a una Alemania acomplejada, que se despidió gracias a un grandioso gol de cabeza de Puyol (0-1)... bla bla bla (texto de 20minutos XD)</div>
<script type="text/javascript">
   $('#show1').click(function() {
         $('#comp').show();
   });
   $('#hide1').click(function () {
      $('#comp').hide();
    });

</script>

</body>                                                                 
</html>
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

Pues lo veo muy bien!

Como bien pones, en las etiquetas botton, les añades un id (Identificador) para que luego con el jQuery pueda encontrar el elemento directamente entre todos los que hay en el árbol DOM. De ese modo si tenemos muchos elementos de un tipo, podemos ir a uno concreto, cuando en javascript pones:

Código: Seleccionar todo

 $('#show1').click(function() {
         $('#comp').show();
   });
Va a elemento que tiene id = "show1", lo selecciona y le añade un evento de click, que cuando se haga click sobre el, buscará al elemento con id = "comp" y lo mostrará (en este caso)

Con este reto, se puede aprender, que hay dos tipos de attributos que se le puede poner a un tag (elemento)... una de ellas es "id" y la otra "class" (las dos muy utilizadas si usais maquetación con .CSS). ¿Cual es la diferencia entre ellas? La primera, "id" es un identificador único en toda la página web, es decir, que no puede haber dos elementos en la misma página web, con el mismo "id", mientras que un "class" puede haber tantos elementos como quieras con el mismo class.

En jQuery, para recoger un elemento con un "id" concreto, se realiza con una "#" antes del valor del id, mientras que si es un "class", se realiza con un "." antes del valor del class (igual que en maquetación css).

Ejemplo con id:

Código: Seleccionar todo

<div id="texto01">texto</div>
<div id="texto02">texto</div>
<div id="texto03">texto</div>
<div id="texto04">texto</div>
$("#texto03") --> en jQuery se selecciona el elemento con id = texto03.

Ejemplo con class:

Código: Seleccionar todo

<div id="texto01" class="impar">texto</div>
<div id="texto02" class="par">texto</div>
<div id="texto03" class="impar">texto</div>
<div id="texto04" class="par">texto</div>
$(".impar") --> en jQuery se selecciona todos los elementos con class = "impar"

Y ahora otro truco más divertido:

Código: Seleccionar todo

<div id="texto01" class="impar verde rallas">texto</div>
<div id="texto02" class="par rojo topos">texto</div>
<div id="texto03" class="impar amarillo topos">texto</div>
<div id="texto04" class="par azul rallas">texto</div>
$(".topos") --> en jQuery se selecciona todos los elementos con class = "topos" ... te seleccionaría el segundo y tercer elemento.

Por otro lado.. las funciones Show y Hide, permiten mostrar y ocultar elementos, pero si consultais la documentación de jQuery (http://api.jquery.com/show/) vereis que además tienen unas opciones muy interesantes, como los efectos de fundido.. es decir, les puedes decir que desaparezcan con cierta velocidad, a parte de que cuando acaben de desaparecer que haga otra función.

Con esto tienes muchas posibilidades. Alguien comentaba como hacer un slideshow de fotos? bien... ahora con jQuery es fácil.

Reto 5: Creación de slideshow (animación de imágenes) con javascript y jQuery

Realizar un pase de imágenes, 2 o 3 imágenes, que cada ciertos segundos vaya cambiando. Se puede realizar con show y hides o cambiando el src de la imagen (en caliente)
Última edición por ari0k0 el 10 Jul 2010 19:04, editado 3 veces en total.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Ya que has explicado lo de las clases, he hecho un código que hace una animación al pulsar el botón show1 (me hubiera gustado usar un bucle for para crearla, pero no sé como es su sintáxis en jQuery) y el botón hide1 esconde todos los elementos de clase imagen

Código: Seleccionar todo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es">

<html>                                                                 
<head>
<title></title>
<meta name="description" content="Animación en jQuery">
<meta name="keywords" content="jquery, javascript">
<meta name="language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="show1">Mostrar</button>
<button id="hide1">Esconder</button>
<img id="foto1" style="display: none" class='imagen' src="wall1.jpg"/>
<img id="foto2" style="display: none" class='imagen' src="wall2.jpg"/>

<script type="text/javascript">
   $('#hide1').click(function () {
      $('.imagen').hide();
    });
   
   $('#show1').click(function() {
         $("#foto1").show(250, function() {
			$('#foto1').hide(2500, function() {
				$('#foto2').show(250, function() {
					$('#foto2').hide(2500, function() {
						$("#foto1").show(250)});
				});
			});
		});
	});
   

</script>

</body>                                                                 
</html>
A ver que te parece ;)
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

Queda un efecto muy conseguido, jugando con las funciones Show y Hide, controlando que cuando acabe una empiece otra. Estupendo!
Xtreme escribió:(me hubiera gustado usar un bucle for para crearla, pero no sé como es su sintáxis en jQuery
Para hacer un bucle, no necesitas jQuery, recuerda que jQuery no deja de ser otra cosa que javascript (si te fijas siempre lo tienes que poner entre tags <javascript> para que se ejecute bien o en ficheros .js), así que solo basta con hacer un bucle en javascript y como javascript tiene similitudes a java.. puedes hacer un bucle for, como se haría en Java. También puedes hacer while's, etc... Por eso es interesante a la hora de aprender jQuery, tener solvencia con javascript.

Código: Seleccionar todo

for (i=0;i<size;i++) {
...
}
Otra opción sería utilizar un timer (de javascript) para hacer el refresco y el cambio entre las fotos. Quedaría algo así:

Código: Seleccionar todo

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="es">

    <html>                                                                 
    <head>
    <title></title>
    <meta name="description" content="Animación en jQuery">
    <meta name="keywords" content="jquery, javascript">
    <meta name="language" content="es">
    <meta http-equiv="Content-Type" content="text/html; charset = iso-8859-1" >
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    </head>
    <body>
    <button id="start">Iniciar</button>
    <button id="stop">Parar</button>
	<br/>
    <img id="foto0" style="display: none" class='imagen' src="wall0.jpg"/>
    <img id="foto1" style="display: none" class='imagen' src="wall1.jpg"/>

    <script type="text/javascript">
		// Variables globales
		var go = false;	// Flag para parar y continuar la animación.
		var index = 1; // Indice que indica la foto
		// Eventos de click
		$('#stop').click(function () { go = false; });
		$('#start').click(function() { go = true;  });
		// Función de refresco
		function refresh() {
			// Si está activa la animación...
			if (go) {
				// Ocultamos la foto actual...
				$("#foto"+index).hide('slow'); // Seleccionamos la #foto1 o #foto2 según el index.
				index = (index+1) % 2; // calculamos el siguiente indice incrementando y usando el módulo (puede ser 0 o 1)
				$("#foto"+index).show('slow'); // Mostramos la siguiente foto
			}
			setTimeout('refresh()',5000); // ponemos un timer, para que a los 5 seg. refresque de nuevo.
		}
		// Iniciamos el refresco...
		refresh();
    </script>

    </body>                                                                 
    </html>
Con este código se pueden ver como se puede mezclar javascript y jQuery sin problemas. Los bucles, las funciones, concatenar strings (con "+"), utilizar variables globales, locales, etc.. se puede usar javascript y para coger objetos del árbol DOM y manupularlos, usar la facilidad de jQuery.

Y ahora una cosa muy divertida... Si quiero poner 5 fotos.. ¿necesito 5 objetos <img> en mi html? O podría tener un solo objeto <img> y con javascript+jQuery cambiar el src (source) de este? La solución? mejor probarlo, no? ;)
De este modo, si hacemos un slideshow de 25 imagenes, no tendríamos que poner 25 <img> en nuestra página, con lo que optimizamos código y mejoramos que pese menos la página web. Simplemente guardamos los nombres de las imagenes en un array y luego vamos poniendo los nombres en el src de la <img> según queramos.
Avatar de Usuario
Xtreme
Mensajes: 1023
Registrado: 13 Dic 2009 23:47
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por Xtreme »

Si te he entendido bien lo que quieres es que cree una array con todos los nombres y luego con un bucle y una variable ir recorriendo las posiciones de esa array, ¿me equivoco?
[equipo]Sobremesa jugón|Intel Core 2 Q8200 @2.8|Asus Maximus Formula|2x2gb Samsung Drr2 667@800|AMD 6870 xfx OC|||Thermaltake isgc 300||Nox coolbay W|Creative soundblaster|Windows 7 Ultimate|||Logitech g400||[/equipo]
Avatar de Usuario
ari0k0
Mensajes: 634
Registrado: 11 Ago 2008 17:32
Ubicación: Mérida (Badajoz)
Contactar:

Re: Iniciación a HTML y jQuery

Mensaje por ari0k0 »

En un array de strings, tener los nombres de las imágenes. Tras cargar la página, usando un timer. Se puede ir cambiando el src de la <img> con un nuevo nombre del array y comprobar si la imágen cambia.
Responder