Espero que tenham acompanhado os guias anteriores e que os tenham percebido, hoje, neste tutorial vou-vos falar de jQUERY – a nova coqueluche para desenvolvimento de aplicações WEB.
O que é?
jQuery é uma biblioteca Open Source de javascript muito leve, rápida, intuitiva e que rapidamente (nasceu em 2006) se tornou numa das mais populares bibliotecas para programar na WEB.
Com esta biblioteca melhoramos e simplificamos de forma significativa a interacção entre Javascript e HTML. Outra das suas grandes vantagens é ser compatível com todos os Browsers existentes.
Em muito menos linhas de código conseguimos obter resultados que em Javascript dariam para preencher várias folhas A4.
Uma das principais características é o facto de podermos encadear comandos.
O slogan é “Write less, do more”.
Selectors?
Como o nome indica servem para seleccionar um elemento da DOM para assim poder ser manipulado.
Existem várias formas de chegar a um elemento:
1. $(document); Procura um objecto DOM (neste caso o document) 2. $(’#mydiv’) Procura um div que tenha o id “mydiv” 3. $(’p.first’) Procura todas as tags < p > com a classe “first”.
jQuery e ASP.NET?
Em 2008 e pela primeira vez a Microsoft adoptou e distribuiu na sua Framework uma biblioteca Open Source. Esta união trouxe grandes benefícios aos developers ASP.NET que assim passam a ter intellisense de jQUERY no Visual Studio e as novas versões do ASP.NET AJAX vão passar a utilizar jQUERY.
Utilização?
Para utilizar a biblioteca basta fazer o download da ultima versão de jQUERY e adicionar o script no header da nossa página:
A sintaxe começa sempre com o símbolo $ (dólar) que é uma função para o objecto jQUERY.
$(document).ready(function()
{
alert('Hello World');
});
$(document).ready() Esta é a função que é chamada quando o documento foi carregado. Tem como argumento uma função anónima (muito utilizado em jQUERY) que é chamada depois de carregar o documento
$(“div”).css(“border”,”9px solid red”); Nesta função procuramos todos os div aplicamos um estilo em que a border ficará com a cor vermelha.
$(“#myDiv”).css(“border”,”3px solid red”); Nesta função procuramos um div com o id “myDiv” e aplicamos um estilo em que a border ficará com a cor vermelha.
PageMethods por jQUERY:
Code-Behind:
public partial class _Default : Page
{
[WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
}
jQUERY:
$.ajax({
type: "POST",
url: "Default.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
}
});
WebServices por jQUERY:
$.ajax({
type: "POST",
url: "NomeWebService.asmx/método",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
alert(msg.d);
}
});
O funcionamento é igual a um PageMethod a única diferença é no url, em que colocamos o nome do webservice e o método ao invés do nome da página e o método.
Conclusão:
Depois de muitos anos no esquecimento o código do lado do cliente voltou em grande força, sendo um dos grandes impulsionadores o Ajax. Desde o seu regresso muitos criaram formas de melhorar a escrita de código em Javascript mas o jQUERY é de longe a melhor biblioteca para desenvolver, fácil, intuitiva, prática e muito poderosa esta biblioteca vai ajudar-nos a criar sites muito dinâmicos. A inclusão na Framework .NET vem a facilitar ainda mais a sua utilização.
Por hoje é tudo, para a semana iremos começar a desenvolver o nosso site para um clube de vídeo.
