umbriawaycultura formazione

Web Design Umbria e JQuery: de che stemo a parlà?

castello-di-colleWeb design Umbria inizia con questa sessione di allenamento firmata Umbriaway Consulting una serie di approfondimenti legati a JQUERY. Trattasi di una libreria JavaScript che semplifica l’uso di JS lato client e che può essere addizionata con una singola riga di codice. Per studiare questo linguaggio bisogna avere rudimenti di HTML CSS Cascading Style Sheet precisa web design Umbria e per l’appunto JavaScript. Ora il profano si chiederà ma come posso addizionare JQuery nella mia pagina? semplicissimo si osservi il seguente mark-up:

<head>
http://jquery.js
</head>

La libreria può essere scaricata dal sito jquery.com ed é disponibile in diverse forme per la produzione e lo sviluppo. Ovviamente può essere anche spostata direttamente su server e poi usata come link remoto. Esiste anche un link diretto usdando un CDN un content delivery network. Persino Google mette a disposizione il link: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js.Questo linguaggio che usa il dollaro come simbolo primario é stato inventato nel 2005 da John Resig , la prima stabile release é del 2006. La sintassi di base prevede l’espressione:

$(selector).action()

il simbolo $ definisce JQuery, il seletytore trova l’elemento HTML e l’azione é quella da compiere sull’ oggetto del DOM specificato. Ad esempio vediamo come nascondere un elemento:

$(this).hide()

che nasconde l’oggetto corrente vediamo come nascondere per esempio un paragrafo:

$(“p.test”).hide()

e per nascondere un elemento che ha un id specifico o univoco?

$(“#test).hide()

E’ importante che il documento prima dell’ esecuzione di JQuery sia completamente caricato per questo conviene inserire le istruzioni viste precedentemente all’ interno di una funzione:

$(document).ready(function() {
//JQuery functions go here es: $(“p.test”).hide()
});

questa semplice istruzione assicura il corretto funzionamento all’ interno del documento in quanto prima viene verificato lo stato di caricamento del metodo hide. In questo primo posto web design Umbria ha avvicinato il binocolo come si dice in gergo su Jquery chiedendo ai suoi interlocutori: ma è davvero così divvicile come sembra a livello di apprendimento? A giudicare da questo primo approccio di web design Umbria la risposta sembrerebbe essere proprio No, parola di Umbriaway Consulting! E ora diamo un occhiata a un esempio completo per osservare la semplicità di utilizzo:

<html>
<head>
http://jquery.js

$(document).ready(function(){
$(“button”).clic(function(){
$(this).hide();
});
});

</head>

<body>
<button>clicca e osserva l’effetto che fa</button>
</body>
</html>

Annunci
umbriawaycultura formazione

Web designer Gualdo Tadino e i problemi di compatibilità di Ajax cross browser

castello-di-colleIn precedenza in uno dei tanti portali Umbriaway Consulting web designer Gualdo Tadino ha mostrato un metodo try/catch basato su una strategia di tentativi per identificare i browser, adesso valuteremo uno script alternativo che si basa su quali oggetti sono contenuti nel browser per l’identificazione e successivo istanziamento dell’ oggetto XMLHTTPRequest.
function getXMLHTTPRequest()
{
var request = false;
if (window.XMLHHTPRequest)
{
request = new XMLHTTPRequest();
}else{
if(window.ActiveObject)
{
try
{
request = new ActiveXObject(“mSM12.XMLHTTP”);
}
catch (err1)
{
try
{
request = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (err2)
{
request = false;
}
}
}
}
return request;
}

 

in questo esempio é stato utilizzato il test if (window.XMLHHTPRequest) {…}

per stabilire se XMLHTTPRequest é un oggetto nativo del browser in uso; in caso affermativo si sfrutta il metodo costruttore
request = new XMLHTTPRequest();
per creare una istanza dell’ oggetto XMLHTTPRequest; diversamente si prova a creare un oggetto ActiveX  adatto, come nel primo esempio. Qualsiasi metodo venga utilizzato per creare una istanza dell’ oggetto XMLHHTPRequest, di deve poter chiamare questa funzione nel modo seguente:
var myRequest = getXMLHTTPRequest();
JavaScript mette a disposizione un oggetto navigator contenente informazioni sul browser utilizzato per visualizzare la pagina. Un altro metodo che si può sfruttare per utilizzare il codice corretto é la proprietà appNome dell’ oggetto, che consente di scoprire il nome del browser:
var myBrowser = navigator.appName;
questa riga restituisce “Microsoft Internet Explorer” per IE. Web developer Castello di Colle analizzerà in uno dei prossimi articoli di training le proprietà e i metodi dell’ oggetto XMLHTTPRequest.
umbriawaycultura formazione

Web developer Castello di Colle e la compatibilità tra browser

javascript-try-catchSe il browser supporta XMLHTTPRequest é necessario creare uno script che genera in modo corretto una istanza indipendentemente dal browser in questione. L’idea suggerita da web developer Castello di Colle é si prova finché l’operazione in questione non viene generata per quel tipo di browser tramite istruzione condizionale. Proviamo i vari metodi di creazione dell’ istanza uno dopo l’altro finché l’operazione non va a buon fine. Vediamo uno script generato con questa strategia.

 

 

 

function getXMLHTTPRequest()
{
var request = false;
try
    {
    request = new XMLHttpRequest(); /* per esempio Firefox */
    }

try
    {
    vrequest = new ActiveXObject (“Msxml12.XMLHTTP”); /* alcune versioni di IE */
    }

    catch (err2)

    {
    try
        {
        request = new ActiveXObject(“Microsoft.XMLHTTP”); /* alcune versioni di IE */
        }
        catch (err3)
        {
        request = false;
        }
    }
}
return request;
}

Web developer Castello di Colle evidenzia l’uso del costrutto JavaScript try e catch, try dice all’ interprete prova ad eseguire un pezzo di codice, se il codice viene eseguito senza errori, tutto funziona bene; tuttavia, se si verifica un errore é possibile utilizzare la dichiarazione catch per intervenire prima che venga inviato all’ utente un messaggio di errore e stabilire che cosa deve fare il programma per risolvere il problema. Approfondiamo con web developer Castello di Colle la questione del catch, osserviamo il seguente codice catch(identifier) dove identifier é un oggetto creato quando si intercetta un errore. Contiene informazioni sull’errore che può essere rigirato all’ utente, JavaScript potrebbe utilizzare un costrutto come il seguente:

catch(er)
{
alert(err.description);
}

questo codice evidenzia web developer Castello di Colle genera una finestra di dialogo che contiene in dettaglio il tipo di errore generato durante l’esecuzione del codice. In uno dei prossimi articoli di approfondimento su Ajax in uno dei tanti portali Umbriaway Consulting vedremo un modo alternativo di intercettare l’istanza XMLHTTPRequest per il tipo di browser idoneo per risolvere i problemi di compatibilità.