Básicos Html5 e JavaScript

5/9/16
Redes e Sistemas Multimdia II

Comunicao e Design Multimdia
HyperText Markup Language

3-May-16
CDM - RSM2 - 2015/16
5/9/16

HTML HyperText Markup Language o

que est na base da construo das pginas
web e, consequentemente, da WWW.
O HTML no uma linguagem de
programao, mas, sim, uma linguagem de
formatao (ou estruturao).
Isto , afecta e define a forma como o texto, e
tambm imagens e vdeos, entre outros
contedos, surgem no ecr.
3-May-16
CDM - RSM2 - 2015/16

Surgiu em 1991 no CERN (Conseil Europen

pour la Recherche Nuclaire) pelas mos de
Tim Berners-Lee, como uma forma de
disponibilizar informao atravs das
mltiplas plataformas a existentes,
permitindo aceder a referncias a
documentos de uma forma instantnea,
atravs de hiperligaes.
3-May-16
CDM - RSM2 - 2015/16
5/9/16

Esta forma de permitir cruzar referncias

entre documentos de forma instantnea era, e
, de grande utilidade no mundo cientfico,
tanto ou mais do que na vida quotidiana.
A par com o HTML, surgiu tambm o
protocolo HTTP (HyperText Transfer Protocol)
que suporta a transferncia de ficheiros HTML
(e outros) atravs da Internet.
3-May-16
CDM - RSM2 - 2015/16

O HTML sofreu vrias evolues ao longo do

tempo, sendo a verso actual a 4.01, e ainda
de longe a mais utilizada.
Contudo, a nova iterao, o HTML5, atingiu
em finais de 2004 a fase de recomendao,
havendo j um suporte crescente e
generalizado dos principais browsers.
3-May-16
CDM - RSM2 - 2015/16
5/9/16

Uma pgina HTML constituda por um

cabealho (head) e por um corpo (body).
No cabealho encontram-se informaes
relativas ao contedo da pgina, como o ttulo
(title) e outra meta-informao (meta), que
pode indicar o autor, assunto, e outros
elementos que caracterizem a pgina.
excepo do ttulo, que surge no nome da
pgina (na janela do browser), a restante
informao no surge no ecr.
3-May-16
CDM - RSM2 - 2015/16

no corpo da pgina que surge todo o

contedo que mostrado ao utilizador,
quando este acede a essa mesma pgina.
Toda a formatao de uma pgina feita
atravs de tags como <html> e </html>,
<head> e </head>, <body> e </body>, entre
muitas outras.
A grande maioria das tags so constitudas por
uma tag de abertura e outra de fecho.
3-May-16
CDM - RSM2 - 2015/16
5/9/16

Por exemplo, o texto que se encontre entre

<strong> e </strong> fica formatado a
carregado: <strong>texto</strong>
texto.
A tag de fecho distinguida da de abertura
pela barra / (e.g., <title> e </title>).
3-May-16
CDM - RSM2 - 2015/16

A estrutura geral de uma pgina esta:

<html>
<head>
...
</head>
<body>
...
</body>
</html>
3-May-16
CDM - RSM2 - 2015/16
10
5/9/16

As tags (ou elementos) HTML podem conter

atributos que afectam a forma como as estas
formatam a pgina.
Os atributos so palavras especficas que
surgem frente de uma tag (de incio), mas
ainda contidos entre < e > (o sinal de menor
e o sinal de maior).
Assumem tipicamente a forma <tag
atributo=valor>...</tag>.
3-May-16
CDM - RSM2 - 2015/16
11

A grande maioria das tags permite

encapsulamento, sendo esta a forma de
definir formataes mais complexas.
Isto , podemos usar tags dentro de tags
para combinar vrios tipos de formatao.
3-May-16
CDM - RSM2 - 2015/16
12
5/9/16

Pgina (<html>...</html>)
Estas tags indicam ao browser que esta se trata de
uma pgina em HTML, e que todo o contedo
contido entre estas duas tags HTML.
Cabealho (<head>...</head>)
So as tags que caracterizam e delimitam toda a
meta-informao referente pgina.
Dentro do cabealho, deve ser inserido o nome
(ttulo) da pgina: <title>A minha primeira
pgina</title>
3-May-16
CDM - RSM2 - 2015/16
13

Tambm pode conter meta-informao vria,

como o autor e descrio: <meta
name=author content=jos ningum>;
<meta name=description content=home
page>
Corpo (<body>...</body>)
So as tags que delimitam todo o contedo da
pgina que mostrado no browser.
3-May-16
CDM - RSM2 - 2015/16
14
5/9/16

Seguem-se algumas das tags mais comuns

dentro do corpo de uma pgina HTML:
Ttulo (maior): <h1>...</h1>
O texto que se encontrar entre estas duas tags
mostrado no browser a carregado e com um tamanho
de letra superior ao tamanho definido por omisso.
O mesmo se aplica a <h2>...</h2> e <h3>...</h3>
(at h6), sendo diminudo o tamanho da letra (mas
superior ao, ou destacado do, tamanho de texto
normal).
3-May-16
CDM - RSM2 - 2015/16
15

Pargrafo: <p>...</p>
O texto que se encontrar entre estas duas tags
mostrado no browser como um pargrafo, sendo
separado do restante texto por uma linha em branco a
cima e a baixo.
Pode receber como atributo o alinhamento do texto: <p
align=left|center|right>...</p>
Carregado: <strong>...</strong>
O texto mostrado a carregado.

Itlico: <em>...</em>
O texto mostrado a itlico (ou de outra forma
enftica).
3-May-16
CDM - RSM2 - 2015/16
16
5/9/16

Imagem: <img src=valor />
Esta tag no tem fecho.

Serve para inserir uma imagem na pgina HTML, sendo
indicado no atributo src o nome (e, se necessrio, o
caminho) da imagem.
Outros atributos, se bem que no obrigatrios, usuais
com esta tag, so o width e o height, que definem (e
podem mesmo forar) a largura e a altura da imagem,
ao mesmo que tempo que reservam o espao para a
imagem na pgina.
Existe ainda o alt, que permite apresentar uma
descrio da imagem em forma textual.
3-May-16
CDM - RSM2 - 2015/16
17

Hiperligao: <a href=valor>...</a>
Para representar uma hiperligao numa pgina HTML,

so utilizadas as tags <a>...</a>, anchor.
No atributo href indicado o destino da hiperligao.
Por exemplo: <a
href=http://www.esec.pt>ESEC</a>
3-May-16
CDM - RSM2 - 2015/16
18
5/9/16

Com hiperligaes tambm permitida a criao

de bookmarks (marcadores), sendo necessrios
dois passos:
Identificao do marcador: <a
name=marcador>Texto do Marcador</a>
Referncia para o marcador: <a
href=#marcador>Referncia</a>
Repare-se que h uma relao entre o destino da hiperligao
e o nome do bookmark, sendo usado um cardinal para
identificar o bookmark como destino da hiperligao.
3-May-16
CDM - RSM2 - 2015/16
19

Fonte: <font face=nome da fonte
size=tamanho color=cor>...</font>
Serve para definir o tipo e tamanho da letra do texto
que se encontre entre estas duas tags.
Por exemplo: <font face=Courier New
size=20 color=navy>um qualquer
texto</font>
Note-se que este elemento caiu em desuso, com a

formatao a ser feita preferencialmente atravs de
CSS que abordaremos mais adiante.
Quebra de linha: <br />
Serve para fazer uma quebra de linha (sem dar espao
como o pargrafo e tambm sem envolver texto).
No tem fecho.
3-May-16
CDM - RSM2 - 2015/16
20
10
5/9/16

Linha separadora: <hr />
Serve para inserir uma barra no documento (funciona

como um separador).
No tem fecho.
3-May-16
CDM - RSM2 - 2015/16
21

Listas ordenadas e no ordenadas
As listas podem ser, regra geral, de dois tipos:

Listas ordenadas: <ol>...</ol>
Listas no ordenadas: <ul>...</ul>
Independentemente dos dois tipos de listas, ambos

ambas recebem elementos da mesma forma:
list items: <li>...</li>
Exemplo genrico de uma lista no ordenada:

<ul>
<li>um elemento</li>
<li>outro elemento</li>
</ul>
3-May-16
CDM - RSM2 - 2015/16
22
11
5/9/16

Listas de definio
Existe ainda um terceiro tipo de listas: as listas de

definio, com um funcionamento ligeiramente
diferente dos outros tipos.
Usam as tags: <dl>...</dl>
Recebem dois tipos de elementos:
Os termos: <dt>...</dt>
As definies: <dd>...</dd>
Exemplo genrico de uma lista de definio:

<dl>
<dt>Estrela</dt>
<dd>Sol</dd>
<dt>Planetas</dt>
<dd>Mercrio</dd>
<dd>Vnus</dd>
<dd>...</dd>
</dl>
3-May-16
CDM - RSM2 - 2015/16
23

Tabela: <table width=xx

border=yy>...</table>
Define os limites e as dimenses de uma tabela.
O atributo width define a largura da tabela.
Pode ser em pixels ou em percentagem (tamanho relativo

largura da pgina, com %).
O atributo border define a largura da margem da
tabela. Se for zero (0), no existe margem.
Funciona em conjunto com as tags <tr>...</tr>,

<th>...</th> e <td>...</td>.
3-May-16
CDM - RSM2 - 2015/16
24
12
5/9/16

Linha tabular (table row): <tr>...</tr>

So usadas para definir linhas numa tabela.
Clula tabular (table data cell): <td

width=xx>...</td>
Dividem as linhas em clulas. Um para para cada clula.
O atributo width define a largura da clula. A soma dos
valores definidos em width, numa dada table row, devem
perfazer o valor total do width definido para a tabela.
Cabealho de coluna (table header): <th

width=xx>...</th>
Possuem caractersticas semelhantes s clulas, sendo
especficas para topos de colunas.
3-May-16
CDM - RSM2 - 2015/16
25

Exemplo geral de uma tabela:

<table width=100%>
<tr>
<td width=50%>Texto A</td>
<td width=50%>Texto B</td>
</tr>
</table>
Note-se que, se existirem vrias linhas, trs, cada um

deve ter o mesmo nmero de clulas, tds, de forma a
que tabela fique correctamente formatada.
3-May-16
CDM - RSM2 - 2015/16
26
13
5/9/16

Caso se pretenda ter uma clula que ocupe o espao

