Diferència entre revisions de la pàgina «NF2 - JQUERY»

De wikiserver
Dreceres ràpides: navegació, cerca
(→‎Molt més)
(→‎Exercici Botons Celestials)
Línia 170: Línia 170:
  
 
==Exercicis==
 
==Exercicis==
−
=== Exercici Botons Celestials ===
+
=== Exercici Botons Celestials amb jQuery===
 
Crea una pàgina web amb dos botons amb el text:
 
Crea una pàgina web amb dos botons amb el text:
 
*Text boto 1: 'Angelet'
 
*Text boto 1: 'Angelet'
Línia 177: Línia 177:
 
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
 
Cada vegada que es clica sobre un botó 'Angelet' es creen ''n'' botons més, on ''n'' és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'.
 
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
 
Cada vegada que es clica sobre un botó 'Diablet' s'eliminen ''n'' botons, on ''n'' és un número aleatori entre 1 i 20.
−
 
−
:[[solucio_botons_celestials]]
 
  
 
=== Exercici Web Dinámica ===
 
=== Exercici Web Dinámica ===

Revisió del 11:52, 26 març 2014

JQuery

Fonaments

La potencia de Jquery radica en recuperar elements de les pàgines html i realitzar operacions amb ells d'una manera fàcil i ràpida. Si coneixes CSS, ets conscient del poder dels selectors que descriuen grups d'elements pel seu tipus, atributs o situació dins del document. Amb Jquery podem utilitzar aquest coneixement, i simplificar la manera d'utilitzar Javascript.

Selectors

Per exemple, el selector

  • p a

fa referència a tots els enllaços (elements <a>) que estan dintre d'un element <p>. Jquery utilitza els mateixos selectors CSS i a més a més, inclou alguns dels selectors més poderosos de CSS3. Amb Jquery, utilitzarem la següent sintaxi: $(selector) o jquery(selector)). Per exemple, per obtenir tots els enllaços que estan dintre d'un element <p> farem: 

$("p a");
//o bé:
jquery("p a");

Un altre exemple: Si volem ocultar tots els divs que pertanyen a la classe "ender": 

$("div.ender").hide();

Un altre exemple molt comú és canviar el text que hi ha en un element html. Amb Jquery es pot fer de dues maneres que donen resultats idèntics: 

// Primera Manera:
$("selector").html("Acabo d'afegir Text a un element");
// Segona Manera:
$("selector")[0].innerHTML = "Acabo d'afegir Text a un element";

Que passaria si el 'selector' retornes més d'un element? Doncs que si utilitzem la 1a manera, es posaria el text "Acabo d'afegir Text a un element" a tots els elements seleccionat. Molt útil quan volem canviar tot el HTML d'un grup d'elements. I amb la segona manera? Hauriem de fer: 

var elements = $("selector");
for(var i=0;i<elements.length;i++)
elements[i].innerHTML =
"Acabo d'afegir Text a un grup de nodes";

Aquest últim exemple és MOLT POC RECOMANAT. És molt més pràctic i eficient utilitzar la 1a manera a l'hora de programar amb JQuery.

Exemples de selectors:

Selector Explicació
$("p:even") Selecciona tots els elements <p> amb el pseudo element even
$("tr:nth-child(1)") Selecciona la primera fila de cada taula
$("body > div") Selecciona el/s fill/s directe/s <div> de <body>
$("a[href$= 'pdf ']") Selecciona els enllaços a fitxers pdf
$("body > div:has(a)") Selecciona el/s fill/s directe/s <div> de <body> que contenen enllaços

Assegurant-nos que la pàgina està a punt

Abans que podem interaccionar amb elements d'HTML en una pàgina, aquests han d'estar carregats: només els podem canviar una vegada que són ja allà. L'única manera fiable era esperar que es carregui la pàgina sencera abans que poguéssim executar qualsevol script. JQuery té un esdeveniment molt potent que ens permet executar el script tant aviat com sigui possible. Gràcies a això, les nostres aplicacions semblaran que es carreguen molt mes ràpid. Aquesta funció és: $(document).ready(....); 

$(document).ready(function() {
    alert('Benvinguts a la pàgina JQuery ...');
});

Aquesta funció s'utilitza tant que existeix una drecera: 

$(function() { alert('Benvinguts a la pàgina JQuery ...'); });

Utilitzant CSS

