Montebugnoli Programação: Asp.Net – Trabalhando com JQuery 2.x

Neste mês irei abordar um assunto muito utilizado em praticamente toda aplicação Web, o uso do JQuery 2.x. Neste artigo irei ressaltar algumas informações específicas sobre esta nova versão, seguindo de como devemos adquiri-la e instalá-la manualmente e automaticamente em uma solução com a ferramente de desenvolvimento da Microsoft, o Microsoft Visual Studio 2013. Explicarei também conceitos e informações de Seletores (“Selectors”) e os Eventos (“Events”).

Conceito

Tendo como referência o site oficial, podemos afirmar que jQuery é uma biblioteca de JavaScript com funcionalidades rápidas, pequena e rica em recursos. Possui características marcantes como: manipulação de HTML, uso de Eventos, implementação com o Ajax, entre outros, se tornando muito simples com uma API de fácil aprendizado e que funciona através de uma multiplicidade de navegadores. Com esta biblioteca, a tarefa de adicionar interatividade a uma página web se torna muito mais fácil e prática.

Informações importantes sobre a versão jQuery 2.x

· Em relação a versão anterior (JQuery 1.x), esta segunda foi desenvolvida para a Web moderna, abandonando o suporte aos browsers mais antigos (Internet Explorer 6/7/8).

· Possibilidade de personalização da biblioteca, tendo inúmeros módulos diferentes, como por exemplo o ajax, ajax/xhr, ajax/script, css, dimensions, effects, wrap, etc ... (Não irei entrar em detalhes sobre os mesmos).

· O JQuery 2.x é 12% mais leve do que a versão anterior, justamente pelo fato da remoção de patches de compatibilidade do Internet Explorer (como foi comentado no primeiro tópico).

Baixando e Instalando

Para adquirir a biblioteca jQuery será necessário entrar no site oficial (https://jquery.com/) e clicar no item de menu “Download”, Ver Imagem 01.

Figura 01: Site Oficial.

Na próxima etapa seremos redirecionados para os links das bibliotecas jQuery 1.x e jQuery 2.x.

Para cada versão possuímos quatro links, sendo:

Download the compressed
Cópias comprimidas de arquivos jQuery, economia de espaço e aumento de desempenho na produção.

Download the uncompressed
Cópias não comprimidas de arquivos jQuery, sendo melhor utilizado durante o desenvolvimento ou a depuração.

Download the map file
Arquivo para uso quando a depuração utilizar um arquivo compactado. Este arquivo não é necessário para que os usuários executem jQuery, só auxilia a depuração do desenvolvedor.

Release notes
Informações sobre os recentes lançamentos e atualizações.

Podemos realizar o download do jQuery 2.x, versão compactada. (A versão atual até a data deste artigo é a “jQuery 2.1.4”). Para isto clique com o botão direito sobre o link escolhendo “Salvar Link como...” Crie uma pasta “jquery” para futuras implementações em seu projeto.Confira os detalhes na Figura 02

Figura 02: Download jQuery 2.x, versão comprimida.

O arquivo baixado é de extensão “js”, com tamanho de aproximadamente 83kb. Ver Imagem 03.

Figura 03: Biblioteca jQuery 2.1.4.

Recomendo realizar uma leitura no próprio site, pois o mesmo contém todas as informações e dicas referentes à esta biblioteca.

Instalação Automática

Os passos descritos acima demonstra como devemos proceder para realizar a instalação da biblioteca jQuery de uma forma manual. Poderíamos nos poupar deste trabalho e instalá-la de uma outra forma no Microsoft Visual Studio através do “Nuget Package Manager”, clicando no item de menu “Tools/Manage Nuget Package/Manage Nuget Package for Solutions...”. Pesquise por jQuery, Ver Figura 04.

Figura 04: Manage Nuget Packages.

Na região superior direita podemos conferir algumas informações como Nome do fabricante, versão, ultima publicação, descrição, entre outros dados. Basta clicarmos no botão “Install” para obtermos o jQuery instalado em nosso projeto.

Projeto Base

Estarei utilizando o Microsoft Visual Studio 2013 para criar os exemplos de utilização do jQuery. Para isto inicie um projeto do zero clicando no menu File/New Web Site. Para fins didáticos recomendo escolher a opção “Asp.Net Empty Web Site”, para criar um projeto com apenas os itens excenciais.

Ver Figura 05.

Figura 05: Criando um novo projeto Asp.Net.

Poderemos concentrar os nossos exemplos a partir de um Web Form, para isto clicando com o botão direito sobre a “Solution” o adicione navegando até a opção “Add/New Item...” Neste caso uma sugestão de nome como por exemplo “FrmjQuery”. Ver Imagem 06.

Figura 06: Criando um Web Form.

Como foi descrito no tópico anterior, deveremos disponibilizar a Biblioteca jQuery dentro da pasta deste projeto, como ilustra a imagem 07.

Figura 07: Padrão de pastas do projeto de exemplo.

O nosso Projeto deverá estar conforme Imagem 08.

Figura 08: Projeto de Exemplo.

Declaração e Sintaxe

O primeiro exemplo servirá de base para o restante do artigo, utilizamos a função “Hide()” para ocultar todos os dados contidos nas tags <p> (“Selectors” e “Events” serão exemplificados nos próximos tópicos). Para isto, clique sobre o “FrmjQuery.aspx” e em Source adicione o código contido na Listagem abaixo.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmjQuery.aspx.cs" Inherits="FrmjQuery" %>

<!DOCTYPE html>

<title> Exemplos jQuery 2.x</title>

$(document).ready(function ()

{

$("button").click(function ()

{

$("p").hide();

});

</script>

A parte que nos interessa e a mais importante deste Web Form é a inclusão do arquivo js (JQuery), o mesmo sendo responsável pelo código da biblioteca jQuery. Esta inclusão deverá sempre estar localizada dentro da TAG <Head> junto com a função “Hide()”.

</head>

<body>

<div>

<h2>Este é o Título</h2>

<p>Tudo o que está escrito aqui será ocultado!</p>

<p>The Club - Aqui também será ocultado.</p>

<button>Ocultar Linhas</button>

</div>

</body>

</html>

Observe como usamos o identificador da <DIV> para chamar o método Hide(), todos os valores contidos entre as Tags <p> serão ocultados ao clicarmos no botão “Ocultar Linhas”. Ver Imagem 09 para maiores detalhes.

Figura 09: Exemplo prático.

Após entendermos como funciona a declaração, utilização e sintaxe da biblioteca jQuery, gostaria de apresentar nas próximas páginas outras partes importantes como por exemplo os “Selectors” (Seletores) e os “Events” (Eventos).

O que são os “Selectors”?

Os seletores JQuery são de extrema importância na biblioteca jQuery, pois permitem

selecionar e manipular elementos HTML. Eles são usados para “Localizar” elementos

HTML com base no ID, tipos, classes, atributos, valores de atributos, entre outros.

Todos os seletores jQuery deverão começar com o sinal de dólar e parênteses, exemplo: $ ().

1)      Element Selector (Seletor por Elemento)

O seletor de elemento jQuery seleciona elementos com base no nome do mesmo. Poderemos selecionar todos os elementos contidos entre a TAG <p> de uma página.

Sintaxe:

$("p").hide();

Exemplo:

<!DOCTYPE html>

<html>

<head>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").hide();

});

});