destinado a duas ou mais clulas (noutras colunas),
deve usar-se o atributo colspan com o valor indicativo
do nmero de clulas a ocupar.
<table width=100%>
<tr>
<td width=50%>Texto B</td>
</tr>
<tr>
<td width=100% colspan=2>Texto
</tr>
</table>
3-May-16
C</td>
CDM - RSM2 - 2015/16
27

Existe um atributo similar para uma clula ocupar duas

ou mais linhas: o rowspan, tambm com o valor
indicativo do nmero de clulas a ocupar.
<table width=100%>
<tr>
<td width=50% rowspan=2>Texto
</tr>
<tr>
<td width=50%>Texto C</td>
</tr>
</table>
3-May-16
CDM - RSM2 - 2015/16
B</td>
28
14
5/9/16

Formulrios: <form name=nome do

formulrio action=nome do ficheiro
que ir processar os dados
method=post|get enctype=tipo da
codificao dos dados>...</form>
Os formulrios permitem a insero de dados, por
parte do utilizador, em pginas web.
Contudo, necessrio uma linguagem de scripting
auxiliar para o processamento desses mesmos dados
e.g., JavaScript ou PHP.
A importncia do atributos name, action, method e
enctype ser explicitada mais adiante.
3-May-16
CDM - RSM2 - 2015/16
29

Dentro dos formulrios, podem ser inseridos os vrios

elementos j conhecidos de outras aplicaes, tais
como botes, campos e caixas de texto, radio buttons e
check boxes, ou listas.
Campos de texto: <input type=text name=nome
do campo de texto size=xx />
Caixas de texto: <textarea name=nome da caixa de

texto cols=xx rows=yy>Texto na caixa de
texto</textarea>
3-May-16
CDM - RSM2 - 2015/16
30
15
5/9/16

Botes: <input type=button|submit|reset

name=nome do boto value=valor facial do
boto />
Tambm possvel fazer o mesmo com a tag button (com
abertura e fecho) usando os mesmos atributos, e at
disponibilizando mais possibilidades em termos de
formatao (e.g., definir uma imagem como sendo um boto).
Contudo, a opo pela tag input continua a ser a mais usual e
recomendada.
Radio buttons: <input type=radio name=nome do

radio button value=valor associado ao
boto />
A utilizao no mesmo nome em radio buttons permite a
seleco de valores exclusivos.
3-May-16
CDM - RSM2 - 2015/16
31

Check boxes: <input type=checkbox name=nome

da check box value=valor associado ao caixa
de seleco />
Listas: <select name=nome da lista de

seleco>...</select>
Dentro das listas, cada item representado por uma opo:
<option value=valor
da opo</option>
associado
opo>Texto
Passwords: <input type=password name=nome

do campo com a password size=xx />
Campos escondidos: <input type=hidden

name=nome do campo escondido>
3-May-16
CDM - RSM2 - 2015/16
32
16
5/9/16

Ficheiros: <input type=file name=nome da
caixa de seleco de ficheiros />

Explicao dos atributos name, action, method e
enctype:
importante que todos os elementos tenham um nome
(name) associado, j que atravs dele que podemos aceder
aos valores inseridos nos elementos com uma linguagem de
programao.
a aco (action) a referncia para o ficheiro que ir
processar os dados inseridos no formulrio.
o mtodo (method) refere-se maneira como os dados so
passados para o servidor.
o tipo de codificao (enctype) refere-se ao tipo de dados a
passar, sendo importante a sua definio quando usados
ficheiros.
3-May-16
CDM - RSM2 - 2015/16
33
HTML & XHTML

Em 2002 foi publicada a norma para o XHTML,

procurando aproximar o HTML do formato
mais generalista (mas mais rgido) XML
(eXtensible Markup Language).
O XHTML 1.0 essencialmente uma
reformulao do HTML 4, de forma a adoptar
as normas do XML 1.0.
Sofreu algumas alteraes com a verso 1.1 e
com a verso 2.0. Contudo, a verso mais
utilizada continua a ser a 1.0.
3-May-16
CDM - RSM2 - 2015/16
34
17
5/9/16
HTML & XHTML

Apesar de j se comear a utilizar o HTML5 (e

o XHTML5 estar em fase de desenvolvimento
para o acompanhar), actualmente, as verses
mais utilizadas do HTML e do XHTML ainda
so a 4.01 e a 1.0, respectivamente,
possuindo ambos o mesmo conjunto de
elementos, partilhando o seu comportamento
em ambas as verses.
3-May-16
CDM - RSM2 - 2015/16
35
HTML & XHTML

Apesar de estruturalmente e funcionalmente

o HTML e o XHTML serem bastante
semelhantes, h um conjunto de diferenas
que interessa referir (e que j foram
respeitadas nos exemplos anteriores), com
destaque para:
Os elementos XHTML tm de ser devidamente
encapsulados;
Os documentos XHTML tm de ter
obrigatoriamente um elemento raiz (html, head
e body).
3-May-16
CDM - RSM2 - 2015/16
36
18
5/9/16
HTML & XHTML

Os elementos XHTML tm de ser sempre

devidamente fechados (usando uma barra /,
quando no h elemento de fecho);
Os elementos XHTML tm de ser sempre escritos
em minsculas (sendo case sensitive);
Os atributos de um tag devem assumir sempre o
formato atributo=valor (mesmo os
binrios, e sempre como o valor entre aspas).
3-May-16
CDM - RSM2 - 2015/16
37
Cascading Style Sheets

3-May-16
CDM - RSM2 - 2015/16
38
19
5/9/16

As cascading style sheets (CSS) surgiram com o

intuito de separar a formatao dos
contedos de uma pgina web da sua
estrutura, uma necessidade identificada j em
meados dos anos 90.
As CSS alteram, quando necessrio, a
formatao a cada elemento HTML (tag).
Esta formatao pode ser usada em linha, definida
no cabealho ou num ficheiro externo.
3-May-16
CDM - RSM2 - 2015/16
39

Ao separarem a formatao da estrutura da

pgina, as CSS permitem uma gesto
centralizada e uniforme da formatao dos
elementos HTML utilizados em todas as
pginas web de um site.
Para alm disso, possvel basear um estilo
noutro estilo j existente e/ou aproveitar a
hierarquia de aplicao dos estilos, poupando
tempo, trabalho e linhas de cdigo.
3-May-16
CDM - RSM2 - 2015/16
40
20
5/9/16

A ttulo informativo, actualmente, o

desenvolvimento feito essencialmente ainda
na verso 2 das CSS, estando, contudo, a
verso 3 a ser j bastante adoptada e
suportada pelos principais browsers.
3-May-16
CDM - RSM2 - 2015/16
41

Os estilos podem ser definidos de trs formas

distintas:
em linha, usando o atributo style na definio de
um elemento HTML e caracterizando apenas esse
elemento utilizado, regra geral e idealmente,
apenas em casos pontuais;
no cabealho, encapsulados pelas tags <style
type=text/css> e </style>, caracterizandose, dessa forma, todas as classes pretendidas para
essa pgina HTML;
3-May-16
CDM - RSM2 - 2015/16
42
21
5/9/16

num ficheiro externo sendo, assim, possvel a

sua partilha por mltiplas pginas atravs da
insero da seguinte linha no cabealho: <link
rel=stylesheet type=text/css
href=ficheiro_com_os_estilos.css>.
Excepto nas declaraes em linha, toda a

definio de estilos gira volta de selectores,
que podem referir-se, entre outros, a
elementos HTML, ids, classes e pseudoclasses.
3-May-16
CDM - RSM2 - 2015/16
43

Um mesmo documento pode ter vrias folhas

de estilos, para alm daqueles que podem ser
definidos por alguns browsers.
A sobreposio, por ordem crescente de
aplicao, : folha de estilos num ficheiro
externo, folha de estilos na prpria pgina, e
finalmente estilos em linha se bem que o
que define estritamente a sobreposio dos
estilos a sua ordem de carregamento.
3-May-16
CDM - RSM2 - 2015/16
44
22
5/9/16

Contudo, a utilizao de ficheiros externos

favorece a partilha de estilos entre todas as
pginas de um site, facilitando, dessa forma, a
gesto dos mesmos.
3-May-16
CDM - RSM2 - 2015/16
45

excepo dos estilos em linha, a sintaxe mais

simples de um estilo , por exemplo,
selector {propriedade: valor}.
O selector identifica o elemento ou elementos
que se pretendem modificar. Pode ser, por
exemplo, uma tag HTML.
A propriedade a caracterstica que se
pretende alterar, e assume o valor que for
definido.
Um exemplo:
p {color: red}.
3-May-16
CDM - RSM2 - 2015/16
46
23
5/9/16

Se o valor de uma propriedade possuir mais

que uma palavra, devem ser usadas aspas
para o delimitar.
Se se desejar especificar mais que uma
propriedade, estas devem ser separadas por
pontos-e-vrgulas.
p {
text-align: center;
color: red;
font-family: sans-serif
}
3-May-16
CDM - RSM2 - 2015/16
47

Se mltiplos elementos partilharem as

mesmas propriedades, possvel agrup-los,
separando-os com vrgulas.
h1, h2, h3, h4, h5, h6 {
color: green;
}
3-May-16
CDM - RSM2 - 2015/16
48
24
5/9/16

tambm possvel fazer combinaes de

elementos nos selectores.
Por exemplo, se apenas quisermos modificar
apenas as tags strong que se encontrem
dentro de pargrafos, teremos algo
semelhante a:
p strong {
background-color: red;
}
3-May-16
CDM - RSM2 - 2015/16
49

possvel definir estilos diversos para o

mesmo elemento HTML, atravs da definio
de classes.
p.alinhadoDireita
{text-align: right}
p.alinhadoEsquerda
{text-align: left}
p.carregado
{font-weight: bold}
3-May-16
CDM - RSM2 - 2015/16
50
25
5/9/16

Note-se que as classes herdam as definies

atribudas ao selector baseados em tags,
acrescentando novas ou substituindo as j
existentes.
A excepo o selector .class, que pode ser
aplicado em qualquer elemento (desde que
suporte as propriedades definidas).
3-May-16
CDM - RSM2 - 2015/16
51

Quando se utilizam classes nos selectores,

necessrio tambm utilizar o atributo class
nas tags HTML correspondentes ao selector.
<p class=alinhadoDireita>Texto
alinhado direita</p>
<p class=alinhadoEsquerda>Texto
alinhado esquerda</p>
3-May-16
CDM - RSM2 - 2015/16
52
26
5/9/16

