Arquivos de sites

jQuery – Introdução ao selectors (seletores) e Usando elementos, IDs e classes

Uma tarefa muito comum quando se está usando JavaScript, é ler e modificar o conteúdo da página. Para fazer isso, você precisa encontrar o(s) elemento(s) que você deseja modificar, e ai é onde o selector no jQuery ajudará você. Com o JavaScript normal, encontrar elementos pode ser extremamente pesado, ao menos que você precise encontrar um único elemento que tem um valor especificado no atributo ID. O jQuery pode ajudar você a encontrar elementos baseado em seus IDs, classes, tipos, atributos, valores de atributos e muito, muito mais. Ele é baseado no selectors do CSS e como você verá através desse tutorial, ele é extremamente poderoso. Quando usamos esse tipo de programa para fazer mudanças em seu site, é importante que você tenha autenticação de dois fatores (two factor authentication (em Inglês)) de modo que o seu site e computador não são compromissados.

Pela razão dessa ser uma tarefa tão comum, o construtor do jQuery vem em várias formas que recebem uma selector query como argumento (parâmetro), permitindo você localizar elementos com uma quantidade bastante limitada de código para uma eficiência ótima. Você pode instanciar o objeto jQuery simplesmente escrevendo jQuery() ou até mais curto usando o nome de atalho do jQuery: $().

Portanto, selecionar um conjunto de elementos é simples assim:

$(<query aqui>)

Com o objeto jQuery retornado, você pode então começar a usar e alterar os elementos que você encontrou.

Fonte

Usando elementos , IDs e classes

O selector #id

Um tipo de selector muito comum é o baseado em ID, que nós vimos no exemplo “Hello, world”. Ele usa o atributo ID de uma tag HTML para localizar o elemento desejado. Um ID deve ser único,então você deve apenas usar esse selectior quando você deseja localizar um único elemento. Para localizar um elemento com um ID específico, escreva um caractere hash (#), seguido pelo ID do elemento que você deseja localizar, assim:

$("#divTest")

Um exemplo disso em uso:

<div id="divTest"></div>
<script type="text/javascript">
$(function()
{
        $("#divTest").text("Test");
});
</script>

Agora, enquanto tiver apenas um único elemento que combina com a nossa query acima, você deve estar ciente que o resultado é uma lista, significando que isso pode conter mais de um elemento, se a query combina com mais de um. Um exemplo disso é combinar todos os elementos quais usam uma ou varias classes CSS.

O selector .class

Elementos com uma classe específica podem ser localizados escrevendo um caractere ponto (.) seguido pelo nome da classe. Aqui vai um exemplo:

<ul>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
</ul>
<script type="text/javascript">
$(function()
{
        $(".bold").css("font-weight", "bold");
});
</script>

O selector element

Você também pode combinar baseado em elementos nos nomes das tags.

You can also match elements based on their tag names. Por exemplo, você pode combiner todos os links emu ma página assim:

$(“a”)

Ou todas as tags div assim:

$(“div”)

Se você usar um selector de multi-elemento (multi-element), como o selector de classe que nós usamos no exemplo anterior, e nó sabemos que nós estamos procurando por emento de um tipo específico, é uma boa prática especificar o tipo do elemento antes do selector. Não é apenas mais preciso, mas também é mais rápido para o jQuery processar, resultando em sites mais responsivos. Aqui vai uma versão reescrita do exemplo anterior, onde nós usamos esse método:

$("span.bold").css("font-weight", "bold");

Isso combinará todos os elementos span com “bold” como classe. Claro, isso pode ser usado com IDs e praticamente com todos os outros selector também.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – Evento Ready e Encadeamento de método (Method chaining)

Como mencionado, é uma boa prática esperar o documento ser totalmente carregado (loaded) e pronto (ready), antes de trabalhar com ele. Isso também permite você ter seu código JavaScript antes do body (corpo) do seu documento, na sessão head (cabeçalho), senão diretamente ou através de um link para um arquivo JavaScript externo. Você pode fazer isso apenas colocando seu código dentro do evento ready do documento. Nós vamos usar o mesmo exemplo como no capítulo “Hello, world!”, mas dessa vez o código está dentro do evento ready:

<div id=”divTest1″></div>
<script type=”text/javascript”>
function DocumentReady()
{
$(“#divTest1”).text(“Hello, world!”);
}

$(document).ready(DocumentReady);
</script>

O que fazemos aqui é que criamos uma function (função), chamada DocumentReady, a qual deve ser disparadas assim que o documento estiver pronto para manipulação do DOM. Na última linha, usamos o método ready() para atribuir nossa função ao evento ready, para dizer ao jQuery que assim que o documento estiver pronto, nós queremos que ele chame nossa função.

Entretanto, nós podemos encurtá-la um pouco usando uma função anônima (anonymous function) do JavaScript em vez disso. Isso basicamente apenas significa que ao invés de declarar a função e dá-la um nome, nós simplesmente criamos ela e então imediatamente passamos a referencia à função ready(). Se você é novo em JavaScript, então isso pode parecer demasiadamente complicado, mas assim você se acostuma a isso, você talvez possa apreciar as poucas keystrokes e o menor espaço necessário para realizar o mesmo:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#divTest2”).text(“Hello, world!”);
});
</script>