</script>

</head>

<body>

<h2>Este é o Título</h2>

<p>Tudo que está aqui será ocultado!</p>

<button>Ocultar</button>

</body>

</html>

Quando um usuário clica em um botão , todos os elementos <p> ficarão ocultos. (Vide exemplo anterior para maiores detalhes)

2)      #id Selector (Seletor por #id)

O seletor #id jQuery usa o atributo id de uma tag HTML para encontrar o elemento específico.

Um id deve ser único dentro de uma página , por isto deveremos usar o seletor #id quando

desejamos encontrar um único elemento. Quando um usuário clica em um botão , o elemento

com id = "teste" será ocultado, veja a sintaxe e o exemplo a seguir.

Sintaxe:

$("#test").hide();

Exemplo:

<!DOCTYPE html>

<html>

<head>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#test").hide();

});

});

</script>

</head>

<body>

<h2>Este é o Título</h2>

<p>The Club.</p>

<p id="test"> Tudo que está aqui será ocultado!</p>

<button>Ocultar</button>

</body>

</html>

3)      Class Selector (Seletor por Classe)

O seletor de classe jQuery encontra elementos de acordo com uma classe específica.

Quando um usuário clica em um botão , os elementos com class = "teste" será escondido.

Sintaxe:

$ (".test")

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

</script>

</head>

<body>

<h2 class="test">Este é o Título</h2>

<p class="test"> Tudo que está aqui será ocultado!</p>

<button>Ocultar</button>

</body>

4) Outros Seletores importantes:

Possuímos inúmeros seletores na biblioteca jQuery, na sequência gostaria de apresentá-los com a sintaxe e uma leve descrição dos mesmos.

$( "*") : Seleciona todos os elementos.

$(this): Seleciona o elemento HTML atuais.

$("p.intro"): Seleciona todos os elementos <p> com class = " intro".

$("p:first"): Seleciona o primeiro elemento <p> contido entre a tag.

$("ul li : first"): Seleciona o primeiro elemento <li> da primeira <ul>.

$("ul li : first-child"): Seleciona o primeiro elemento <li> de cada <ul>.

$("[ href ]" ): Seleciona todos os elementos com um atributo href.

$("a[target = ' _ blank ']"): Seleciona todos os elementos <a> com um valor igual a "_blank”.

$("a [target! = ' _ blank ']"): Seleciona todos os elementos <a> com um alvo valor diferente de " _blank ".

