Selector API. var lista = document.queryselectorall( seletor ); var elemento = document.queryselector( seletor );

Transcrição

1

2 Selector API Desconhecida pela maioria dos desenvolvedores, não é novidade do HTML5, mas continua funcionando no HTML5. É a mesma ideia do jquery Contém duas funções em cada um dos elementos DOM: queryselector e queryselectorall Ambas recebem como argumento uma string com um seletor CSS A queryselector retorna o primeiro elemento que satisfaz o seletor, ou null caso não haja nenhum. A queryselectorall retorna a lista de elementos que satisfazem o seletor. var lista = document.queryselectorall( seletor ); var elemento = document.queryselector( seletor );

3 DomNodeList As listas de elementos retornadas pelos métodos do DOM. Você pode usar lista[0] ou lista(0) para obter um elemento da lista. Ou você pode usar list[ name ] ou list( name ) para obter um objeto por seu nome. A busca será feita por name ou id.

4 Datasets Possibilita atribuir dados arbitrários a um elemento HTML qualquer, prefixando seus atributos com data- <img src= carro.jpg alt= Gol id= c1 data-marca= Volkswagen data-motor= 1.0 data-modelo= G5 data-cor= Branca > Javascript var carro = document.getelementbyid( c1 ); var marca = carro.dataset.marca; var cor = carro.dataset.cor;

5 Novos eventos DOM Elementos multimídia oncanplay: O elemento áudio ou vídeo contém dados suficientes no buffer para começar a tocar. Oncanplaythrough: O elemento áudio ou vídeo contém dados suficientes no buffer para começar a tocar e, se a transferência de dados continuar no ritmo em que estiver ocorrendo, estima-se que tocará até o final, sem interrupções. ondurationchange: O elemento áudio ou vídeo teve seu atributo duration modificado. Isso acontece, por exemplo, ao alterar a origem da mídia. onemptied: O elemento áudio ou vídeo teve um erro de retorno vazio de dados da rede. onended: O vídeo ou o áudio chegou ao fim. onloadeddata: Os dados começaram a ser carregados, e a posição atual de playback já pode ser renderizada.

6 Elementos multimídia onloadedmetadata: Os metadados foram carregados. Já sabemos as dimensões, o formato e a duração do vídeo. onloadstart: Os dados começaram a ser carregados. onpause: O usuário clicou em pause. onplay: O usuário clicou em play ou o playback começou por causa do atributo autoplay. onplaying: O vídeo o áudio está tocando. onprogress: O agente de usuário está buscando dados do vídeo ou do áudio.

7 Eventos em campos de formulário oninput: O usuário entrou com dados no campo. oninvalid: O campo não passou pela validação.

8 Eventos gerais oncontextmenu: O usuário disparou um menu de contexto sobre o objeto. Na maioria dos sistemas Desktop, isso significa clicar com o botão direito do mouse ou segurando uma tecla especial. onmousewheel: A rodinha do mouse foi acionada. onbeforeprint: Disparado antes da impressão da página. Você pode usá-lo para modificar, esconder ou exibir elementos, preparando a página para impressão. onafterprint: Disparado após a impressão da página. Você pode usá-lo para reverter o status anterior à impressão. onhashchange: A última porção da URL, após o hash (#), foi modificada. onoffline: O agente de usuário ficou offline. ononline: O agente de usuário está novamente conectado.

9 Eventos gerais onredo: O usuário disparou a ação de "Refazer". onundo: O usuário disparou a ação de Desfazer. Drag-and-drop ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop

10 Atributos de evento Houve uma padronização no formato de atribuição de eventos que já era amplamente utilizado. <input type= text onblur= return alert(this.value) />

11 Menus e toolbars O elemento menu Usado para definir menus e barras de ferramenta. É possível inserir submenus ou comandos.

12 Menus e toolbars O elemento menu Para inserir submenus, basta inserir outros elementos menu, e para definir comandos, você pode inserir: Um link: elemento a com atributo href; Um botão: elemento button; Um botão: elemento input, com o atributo type, contendo button, submit, reset ou image; Um radiobutton: elemento input, com o atributo type, contendo rádio; Um checkbox: elemento input, com o atributo type, contendo checkbox; Um elemento select: contendo um ou mais options, define um grupo de comandos; Um elemento qualquer, com o atributo accesskey; Um elemento command.

13 Menus e toolbars Tipos de comando command: Uma ação comum. checkbox: Uma ação que pode estar no status de ligada ou desligada, e alterna entre esses dois status quando clicada. rádio: Uma ação que pode estar no status de ligada ou desligada, e, quando clicada, vai para o status de ligada, desligando todas as ações com o mesmo valor no atributo radiogroup.

14 Menus e toolbars <menu type= toolbar > <li> <menu label= Arquivo > <button type= button onclick= file_new() >Novo</button> <button type= button onclick= file_open() >Abrir</button> <button type= button onclick= file_save() >Salvar</button> </menu> </li> <li> <menu label= Editar > <button type= button onclick= edit_cut() >Recortar</button> <button type= button onclick= edit_copy() >Copiar</button> <button type= button onclick= edit_paste() >Colar</button> </menu> </li> </menu>

15 Menus e toolbars O elemento command Define um comando que pode ser invocado pelo usuário. Um comando pode ser parte de um menu ou uma toolbar, ou pode ser colocado em qualquer outro lugar na página, para definir um atalho de teclado. <menu> <command type= command label= Salvar onclick= save() >Salvar </command> </menu>

16 Menus e toolbars <menu type="toolbar"> <li> <menu label= Arquivo > <command onclick= file_new() >Novo</command> <command onclick= file_open() >Abrir</command> <command onclick= file_save() >Salvar</command> </menu> </li> <li> <menu label= Editar > <command onclick= edit_cut() >Recortar</command> <command onclick= edit_copy() >Copiar</command> <command onclick= edit_paste() >Colar</command> </menu> </li> </menu>

17 Microdata Adiciona semântica na página HTML5. Possibilita que mecanismos de busca entendam estas informações dentro do contexto semântico definido. Facilita a outras aplicações reconhecer e importar estes dados de seu site.

18 Microdata <section itemscope itemtype=" > <h1 itemprop= name >IFOMEP - Instituto de Formação da OMEP</h1> <p itemprop= address itemscope itemtype= > <span itemprop= street-address >R. Estevão Capriata, 206</span><br> <span itemprop= locality >Campo Grande</span>, <span itemprop= region >MS</span> <span itemprop= postal-code > </span> <span itemprop= country-name >Brasil</span> </p> <p itemprop= tel >(67) </p> <p itemprop= faxnumber >(67) </p> <a href= itemprop= url >ifomep.com.br</a> </section>

19 Microdata <section itemscope itemtype= carro > <dl> <dt>nome</dt> <dd itemprop= nome >Gol</dd> <dt>valor</dt> <dd itemprop= valor >30.881,00</dd> <dt>nome</dt> <dd itemprop= nome >Onix</dd> <dt>valor</dt> <dd itemprop= valor >31.290,00</dd> <dt>nome</dt> <dd itemprop= nome >HB20</dd> <dt>valor</dt> <dd itemprop= valor >33.295,00</dd> </dl> </section>

20 Até a próxima aula...