Després que hem seleccionat els elements som capaços d'afegir i treure estils, classes, i més. Exemple per obtenir un atribut css: 

$(document).ready(function() {
	var fontSize = $('#productes tbody tr:first').css('font-size');
	alert(fontSize);
});

Exemple per canviar un atribut css: 

$(document).ready(function() {
	$('#productes tbody tr:even').css('background-color','#dddddd');
});

Però i si es vol canviar o afegir dos o més atributs? 

$('#productes tbody tr:even').css('background-color','#dddddd');
$('#productes tbody tr:even').css('color', '#666666');

Podem simplificar lo anterior amb una sola crida : 

$('#productes tbody tr:even').css({
	'background-color': '#dddddd', 
	'color': '#666666',
	'font-size': '11pt',
	'line-height': '2.5em' 
});

Utilitzant Events (Event handler)

Si volem afegir esdeveniments als diferents elements que apareixen a la pàgina web utilitzant Jquery podem fer-ho molt fàcilment: 

$('#boton').click(function() {
	$('#missatge').show(); //es mostra el missatge
});

Però quan s'executa un element moltes vegades volem utilitzar l'element on està l'esdeveniment per tal de fer alguna cosa amb els seus valors. Jquery ens permet utilitzar la paraula reservada this. 

$('#Boton').click(function() {
	$(this).hide(); // el botó desapareix
});

$(this)proporciona una manera més maca d'accedir al botó en comptes de tornar a seleccionar-ho. Amb JQuery podem fer coses molt potents com el botó 'toggle': 

$('#toggleBoto').click(function() {
	$('#missatge').toggle();
	if ($('#missatge').is(':visible')) {
		$(this).val('Amaga');
	} else {
		$(this).val('Mostra');
	}
});

Afegir elements al DOM

Podem afegir elements al HTMl utilitzant JQUERY: 

$('<input type="button" value="toggle" id="toggleBoto">').insertAfter('#missatge');
$('#toggleBoto').click(function() {
	$('#missatge').toggle();
});

Altres funcions per afegir elements: 

$('<strong>Començar!</strong>').prependTo('#missatge');
$('<strong>Acabar!</strong>').appendTo('#missatge');

Fins i tot, podem esborrar elements: 

$('#missatge').remove();

Canviar el text d'un element

Si volem canviar el text d'un element tenim dos maneres: 

$('p').html('<strong>Alerta!</strong> hi ha etiquetes html... ');
$('h2').text('<strong>Alerta!</strong> hi ha etiquetes html ...');

La funció $(selector).html(...) interpretarà les etiquetes html que s'introdueixin dintre del text a mostrar. En canvi, si no volem que s'interpretin les etiquetes html utilitzarem la funció $(selector).text(...) Podem utilitzar aquestes funcions per obtenir el text en comptes de modificar-ho? Sí! 

alert($('h2:first').text());

Afegir efectes i animacions

Hi ha diverses funcions de jquery que tenen la habilitat de poder-se animar. Com l'efecte toggle de l'exemple anterior: 

$('#toggleBoto').click(function() {
	$('#missatge').toggle('slow');
});

Quan l'animació ha acabat podem programar que s'executi una funció automàticament (callback function): 

$('#missatge').slideToggle('slow', function() {
	alert('s'ha acabat l'animació!')
});

Però potser, el que volem és que desaparegui el botó: 

$('#missatge').slideUp('slow', function() {
	$('#toggleBoto').fadeOut();
});

Molt més

Com ja heu vist, amb JQuery podeu fer moltes coses de manera ràpida i fàcil. Us recomano aquests llibres :

Earle Castledine, Craig Sharkie, "jQuery: Novice to Ninja", Ed. Sitepoint, 2010, ISBN 978-0-9805768-5-6

Bear Bibeault, Yehuda Katz, "JQuery in Action Second Edition", Ed. Manning, 2010, ISBN 978-935182-32-0

Exercicis

Exercici Botons Celestials amb jQuery

Crea una pàgina web amb dos botons amb el text:

  • Text boto 1: 'Angelet'
  • Text boto 2: 'Diablet'

El comportament ha de ser el següent: Cada vegada que es clica sobre un botó 'Angelet' es creen n botons més, on n és un número aleatori entre 1 i 10 i aquests botons poden ser 'Angelets o Diablets'. Cada vegada que es clica sobre un botó 'Diablet' s'eliminen n botons, on n és un número aleatori entre 1 i 20.

