Upload
mauricio-linhares
View
1.251
Download
0
Embed Size (px)
Citation preview
Revisão HTML e
JavaScript
Maurício Linhares
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;
Exemplo de documento HTML <html>
<body>
<h1>Meu cabeçalho</h1>
<p>Meu parágrafo</p>
</body>
</html>
DOM – Document Object Model ! É 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;
Motando a árvore DOM do
exemplo
Entrando no HTML
<h1 id=“titulo” class=“titulo_principal“>
Página Principal
</h1>
Identificador do elemento
no DOM
Classe do elemento no DOM
Conteúdo do elemento
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/>;
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;
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
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
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."/>
Tags HTML - 2
! <p>Parágrafo</p>
! Texto em bloco como um parágrafo
! <img src=“imagem.png”/>
! Carregar uma imagem dentro do HTML
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>
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;
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;
Tabelas com <table>
Elementos comuns de formataçã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
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;
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>
Elementos de formulário – Campos de texto ! <input type=“text” name=“email”
value=“[email protected]”/>
! 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);
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”;
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;
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”/>
Botões de submissão
! Botões que quando clicados enviam o formulário:
! <input type=“submit” value=“Enviar”/>
! <input type=“reset” value=“Apagar”/>
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;
Tour básico no JavaScript
var minhaVariavel = “texto”;
alert(minhaVariavel);
minhaVariavel = 1;
alert(minhaVariavel);
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;
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
Exemplo de if:
if ( condicao ) {
// alguma coisa
} else {
// outra coisa
}
Exemplo de while
while ( condicao ) {
// alguma coisa
}
Exemplo de for comum
var lista = [ 1, 2, 3, 4 ];
for ( var x = 1; x < lista.length; x++ ) {
alert( lista[x] );
}
Declarando uma função em JavaScript function someFunction( message ) {
alert(message);
}
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
Definindo código para eventos: ! <input type=“submit” value=“Click me!”
onclick=“alert(‘Clicked!’)”;
var element = document.getElementById("elementId");
element.onclick = function () { alert("Clicked!") };
Criando um logger em
JavaScript
Comunicação entre
frames