possvel tambm aplicar mais que uma

classe ao mesmo tempo, havendo uma
interseco das propriedades das classes
utilizadas.
<p class=alinhadoDireita
carregado>Texto alinhado direita
e carregado</p>
3-May-16
CDM - RSM2 - 2015/16
53

As classes podem ainda no estar associadas a

um elemento HTML especfico, atravs do
selector .class, podendo ser utilizadas
atravs do atributo class em (quase)
qualquer elemento.
.centrado {text-align: center}
<h1 class=centrado>Ttulo
centrado</h1>
<p class=centrado>Pargrafo
centrado</p>
3-May-16
CDM - RSM2 - 2015/16
54
27
5/9/16

Para elementos que sejam diferenciados

atravs do seu tipo (type) ou, na prtica,
atravs de qualquer atributo , como o caso
dos elementos dos formulrios, necessrio
indic-lo com recurso a parntesis rectos.
Por exemplo, para uma caixa de texto temos:
input[type=text] {
background-color: blue
}
3-May-16
CDM - RSM2 - 2015/16
55

possvel tambm definir estilos atravs de

selectores de id (#):
#verde {color: green}.
Com isto, o elemento HTML que tiver a
identificao (id) verde, ir assumir as
propriedades definidas no selector.
<h2 id=verde>Ttulo (de segundo
nvel) com cor verde</h2>
3-May-16
CDM - RSM2 - 2015/16
56
28
5/9/16

Os selectores de id tambm podem ser

aplicados a elementos especficos.
Por exemplo, o seguinte selector s ser
aplicado a pargrafos (p) com o id igual a
paragrafoX:
p#paragrafoX {text-align: center;
color: red}
<p id="paragrafoX">Texto vermelho
centrado</p>
3-May-16
CDM - RSM2 - 2015/16
57

Para alm dos selectores que vimos

anteriormente, tambm possvel a definio
de pseudoclasses.
As pseudoclasses so usadas para adicionar
efeitos a alguns selectores (e respectivas
classes, caso se aplique), principalmente em
resposta a eventos gerados pelo utilizador.
Um dos caso mais comuns onde se aplicam
pseudoclasses nas hiperligaes (a).
3-May-16
CDM - RSM2 - 2015/16
58
29
5/9/16

Nas hiperligaes, possvel definir

comportamentos diferentes para as seguintes
situaes:
hiperligao ainda no utilizada;
hiperligao visitada;
ponteiro do rato sobe a hiperligao;
hiperligao clicada (e ainda no libertada).
3-May-16
CDM - RSM2 - 2015/16
59

As pseudoclasses so definidas de forma

semelhante s classes, contudo esto sempre
associadas a um selector (ou uma classe).
/* Note-se a sequncia LVHA */
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
3-May-16
CDM - RSM2 - 2015/16
60
30
5/9/16

No exemplo anterior, pode notar-se a

existncia de um comentrio.
Em CSS, s existe um tipo de comentrios:
delimitado por /* e */;
multilinha (se bem que possa tambm ser
aplicado a linhas isoladas).
/* Isto
um comentrio
em CSS. */
3-May-16
CDM - RSM2 - 2015/16
61

Para alm dos selectores apresentados

anteriormente, h ainda muitos outros (quase
todos relacionados com pseudo-classes).
Optou-se, contudo, por abordar apenas os casos
mais comuns.
Ainda assim, menciona-se ainda mais um

caso: o selector *, que serve para seleccionar
todos os elementos presentes num
documento.
Por exemplo:
* {font-family: Helvetica, Arial,
sans-serif}.
3-May-16
CDM - RSM2 - 2015/16
62
31
5/9/16

Apesar de ser possvel, com CCS, alterar o

comportamento de virtualmente qualquer
elemento HTML, h dois destes elementos
que merecem especial destaque: span e div.
Estas duas tags no tm um comportamento
especfico, sendo usadas quando h
contedos que no podem ser descritos
propriamente por outras, ou existe
necessidade de os agrupar.
Contudo, alguns browsers podem fazer quebras
de linha aps divs.
3-May-16
CDM - RSM2 - 2015/16
63

A tag span funciona em linha (por exemplo,

para agrupar palavras), ao passo que a div
funciona em blocos (agrupando, por exemplo,
pargrafos).
Destas duas, a que tem maior notoriedade a
div, especialmente devido sua frequente
associao s CSS, atravs de classes (class)
ou, mais frequentemente, de selectores id
(id).
3-May-16
CDM - RSM2 - 2015/16
64
32
5/9/16

Assim, se pretendermos, por exemplo,

agrupar um conjunto de pargrafos, podemos
encapsul-los entre as tags <div> e </div>.
<div>
<p>Texto de um pargrafo</p>
<p>Texto de outro pargrafo</p>
<p>Texto de ainda mais outro
pargrafo</p>
</div>
3-May-16
CDM - RSM2 - 2015/16
65

O exemplo anterior, tal como se encontra,

nada faz de visualmente evidente .
Contudo, se acrescentarmos o atributo id e
depois associarmos, em CSS, um selector id
ao div, podemos alterar as propriedades do
bloco.
Tambm deve ser acrescentado o atributo name,
para se poder manipular as propriedades do div
atravs de scripts.
E tambm possvel o mesmo usando classes...
mas menos usual.
3-May-16
CDM - RSM2 - 2015/16
66
33
5/9/16

O exemplo ficaria assim:

<div id=estiloBloco>
<p>Texto de um pargrafo</p>
<p>Texto de outro pargrafo</p>
<p>Texto de ainda mais outro
pargrafo</p>
</div>
Posteriormente, necessrio definir o selector

de id #estiloBloco.
3-May-16
CDM - RSM2 - 2015/16
67

A ttulo de exemplo, o estilo poderia definir

cor de fundo e margem:
#estiloBloco {
background-color: yellow;
border-style: solid;
border-width: 1px;
}
3-May-16
CDM - RSM2 - 2015/16
68
34
5/9/16

Algumas propriedades de uso comum e