Exercici Web Dinámica

a) Crea un HTML amb els següents camps: Input text1 : Que demani la etiqueta que es vol crear Input text2 : Que demani On es vol crear (una altre etiqueta que ja hauria d'existir) Boto crear: Crea el node del input text1 com a fill de input text2. b)Creació automática: Crea automàticament una Web via DOM que contingui: Tants paràgrafs com text trobis a la web http://www.lipsum.com/ Cada paràgraf ha de tenir un botó per tal de poder-lo eliminar.

Jquery i AJAX

jQuery soporta AJAX permetent abstraer les diferencies que poden existir entre els navegadors. Els mètodes que podem utilitzar son:

  • $.get()
  • $.getScript()
  • $.getJSON()
  • $.post()
  • $.load()

Però tots ells estan basats en el mètode:

  • $.ajax()

$.ajax()

El mètode $.ajax és configurat a través d'un objecte, el qual conté totes les instruccions que necessita jQuery per completar la petició. Aquest mètode és particularment útil a causa que ofereix la possibilitat d'especificar accions en cas que la petició hagi fallat o no. A més, en estar configurat a través d'un objecte, és possible definir les seves propietats de forma separada, fent que sigui més fàcil la reutilització del codi. Pot visitar http://api.jquery.com/jquery.ajax/ per consultar la documentació sobre les opcions disponibles en el mètode. Exemple: 

$.ajax({
        // la URL de la petició
        url : 'post.php',
    
        //informació a enviar
        // (també es posible utilitzar una cadena de dades)
        data : { id : 123 },
    
        // especificar si será una petició POST o GET
        type : 'GET',
    
        // el tipus d'informació que s'espera de resposta
        dataType : 'json',
    
        // codi a executar si la petició es satisfactoria;
        // la resposta es pasada com argument a la funció
        success : function(json) {
            $('<h1/>').text(json.title).appendTo('body');
            $('<div class="content"/>')
                .html(json.html).appendTo('body');
        },
    
        // codi a executar si la petició falla;
        // en pasen com arguments a la funció
        // l'objete jqXHR (extensió de XMLHttpRequest), un text amb l'estat
        // de la petició i un text amb la descripció del error que hagi donat el servidor
        error : function(jqXHR, status, error) {
            alert('hi ha un problema');
        },
    
        // codi a executar sense importar si la petició va fallar o no
        complete : function(jqXHR, status) {
            alert('Petición realizada');
        }
    });

El mètode $.ajax posseeix moltes opcions de configuració, i és justament aquesta característica la que fa que sigui un mètode molt útil. Per a una llista completa de les opcions disponibles, pot consultar http://api.jquery.com/jquery.ajax/; a continuació es mostren les més comunes:

Opcions Explicació
async Estableix si la petició serà asíncrona o no. De forma predeterminada el valor és true. Ha de tenir en compte que si l'opció s'estableix en false, la petició bloquejarà l'execució d'altres codis fins que aquesta petició hagi finalitzat.
cache Estableix si la petició serà guardada en la cache del navegador. De forma predeterminada és true para tots els dataType excepte para “script” i “jsonp”. Quan posseeix el valor false, s'agrega una cadena de caràcters anti-cache al final de la URL de la petició.
complete Estableix una funció de devolució de trucada que s'executa quan la petició aquesta completa, encara que hagi fallat o no. La funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest) i un text especificant l'estatus de la mateixa petició (success, notmodified, error, timeout, abort, o parsererror).
context Estableix l'abast en què la/les funcionis de devolució de trucada s'executessin (per exemple, defineix el significat de this dins de les funcions). De manera predeterminada this fa referència a l'objecte originalment passat al mètode $.ajax.
data Estableix la informació que s'enviarà al servidor. Aquesta pot ser tant un objecte com una cadena de dades (per exemple foo=bar&baz=bim.)
dataType Estableix el tipus d'informació que s'espera rebre com a resposta del servidor. Si no s'especifica cap valor, de forma predeterminada, jQuery revisa el tipus MIME que posseeix la resposta.
error Estableix una funció de devolució de trucada (CALLBACK) a executar si resulta algun error en la petició. Aquesta funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest), un text especificant l'estatus de la mateixa petició (timeout, error, abort, o parsererror) i un text amb la descripció de l'error que hagi enviat el servidor (per exemple Not Found o Internal Server Error).
jsonp Estableix el nom de la funció de devolució de trucada a enviar quan es realitza una petició JSONP.
succes Estableix una funció a executar si la petició a estat satisfactòria. Aquesta funció rep com a arguments l'objecte jqXHR (en versions anteriors o iguals a jQuery 1.4, rep en el seu lloc l'objecte de la petició en cru XMLHTTPRequest), un text especificant l'estatus de la mateixa petició i la informació de la petició (convertida a objecte Javascript en el cas que dataType sigui JSON), l'estatus de la mateixa.
timeout Estableix un temps en mil·lisegons per considerar a una petició com fallada
traditional Si el seu valor és true, s'utilitza l'estil de serialización de dades utilitzat abans de jQuery 1.4. Per a més detalls pot visitar http://api.jquery.com/jquery.param/.
type De forma predeterminada el seu valor és “GET”. Altres tipus de peticions també poden ser utilitzades (com PUT i DELETE), no obstant això poden no estar suportats per tots els navegadors.
url Estableix la URL on es realitza la petició. L'opció url és obligatòria per al mètode $.ajax;

