Download - Revisão html e java script

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

Download - Revisão html e java script

Top Related