prtico com a utilizao de CSS em divs so:
posio (position): indicao se a posio
relativa (relative; obtida em funo do
elemento parent onde se encontra inserido,
absoluta (absolute); ou fixa (fixed), usando
como referncia a vista da janela do browser.
Em qualquer dos casos, depois necessrio posicionar
o elemento com recurso a propriedades como o top ou
o left.
H ainda a posio static, que corresponde ao
posicionamento por omisso dos elementos.
3-May-16
CDM - RSM2 - 2015/16
69

flutuao (float): alinhamento do bloco,

podendo substituir o tradicional alinhamento de
cima para baixo por outro, como da esquerda para
a direita.
largura (width): largura do bloco;
distncia s margens (top, left, bottom e
right);
profundidade (z-index): quanto maior, mais
prximo estar do utilizador;
3-May-16
CDM - RSM2 - 2015/16
70
35
5/9/16

visibilidade (visibility): podendo estar visvel

(visible) ou oculto (hidden);
forma de apresentao (display): em linha
(inline), bloco (block), lista (list-item), e
oculto (none).
3-May-16
CDM - RSM2 - 2015/16
71

A utilizao destas propriedades permite a

criao de layers (camadas), onde pode existir
sobreposio de contedos.
E qualquer propriedade pode ser manipulada
atravs de scripts, como veremos
posteriormente.
3-May-16
CDM - RSM2 - 2015/16
72
36
5/9/16

Para terminar, os estilos podem no ser

reconhecidos por browsers mais antigos.
Assim, quando definidos dentro da pgina
web (no cabealho), os estilos devem ficar
delimitados por comentrios HTML.
<style type=text/css>
<!-hr {color: navy}
p {margin-left: 20px}
-->
</style>
3-May-16
CDM - RSM2 - 2015/16
73
JavaScript
3-May-16
CDM - RSM2 - 2015/16
74
37
5/9/16
JavaScript
O JavaScript (JS) usado em milhes de

pginas web para melhorar o seu design,
validar formulrios, e muitos mais aspectos.
O JS foi desenvolvido originalmente pela
Netscape, e a linguagem de scripting (clientside) mais popular da Internet.
Funciona com virtualmente todos os browsers
mais recentes e ainda no activo.
3-May-16
CDM - RSM2 - 2015/16
75
JavaScript
O JS teve, e tem, como um dos principais

propsitos adicionar interactividade s
pginas HTML.
O JS uma linguagem de scripting isto ,
uma linguagem de programao leve, no
compilada, interpretada no momento em que
a pgina carregada.
Um script JS um conjunto de linhas de
cdigo de computador executvel,
usualmente embebido directamente nas
pginas HTML.
3-May-16
CDM - RSM2 - 2015/16
76
38
5/9/16
JavaScript
O JS uma linguagem interpretada, o que

quer dizer que no necessita de ser
previamente compilada ao contrrio do
Java, por exemplo.
Qualquer pessoa pode usar o JS sem comprar
licenas semelhana do Java.
Apesar de o Java e o Javascript terem vrias
semelhanas, so linguagens completamente
distintas.
3-May-16
CDM - RSM2 - 2015/16
77
JavaScript
O Java uma linguagem de programao

bastante poderosa e complexa, ao passo que o
JavaScript tem um mbito muito mais reduzido.
O JS fornece aos designers HTML uma ferramenta
de programao, j que o HTML apenas permite a
estruturao e formatao de documentos.
O JS permite, por exemplo, colocar texto
dinmico numa pgina HTML, quando carregada
no browser.
3-May-16
CDM - RSM2 - 2015/16
78
39
5/9/16
JavaScript
O JS pode reagir a eventos podendo ser

configurado para executar quando algo
acontece, como quando uma pgina acabou
de carregar ou o utilizador interage com
algum elemento HTML.
O JS pode ler e escrever elementos HTML
podendo mesmo ler e alterar o contedo de
um elemento HTML.
3-May-16
CDM - RSM2 - 2015/16
79
JavaScript
O JS pode ser utilizado para validar dados

podendo ser utilizado para validar os dados
inseridos em formulrios, antes de estes
serem enviados para o servidor, poupando-o a
processamento desnecessrio.
Com alguns dos novos elementos presentes
no HTML5, com o JS passa a ser possvel
controlar a reproduo de contedos
multimdia e at mesmo a criao de
animaes e interaces mais complexas.
3-May-16
CDM - RSM2 - 2015/16
80
40
5/9/16
JavaScript
Os scripts podem ser definidos e inseridos

tanto no cabealho (head) como no corpo
(body) de uma pgina web.
Contudo, se o script for definido no cabealho,
este ser executado apenas quando chamado
explicitamente por exemplo, quando se
usam funes definidas pelo utilizador noutro
stio da pgina web.
3-May-16
CDM - RSM2 - 2015/16
81
JavaScript
J, se o script for definido no corpo, este ser

executado, regra geral, enquanto a pgina
est a ser carregada por exemplo, se a
pgina depende de dados do utilizador ou do
browser para ser construda.
3-May-16
CDM - RSM2 - 2015/16
82
41
5/9/16
JavaScript
Um exemplo:
<html>
<head>
<script type=text/JavaScript>
algumas instrues (usualmente,
definies de funes que so chamadas
noutro local)
</script>
</head>
<body>
mais algumas instrues
</script>
</body>
</html>
3-May-16
CDM - RSM2 - 2015/16
83
JavaScript
Se o script for definido num ficheiro externo,

podemos us-lo assim, carregando-o no
cabealho:
<html>
<head>
<script type=text/JavaScript
src=externalscriptfile.js>
</script>
</head>
<body>
algumas instrues
</script>
</body>
</html>
3-May-16
CDM - RSM2 - 2015/16
84
42
5/9/16
JavaScript
Scripts definidos em ficheiros externos so a

forma prefervel, principalmente quando os
scripts so grandes, usados em vrios pontos
na pgina web, ou mesmo quando so
partilhados por vrias pginas num site web.
Esta opo diminui o tamanho da pgina,
aumenta a sua legibilidade e facilita a sua
manuteno.
3-May-16
CDM - RSM2 - 2015/16
85
JavaScript
Observe-se um pequeno exemplo para

principiantes:
<html>
<head>
<title>um primeiro exemplo</title>
</head>
<body>
<script type=text/javascript>
document.write(<h1>Ol,
Mundo!</h1>);
</script>
</body>
</html>
3-May-16
CDM - RSM2 - 2015/16
86
43
5/9/16
JavaScript
Uma nota: tal como em CSS, os pontos-evrgulas no so estritamente necessrios,

excepto para separar instrues.
Contudo, boa prtica mant-los, para no
esquecer a sua obrigatoriedade noutras
linguagens de programao ou scripting.
O document o objecto que representa a
pgina web ou documento HTML (tanto o

cabealho como o corpo).
3-May-16
CDM - RSM2 - 2015/16
87
JavaScript Variveis
As variveis, como em qualquer outra

linguagem, so contentores de informao
que pretendamos guardar temporariamente.
Tal como em Java, as variveis so case
sensitive e tm de comear por uma letra ou
um underscore.
Em JavaScript, as variveis no so tipadas
i.e., no preciso indicar o seu tipo aquando
da sua declarao.
3-May-16
CDM - RSM2 - 2015/16
88
44
5/9/16
JavaScript Variveis
Assim, se pretendemos declarar algum tipo de

varivel, apenas h necessidade de escrever
var nomevar = valor.
Em algumas circunstncias, at se pode omitir a
palavra-chave var i.e., nomevar = valor.
3-May-16
CDM - RSM2 - 2015/16
89
JavaScript Variveis
Embora as variveis no sejam tipadas, h

classes que podem ser usadas,
nomeadamente Number, String, Boolean,
Date, RegExp, Array, Math e Object.
Muitos dos mtodos conhecidos da linguagem
Java, nas classes correspondentes, existem
nestes objectos (de forma idntica ou parecida).
3-May-16
CDM - RSM2 - 2015/16
90
45
5/9/16
JavaScript Objectos Predefinidos

Em JavaScript h j um conjunto de objectos

predefinidos, que podem ser utilizados
directamente.
Desses os objectos, destacam-se:
O navigator, que representa o browser, e disponibiliza
algumas propriedades teis como:
appName, o nome do browser;

appVersion, a verso maior do browser;
appMinorVersion, a verso menor do browser;
language, a linguagem do browser;
platform, a plataforma de suporte ao browser, o que
corresponde ao sistema operativo.

3-May-16
CDM - RSM2 - 2015/16
91

O window, que representa a janela do browser, e

disponibiliza alguns mtodos teis como:
open(), abre uma janela com um determinado endereo ou
vazia til, por exemplo, para pop ups (se bem que estes
tenham cado virtualmente em desuso);
close(), fecha a janela;
prompt(), mostra uma caixa com uma pergunta e fica
espera de uma resposta;
confirm(), mostra uma caixa com uma pergunta e fica
espera de um sim ou no (ou, em alternativa, ok ou cancelar);
alert(), mostra uma caixa com uma mensagem.
3-May-16
CDM - RSM2 - 2015/16
92
46
5/9/16

O document, que representa uma pgina web,

disponibilizando, entre outros, os mtodos:
write() e writeln(), para escrever no documento
(pgina);
getElementById() , para aceder a um elemento HTML
atravs do seu id.
O screen, que representa o cran do cliente,

disponibilizando atributos como:
height e width, que representam a altura e a largura em
pixis do cran;
availHeight e availWidth, que representam a altura e a largura
em pixis disponveis no cran (tirando as barras de ferramentas);
3-May-16
CDM - RSM2 - 2015/16
93

O history, que representa o histrico de navegao,

disponibilizando, entre outros, os seguintes mtodos e
atributos:
back() e forward(), para avanar ou recuar uma posio
no histrico (carregando as respectivas pginas);

go(), para carregar uma determinada pgina que j tenha
sido vista no histrico, recebendo como argumento o nmero
de retrocessos ou avanos, ou parte do URL e.g., go(-1);
length, que indica o nmero de endereos URL presentes no
histrico.
Note-se que o objecto history acedido a partir do

objecto window i.e., window.history.
3-May-16
CDM - RSM2 - 2015/16
94
47
5/9/16

O location, que representa o endereo actual,

disponibilizando, entre outros, os seguintes mtodos e
atributos:
assign() e replace(), que carregam um novo documento
com o URL especificado no argumento;
reload(), que volta a carregar o documento actual;

hostname e pathname, que devolvem, respectivamente, o
endereo do servidor e caminho da pgina;
href, que devolve o endereo completo da pgina.
Tal como o objecto anterior, tambm o location est

associado ao objecto window i.e., window.location.
Tambm pode ser usado directamente para atribuir ou
obter o endereo da pgina actual e.g.,
window.location = http://www.google.com.
3-May-16
CDM - RSM2 - 2015/16
95

Para alm dos objectos j referidos, interessa

ainda destacar os objectos pertencentes ao
DOM (Document Object Model).
no DOM que se encontra, por exemplo, o
objecto Document, como em
document.write(<p>Ol</p>) ;
Os eventos, que abordaremos mais adiante,
tambm se encontram definidos no DOM.
3-May-16
CDM - RSM2 - 2015/16
96
48
5/9/16
JavaScript Operadores
Tal como em Java, e outras linguagens de

programao, h operadores aritmticos, de
atribuio, de comparao e lgicos.
Operadores aritmticos: +, -, *, /, %, ++ e --.
Operadores de atribuio: =, +=, -=, *=, /= e %=.
Operadores de comparao: ==, !=, >, <, >= e <=.
Operadores lgicos: &&, || e !.
3-May-16
CDM - RSM2 - 2015/16
97
JavaScript Funes
Uma funo contm cdigo um conjunto de

instrues que ser executado por um
evento ou uma chamada a essa funo.
As funes podem ser reutilizadas dentro do
mesmo script ou em outros documentos.
As funes so definidas no incio de pgina
web (no cabealho) e so depois chamadas
mais tarde no documento (corpo).
3-May-16
CDM - RSM2 - 2015/16
98
49
5/9/16
JavaScript Funes
As funes em JavaScript podem ser

consideradas o equivalente dos mtodos em
Java, embora haja diferenas considerveis.
Por exemplo, as funes JavaScript no tm
tipos de retorno (embora possam devolver
valores), no tm de ser definidas dentro de
classes e os argumentos tambm no so
tipados.
3-May-16
CDM - RSM2 - 2015/16
99
JavaScript Funes
Exemplos de funes com e sem argumentos:

function aMinhaFuncao(argumento1,
argumento2, etc) {
algumas instrues
}
function aMinhaFuncao() {
algumas instrues
}
3-May-16
CDM - RSM2 - 2015/16
100
50
5/9/16
JavaScript Funes
function soma(a, b) {
var c = a + b;
return c;
}
Note-se que os argumentos da funo no

tm o prefixo var us-lo causaria erros de
execuo.
3-May-16
CDM - RSM2 - 2015/16
101
JavaScript Funes
Para se chamar uma funo, basta us-la:

aMinhaFuncao(argumento1,
argumento2, etc);
aMinhaFuncao();
Se a funo tiver um valor de retorno, este

pode ser guardado numa varivel (ou usado
directamente):
c = soma(1, 2); // c = 3
3-May-16
CDM - RSM2 - 2015/16
102
51
5/9/16
JavaScript Funes
Note-se que, quando estamos a passar

elementos HTML como argumentos a uma
funo, estamos a passar referncias. Desta
forma, possvel alterar o comportamento de
um elemento a partir de dentro da funo.
Quando se quer passar valores (por exemplo,
de elementos de formulrios), deve ser
utilizado o atributo value.
3-May-16
CDM - RSM2 - 2015/16
103
JavaScript Funes
Em termos de funes de uso generalizado, h

a destacar as seguintes:
eval()
Esta funo permite avaliar e calcular o valor de
expresses.
Por exemplo, eval(1 + 2 + 3) = 6.
parseInt() e parseFloat()
Convertem strings com nmeros para nmero inteiros
e com vrgula flutuante, respectivamente.
isNaN()
Verifica que um dado valor no um nmero vlido (ou
se , quando se usa a negao).
3-May-16
CDM - RSM2 - 2015/16
104
52
5/9/16
JavaScript Execuo Condicionada

Tal como em Java, em JavaScript podem ser

utilizadas estruturas de controlo para realizar
diferentes aces em funo de diferentes
condies.
As estruturas de controlo funcionam de forma
idntica ao Java e so:
a declarao condicional if que pode ser usada
quando se pretende executar cdigo quando uma
determinada condio verdadeira;
3-May-16
CDM - RSM2 - 2015/16
105

a declarao condicional if...else que pode

ser usada quando se tem dois conjuntos de
instrues para executar, dependendo do valor de
determinada condio (verdadeira ou falsa);
e a declarao condicional switch que pode ser
utilizada quando se tem um vasto conjunto de
alternativas para serem executadas com base nos
valores possveis da varivel utilizada.
3-May-16
CDM - RSM2 - 2015/16
106
53
5/9/16

Mais uma vez, o JavaScript tem as mesmas

estruturas para ciclos que o Java tem,
funcionando da mesma maneira:
o ciclo while para executar um conjunto de
instrues enquanto uma condio verdadeira;
o ciclo do...while o mesmo que o ciclo while,
mas executando pelo menos uma vez o conjunto
de instrues, independentemente do valor da
condio;
e o ciclo for para executar instrues um
determinado nmero de vezes.
3-May-16
CDM - RSM2 - 2015/16
107
JavaScript Arrays
Os arrays, em JavaScript, tm um
comportamento misto entre os arrays e os
vectores em Java.
So um objecto e no tm um tamanho
predefinido.
Apesar de poderem ser acessveis atravs de
ndices, possvel usar o array como uma
pilha, adicionado elementos ao topo e
retirando elementos desse mesmo topo pela
ordem inversa.
3-May-16
CDM - RSM2 - 2015/16
108
54
5/9/16
JavaScript Arrays
Para adicionar elementos a um array, deve ser

utilizado o mtodo push(), ou, em
alternativa, usar o ndice devendo ficar ao
cuidado do programador a sequncia do
ndice.
J para aceder a elementos, existem duas
alternativas mais comuns: usar o mtodo
pop(), caso queiramos retirar o elemento do
array, ou ento usar o ndice (mantendo-se os
elementos inalterados).
3-May-16
CDM - RSM2 - 2015/16
109
JavaScript Arrays
Seguem-se exemplos:
var diasSemana = new Array();
diasSemana.push(Domingo);
...
diasSemana.push(Sbado);
var ultimoDia = diasSemana.pop();
var diaMeio = diasSemana[4];
3-May-16
CDM - RSM2 - 2015/16
110
55
5/9/16
JavaScript Arrays
Em JS, sempre que for necessrio aceder a, ou

manipular, elementos HTML, podem ser
usadas duas formas, dependendo do browser:
usar o nome dado ao elemento (atravs do
atributo name), especificamente em formulrios;
usar o id dado ao elemento (atravs do atributo
id), usando o retorno do mtodo
document.getElementById().
Esta dever ser a verso preferida, compatvel com um
maior nmero de browsers, e tambm quando o
elemento em questo no possui o atributo name.
3-May-16
CDM - RSM2 - 2015/16
111
JavaScript Classes
O JavaScript permite a definio de classes,

que depois podem ser utilizadas para a
criao de objectos.
Havendo vrias formas de definir classes, vai
ser utilizada uma prxima de outras
abordagens como, por exemplo, no Java.
A criao de classes tem muitos mais pormenores
e pode ser mais complexa do aqui descrito tal
fica, contudo, fora do mbito desta unidade
curricular.
3-May-16
CDM - RSM2 - 2015/16
112
56
5/9/16
JavaScript Classes
Segue-se um exemplo representando uma

hipottica classe Pessoa:
var Pessoa = function (nome, genero, dn) {
this.nome = nome;
this.genero = genero;
this.dn = new Date(dn + ",00:00:00"); // yyyy mm dd
this.calculaIdade = function () {
var hoje = new Date();
var idade = hoje.getFullYear() - this.dn.getFullYear();
var difMes = hoje.getMonth() - this.dn.getMonth();
if ((difMes < 0) || ((difMes == 0) && (hoje.getDate() <
this.dn.getDate()))) {
idade--;
}
return idade;
}
}
3-May-16
CDM - RSM2 - 2015/16
113
JavaScript Classes
Elementos a reter do exemplo anterior (e da

forma adoptada para definio de classes):
A classe declarada como se fosse uma varivel,
sendo-lhe atribuda, contudo, como valor uma funo
que funciona como o construtor da classe.
As propriedades (pblicas) da classe so antecedidas
pelo operador this e devem ser sempre referidas,
dentro da classe, com esse operador; as outras
variveis so privadas.
Os mtodos so propriedades a que so atribudas,
como valor, funes.
3-May-16
CDM - RSM2 - 2015/16
114
57
5/9/16
JavaScript Classes
Esta classe pode posteriormente ser utilizada

para instanciar objectos:
var nome = "Jos Ningum";
var genero = "Masc";
var dn = "2002 02 20";
var pessoa = new Pessoa(nome, genero, dn);
var idade = pessoa.calculaIdade();
3-May-16
CDM - RSM2 - 2015/16
115
JavaScript Eventos
Devem ser mencionados alguns dos eventos

mais comuns, que permitem interactividade
entre utilizador e pgina.
Regra geral, os eventos esto associados a
atributos que podem ser colocados em
elementos HTML e receber cdigo JS.
Por exemplo, <a href=#
onclick=javacript:
window.alert(Ol!);>Link que mostra
uma saudao</a>.
Note-se a utilizao do cardinal no href (no caso

das ncoras) e o javacript: antes do cdigo.
3-May-16
CDM - RSM2 - 2015/16
116
58
5/9/16
JavaScript Eventos
Dos mltiplos existentes, alguns dos eventos

mais comuns so:
onclick: para cliques do rato sobre o elemento;
onmouseover: quando se passa com o rato por
cima do elemento;
onmouseout: quando se tira o ponteiro do rato de
cima do elemento;
onfocus: quando um elemento foca
seleccionado;
onkeydown: quando uma tecla foi pressionada (e
ainda no libertada).
3-May-16
CDM - RSM2 - 2015/16
117
JavaScript Eventos
Outro evento bastante til o onload,

permitindo, por exemplo, a iniciao de
variveis e objectos, bem como a definio de
alguns atributos HTML e propriedades CSS.
Pode receber o nome de uma funo a executar,
ou mesmo definir uma funo in loco com
function() {instrues...}.
Por exemplo, onload = javascript:
function() {window.alert(Ol!);}
3-May-16
CDM - RSM2 - 2015/16
118
59
5/9/16
JavaScript Eventos
Tambm possvel a atribuio da escuta de

eventos a elementos HTML atravs de
JavaScript, usando o modelo
elemento.evento = funo() {...};.
Por exemplo:
document.getElementById(xpto).onclick =
function() {
window.alert(Clicou no elemento \xpto\!);
};
3-May-16
CDM - RSM2 - 2015/16
119
JavaScript Acesso a Elementos

Para terminar, resta indicar que possvel

alterar o valor de atributos de tags HTML ou
mesmo o contedo das tags (entre a abertura
e o fecho).
Para alterar/aceder maioria dos elementos, a
maneira prefervel atravs dos seus ids,
especificando o atributo a alterar/aceder e.g.,
document. getElementById(textFileXPTO).
value=um qualquer texto;
Em elementos de formulrios, para alm do id,
pode ser usado o nome (name) do elemento em
questo e.g., para aceder a um valor, texto =
textFieldXPTO.value;
3-May-16
CDM - RSM2 - 2015/16
120
60
5/9/16

No caso especfico da modificao de estilos CSS

atravs de JavaScript, apesar de alguns browsers
aceitarem a definio do style como se de
qualquer outro atributo se tratasse, a opo mais
transversal e compatvel usar a notao
elemento.atributo.propriedade , sendo que
as propriedades adoptam, quando necessrio, o
camelcase tpico do JavaScript e.g.,
document. getElementById(idXPTO).style.
fontSize=16px;
3-May-16
CDM - RSM2 - 2015/16
121

Para alterar/aceder ao contedo de um elemento,

por exemplo o contedo de um DIV, utiliza-se as
propriedades innerText e innerHTML, sendo
que o innerText permite apenas texto, e o
innerHTML permite a insero de outros tags
HTML:
getElementById(divXPTO).innerHTML =
<p>Novo contedo HTML deste
elemento...</p>;
A propriedade innerText no suportada por todos
os browsers, havendo alguns que suportam a
alternativa textContent.
3-May-16
CDM - RSM2 - 2015/16
122
61
5/9/16
JavaScript Cookies
Por questes de segurana, no permitido

ao JavaScript aceder aos recursos de entrada
e sada de dados da mquina do utilizador.
Contudo, existe uma excepo: permitido ao
browser que se guarde um pequeno ficheiro
de texto, com pares atributo-valor para futuro
acesso. So os chamados cookies.
Por omisso, os cookies apenas esto disponveis
para o site que os criou.
3-May-16
CDM - RSM2 - 2015/16
123
JavaScript Cookies
Criar um cookie bastante simples:

document.cookie = atributo=valor;
Suponhamos que queremos guardar nome e
morada do utilizador. Assim, teramos, por
exemplo:
document.cookie = nome=Alberto;
document.cookie = morada=Coimbra;
expires=Mon, 20 May 2013 23:59:59 UTC;
Note-se o atributo expires: este define o tempo

de validade do cookie.
E com a leitura acontece o mesmo:
var conteudo = document.cookie;

3-May-16
CDM - RSM2 - 2015/16
124
62
5/9/16
JavaScript Cookies
Dado ser usual um cookie poder conter vrios

pares atributo-valor, para aceder a estes, a
tcnica separar os pares pelos pontos-evrgulas (;) e depois separar o atributo do
valor pelo sinal de igual (=).
Assim:
var pares = conteudo.split(; );
E, para cada par, assumindo-se a iterao atravs

de um ciclo (com ndice i):
atributo = pares[i].split(=)[0];
valor = pares[i].split(=)[1];
3-May-16
CDM - RSM2 - 2015/16
125
JavaScript Cookies
Sendo necessrio apagar um cookie, a soluo

passa por atribuir um valor vazio ao atributo
em questo, ao mesmo tempo que define o
prazo de validade para uma data anterior
actual. Assim, por exemplo:
document.cookie = nome=;
expires=Thu, 01 Jan 1970 00:00:00 GMT;
3-May-16
CDM - RSM2 - 2015/16
126
63
5/9/16
JavaScript Consola
Para terminar, interessa referir a consola

(console) de JavaScript.
A consola tem uma srie de mtodos teis
para a depurao de erros (e no s), dos
quais so mencionados de seguida aqueles
para sada de mensagens (evitando o output
para a prpria pgina).
Note-se que necessrio, no browser, activar a
vista da consola de JavaScript.
3-May-16
CDM - RSM2 - 2015/16
127
JavaScript Consola
Assim, os mtodos seleccionados so:

console.log() para escrever texto, valores,
etc., na consola;
console.error() semelhante ao log(), mas
indicado especificamente para mensagens de

erro;
console.clear() para limpar a consola.
3-May-16
CDM - RSM2 - 2015/16
128
64
5/9/16
JavaScript Mos Obra

Como se pode observar, o JavaScript uma

linguagem que, embora seja bastante
diferente do Java, tem uma sintaxe e um
modo de funcionamento algo semelhante ao
Java da o seu nome.
E, como em qualquer outra linguagem, a nica
forma de efectivamente a aprender
trabalhar com exemplos, realizar exerccios e
fazer os prprios programas.
3-May-16
CDM - RSM2 - 2015/16
129
JavaScript Mos Obra

Referncias e exemplos de JavaScript, para

alm da bibliografia, podem ser encontrados
em sites como:
http://www.w3schools.com/jsref/
http://www.webreference.com/js/
http://www.javascriptkit.com/jsref/
http://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference
3-May-16
CDM - RSM2 - 2015/16
130
65
5/9/16
HTML5
3-May-16
CDM - RSM2 - 2015/16
131
HTML5 Porqu?
O actual standard HTML (seja na

implementao HTML 4.01, seja na XHTML
1.1) j tem cerca de 10 anos, e existe a
necessidade de criar suporte para prticas
muito utilizadas (e simplificar as mesmas),
mas no oficiais, e tambm de suportar novos
contedos que comearam a proliferar pela
World Wide Web.
3-May-16
CDM - RSM2 - 2015/16
132
66
5/9/16
HTML5 Porqu?
Assim, para alm de procurar facilitar a

estruturao de documentos, tem tambm o
intuito de facilitar a criao de contedos e
aplicaes.
Ao mesmo tempo, o HTML5 procura garantir
que todos os pginas criadas anteriormente
continuam a ser suportadas.
Desta forma, o HTML5 retrocompatvel,
suportando contedos j existentes,
desenvolvidos em HTML 4 ou XHTML 1.
3-May-16
CDM - RSM2 - 2015/16
133
HTML5 Porqu?
Mas ateno, o HTML5 ainda um standard

em desenvolvimento!
S em 2014 atingiu a fase de recomendao
(recommendation), tendo comeado
entretanto os trabalhos nas verses HTML 5.1
e HTML 5.2.
3-May-16
CDM - RSM2 - 2015/16
134
67
5/9/16
HTML5 Porqu?
A maior parte dos browsers j suportam o

HTML45, com mais ou menos funcionalidades,
com o apoio da W3C (World Wide Web
Consortium) e do WHATWG (Web Hypertext
Application Technology Working Group).
3-May-16
CDM - RSM2 - 2015/16
135
HTML5 Estrutura Base

O doctype do HTML5 bastante mais simples

que os anteriores (tanto mais que visa
tambm a retrocompatibilidade).
<!DOCTYPE html>
A codificao dos caracteres (character

encoding) tambm bastante mais simples.
<meta charset=UTF-8>
3-May-16
CDM - RSM2 - 2015/16
136
68
5/9/16

E o mesmo acontece para a incluso de

JavaScript e Cascading Style Sheets, j que
estas eram, na prtica, as nicas opes
utilizadas.
Assim, para incluirmos JavaScript (presente
num ficheiro externo) passamos a ter:
<script src=file.js></script>
E para CSS, temos:
<link rel=stylesheet
href=file.css>
3-May-16
CDM - RSM2 - 2015/16
137

No prprio ficheiro, teremos apenas
<script>...</script > (para JavaScript) e

<style>...</style>, para CSS.
Para alm disso, o HTML5 no restritivo

quanto forma de criar o cdigo.
Podemos usar as convenes do HTML, do
XHTML, ou at mesmo combin-las.
3-May-16
CDM - RSM2 - 2015/16
138
69
5/9/16

Em todo o caso, recomenda-se a adopo de

um estilo nico e nas aulas, esse representa
a adopo das convenes de cdigo do
XHTML: sempre minsculas, fechar
devidamente as tags, usar sempre aspas nos
atributos, etc.
3-May-16
CDM - RSM2 - 2015/16
139

Uma outra novidade do HTML5 definir uma

lista (maior) de elementos obsoletos, tal como
o font, o big e o center, s para mencionar
alguns.
O mesmo acontece com alguns atributos,
como o bgcolor ou valign (tambm s para citar
dois), cuja funo tambm melhor
implementada atravs de CSS.
Contudo, apesar de obsoletos, continuam a
ser reconhecidos pelos browsers.
3-May-16
CDM - RSM2 - 2015/16
140
70
5/9/16
HTML5 Algumas Novidades

O HTML5 traz consigo inmeras novidades,

sendo abordadas de seguida algumas das mais
evidentes (e que sero talvez das mais
utilizadas).
O HTML5 procura tornar nativas (nos
browsers) algumas das funes que
actualmente s se conseguiam com a
utilizao de plug-ins ou com recurso a, por
exemplo, JavaScript.
3-May-16
CDM - RSM2 - 2015/16
141
HTML5 Algumas Novidades

Com o HTML5 tambm surgiu uma alternativa

aos cookies, se bem que com algumas
semelhanas: o local storage e o session
storage.
Iremos abordar de seguida alguns desses
novos elementos, incluindo, entre outros, os
de desenho, udio e vdeo, os de
armazenamento, e comeando pelas
omnipresentes ncoras.
3-May-16
CDM - RSM2 - 2015/16
142
71
5/9/16
HTML5 ncoras
As ncoras (que permitem a criao de

hiperligaes) passam a ser um elemento
HTML que pode englobar outros elementos:
<a href=bio.html>
<h2>Sobre mim</h2>
<p>Uma curta biografia...</p>
</a>
A nica excepo colocar ncoras dentro de

ncoras.
3-May-16
CDM - RSM2 - 2015/16
143
HTML5 Canvas
O canvas um elemento que permite a

criao de imagens dinmicas (com recurso a
JavaScript).
<canvas id=canvas width=360
height=240>
</canvas>
Essencialmente, define uma rea de desenho

e o comportamento do browser, caso o
elemento no seja suportado.
3-May-16
CDM - RSM2 - 2015/16
144
72
5/9/16
HTML5 Canvas
Tudo o que estiver entre as tags de abertura e

o fecho do canvas s mostrado se o
browser no suportar HTML5 (ou esse
elemento especfico) e o mesmo se aplica
aos elementos de udio e vdeo, apresentados
adiante.
<canvas id=canvas width=360
height=240>O seu <em>browser</em> no
suporta <em>canvas</em>!
</canvas>
3-May-16
CDM - RSM2 - 2015/16
145
HTML5 Canvas
Para manipular o canvas necessrio utilizar

JavaScript, como podemos ver no seguinte
exemplo que desenha um rectngulo e
preenche outro (usando o elemento canvas
descrito anteriormente):
<script>
var canvas = document.getElementById(canvas);
var context = canvas.getContext(2d);
context.strokeStyle = red;
// context.strokeStyle = rgb(255, 0, 0);
context.strokeRect(20, 30, 100, 50);
context.fillRect(30, 40, 30, 30);
</script>
3-May-16
CDM - RSM2 - 2015/16
146
73
5/9/16
HTML5 Canvas
Apresentam-se alguns exemplos (para alm do

anterior) para desenhar linhas, crculos,
gradientes e imagens, assumindo-se a criao
do canvas e do objecto context.
<script>
var canvas =
document.getElementById(canvas);
var context = canvas.getContext(2d);
//... linhas, crculos, etc.
</script>
3-May-16
CDM - RSM2 - 2015/16
147
HTML5 Canvas
Para desenhar linhas, define-se o ponto onde

iniciar linha e at onde esta deve ser
desenhada.
context.beginPath();
context.moveTo(10, 10);
context.lineTo(150, 50);
context.lineTo(10, 50);
context.closePath();
context.stroke();
3-May-16
CDM - RSM2 - 2015/16
148
74
5/9/16
HTML5 Canvas
Para desenhar crculos (e arcos), define-se o

centro (x, y), o raio, o grau onde se inicia a
circunferncia e onde esta termina, e o
sentido do desenho (no sentido dos ponteiros
do relgio ou ao contrrio).
context.fillStyle=red;
context.beginPath();
context.arc(50, 50, 25, 0, Math.PI * 2, true);
context.closePath();
context.fill();
3-May-16
CDM - RSM2 - 2015/16
149
HTML5 Canvas
Para desenhar gradientes, o aspecto essencial

definir a cor de incio do gradiente e a cor de
fim.
var gradient =
context.createLinearGradient(0, 0, 200, 50);
gradient.addColorStop(0, red);
gradient.addColorStop(1, green);
context.fillStyle = gradient;
context.fillRect(0, 0, 200, 50);
Tambm se exemplifica, no exemplo acima, o

desenho (preenchido) de um rectngulo.
3-May-16
CDM - RSM2 - 2015/16
150
75
5/9/16
HTML5 Canvas
Para desenhar imagens, utiliza-se o (j

conhecido) objecto Image, havendo agora a
possibilidade de o desenhar.
context.clearRect(0, 0, canvas.width,
canvas.height);
3-May-16
CDM - RSM2 - 2015/16
151
HTML5 Canvas
Para limpar o canvas (bastante comum nas

vrias iteraes de uma animao):
var image = new Image();
image.src=imagem.jpg;
context.drawImage(image, 0, 0);
3-May-16
CDM - RSM2 - 2015/16
152
76
5/9/16
HTML5 udio e Vdeo

Relativamente aos contedos de udio e vdeo,

no HTML5 foi tomada a seguinte resoluo, de
forma a evitar o uso de plug-ins: no HTML5
devero ser contemplados, de raiz, pelo menos
dois formatos/codecs de udio e outros dois de
vdeo.
Actualmente, os formatos adoptados para o
udio foram:
MP3 (audio/mpeg);
Ogg (audio/ogg);
Wav (audio/wav).
3-May-16
CDM - RSM2 - 2015/16
153
HTML5 udio e Vdeo

No que toca ao vdeo, actualmente, os

formatos adoptados foram:
MP4 (video/mp4);
Ogg (video/ogg);
WebM(video/webm).
Os browsers devem suportar, pelo menos, um

dos formatos de udio e um dos formatos de
vdeo indicados.
3-May-16
CDM - RSM2 - 2015/16
154
77
5/9/16
HTML5 udio
Para embutir um ficheiro de som num

documento HTML5, basta indicar qual o seu
caminho:
<audio src=audio_sample.mp3></audio>
Contudo, para podermos ouvir o ficheiro ou

controlar a sua reproduo, so necessrios os
atributos autoplay, controls e/ou loop,
para iniciar a reproduo automtica, mostrar
os controlos e repetir a reproduo.
3-May-16
CDM - RSM2 - 2015/16
155
HTML5 udio
Assim, teramos:
<audio src=audio_sample.mp3 autoplay
controls loop>O seu <em>browser</em>
no suporta este elemento!</audio>
Note-se que se o ficheiro for grande, a opo

autoplay desaconselhada, principalmente em
dispositivos mveis.
3-May-16
CDM - RSM2 - 2015/16
156
78
5/9/16
HTML5 udio
Estes atributos so binrios, no sentido em

que se estiverem presentes, devem ser
aplicados e se no estiverem, ignorados.
Caso se queira pares atributo valor, a soluo ser
autoplay=autoplay.
3-May-16
CDM - RSM2 - 2015/16
157
HTML5 udio
Tendo em conta que um browser no

obrigado a suportar todos os formatos de
udio especificados pelo HTML5, uma
alternativa mais robusta :
<audio id=audio controls>
<source src=audio_sample.ogg
type=audio/ogg>
<source src=audio_sample.mp3
type=audio/mpeg>
</audio>
3-May-16
CDM - RSM2 - 2015/16
158
79
5/9/16
HTML5 udio
Caso o browser no suporte de todo o

elemento audio (ou quaisquer dos novos
elementos), quaisquer elementos embutidos
no audio para alm dos source sero
processados caso haja suporte, so
ignorados.
Com base neste comportamento, podemos
colocar l mensagens de erro, ou mesmo os
actualmente comuns plug-ins.
3-May-16
CDM - RSM2 - 2015/16
159
HTML5 udio
Segue-se um exemplo com quatro nveis de

degradao: ficheiro no formato mp3, ficheiro
no formato ogg, plug-in para reproduzir o
ficheiro mp3 e link para esse ficheiro (caso
tudo o resto falhe):
<audio controls>
<source src=sample.mp3 type=audio/mpeg>
<source src=sample.ogg type=audio/ogg>
<object type=application/x-shockwave-flash
data=player.swf?soundFile=sample.mp3>
<param name=soundclip
value=player.swf?soundFile=sample.mp3>
<a href=sample.mp3>Descarregar amostra</a>
</object>
</audio>
3-May-16
CDM - RSM2 - 2015/16
160
80
5/9/16
HTML5 Vdeo
Para os ficheiros de vdeo, os elementos

HTML5 tm um comportamento bastante
semelhante aos de udio, alterando-se pouco
mais que o nome dos elementos e os valores
dos atributos (e acrescentando-se as
dimenses do vdeo):
<video id=video controls width=320
heigth=240>
<source src=video_sample.ogg
type=video/ogg>
<source src=video_sample.mp4
type=video/mpeg>O seu browser no
suporta este elemento!
</video>
3-May-16
CDM - RSM2 - 2015/16
161
HTML5 Vdeo
Os elementos video permitem tambm a

definio de estilos CSS sobre a rea do vdeo,
como, por exemplo, a definio de molduras
ou cores de fundo.
Outro aspecto importante destes elementos
a possibilidade de definir a imagem a ser
mostrada enquanto o vdeo no for
reproduzido, atravs do atributo poster.
Caso no esteja definido, mostrado o
primeiro frame do vdeo em questo.
3-May-16
CDM - RSM2 - 2015/16
162
81
5/9/16
HTML5 Vdeo
O atributo poster apenas necessita da

indicao da imagem a carregar.
<video id=video controls width=320
heigth=240 poster=poster_image.jpg>
<source src=video_sample.ogg
type=video/ogg>
<source src=video_sample.mp4
type=video/mpeg>
</video>
Outro atributo que poder ser til o muted,

que coloca o volume do vdeo a zero.
3-May-16
CDM - RSM2 - 2015/16
163
HTML5 udio & Vdeo

Tanto os elementos de udio como de vdeo

permitem o seu controlo atravs de
JavaScript, caso, por algum motivo, no se
possam ou queiram usar os controlos
definidos por omisso por cada browser.
Por exemplo, no caso do udio, poder ser til
controlar um som de fundo da pgina web
sem ter a barra de controlo visvel.
Ou mesmo ainda se quisermos controlar
vrios elementos em simultneo.
3-May-16
CDM - RSM2 - 2015/16
164
82
5/9/16
HTML5 udio & Vdeo

Desde que os elementos estejam identificados

com um id, podem ser usados os seguintes
mtodos e propriedades:
Reproduzir:
document.getElementById(video).play();
Pausar:
document.getElementById(video).pause();
Parar:
document.getElementById(video).pause();
document.getElementById(video).currentTime=0;
3-May-16
CDM - RSM2 - 2015/16
165
HTML5 udio & Vdeo

Obter a posio actual da reproduo:

document.getElementById(video).currentTime
Aumentar/diminuir o volume:
document.getElementById(video).volume+=0.1;
// -=
Obter a durao do elemento:

document.getElementById(video).duration
3-May-16
CDM - RSM2 - 2015/16
166
83
5/9/16
HTML5 udio & Vdeo

Relativamente aos elementos de udio e

vdeo, interessa tambm referir os novos
eventos que lhes esto associados. Assim,
destacam-se os seguintes, disparados quanto
elemento:
est pronto para ser comeado a reproduzir:
onPlay;
comeou a ser reproduzido: onPlaying;
est pausado: onPause;
3-May-16
CDM - RSM2 - 2015/16
167
HTML5 udio & Vdeo

terminou: onEnded;
avana ao longo do tempo de reproduo:
onTimeUpdate.
3-May-16
CDM - RSM2 - 2015/16
168
84
5/9/16
HTML5 Formulrios
No HTML5, tambm os formulrios sofreram

vrias alteraes, desde alguns novos
elementos, at validao embutida em alguns
campos incorporando, essencialmente,
alguns comportamentos que eram
assegurados por JavaScript.
3-May-16
CDM - RSM2 - 2015/16
169
HTML5 Formulrios
Passa a ser agora disponibilizada nativamente

a utilizao de placeholders o texto em
campos de texto que surge enquanto o
utilizador no insere l dados atravs da
incluso do atributo placeholder=texto
temporrio.
3-May-16
CDM - RSM2 - 2015/16
170
85
5/9/16
HTML5 Formulrios
Tambm a obrigatoriedade do preenchimento

de determinados itens passa a ser garantida
atravs da incluso do atributo required.
E passa a haver a possibilidade de desactivar o
completamento automtico, directamente na
pgina, para o formulrio inteiro ou apenas
para um dado item, atravs da incluso do
atributo autocomplete=on|off.
3-May-16
CDM - RSM2 - 2015/16
171
HTML5 Formulrios
Quanto a novos elementos h a destacar o

elemento datalist. Tem um comportamento
similar ao do select, permitindo, contudo, a
insero de elementos para alm daqueles
presentes na lista. Tem, contudo, de estar
associado a um elemento de input do tipo
text.
<input type=text name=transporte
id=transporte list=lista_transportes />
<datalist id=lista_transportes>
<option value=Automvel>
<option value=Barco>
<option value=Avio>
</datalist>
3-May-16
CDM - RSM2 - 2015/16
172
86
5/9/16
HTML5 Formulrios
Os itens de input passam tambm a ter

novos tipos, reflectindo os contedos que so
mais comuns em formulrios actualmente.
Os tipos seguintes mantm o aspecto tpico
dos campos de texto, mas em dispositivos
com teclados virtuais devem poder alterar o
mesmo e.g., de teclado alfanumrico para
numrico:
E-mail: <input type=email [...] />
Endereo web: <input type=url [...] />
Telefone: <input type=tel [...] />
3-May-16
CDM - RSM2 - 2015/16
173
HTML5 Formulrios
Alguns destes novos tipos possuem validao

nativa, como o caso do email ou do url
(desde que sejam classificados como
obrigatrios).
Contudo, caso seja necessrio definir um
padro de validao especfico, usando, por
exemplo, os campos de texto, pode-se usar o
atributo pattern para esse efeito, em
conjunto com o title para a eventual
mensagem de erro.
<input type=text id=codigopostal
name=codigopostal pattern=[0-9]{4}\-[0-9]{3}
title=1234-567 required>
3-May-16
CDM - RSM2 - 2015/16
174
87
5/9/16
HTML5 Formulrios
Passa a haver tipos de input para datas e

horas. Desses novos tipos, interessa destacar
os seguintes:
Data e hora: <input id=datahora
name=datahora type=datetime>
Data: <input id=data name=data

type=date>
Hora: <input id=hora name=hora

type=time>
3-May-16
CDM - RSM2 - 2015/16
175
HTML5 Formulrios
H tambm dois tipos para escolha de valores

num determinado intervalo (compreendido
entre um valor mnimo e um valor mximo).
Estes so:
Barra de deslize: <input id=range
name=range type=range min=1
max=5>
Caixa de seleco de valores (com setas): <input

id=number name=number type=number
min=1 max=5>
3-May-16
CDM - RSM2 - 2015/16
176
88
5/9/16
HTML5 Formulrios
E ainda um selector de cores, no formato RBG:

<input id=cor name=cor
type=color>
Interessa referir, para terminar, o atributo

multiple, que permite a insero de
mltiplos valores em determinados campos,
como, por exemplo, email ou url, e que,
quando conjugado com o elemento file,
permite a seleco de vrios ficheiros.
3-May-16
CDM - RSM2 - 2015/16
177
HTML5 Formulrios
Para saber se o browser suporta algum dos

novos atributos ou tipos de input, de forma a
fornecer alternativas, podem ser teis as
funes seguintes:
Saber se um atributo, num dado elemento,
suportado:
function elementSupportsAttribute(element,
attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
}
else {
return false;
}
}
3-May-16
CDM - RSM2 - 2015/16
178
89
5/9/16
HTML5 Formulrios
Saber se um atributo do elemento type suportado:

function inputSupportsType(type) {
var input = document.createElement('input');
input.setAttribute('type', type);
if (input.type == 'type') {
return false;
}
else {
return true;
}
}
3-May-16
CDM - RSM2 - 2015/16
179
HTML5 Armazenamento
O HTML5 trouxe consigo uma alternativa mais

flexvel utilizao de cookies, permitindo o
armazenamento de um maior volume de
dados, de forma mais segura e tambm mais
rpida: os objectos de armazenamento local
(local storage).
Com o local storage, todas as pginas com a
mesma origem (domnio e protocolo) podem
partilhar os mesmos dados.
9-May-16
CDM - RSM2 - 2015/16
180
90
5/9/16
HTML5 Armazenamento
Os objectos de local storage dividem-se em

dois tipos de objectos distintos (ambos
associados ao objecto predefinido window):
localStorage, para armazenamento sem limite
de tempo;
sessionStorage, para armazenamento limitado
durao de uma sesso.
Qualquer uma das abordagens funcionam

com os j tradicionais pares atributo-valor
para guardar e ler dados.
9-May-16
CDM - RSM2 - 2015/16
181
HTML5 Armazenamento
Usando como exemplo o objecto

localStorage (sendo que o mesmo se aplica
ao sessionStorage), apresenta-se como
guardar, ler e apagar dados:
Guardar:
localStorage.setItem(utilizador) = xpto;
localStorage.utilizador = xpto;
Ler:
utilizador = localStorage.getItem(utilizador);
utilizador = localStorage.utilizador;
Apagar:
localStorage.removeItem(utilizador);
9-May-16
CDM - RSM2 - 2015/16
182
91
5/9/16
HTML5 Estruturao e Semntica