Altres mètodes

Els mètodes que proveeix la biblioteca són:

  • $.get

Realitza una petició GET a una URL proveïda.

  • $.post

Realitza una petició POST a una URL proveïda.

  • $.getScript

Afegeix un script a la pàgina.

  • $.getJSON

Realitza una petició GET a una URL proveïda i espera que una dada JSON sigui retornat.

Els mètodes han de tenir els següents arguments, en ordre:

  • url

La URL on es realitzarà la petició. El seu valor és obligatori.

  • data

La informació que s'enviarà al servidor. El seu valor és opcional i pot ser tant un objecte com una cadena de dades (com foo=bar&baz=bim).

Nota: Aquesta opció no és correcte per al mètode $.getScript.

  • success callback

Una funció opcional que s'executa en cas que petició hagi estat satisfactòria. Aquesta funció rep com a arguments la informació de la petició i l'objecte en brut d'aquesta petició.

  • data type

El tipus de dada que s'espera rebre des del servidor. El seu valor és opcional.

Nota

Aquesta opció és solament aplicable per a mètodes en què no està especificat el tipus de dada en el nom del mateix mètode. Exemples: 

$.get('/users.php', { userId : 1234 }, function(resp) {
        console.log(resp);
    });
    
$.getScript('/static/js/myScript.js', function() {
        functionFromMyScript();
});
    
$.getJSON('/details.php', function(resp) {
        $.each(resp, function(k, v) {
        console.log(k + ' : ' + v);
        });
});

$.load()

El mètode $(selector).load() és l'únic que es pot cridar des d'una selecció. Aquest mètode obté el codi HTML d'una URL i als elements seleccionats els modifica amb la informació obtinguda. 

$('#newContent').load('/foo.html');
$('#newContent').load('/foo.html #myDiv h1:first', function(html) {
      alert('Contenido actualizado');
    });

Events AJAX

Sovint, voldrà executar una funció quan una petició hagi començat o acabat, com per exemple, mostrar o ocultar un indicador. En lloc de definir aquestes funcions dins de cada petició, jQuery proveeix la possibilitat de vincular esdeveniments Ajax a elements seleccionats. Per a una llista completa d'esdeveniments Ajax, pot consultar http://docs.jquery.com/ajax_events. 

$('#loading_indicator')
        .ajaxStart(function() { $(this).show(); })
        .ajaxStop(function() { $(this).hide(); });

Podeu obtenir imatges per mostrar com a indicadors a: http://www.ajaxload.info/

Exercicis

Chat

Es vol crear un chat amb JQuery. El contingut del chat es guardarà en un fitxer al servidor php. Aquest fitxer es modificarà cada vegada que algú enviï informació. Els clients (navegadors) indicaran l'última línia del fitxer que han rebut per tal d'actualitzar els seus missatges

Pilota

  • a) Es vol moure una pilota per la pantalla. Aquesta pilota es mou en tots els navegadors alhora. Per fer-ho, el servidor php té la posició de la pilota a la pantalla i els navegadors, mitjançant jquery, la mostren.
  • b) La pilota no ha de parar de moure's, però la seva direcció la decideix el client mitjançant les tecles (up, down, left, rigth).
Obtingut de «http://wikiserver.infomerce.es/index.php?title=NF2_-_JQUERY&oldid=1424»