$(":button"): Seleciona todos os elementos <button> e <input> elementos de type = "button".

$("tr: even"): Seleciona todos os elementos even <tr >.

$("tr : odd"): Seleciona todos os elementos odd <tr>.

O que são os “Events”?

Pode-se dizer que os eventos são um dos elementos mais importantes no desenvolvimento de aplicações web, são ações ocorridas na página, à medida que o usuário a utiliza. Um evento representa o exato momento em que algo acontece. Um bom exemplo disto seria o movimento do mouse sobre um elemento, selecionando o radio button ou até mesmo o ato de clicar sobre algum lugar.

Abaixo temos os principais tipos de eventos, sendo:

Eventos do Mouse: click, dblclick, mouseenter, mouseleave.

Eventos do Teclado: keypress, keydown, keyup.

Para atribuir um evento de clique para todos os parágrafos em uma página, podemos fazer da seguinte maneira:

$("p").click();

Após definir o evento, deveremos programar o que acontecerá quando este evento é acionado. Exemplo:

$("p").click(function()
{
// Ações

});

1) Mouse events (Eventos do Mouse)

Click()

Esta função é executada quando o usuário clica em algum elemento específico HTML. No exemplo a seguir iremos ocultar o elemento <p> ao ser disparado o evento click().

Sintaxe:

$("p").click(function(){
$(this).hide();
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("p").click(function(){

$(this).hide();

});

</script>

</head>

<body>

<p>Se clicar aqui serei ocultado.</p>

<p>Aqui também!</p>

</body>

</html>

Dblclick()

Esta função será executada quando o usuário clica duas vezes no elemento HTML.

Sintaxe:

$("p").dblclick(function(){
$(this).hide();
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("p").dblclick(function(){

$(this).hide();

});

</script>

</head>

<body>

<p>Ao realizar um duplo clique irei ser ocultado.</p>

<p>Eu também serei!</p>

</body>

</html>

Mouseenter()

Já este evento será executado quando o mouse entrar em um elemento HTML.

Sintaxe:

$("#p1").mouseenter(function()
{
alert("Você entrou na TAG p1!");
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function()
{

$("#p1").mouseenter(function(){

alert("Você entrou na TAG p1!");

});

</script>

</head>

<body>

<p id="p1">Entre neste parágrafo!!</p>

</body>

</html>

Mouseleave()

A função é executada quando o ponteiro do mouse deixa o elemento HTML.

Sintaxe:

$("#p1").mouseleave(function()
{
alert("Você está deixando este elemento HTML!");
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function()
{

$("#p1").mouseleave(function(){

alert("Você está deixando este elemento HTML!");

});

</script>

</head>

<body>

<p id="p1">Saia deste Parágrafo!</p>

</body>

</html>

2) Keyboard events (Eventos do Teclado)

Keypress()

Este evento é disparado quando ocorre alguma ação do teclado. No exemplo abaixo temos uma situação que o usuário digita algo e logo em seguida disparamos o evento Keypress para contar o número de caracteres digitados.

Sintaxe:

$("input").keypress(function()
{
$("span").text(i += 1);
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

i = 0;

$(document).ready(function(){

$("input").keypress(function(){

$("span").text(i += 1);

});

</script>

</head>

<body>

Entre com seu Nome: <input type="text">

<p>Quantidade de Caracteres: <span>0</span></p>

</body>

</html>

Keydown()

Este evento é identico ao anterior, só que o mesmo é disparado quando pressionamos a tecla, descendo o dedo na tecla. Neste caso iremos alterar a cor de fundo do componente para amarelo ao executar o evento KeyDown.

Sintaxe:

$("input").keydown(function()
{
$("input").css("background-color", "yellow");
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("input").keydown(function(){

$("input").css("background-color", "yellow");

});

</script>

</head>

<body>

Entre com o Nome: <input type="text">

</body>

</html>

Keyup()

Evento que ocorre após o KeyDown, ou seja, depois que a tecla é pressionada. No exemplo abaixo iremos alterar a cor de fundo do componente para rosa ao executar o evento KeyUp.

Sintaxe:

$("input").keyup(function()
{
$("input").css("background-color", "pink");
});

Exemplo:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function()
{

$("input").keyup(function(){

$("input").css("background-color", "pink");

});

</script>

</head>

<body>

Entre com o nome: <input type="text">

</body>

</html>

Conclusões

Neste artigo pude apresentar algumas informações importantes para quem pretende trabalhar com a biblioteca jQuery. Abordei algumas informações sobre a última versão 2.x, dicas de instalação manual e automática pelo Microsoft Visual Studio, declaração e sintaxe com base nos Seletores (Selectors) e nos Eventos (Events).

Fica aí a dica, um abraço e até o mês que vem!

Referências

https://jquery.com/download/

Montebugnoli Programação

Páginas

sexta-feira, 10 de junho de 2016

Asp.Net – Trabalhando com JQuery 2.x

Nenhum comentário:

Postar um comentário