JQuery e la precisione del calcolo dell’ agonista Miles, a cura di agenzia web marketing

agenzia web marketingAll’ indirizzo http://www.chessgames.com/perl/chessgame?gid=1097469 alla mossa 27 Miles spara al malcapitato del momento Kindermann una 27 Tf5! tattica letale, ma verrebbe da chiedersi perché alla mossa 29 ha giocato solo 29 Th5 costringendo all’ abbandono l’avversario in luogo della mirabolante torre prende h7!! idea Dh1 e matto quasi imminente. Ma se l’agonista si chiama Miles e non Rezzonico un motivo ci sarà perché in quel caso il nero sarebbe potuto scappare con il re in g6 dopo Ch4. Tutto questo per dire che i sacrifici vanno fatti solo quando si sono calcolate bene e in profondità tutte le varianti quindi lode a Miles e alla precisione del suo calcolo espresso da una mossa semplice e accurata che costruisce la stessa combinazione ma portando la donna in casa h5 dal momento che la donna nera deve prendere il pedone f2 come unica risposta. E coerenti con le politiche di strategia digitale volute da agenzia web marketing adesso saltiamo verso un interessante libro su JQuery, quello di Alessandra Selvaggio perfettamente sagomato sull’ aspirante sviluppatore front end! Con il CEO dell’ agenzia web marketing Faraoni Enrico abbiamo colto più volte le potenzialità di JQuery con vari post nei tanti portali umbriaway consulting. Ora cerchiamo di capire in quale foresta siamo andati a cacciarci. Innanzitutto JQuery facilità la compatibilità cross-platform ed é una libreria creata all’ inizio da John Resig veloce e pratica per semplificare il codice javascript estendendo le sue funzionalità. Avere un codice che funziona su tutti i browser supportati senza limitazioni e scrivere poco per fare tanto é il sogno di ogni sviluppatore, sottolinea agenzia web marketing. La libreria può essere scaricata in due versioni da http://jquery.com/, compressa (minified), da usare in fase di produzione, garantisce un file di misura decisamente minore (quindi con minori tempi di caricamento); la versione estesa (uncompressed) è adatta in fase di progettazione e utile per analizzare il codice sorgente stesso di jQuery. Ad esempio il download minified:
http://code.jquery.com/jquery-1.8.2.min.js

e versione uncompressed
http://code.jquery.com/jquery-1.8.2.js

ovviamente conviene sempre verificare se sono state rilasciate nuove versioni.

Queste pagine vanno salvate e quindi integrate nei file in cui volete usarle:
http://js/jquery-1.8.2.min.js
o
http://js/jquery-1.8.2.js. Oltre a utilizzare le proprie copie di jQuery, è possibile utilizzare quelle messe a disposizione per il pubblico su server CDN (Content delivery network) da importanti aziende, come Google e Microsoft, dove CDN sta per un sistema di server che ha l’obiettivo di portare agli utenti finali contenuto con alta disponibilità e alte prestazioni. Queste copie pubbliche di jQuery sono disponibili agli indirizzi che seguono:
Google Ajax API CDN (supporta anche SSL via HTTPS)
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
Microsoft CDN (supporta anche SSL via HTTPS)
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js
jQuery CDN (via Media Temple)
http://code.jquery.com/jquery-1.8.2.min.js versione minified
http://code.jquery.com/jquery-1.8.2.js versione completa uncompressed
Se decidete di usare queste versioni, dovete comunque richiamarle dalle vostre pagine:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

Prima di entrare nel vivo di jQuery, accenneremo al concetto di scrittura di codice non intrusivo (Unobstrusive).Questo termine è stato coniato nel 2002 da Stuart Langridge nell’articolo “Unobtrusive DHTML, and the power of unordered lists” http://www.kryogenix.org/code/browser/aqlists/, in cui si prospettava la possibilità di separare il codice di funzionamento delle pagine dal codice HTML che ne descrive la struttura e dalle regole CSS che ne creano l’aspetto grafico. Insomma, così come si consiglia di separare il contenuto delle pagine (HTML) dalla descrizione del loro aspetto (CSS), oggi si tende anche a isolare la logica di funzionamento delle pagine (realizzata in Javascript). Questo nell’ottica di un maggiore ordine, di una maggiore facilità di gestione e, soprattutto, di una maggiore velocità di modifica, aggiornamento e riutilizzo delle pagine. Immaginiamo di avere bisogno di un pulsante che rende rosso un elemento il cui id è rettangolo. Con la tecnica “classica” scriveremmo un codice simile al seguente:

<button type=”button” id=”rosso”onClick=”document.getElementById(‘rettangolo’).style.color=’red'”> Rendi il rettangolo rosso</button>