Em termos semnticos (especificamente ao

nvel da descrio de dados), o HTML5 traz
tambm novidades, sendo destacadas
algumas de seguida.
Para alm dos elementos em (nfase) e
strong (carregado), passa a haver tambm o
elemento mark, que destaca com fundo
diferente os termos em questo.
<p>O <mark>HTML5</mark> traz inmeras
<mark>novidades</mark>.</p>
9-May-16
CDM - RSM2 - 2015/16
183

H um novo elemento para descrever com

maior preciso datas e horas, o time,
especialmente til para eventos e agendas.
<p>... <time datetime=2011-1021T13:30>Aula de Programao para a Web
II</time> ...</p>
H uma barra de progresso nativa

(progress), definindo-se o valor mnimo,
mximo e actual.
<p>J leu <progress min=0 max=100
value=75>75%</progress> dos seus emails.</p>
3-May-16
CDM - RSM2 - 2015/16
184
92
5/9/16

E tambm uma medida (meter) para outras

escalas de valores, como, por exemplo,
temperaturas, definindo-se valores como
valores mais baixos, mais altos, mnimos,
mximos, mdias e valores ptimos.
<p>Hoje est um dia <meter min=0
max=40 low=10 high=30
optimum=20
value=25>quente</meter> de
Primavera.</p>
3-May-16
CDM - RSM2 - 2015/16
185

