$30 off During Our Annual Pro Sale. View Details »

Workshop jQuery por Gabriel Zigolis

Workshop jQuery por Gabriel Zigolis

Workshop sobre jQuery para a equipe de devs da Embratec GoodCard por Gabriel Zigolis

Gabriel Zigolis

April 19, 2012
Tweet

More Decks by Gabriel Zigolis

Other Decks in Technology

Transcript

  1. Workshop jQuery – Gabriel Zigolis

    View Slide

  2. Javascript
    • É uma linguagem de script client-side, a mais popular da web.
    • É responsável por todo o comportamento da página, incluindo:
    – Interações com o usuário, animações, alertas, modais, validações de
    formulários, drag and drop de elementos, dentre outros.
    • É uma linguagem fracamente tipada, ou seja:
    – O compilador capturas erros durante o tempo de execução.
    – É mais rápida, porem menos segura.
    • Funciona percorrendo e buscando seus alvos (elementos da
    marcação) na árvore do documento ou DOM.

    View Slide

  3. Javascript
    • DOM - Document Object Model
    – É uma multi-plataforma que representa como as marcações em HTML, XHTML e
    XML são organizadas e lidas pelo navegador que você usa.
    – Uma vez indexadas, estas marcações se transformam em elementos de uma
    árvore que você pode manipular via API.

    View Slide

  4. Javascript
    • Document Object Model
    – Após finalizar o parse do DOM e a criação de seus nós, os navegadores chamam
    um método chamado attach para começar a renderização.
    – O attach adiciona primeiramente as folhas de estilo a árvore DOM e começa a
    estilização da página.
    – Em seguida adiciona os arquivos ou funções js e começa a incluir o
    comportamento e a interação na página.
    – Ou seja, o DOM deve necessariamente ser todo lido e renderizado pelo browser
    para executar uma função js.

    View Slide

  5. Javascript
    • Os arquivos ou funções JS podem ser incluídas de 3 formas:
    – Inline - > diretamente no elemento html (incorreto)
    Colorir
    – Interno - > dentro da página html (incorreto)
    window.onload(alert(“Oi”);)
    – Externo -> incluído externamente como um script(correto)

    Exemplo: 01 - Javascript

    View Slide

  6. jQuery
    • É uma biblioteca JavaScript cross-browser desenvolvida para
    simplificar os scripts client side, com o conceito:
    – "The Write Less, Do More"
    • Foi lançada em janeiro de 2006 no BarCamp de NY por John Resig.
    • É uma biblioteca de código aberto e possui licença dual, fazendo
    uso da Licença MIT ou da GNU General Public License versão 2.
    • Microsoft, Nokia e Adobe incluiram o jQuery em suas plataformas,
    Microsoft adotando-a inicialmente no Visual Studio para uso no
    ASP.NET, e a Nokia na sua plataforma Web Run-Time de widgets.

    View Slide

  7. jQuery
    • 100% Cross Browser, resolução da incompatibilidade entre os
    principais navegadores do mercado.
    • Redução de código.
    • Reutilização do código através de plugins.
    • Utilização de uma vasta quantidade de plugins criados por outros
    desenvolvedores.
    • Trabalha com AJAX e DOM.
    • Implementação segura de recursos do CSS1, CSS2 e CSS3.
    • Totalmente OE (Orientado a Eventos).

    View Slide

  8. jQuery
    • Como “instalar” jQuery?
    – A biblioteca jQuery nada mais é do que um arquivo JavaScript que deverá ser
    referenciado na página web onde serão aplicados os efeitos.
    – Basta fazer o download gratuito do arquivo e chamá-lo na(s) página(s).
    ...

    ...


    ...
    • Sintaxe simples, elegante e amigável.
    $(document).ready(function(){
    $("h1").css("color", "#fff");
    });
    Exemplo: 02 - Sintaxe

    View Slide

  9. Seletores
    • Como a própria palavra indica, os seletores são um mecanismo,
    disponível em jQuery, para selecionar determinados elementos da
    página.
    • O seletor não é mais que uma cadeia de caracteres, com a qual
    podemos nos referir a qualquer ou quaisquer dos elementos que
    haja em uma página.
    $("p");
    • Nesse exemplo, estamos passando por parâmetro uma cadeia "p".
    Neste caso, "p" é um seletor que serve para selecionar todas as
    etiquetas da página, ou seja, os parágrafos.

    View Slide

  10. Manipulação de atributos
    • Através de jQuery podemos com facilidade inspecionar e definir
    atributos assim como seus respectivos valores para qualquer
    elemento da página.
    – disabled, title, src, alt, href, class...
    Exemplo: 04 - Atributos

    View Slide