Manipular HTML
Recapitulando Até agora aprendemos formas para nomear e processar dados em Javascript. Os tipos de dados primários de que falámos (String, Number e Boolean) são exactamente isso - pequenas peças abstractas de informação simples, de um determinado tipo, que podem ser manipulados de formas pré-definidas. Não possuem outras propriedades para além do seu próprio valor. Já os arrays correspondem a tipos de dados compostos, sendo mais complexos que os primários. Para além de poderem conter muito mais informação que os primários, possuem também eles métodos próprios para os manipularmos (p.e.: myarray.length(), entre outros).
Recapitulando Da mesma forma, as estruturas de controlo como as condições if else e os ciclos for representam processos lineares simples - não têm uma estrutura complexa e são apenas uma lista simples de instruções que são executadas se determinadas condições se verificarem. Mas então e as funções? São entidades com nome próprio que podem ser reutilizadas usando inputs diferentes, sendo portanto mais complexas que os anteriores.
Objectos em Javascript Existe ainda em Javascript um tipo de dados mais complexo a que damos o nome de objecto (object). Os objectos permitem-nos descrever uma entidade que tem uma estrutura mais complexa e que se assemelha mais a algo que existe no mundo real. Os arrays e as funções são ambos tipos especiais de objectos no Javascript. Também podemos definir os nossos próprios objectos para representar estruturas de dados complexas. Tal como objectos no mundo real, os objectos em Javascript têm atributos, a que chamamos propriedades, e coisas que podem fazer, chamados métodos.
Objectos em Javascript Por exemplo, podemos criar um objecto que representa um cão em javascript. Teria propriedades como cor, raça e utilidade e métodos como ladrar e perseguirgatos. Os objectos definem-se assim: var cao = { cor : preto e branco, // propriedade raça : Border Collie, // propriedade utilidade : Pastoreio, // propriedade ladrar : function() { // método console.log( AU AU ); }, perseguirgatos : function( localizacaogato ){ // método console.log( Corre para: + localizacaogato ); } }
Objectos em Javascript Podemos usar a notação por pontos (dot notation) para aceder às propriedades e métodos de um objecto. Por exemplo: cao.cor; // devolve preto e branco cao.ladrar(); // executa a função ladrar Um exemplo de um objecto e respectivo método que já usamos recorrentemente é o console.log(). A consola é um objecto que tem um método com o nome log. Mas neste caso, não somos nós que a criamos, a consola já existe no browser. Para além de alguns objectos que estão embebidos no browser, como a console, também podemos aceder a qualquer coisa no nosso documento HTML como um objecto. A isto chamamos o Document Object Model, ou DOM para abreviar.
O Document Object Model (DOM) O DOM permite que o nosso javascript aceda e manipule partes da nossa página web. Quando o browser lê um documento de HTML, ele constrói uma estrutura em árvore de objectos que representam os elementos da página. Quando usamos as developer tools do Chrome ou Firefox para ver os elementos de HTML estamos a olhar para o DOM. O chato da interacção do Javascript com páginas web é que não é muito fácil aceder a elementos específicos do nosso HTML directamente. Precisamos de começar no inicio da nossa estrutura de árvore e partir daí, começando no elemento <html>, que tem um nome especial no DOM - document. Tal como o objecto cão, os objectos de elementos têm alguns metodos a que podemos aceder. O primeiro método de que vamos falar é o getelementbyid. É fácil usá-lo, uma vez que só devolve um elemento (porque só podemos usar um id uma vez no HTML).
getelementbyid Podemos usar o método getelementbyid do elemento document usando a notação com pontos que referi num dos slides anteriores. document.getelementbyid();" Este método vai procurar por um outro elemento dentro do document que tenha um determinado id. Para isso, precisamos de passar uma string, que corresponda ao id do elemento que procuramos, como argumento: document.getelementbyid( galeria-imagens );" É uma boa prática atribuir a nossa referência do elemento HTML a uma variável, para que não tenhamos de procurar por ele cada vez que precisamos de o usar: var galeria = document.getelementbyid( galeria-imagens );
getelementsbytagname OK! Agora temos uma referência a um elemento que queremos que se transforme numa galeria de imagens. Mas e como acederia aos elementos que corresponde às imagens da galeria? O método getelementsbytagname devolve um array de elementos de um tipo especifico: var imagensgaleria = galeria.getelementsbytagname( li );" Este método vai procurar todos os elementos <li> dentro do elemento galeria.
Aceder aos atributos de elementos O DOM também nos fornece formas de aceder aos atributos (como propriedades de um objecto) de um elemento. Podemos ler o valor de um atributo e mesmo atribuir novos valores. Para isso, usamos a notação de pontos para referenciar o nome de um atributo: elemento.id // devolve o valor do atributo id do elemento elemento.id = new-id ; // define o valor do atributo id para new-id " Existe um atributo que é ligeiramente diferente é a class. Como class é uma palavra reservada em Javascript, precisamos de usar uma palavra para identificar o atributo da classe - classname. elemento.classname = on ;
element.style Podemos aceder aos estilos de um elemento usando o atributo style e os nomes das propriedades do estilo. Se o nome da propriedade tem mais que uma palavra deve usar-se o camel case. Por exemplo: // background-color no css element.style.backgroundcolor = red ;" O javascript não consegue ler declarações de estilos que não estejam inline (no próprio elemento), portanto, se estiverem a usar uma folha de estilos externa (e devem estar!), o Javascript não vai conseguir ler esses estilos. Mas podemos sempre ler estilos que foram criados pelo Javascript e podemos obviamente definir novos. Pôr declarações de estilos directamente no javascript não é a melhor prática, porque devemos separar o estilo da funcionalidade e conteúdo. Assim, devemos usar o javascript para aplicar classes (CSS) e lidamos com os estilos no CSS.
Criar novos elementos Para além de aceder aos elementos no nosso HTML, também podemos adicionar e remover elementos usando Javascript. Para adicionar elementos precisamos, primeiro, de os criar no document usando o método createelement e só depois o anexamos a um elemento existente. var novoelemento = document.createelement( a );" Nesta altura, o elemento foi criado mas ainda não aparece na nossa página. Antes de anexar o novo elemento a um existente precisamos de definir os atributos necessários: novoelemento.src = http://www.link.com novoelemento.classname = elemento-link ;" Também podemos ter de adicionar texto ao nosso elemento antes dele aparecer na página. Não podemos fazer isto com um atributo, por isso precisamos de aceder a outra propriedade de um elemento - innerhtml.
innerhtml O innerhtml é o conteúdo de um elemento, devolvido como uma string. Podemos inserir uma string que contenha tags de HTML usando o innerhtml, mas é preciso ter em conta de que não temos referências no Javascript a esses elementos a menos que as criemos posteriormente. No HTML: <p id= porco >Babe</p> No JS: var paragporco = document.getelementbyid( porco ); paragporco.innerhtml // Babe paragporco.innerhtml = <span>babe</span> foi-se! ;" De volta ao HTML, ficamos com: <p id= porco ><span>babe</span> foi-se!</p>
appendchild() Agora que o nosso novo elemento está pronto a ser adicionado à página, podemos anexa-lo a um elemento existente. O novo elemento vai aparecer no final do elemento pai. galeria.appendchild(novoelemento); Podíamos ter incluído estes elementos no nosso HTML logo no inicio, mas isso criaria uma experiência confusa para utilizadores sem javascript. Elementos interactivos que só precisam de ser adicionados quando o nosso script corre, devem ser adicionados pelo script em si. Podemos incluir os estilos para estes elementos no nosso ficheiro CSS, e se os caminhos estiverem bem feitos só aparecem quando os elementos tiverem sido adicionados à página.
Eventos
Eventos Já falamos sobre o Document Object Model, e como nos permite manipular elementos de uma página web. Na maior parte das vezes, queremos que esta manipulação aconteça como resultado da interacção do utilizador com a página. E é nesta altura que os eventos aparecem. Um evento é um tipo de objecto que é criado quando o utilizador interage com uma página web. Os eventos estão relacionados com o elemento com que o utilizador interagiu. Por exemplo, quando um utilizador clica num link, um evento de click é criado para esse elemento <a>. Para executar algum código quando um evento em particular acontece, precisamos de criar um event listener : element.onclick = function() { // código a ser executado quando o click acontece }
Eventos Existem uma série de tipos diferentes de eventos. Podem ver uma lista mais completa em: http://www.w3schools.com/tags/ref_eventattributes.asp Ok foi fácil não foi? Mas nem tudo é um mar de rosas. Os browsers também usam eventos para ajudar a responder às interacções do utilizador. É o comportamento padrão do browser. Se estivermos a ouvir por um evento num elemento que não tem respostas padrão embutidas (como uma <div>) o nosso código vai funcionar perfeitamente. Então e se adicionarmos um event listener a um elemento que tem uma resposta pré-definida para o evento, como um evento de click num link? É boa prática usar links como controladores da interactividade da nossa página, mas para além de correr o nosso código do onclick, o browser também vai fazer o que faz sempre que há um click num link, que é seguir o link.
Eventos Então como podemos nós desligar o comportamento pré-definido do browser para o evento que queremos usar? Os event handlers ( o pedaço de código que lida com o evento ) tem um argumento especial que é passado automaticamente - e é uma referência ao objecto de evento que foi criado. Isto quer dizer que dentro da nossa função que lida com o evento (event handler) podemos aceder aos métodos e propriedades do evento em si. Este objecto de evento tem um método que impede o browser de reagir ao evento e que se chama preventdefault. Para aceder ao objecto de evento temos de o passar como um argumento. É o único argumento que vai ser passada para a função que lida com o evento (event handler). element.onclick = function (evento) { evento.preventdefault(); }
this Por vezes precisamos de fazer algo com ou ao elemento com que o utilizador interagiu. Para isso, podemos usar a palavra reservada this como uma referência a esse elemento, na nossa função de event handler. element.onmouseover = function (evento) { console.log(this); } element.onmouseout = function (evento) { this.style.backgroundcolor = "red"; " " this.innerhtml = "I've been clicked!"; }
jquery Uma introdução
Introdução ao jquery http://learn.jquery.com/ O jquery é uma framework de Javascript que é leve e muito simples de usar. Permite-nos executar tarefas comuns, como animações e gerir eventos, com extrema facilidade. O jquery também usa os selectores de CSS para nos ajudar a encontrar elementos, rápido e facilmente, numa página web. O jquery está escrito em Javascript - para o usarmos só temos de incluir o ficheiro base do plugin na nossa página. <script src= jquery.js ></script>
Sintaxe do jquery O jquery funciona criando objectos especiais que representam um elemento ou um conjunto de elementos. Para criar um objecto de jquery temos de usar a seguinte sintaxe: var todososlinks = jquery( a );" Nota: em jquery, usar jquery ou $ é exactamente a mesma coisa. Podemos usar qualquer selector válido de CSS3, contido numa string dentro dos parêntesis. O jquery devolve então um único objecto que contêm as referências a todos os elementos da página que corresponde à string inserida. var carros = $( div.kia,.ford, #ferrari );" Tendo agora noção de como podemos encontrar elementos usando os métodos básicos de Javascript, é fácil compreender o quão fácil se torna realizar a mesma tarefa usando o jquery.
Funções de jquery O jquery tem uma série de funções de atalho que podemos aplicar a um ou a vários elementos. Por exemplo: jquery( div.kia ).css( color, white );" Certifiquem-se de que usam a documentação do jquery para descobrir que valores devem passar como argumentos nas diversas funções do jquery. $( #ferrari ).addclass( super-carro );" É preferível usar o método do jquery addclass, em oposição ao elemento.classname, porque ao contrário deste último, o addclass não substitui o atributo class do elemento.
Chaining ( encadeamento ) O jquery usa um conceito a que damos o nome de chaining (encadeamento) para facilitar a aplicação de várias funções a um elemento de uma vez só. Usamos a notação por pontos para encadear as funções no jquery: $(.ford ).css( color, red ).addclass( focus ).fadeto(3000, 0.3);
Eventos Para criar funções que lidam com eventos ( Event handlers ) usamos a mesma notação por pontos que usamos para outras funções de jquery. jquery( a ).click();" Em vez de passarmos strings ou números como argumentos da função, passamos uma função anónima que vai ser executada de cada vez que o evento acontece: $( a ).click(function(event){ $( a ).css( background, red ); event.preventdefault(); });
Um vs Muitos Já mencionei que podemos aplicar funções de jquery a um elemento ou a um conjunto de elementos da mesma maneira. Isso é porque estamos a criar um objecto jquery e a aplicar-lhe uma função, independentemente da quantidade de elementos correspondentes existentes. Nos bastidores, o jquery está na realidade a percorrer, por nós usando com um ciclo, todos os elementos correspondentes e a aplicar essa função a cada um deles. Podemos aceder directamente ao elemento actual do ciclo usando o this, mas para podermos utilizar qualquer uma das operações de jquery temos de criar um objecto jquery para ele. Fazemos isso envolvendo a referência do elemento, ou seja, o this, com jquery: jquery(this) ou $(this). todososlinks.click(function(event){ jquery(this).addclass( active ); event.preventdefault(); });" Neste exemplo, apenas o link em que clickamos é que vai passar a ter a classe active associada.
Toggle O jquery inclui várias funções do tipo toggle que permitem que o comportamento de um elemento se alterne entre estados on e off. Os estados de mouse hover são um bom exemplo disso. A função de hover do jquery recebe duas funções como argumentos - a primeira é executada no mouseover e a segunda no mouseout. todososlinks.hover( function(){ jquery(this).css( background, red ); }, function(){ jquery(this).css( background, none ); } );" Existe também uma função toggle() que faz o mesmo que a acima mencionada, para clicks alternados.
Animação As funções de animação do jquery são muito lineares e fáceis de usar. As animações são definidas usando propriedades de CSS para que não tenhamos de nos lembrar de mais um conjunto de nomes de propriedades e/ou sintaxe. A função animate() recebe um objecto literal como o primeiro parâmetro com qualquer propriedade de CSS que tenha um valor numérico como a propriedade do objecto. O segundo argumento define a duração da animação. Podem ver os restantes argumentos em http://api.jquery.com/animate/ $( div.kia ).hover( function(){ jquery(this).animate({ height, 100px }, 3000); }, function(){ jquery(this).animate({ height, 50px }, 1500); } );
Document Ready Por esta altura do campeonato, já devemos estar a incluir os nossos ficheiros (ou código) de Javascript no final da nossa página HTML. Assim garantimos que os elementos que podemos querer manipular no Javascript são carregados primeiro. Isto funciona bem em páginas simples, mas em páginas mais complexas podemos continuar a ter problemas com elementos dentro de vários graus de nesting, que podem não estar carregados na altura em que o Javascript é lido. Podemos usar o método onload do objecto DOM da window para verificar se a página está carregada: window.onload = function(){ // o código entra aqui }" Esta função só é executada quando TODOS os elementos da página (incluindo imagens) foram carregados. Nalguns sites isto pode demorar muito tempo, por isso o jquery oferece-nos um método mais rápido que não espera que as imagens carreguem. É por isso boa prática usar este método do jquery em páginas mais complexas: jquery(document).ready(function(){ // o código entra aqui });
Debug Uma pequena nota
Consola e JSLint Já todos sentimos na pele, nesta altura, como pequenos erros podem causar grandes problemas nos nossos scripts. Um ponto ou uma chaveta fora de sitio e o nosso código vai todo ao ar! Felizmente temos à nossa disposição algumas ferramentas que nos podem ajudar a verificar o nosso código e a evitar erros. Já usamos com muita frequência a consola durante as nossas aulas, e já todos vimos que quando temos um erro no nosso script aparece uma mensagem na consola. É importante perder algum tempo a ler as mensagens que aí são impressas e ver em que linha é que nos é dito que o erro acontece, uma vez que são dicas importantes para nos ajudar a descobrir o problema. Outra ferramenta util é o JSLint. O JSLint é uma ferramenta de controlo de qualidade de código que verifica se a nossa sintaxe está correcta e se estamos a usar as melhores práticas no nosso código. É, por isso, sempre uma boa ideia certificarmos-nos que o nosso código passa no JSLint. http://www.jslint.com/