Mas com certeza, isso ainda não foi curto o bastante para o time do jQuery, então eles decidiram criar uma versão (sobrecarga) do construtor do jQuery, que leva uma função ready como um parâmetro, para fazer isso ainda mais curto:

<div id=”divTest3″></div>
<script type=”text/javascript”>
$(function(){
$(“#divTest3”).text(“Hello, world!”);
});
</script>

No ultimo exemplo, nossa função anonima é passada diretamente ao contrutor do jQuery, que a atribui ao evento ready. Como você verá quando você testar o código, o evento é disparado assim que a página for carregada, a maioria das vezes tão rápido que você nem se quer percebe.

Como já descrito, envolver nosso código na função de evento ready é a melhor prática para trabalhar com jQuery em nosso documento, e portanto você verá esse tutorial usando essa abordagem na maioria dos exemplos, a não ser ignorado para manter o tamanho dos nossos exemplos baixo.

Encadeamento de método (Method chaining)

Também um outro aspecto de tantos outros aspectos realmente legais do jQuery é o fato de que a maioria dos métodos retornam um objeto jQuery que você pode então usar para chamar outro método. Isso permite você fazer um encadeamento de método, onde você pode chamar múltiplos métodos no mesmo conjunto de elementos, que é realmente agradável porque isso salva você e o navegador de ter que procurar o mesmo elemento mais de uma vez. Aqui vai um exemplo, e não se preocupe sobre os métodos do jQuery usados nos exemplos seguintes – eles serão explicados nos capítulos posteriores:

<div id=”divTest1″></div>
<script type=”text/javascript”>
$(“#divTest1”).text(“Hello, world!”).css(“color”, “blue”);
</script>

Isso funciona assim: Nós instanciamos um novo objeto jQuery e selecionamos o elemento divTest1 com o caractere $, que é o atalho para a classe jQuery. No retorno, nós pegamos um objeto jQuery, permitindo-nos manipular o elemento selecionado. Nós usamos aquele objeto para chamar o método text(), que define o texto ao(s) elemento(s) selecionado(s). Esse método retorna o objeto jQuery de novo, nos permitindo usar outra chamada de método diretamente no valor de retorno, que é o método css().

Nós podemos adicionar mais métodos se nós precisarmos, mas até certo ponto, a linha de código se tornará bastante grande. Felizmente para nós, o JavaScript não é muito rigoroso em relação a sintaxe, então você pode formatar como você quiser, incluindo linebreaks (quebra de linha) e indentações.  Por exemplo, isso irá funcionar muito bem também:

<div id=”divTest2″></div>
<script type=”text/javascript”>
$(“#divTest2”).text(“Hello, world!”)
.removeClass(“blue”)
.addClass(“bold”)
.css(“color”, “blue”);
</script>

O JavaScript irá simplesmente jogar fora os espaços extras em branco, quando interpretar o código e executa-lo como uma longa linha de código com várias chamadas de métodos.

Observe que alguns métodos não retornam o objeto jQuery, enquanto outro apenas retornam isso dependendo dos parâmetros que você passar pra ele. Um bom exemplo disso é o método text() usado acima. Se parâmetros não forem passados a ele, o texto atual do(s) objeto(s) selecionado(s) é retornado em vez do objeto jQuery, enquanto um único parâmetro provoca o jQuery a definir o texto especificado e retornar um objeto jQuery.

Fonte: jquery-tutorial.net / jquery-tutorial.net

jQuery – O que é jQuery? Onde Programar?

O que é jQuery?

Uma vez que você veio a esta página, talvez você já tenha uma boa idéia sobre o que é jQuery, mas por segurança, aqui vai uma breve explicação. jQuery é um framework de JavaScript, qual o propósito é fazer isso muito mais fácil para usar JavaScript em seu website. Você poderia também descrever jQuery como uma camada de abstração, já que ela tem um monte de funcionalidades que você teria que escrever várias linhas de JavaScript para realizar e envolvê-las dentro de funções que você pode chamar com uma única linha de código. É importante observar que jQuery não substitui o JavaScript, e enquanto isso oferece atalhos sintáticos (syntactical shortcuts), o código que você escreve quando usa jQuery ainda é código JavaScript.

Com isso em mente, você deve estar ciente que você não precisa ser um expert em JavaScript para usar jQuery. De fato, o jQuery tenta simplificar muitas das coisas complicadas do JavaScript, como chamadas AJAX e manipulação de DOM, de modo que você pode fazer essas coisas sem conhecer muito sobre JavaScript.

Existem um monte de outros frameworks de JavaScript lá fora, mas até agora, jQuery parece ser o mais famoso e também o mais extensível, provado pelo fato de que você pode encontrar jQuery plugins para quase qualquer tarefa lá fora. O poder, a grande variedade de plugins e a bela sintaxe são o que fazem o jQuery esse excelente framework. Continue lendo para saber muito mais sobre ele e para ver porque nós o recomendamos.

Onde Programar? Um editor de jQuery

Assim como HTML, CSS e mesmo o habitual JavaScript, você pode escrever jQuery em qualquer tipo de editor, até mesmo no Windows Notepad. Entretanto, usar um simples editor de texto como Notepad para criar páginas web é como usar uma chave de fenda para furar um pedaço de madeira: Funciona, mas leva muito mais tempo e é a forma menos agradável.

Se você ja tem um editor HTML que permite você trabalhar facilmente com JavaScript, então ele possivelmente será bom para escrever jQuery também, mas existem editores lá fora que irão tratar o jQuery como um cidadão de primeira classe e ajudará você digitar isso mais rápido e mais eficientemente.

Eu pessoalmente utilize TSW WebCoder, o qual tem um monte de incríveis recursos IntelliSense para auxiliar você, cobrindo todas as tecnologias que você precisa: HTML, CSS, JavaScript, PHP e com certeza o jQuery. Se o seu atual editor já faz tudo isso, e você se sente confortável com ele, então certamente mantenha o mesmo – se não, então considere dar uma chance ao WebCoder.

> Mais informações sobre o TSW WebCoder (em Inglês) 

> Faça o Download do TSW WebCoder

Aqui vai alguns screenshots para mostrar para vocês porque o TSW WebCoder faz isso muito mais fácil para trabalhar com jQuery:

TSW WebCoder mostrando os método possíveis em um objeto jQuery
jQuery editor - Completion lists

TSW WebCoder mostrando os parâmetros do método fadeIn   jQuery editor - Parameter hints

Fontes: jquery-tutorial.net / jquery-tutorial.net

Quando usar o fetch.LAZY e o fetch.EAGER

Alguns conceitos básicos:

  • EAGER – Tradução ->
  1. Ansioso
  2. Impaciente
  3. Ardente
  class NotaFiscal {
  ...
  @OneToMany(fetch=FetchType.EAGER)
  List items;
  }

Imagine que quando você usa o EAGER e dá um get num objeto, ele traz tudo que está dentro do objeto, ou seja, se há um relacionamento 1 para N, no objeto será carregado todas as referências(N) dele. Se sua aplicação depende de performance, este pode ser um problema, pois isto ocupará um grande espaço de memória carregando todas as listas/dependências do objeto.

  • LAZY – Tradução:
  1. Preguiçoso
  2. Indolente
  3. Lento
  4. Ocioso
  5. Vadio
  @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "tabela_despesas", nullable = false)
    public Despesa getRelatorioDespesa() {
        return this.relatorioDespesa;
    }

Desse modo, quando acessamos o objeto ele não traz instantaneamente todas as dependências. Somente quando precisamos do atributo dependente é que a pesquisa (select ou JOIN) é feito, economizando memória. Para que o LAZY faça este select/JOIN é necessário declarar o fetch, dizer como será a pesquisa, se via Selec ou JOIN e você gera então a consulta.

O Hibernate tira proveito de proxies dinâmicas: ele te devolve objetos que fingem ser listas nesse caso, e quando você invoca algum método deles, o Hibernate então faz a respectiva query para carregar o relacionamento. Caelum

Lazy diz QUANDO trazer.lazy=”true” – Traga quando eu precisar ( ou seja. Quando eu acessar ) lazy = “false” – Traga junto com o objeto principal

  • Fetch – Tradução->
  1. buscar
  2. ir buscar
  3. trazer

Fetch diz COMO trazer.fetch = “select” – Faça um select pra pegar esse atributo fetch=”join” – Faça um join com o objeto principal e traga junto com ele. Essa opção ANULA a opção lazy = “true” EAGER, seria equivalente lazy = false.

  1. @Fetch( FetchMode.SELECT )
  2. @Fetch( FetchMode.JOIN )

Todos os relacionamentos *ToOne sãoEAGER, e os *ToMany são LAZY, isso porque relações *toMany são provavelmente mais custosas, trazendo mais objetos para a memória. Caelum

————————————————————————-
Problemas com lazy init (LazyInitializationException)?

Session session = sessionFactory.openSession();
NotaFiscal nf = (NotaFiscal) session.load(NotaFiscal.class, 42);
session.close();

List items = nf.getItems();
System.out.println("numero de pedidos dessa nota:" + items.size());

Esse código tem o seguinte resultado:

org.hibernate.LazyInitializationException: failed to lazily initialize a collection - no session or session was closed.

Utilize o open session in view: Sempre fechar a sessão ao término do trabalho. Mas e quando estamos trabalhando na Web? Após pegarmos os dados necessários no nosso controlador, fechamos a sessão e passamos os objetos ao JSP através de atributos. O JSP, ao acessar um getter do seu objeto para fazer um loop, como ${notaFiscal.items}, recebeLazyInitializationException da mesma forma. Em um primeiro momento o desenvolvedor muda o relacionamento para EAGER, mas isso gera uma enorme sobrecarga, pois provavelmente em muitos lugares não era necessário carregar todos os itens da compra sempre que uma determinada nota fiscal é requisitada. Como então evitar a LazyInitializationException sem modificar o relacionamento paraEAGER? Open Session In View A solução é manter a session aberta durante a renderização da camada de visualização, ou como o Hibernate chama esse pequeno padrão: open session in view. A idéia é bastante simples: a sessão deve ser mantida aberta até o fim da renderização do JSP (ou de qualquer outra camada de apresentação). Isso pode ser obtido através da implementação de um Servlet Filter, algum tipo de interceptador do seu framework preferido ou até mesmo aspectos. O Spring foi sem dúvida um dos primeiros frameworks a já trazer classes para isso embutidas (assim como também foi o primeiro a fazer o wrap da HibernateException dentro de uma exceçãounchecked, pois até o Hibernate 2.x essa exceção era checked). Há as classesOpenSessionInViewInterceptor e sua análoga OpenEntityManagerInViewInterceptor. No VRaptor, além de você pode usar os componentes embutidos do Spring, já existem componentes que fazem o mesmo trabalho (ver componentes embutidos). Leia a matéria completa no blog da CAELUM: http://blog.caelum.com.br/2009/10/13/enfrentando-a-lazyinitializationexception-no-hibernate/  Outro problema:

Hibernate – could not initialize proxy – no Session
  1. 09:15:11,883 ERROR LazyInitializationException:19 – could not initialize proxy – no Session
  2. org.hibernate.LazyInitializationException: could not initialize proxy – no Session
  3.     at org.hibernate.proxy.AbstractLazyInitializer.initialize(AbstractLazyInitializer.java:57)
  4.     at org.hibernate.proxy.AbstractLazyInitializer.getImplementation(AbstractLazyInitializer.java:111)
  5.     at org.hibernate.proxy.pojo.cglib.CGLIBLazyInitializer.invoke(CGLIBLazyInitializer.java:150)
  6.     at org.iprogramming.model.persistence.dto.Person$$EnhancerByCGLIB$$4dfa7473.getName(<generated>)

Essa exception ocorre porque voce fechou a sessão do hibernate (ou entitymanager do JPA usando hibernate). Provavelmente voces estao fechando a sessao/entityManager antes de renderizar a pagina, isso é, antes de fazer o dispatch!

————————————————————————-
Leia a discussão sobre este problema e outras soluções no GUJ:
http://www.guj.com.br/java/60474-hibernate—could-not-initialize-proxy—no-session
http://www.guj.com.br/java/23319-hibernate-3—-orghibernatelazyinitializationexception-could-not-initialize-proxy—the-owning-se

Fonte: Jardelmorais