Web 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>