Quanto estrutura geral de uma pgina web,

o HTML5 traz consigo os seguintes novos
elementos (entre outros):
Seco (section);
Cabealho (header);
Rodap (footer);
Comentrio lateral (aside);
Navegao (nav);
Artigo (article).
3-May-16
CDM - RSM2 - 2015/16
186
93
5/9/16

Em ltima instncia, estes novos elementos

acabam por no serem mais do que casos
especializados de divs (tendo mesmo um
comportamento idntico).
A grande distino ao nvel semntico, ou,
melhor dizendo, do contedo, de forma a
melhor identificar os constituintes de um
documento.
3-May-16
CDM - RSM2 - 2015/16
187

Na prtica, estes novos elementos sero j

suportados implicitamente (desde que o
browser no rejeite elementos no
padronizados do HTML 4.01), no sentido em
que os aceita apesar se no conhecer o seu
significado.
3-May-16
CDM - RSM2 - 2015/16
188
94
5/9/16

Caso no haja suporte explcito, ser

necessrio, pelo menos, atribuir a estes
elementos um comportamento de bloco (para
alm de outras propriedades CSS que venham
a ser necessrias):
section, article, header, footer,
nav, aside, hgroup {
display: block;
}
3-May-16
CDM - RSM2 - 2015/16
189

