Revisão html e java script

o HT ML e
Re visã
J avaS cript
rício L inhares
Mau

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;

e DO M do
oaá rvor plo
Mot and exem

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

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;

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=“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);

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!") };

ogge r em
ndo um l ript
Cria Ja vaSc

ção entre
C omu nica mes
fra

Revisão html e java script

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Revisão html e java script

Similar a Revisão html e java script (20)

Más de Maurício Linhares

Más de Maurício Linhares (20)

Revisão html e java script