Revisão html e java script

1,690 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,690
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Revisão html e java script

  1. 1. o HT ML eRe visãJ avaS cript rício L inhares Mau
  2. 2. O que é HTML?! HyperText Markup Language;!   Linguagem de marcação originalmente planejada para artigos científicos;!   Utiliza URLs/URIs para ligação de documentos, a ligação é fraca, pois não existe validação de que a ligação realmente existe;
  3. 3. Exemplo de documentoHTML<html> <body> <h1>Meu cabeçalho</h1> <p>Meu parágrafo</p> </body></html>
  4. 4. DOM – Document ObjectModel!   É o formato padronizado para acessar e manipular documentos HTML;!   É definido como uma árvore de elementos, com cada tag HTML representando no documento representando um elemento diferente;!   É a forma utilizada no JavaScript pra acessar as tags HTML;
  5. 5. e DO M do oaá rvor ploMot and exem
  6. 6. Entrando no HTML Identificador Classe do do elemento elemento no DOM no DOM<h1 id=“titulo” class=“titulo_principal“> Página Principal</h1> Conteúdo do elemento
  7. 7. Definindo tags HTML! Tags HTML são definidas entre “<“ e “>”, como em <html> e o seu fechamento com “</” e “>”, como em </html>;!   É uma boa prática defini-las sempre em minúsculas;!   Se a tag não tem conteúdo, ela pode ser definida com “<“ “/>” como em <br/>;
  8. 8. Definindo tags HTML! Tags podem conter atributos, que são definidos sempre na declaração de abertura: !   <p class=“texto”></p>!   É uma boa prática definir os atributos em minúsculo e a sua ordem não importa;!   Atributos devem ser usados para pequenos detalhes da tag, não devem conter muitos caracteres;
  9. 9. Tags HTML - 1!   <html> !   Abre um documento HTML, é a tag raiz!   <head> !   Define o cabeçalho de um documento HTML, contendo título da página, documentos externos (JavaScripts e CSS) e outros detalhes;!   <body> !   Onde é colocado o conteúdo geral do arquivo HTML
  10. 10. O que vem dentro de<head>?!   <title> Meu título </title> !   Contém o título que vai ser mostrado no navegador para esta página, muito importante pra ferramentas de busca;!   <link rel="stylesheet" href=”file.css" type="text/css" /> ! Carregar CSS!   <script type=text/javascript src=’script.js’/> ! Carregar JavaScript
  11. 11. Quando usar <meta> em<header>?!   Sobrescrever cabeçalhos HTTP: !   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />! Ajustes pra ferramentas de busca: !   <meta property="og:description" content="TechCrunch is a leading technology media property, dedicated to obsessively profiling startups, reviewing new Internet products, and breaking tech news."/>
  12. 12. Tags HTML - 2!   <p>Parágrafo</p> !   Texto em bloco como um parágrafo!   <img src=“imagem.png”/> !   Carregar uma imagem dentro do HTML
  13. 13. Links em HTML!   <a href=“http://somesite.com/”>Outro site</a> !   Link para navegar pra outra parte do site!   <a href=“#listas”>Ir Para Listas</a> ! Âncora para uma parte específica da página atual, definida por: !   <a name=“listas”>Listas!</a>
  14. 14. Cabeçalhos - <h1> .. <h5>!   Definem cabeçalhos dentro do documento HTML,!   Devem ser utilizados como definidores de seções dentro do seu arquivo HTML;!   Evite ter mais do que um <h1> dentro do seu documento, ferramentas de busca valorizam páginas que usam cabeçalhos corretamente;
  15. 15. Listas - <ol>, <ul> e <li>!   <ol> !   Listas ordenadas, com itens numerados em ordem crescente;!   <ul> !   Listas ordenadas, mas sem numeração, todos os itens usam o mesmo marcador;!   <li> !   Item em uma lista, utilizado igualmente nos dois tipos;
  16. 16. <table> las c omTabe
  17. 17. Elementos comuns deformatação!   <em> - texto com ênfase, normalmente tratado como itálico!   <strong> - texto forte, normalmente tratado como negrito!   <blockquote> - citação, normalmente tratado como texto recuado!   <sub>, <sup> - texto em subscrito ou sobrescrito em relação ao texto ao seu redor
  18. 18. Formulários em HTML -<form>!   Campos de formulário em páginas HTML normalmente ficam dentro de uma tag <form>, para que os dados sejam enviados para o servidor quando o usuário clicar Enter ou em um botão de submissão;!   Elementos de formulário que não estejam dentro de um <form> não são enviados a não ser que se use JavaScript para enviá-los;
  19. 19. Exemplo de formulário<form action=”/users" method="get">First name: <input type="text" name="fname" /><br />Last name: <input type="text" name="lname" /><br /><input type="submit" value="Submit" /></form>
  20. 20. Elementos de formulário –Campos de texto!   <input type=“text” name=“email” value=“jose@gmail.com”/> !   Representa um campo de texto comum, de uma linha, que vai ser enviado como “email” para o servidor, a propriedade “value” guarda o valor atual do campo (e é alterada conforme o usuário digita no campo);
  21. 21. Campos de texto - 2!   <input type=“password” name=“senha”/> !   Campo de texto que não mostra o seu conteúdo para o usuário (não é necessariamente seguro, apenas não mostra o conteúdo);!   <textarea name=“texto”>Notícia aqui</textarea> !   Campo utilizado para grandes quantidades de texto, pode ter várias linhas de texto e não envia o formulário se o usuário digitar “Enter”;
  22. 22. Checkboxes!   <input type=“checkbox” name=“inscrever” valule=“sim” > !   Caixa de seleção que pode estar marcada ou não, se não estiver marcada o valor do formulário não é enviado;
  23. 23. Radio buttons!   Grupos de seleção única, onde todos tem o mesmo nome: !   <input type=“radio” name=“sexo” value=“masculino”/> !   <input type=“radio” name=“sexo” value=“feminino”/>
  24. 24. Botões de submissão!   Botões que quando clicados enviam o formulário: !   <input type=“submit” value=“Enviar”/> !   <input type=“reset” value=“Apagar”/>
  25. 25. JavaScript!!   Linguagem de programação (originalmente chamada de LiveScript) para execução em navegadores;!   De Java só tem o nome e alguns detalhes da implementação;!   É orientada a protótipos e dinamicamente tipada (não é necessário declarar os tipos dos objetos);!   Tem suporte a funções como objetos reais na linguagem;
  26. 26. Tour básico no JavaScriptvar minhaVariavel = “texto”;alert(minhaVariavel);minhaVariavel = 1;alert(minhaVariavel);
  27. 27. var – declarando variáveis!   Na hora de declarar uma variável, sempre use “var”, assim a variável fica definida localmente na sua função;!   Não declarar “var” deixa sua variável definida como global e acessível a todas as funções e objetos da página;
  28. 28. if/for/while!   Funcionam como nas outras linguagens, diferença básica é que tudo em JavaScript é TRUE a não ser: !  0 !   -0 !   null !   “” !   undefined !   NaN
  29. 29. Exemplo de if: if ( condicao ) { // alguma coisa } else { // outra coisa }
  30. 30. Exemplo de while while ( condicao ) { // alguma coisa }
  31. 31. Exemplo de for comumvar lista = [ 1, 2, 3, 4 ];for ( var x = 1; x < lista.length; x++ ) { alert( lista[x] );}
  32. 32. Declarando uma funçãoem JavaScriptfunction someFunction( message ) { alert(message);}
  33. 33. Eventos em JavaScript!   Os componentes HTML definem vários tipos diferentes de eventos que podem ser usados em JavaScript: !   onsubmit !   onclick !   onkeyup !   onmouseover !   onfocus !   onblur ! onchange
  34. 34. Definindo código paraeventos:!   <input type=“submit” value=“Click me!” onclick=“alert(‘Clicked!’)”;var element = document.getElementById("elementId");element.onclick = function () { alert("Clicked!") };
  35. 35. ogge r em ndo um l riptCria Ja vaSc
  36. 36. ção entreC omu nica mes fra

×