Caso o browser no suporte de todo os

elementos, ser necessrio cri-los (e, a partir
desse momento, aplica-se o descrito
anteriormente):
document.createElement('section');
3-May-16
CDM - RSM2 - 2015/16
190
95
5/9/16
HTML5 + JS Animao & Interao

Virtualmente toda e qualquer animao

depende da alterao das propriedades do
objecto desenhado, seja a forma ou a posio.
Por exemplo, se no canvas se pretende dar a
iluso de um balo a encher, poderamos jogar
com o incremento do raio de um crculo que
representasse esse balo um shape tween.
Por outro lado, se se pretendesse que o balo
se movimentasse, a propriedade a alterar
seria a sua posio (x, y) um motion tween.
3-May-16
CDM - RSM2 - 2015/16
191

Em qualquer dos dois casos, o aspecto chave

alterar as propriedades de uma forma
sequencial, de forma a criar a iluso de
alterao da forma ou movimento.
Se a animao estiver dependente do
utilizador, uma abordagem como a utilizao
de eventos para alterar as propriedades do
objecto e redesenhar o canvas.
3-May-16
CDM - RSM2 - 2015/16
192
96
5/9/16

No caso de animaes independentes (ou

concorrentes com aces do utilizador), uma
abordagem comum a utilizao da funo
setTimeout().
Esta funo costuma ser utilizada em blocos
de cdigo (outras funes) responsveis pelo
desenho do canvas, com uma (nica)
chamada novamente ao mesmo bloco, com
indicao o intervalo de tempo a aguardar (e
eventuais parmetros das funes).
3-May-16
CDM - RSM2 - 2015/16
193

Segue-se um exemplo da deslocao

horizontal de uma caixa:
var x = 10;
function desenhaCanvas() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = "red";
context.strokeRect(x, 30, 50, 50);
context.fillRect(x + 10, 40, 30, 30);
x += 10;
if (x < 320) {
setTimeout(desenhaCanvas , 40);
}
}
3-May-16
CDM - RSM2 - 2015/16
194
97
5/9/16

Uma alternativa funo setTimeout() a

funo setInterval().
A funo setInterval() difere da outra na
medida em que em vez de uma nica
chamada a uma funo, repete-a a intervalos
constantes.
Note-se que apesar de um comportamento algo
semelhante, as funes no so intermutveis,
havendo situaes em que uma prefervel
outra.
3-May-16
CDM - RSM2 - 2015/16
195

O exemplo anterior do movimento de uma caixa,

modificado para a funo setInterval(), ficaria
assim:
var x = 10;
function init() {
setInterval(desenhaCanvas, 40);
}
x += 10;
if (x < 320) {
}
}
3-May-16
CDM - RSM2 - 2015/16
196
98
5/9/16

Existe ainda uma terceira alternativa que

entretanto se comea a generalizar, a funo
requestAnimationFrame(), que
especificamente direccionada a animaes.
A funo requestAnimationFrame() funciona
de forma prxima da setTimeout(), procurando
repetir as chamadas funo responsvel pelo
desenho de 60 vezes num segundo. Tem,
contudo, a vantagem de no ser rgida nesse
valor, adaptando-se a disponibilidade do browser
para o processamento das instrues.
3-May-16
CDM - RSM2 - 2015/16
197

Novamente, o exemplo anterior do movimento

de uma caixa, modificado para a funo
requestAnimationFrame(), ficaria assim:
var x = 10;
x += 10;
if (x < 320) {
requestAnimationFrame(desenhaCanvas);
}
}
3-May-16
CDM - RSM2 - 2015/16
198
99
5/9/16

Outro aspecto importante, em jogos e em

interaco, a deteco de colises entre
objectos por exemplo, entre um objecto
controlado pelo utilizador e outros existentes
no cenrio.
Tipicamente, a deteco de colises implica
conhecer a rea de um dos objectos e a rea
ou, pelo menos, um dos pontos do outro
objecto.
3-May-16
CDM - RSM2 - 2015/16
199

Por exemplo, no caso de um objecto

rectangular, definido por um par de
coordenadas, largura e altura, um mtodo
possvel para a deteco de colises com um
ponto poderia ser:
[]
this.colide = function (x, y) {
if ((x > this.x) && (x < this.x + this.largura) && (y >
this.y) && (y < this.y + this.altura)) {
return true;
} else {
return false;
}
}
[]
3-May-16
CDM - RSM2 - 2015/16
200
100

Básicos Html5 e JavaScript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Básicos Html5 e JavaScript

Enviado por

Direitos autorais:

Formatos disponíveis

5/9/16

Redes e Sistemas Multimdia II

HyperText Markup Language

CDM - RSM2 - 2015/16

HyperText Markup Language

HTML HyperText Markup Language o

CDM - RSM2 - 2015/16

HyperText Markup Language

Surgiu em 1991 no CERN (Conseil Europen

CDM - RSM2 - 2015/16

HyperText Markup Language

Esta forma de permitir cruzar referncias

CDM - RSM2 - 2015/16

HyperText Markup Language

O HTML sofreu vrias evolues ao longo do

CDM - RSM2 - 2015/16

HyperText Markup Language

Uma pgina HTML constituda por um

CDM - RSM2 - 2015/16

HyperText Markup Language

no corpo da pgina que surge todo o

CDM - RSM2 - 2015/16

HyperText Markup Language

Por exemplo, o texto que se encontre entre

CDM - RSM2 - 2015/16

HyperText Markup Language

A estrutura geral de uma pgina esta:

CDM - RSM2 - 2015/16

HyperText Markup Language

As tags (ou elementos) HTML podem conter

CDM - RSM2 - 2015/16

HyperText Markup Language

A grande maioria das tags permite

CDM - RSM2 - 2015/16

HyperText Markup Language

CDM - RSM2 - 2015/16

HyperText Markup Language

Tambm pode conter meta-informao vria,

CDM - RSM2 - 2015/16

HyperText Markup Language

Seguem-se algumas das tags mais comuns

CDM - RSM2 - 2015/16

HyperText Markup Language

O texto mostrado a carregado.

CDM - RSM2 - 2015/16

HyperText Markup Language

Imagem: <img src=valor />

Esta tag no tem fecho.

CDM - RSM2 - 2015/16

HyperText Markup Language

Hiperligao: <a href=valor>...</a>

Para representar uma hiperligao numa pgina HTML,

CDM - RSM2 - 2015/16

HyperText Markup Language

Com hiperligaes tambm permitida a criao

CDM - RSM2 - 2015/16

HyperText Markup Language

Fonte: <font face=nome da fonte

Note-se que este elemento caiu em desuso, com a

CDM - RSM2 - 2015/16

HyperText Markup Language

Linha separadora: <hr />

Serve para inserir uma barra no documento (funciona

CDM - RSM2 - 2015/16