In questo codice sono mischiate delle informazioni sul contenuto della pagina (il pulsante il cui id è rosso) e il codice che definisce il suo comportamento quando si verifica su di esso l’evento clic (onClick=”document.getElementById(‘rettangolo’). style.color=’red'”).

Ora, la tecnica non intrusiva prevede di separare questi due elementi. Una possibilità è quella che segue.
Il contenuto visuale viene descritto con la normale sintassi HTML:

<button type=”button” id=”rosso”>Rendi il rettangolo rosso</button>

mentre il comportamento del pulsante viene definito tramite un’istruzione Javascript che può trovarsi nell’intestazione del documento (all’interno di tag ) o addirittura in un file esterno, poi richiamato all’interno della pagina.

window.onload = function() {
document.getElementById(“rosso”).onclick = function() {
document.getElementById(“rettangolo”).style.color = “red”;
};
};

Quando viene caricata la pagina, si cerca il pulsante con id rosso nel DOM della pagina e si definisce il gestore per l’evento clic su di esso.
Il codice appena mostrato risulta più lungo di quello “classico”, ma è decisamente più facile da gestire e aggiornare, anche da persone diverse e con competenze differenti, considerando possibile la divisione in file diversi della parte visuale (HTML/CSS) da quella di comportamento (Javascript).
Inoltre, nella sua versione jQuery, si presenta anche decisamente più sintetico:

$(function(){
$(“#rosso”).click(function(){
$(“#rettangolo”).css(“color”,”red”);
})
});

In questo momento non è importante se non comprendete la sintassi jQuery, che vedremo più avanti: è importante, invece, cominciare a prendere confidenza con questo sistema, che prevede la separazione del codice di funzionamento dal contenuto e dalla formattazione delle pagine, riporta agenzia web marketing!

Adesso con agenzia web marketing parliamo di DOM ready. Nell’esempio che abbiamo fatto prima, il codice che definisce il comportamento della pagina veniva eseguito sull’evento window.onload, cioè quando tutta la pagina − immagini, elementi multimediali e istruzioni CSS compresi − è stata caricata dal browser. Questo avviene per evitare che si tenti di manipolare il documento prima che questo sia caricato. L’aspetto negativo, però, è che se immagini e elementi multimediali sono molto grandi, può trascorrere molto tempo (diversi secondi) tra quando l’utente vede a video la struttura della pagina (DOM caricato) e quando il pulsante diventa funzionante. Per evitare di incorrere in questo problema, jQuery dispone di una semplice istruzione che analizza il documento e attende fino a quando è possibile manipolarlo, ossia quando si verifica l’evento ready.Questo evento si verifica quando la struttura del DOM è stata caricata, anche se le immagini e gli elementi esterni non sono ancora stati caricati.Questo evento, dunque, si verifica prima dell’evento window.onload.L’evento ready ha la sintassi che segue:

$(document).ready(function(){     // Codice da eseguire al caricamento del DOM della pagina  });

o, nella sua forma più sintetica,

$(function(){     // Codice da eseguire al caricamento del DOM della pagina  });

Detto questo, possiamo scrivere la versione jQuery del classico “hello world” con cui si iniziano tutti gli studi su un linguaggio di programmazione:
$(function(){ alert(“Hello word”); });

Per sperimentare quanto detto fin qui, e verificare che l’evento ready si verifica prima di window.onload, potete creare una pagina come quella che segue:


content=”text/html; charset=iso-8859-1″ />
ready

window.onload = function (){
alert(“window onload”);
}
$(document).ready(function(){
alert (“document ready”)
});

</head>
<body>
<img src=”figura1.jpg”>
</body>
</html>

 

agenzia web marketing

Osserviamo la funzione $(function() {}), che può essere usata come forma breve per $(document).ready(function(). Ebbene, il simbolo $ in jQuery ha molti altri importanti utilizzi, anzi potremmo dire che è l’elemento jQuery più utilizzato. Il suo utilizzo più comune consiste nel recuperare gli elementi del DOM su cui si deve lavorare. Per questo tipo di operazione la sintassi da utilizzare è la seguente: $(selettore) dove selettore è un’istruzione che punta a uno o più elementi del DOM. Ad esempio, l’istruzione

$(“p”)

restituisce uno speciale oggetto Javascript che contiene un array, che a sua volta contiene tutti gli elementi del DOM che corrispondono al selettore impostato (“p”). In questo caso specifico, viene restituito l’insieme degli elementi <p> del documento. Nei capitoli che seguono, vedremo come utilizzare i selettori jQuery per recuperare specifici elementi del documento e quindi manipolarli. Un altro utilizzo della sintassi del $ consiste nel fornire l’accesso ad alcune funzioni di utilità, con la sintassi che segue:

$.each(contenitore, funzione callback)

Questa notazione non vi sembri strana. $ è una sorta di alias per jQuery. In pratica, con la notazione sopra proposta indichiamo che si tratta di una funzione che appartiene a jQuery. L’istruzione presentata sopra potrebbe anche essere scritta come segue:

jQuery.each(contenitore, funzione callback)

Quest’ultima notazione potrebbe sembrarvi più familiare, ma, nell’uso pratico, è decisamente meno comune. I contenuti promozionali di questo post arrivano a scopo divulgativo dall’ interessante libro di Alessandra Selvaggio su JQuery FAG edizioni di cui agenzia web marketing consiglia l’acquisto!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...