Redes de Comunicação. Módulo IV Desenvolvimento de páginas web estáticas

(1)

Escola Secundária do Monte de Caparica

Redes de Comunicação

Módulo IV – Desenvolvimento

de páginas web estáticas

Curso Técnico de Gestão e Programação de Sistemas Informáticos (33 horas)

(2)

O que é um Website?



Um website é composto por um

conjunto páginas web.



Possuí

diversos

conteúdos

apresentados em diversos formatos,

como texto, imagem, vídeo e som.

(3)

Regras para um Website eficaz



Os conteúdos devem ser orientados

aos utilizadores que constituem o

público-alvo a atingir.



Os

conteúdos

devem

ser

apresentados de forma simples e

directa.

(4)

Uso racional da tecnologia



Conteúdos estáticos – HTML



Conteúdos dinâmicos – DHTML

HTML+JavaScript+CSS

(o DHTML é interpretado pelo

browser, tal como o html, permitindo

adicionar interactividade às páginas

(5)

Recurso a imagens



Ajuda a tornar as páginas web mais

atractivas.



Cuidados a ter :



Não meter muitas imagens



Tamanho do ficheiro não ser muito

grande



Utilizar formatos que originam

ficheiros mais pequenos: PNG,

JPEG e GIF.

(6)

Combinação de cores



A utilização da cor é um aspecto bastante

importante a ter em atenção no

desenvolvimento das páginas web.



As cores e as suas combinações devem ser

seleccionadas com cuidado, para criar

conjuntos mais harmoniosos.



O fundo de uma página web deve

contrastar com o texto e os elementos

gráficos da mesma.

(7)

Introdução ao HTML

 HTML: HyperText Markup Language;

 Linguagem de marcação de Hipertexto;

 É uma linguagem universal destinada à

elaboração de páginas web;

 Suporte a hipertexto e multimédia.

 Os ficheiros onde são guardados os dados das

páginas de abertura ou inicial são, normalmente, designados por default ou index e têm extensões htm ou html.

(8)

Introdução

 HyperText Markup Language

 Hipertexto: navegação entre documentos selecionando

palavras chave realçadas no texto

 markup: anotações ou marcas dentro de um texto, ou

seja, uma passagem em particular que deve ser interpretada

 markup language ou linguagem de marcas: conjunto

de convenções com marcas para codificar textos

 Permite a ligação com outros documentos via links

(9)

Características

 Também chamados de páginas HTML

 cada documento HTML é uma página

 Páginas HTML são visualizadas por um

programa chamado browser;

 Existem editores e conversores específicos para

HTML (Bloco de Notas, HotDog, Visual Workshop,

Crimson Editor, etc.);

 Browsers mais usados: Internet Explorer e

(10)

Tags (Marcações) e

Elementos

 Um documento HTML é um arquivo texto simples que contém marcadores (tags) HTML;

 Geralmente os tags são utilizadas para identificar a estrutura do documento, comandos de formatação e identificar ligações de hipertexto;

 Sintaxe de tags HTML

 Tags são representadas entre < e >

 Geralmente utilizados em pares da forma

 <tag> texto ou objeto </tag>

 Alguns tags requerem opções e deve-se definí-las da

(11)

Estrutura Básica de

uma Página em

(12)

Visão Geral

 Com HTML podemos identificar:

 O título do documento

 Estrutura hierárquica do documento (níveis de

cabeçalho e nomes de secção)

 Listas numeradas, não numeradas  Inserção de imagens

 Ênfase especial para palavras chaves ou frases  Áreas pré-formatadas de documentos

(13)

Esqueleto de um

documento HTML

(14)

Estrutura de um documento

HTML

 Existem 4 pares de tags que se devem sempre utilizar na

página:

 As tags <HTML> </HTML> - englobam o conteúdo da

página (início e fim do texto), para indicar que se trata de um documento HTML.

 As tags <HEAD> </HEAD> - compõem o cabeçalho.

 As tags <TITLE> </TITLE> - elemento do cabeçalho,

representa o título do documento.

 As tags <BODY> </BODY> - serve para indicar o corpo do

texto.

 As tags que podem ser colocadas na parte HEAD são:

 Base;

 Link;

 Meta;  Title;

(15)

Tag BASE

 Não necessita da utilização de tag de final

 Define o URL base a ser utilizado por um

documento

 Na ausência do elemento BASE será utilizado a

URL do próprio documento

 Definição através da cláusula href

 Exemplo:

(16)

Tags LINK e Meta

 Link

 Estabelece a relação hierárquica entre documentos  Exemplo:

 Meta

 Serve para definir atributos identificadores do site, como

por exemplo o autor da página, direitos de autor, palavras-chave.

(17)

Tag <META> cont.

 Atributos da tag Meta:

 Name

 Identifica o identificador que se pode adicionar à página

 Content

 Determina o conteúdo do identificador. Se um item possuir

mais do que um identificador, então é necessário separá-los por vírgulas.

 Exemplo:

(18)

Tag TITLE

 Requer tags de início e fim

 Todo documento HTML deve conter exactamente um título  É responsável por identificar o título da página, colocando-o

(19)

Tags Style e Script

 Style

 Define o estilo embutido na página.  Exemplo:

 Script

 Inclui scripts no documento, ou seja, programação.

 Estes scripts são executados pela ordem pela qual aparecem

na página.

(20)

Definições de Character

Entities

 Alguns caracteres têm um significado próprio

para o html e por isso, são caracteres reservados. (exemplo: símbolo <)

 Para poder visualizar estes caracteres é

necessário recorrer ao uso de character entities.

 Este é composto por:

 o E comercial (&), o nome ou número da entidade,

precedido de cardinal (#) e o símbolo ponto e vírgula (;).

(21)

Definições de Character

Entities cont.

 Exemplos.

Visualização Descrição Nome da _entidade Número da entidade

espaço    

< menor que < <

> maior que > >

& E comercial & &

“ aspas " "

‘ apóstrofe ' '

§ marca de secção § §

(22)

(23)

Cabeçalhos

 Os cabeçalhos servem para marcar visualmente o

início de um tópico no texto.

 No corpo do texto podem ser colocados até seis

cabeçalhos.

 A hierarquia começa em <H1> como o maior

cabeçalho, até ao <H6> como o menor.

(24)

Cabeçalhos (Cont.)

 Exemplo:

<title> Níveis de Cabeçalhos </title> </head> <body> <H1> Texto 1</H1> <H2> Texto 2</H2> <H3> Texto 3</H3> <H4> Texto 4</H4> <H5> Texto 5</H5> <H6> Texto 6</H6>

(25)

Parágrafos

 A tag <P> serve para indicar o início de um novo

parágrafo.

 Se a tag <P> for colocada antes de um

cabeçalho, a marca de parágrafo é ignorada.

(26)

Parágrafos (Cont.)

 Tag:<P Atributos> texto</p>

 Requerem o tag de início, tag de finalização é opcional.

 Utilize o atributo ALIGN para ajustar o alinhamento horizontal do texto dentro do parágrafo.

 <P ALIGN=RIGHT> Alinhamento a direita  <P ALIGN=CENTER> Alinhamento centrado  <P ALIGN=LEFT>Alinhamento a esquerda

(27)

Parágrafos (Cont.)

 Exemplo:

<title> Parágrafos </title> </head>

<body>

<p> Isto é um parágrafo

<p> Isto é um parágrafo</p> </body>

(28)

Texto Pré-formatado

 Utilização dos tags: <PRE> Texto </PRE>.

 Conteúdo de Texto não será interpretado como

comando HTML e será mostrado na forma em que está Digitado com espaçamento, quebra de linhas e quaisquer caracteres.

 Cuidados com a utilização do Caracter TAB - será

substituído pelo número de espaços necessários para ocupar 8 espaços.

(29)

Quebras de Linha

 Tal como as marcas de parágrafo, as quebras de

linha são indicadas por uma tag simples.

 Para abrir uma nova linha, para tal usa-se:

 Tag <BR>

 Exemplo:

 A tag <BR> é uma tag vazia.

(30)

Quebras de Linha (Cont.)

 Exemplo:

<title> Quebras de Linha</title> </head>

Isto<br> é um parágrafo com <br> uma quebra de linha </p>

(31)

Divisões

 Para dividir uma página com linhas horizontais usa-se a tag <hr>.

 O hr não possui tag de fecho.

 O quadro mostra os diversos atributos da tag hr.

Atributo Valor Descrição

align center left right Especifica a posição da linha horizontal. size pixels % Espessura da linha.

(32)

Divisões (Cont.)

 Exemplo: <html> <head> <title>Divisões</title> </head> <body>

<p>o tag hr desenha uma linha horizontal:</p> <hr>

<p>Isto é uma linha horizontal</p> </body>

(33)

Divisões (Cont.)

 Acrescente esta linha ao Exemplo anterior:

(34)

Divisores e Centralização

 Elementos:

 <DIV> </DIV>

 <CENTER> </CENTER>

 Devem ter início e fim

 Atributo:

 ALIGN, pode ser center, left ou right

(35)

Divisores de texto

 Parágrafo:

<P>

e

</P>

 Alinhamento: <P ALIGN=RIGHT>

 Forçando Centralização: <CENTER> </CENTER>

 Quebra de linha: <BR>

 Linha horizontal: <HR>

 Alinhamento: <HR ALIGN=CENTER>  Espessura: <HR SIZE=6>

(36)

Bloco de Texto Indentado

 Permitem alterar a margem dada para o texto

Tag: <BlockQuote> Texto </BlockQuote>

(37)

Comentários

 Para colocar comentários num dado documento,

utiliza-se a tag <!- e a tag de fecho ->.

(38)

(39)

Listas

 As Listas podem ser de três tipos:

 Não-ordenadas (Marcadores);  Ordenadas (Numeradas);

(40)

Listas Ordenadas

 Listas ordenadas são delimitadas pelas tags

<OL> e </OL>.

 Cada um dos seus itens é delimitado pelas tags

(41)

Listas Ordenadas – cont.

 Atributo type

 Permite a alteração da numeração, para outros valores.  Type=1, Números indo-arábicos (1,2,3,…)

 Type=a, Alfabeto minúsculo (a,b,c,…)  Type=A, Alfabeto Maiúsculo (A,B,C,…)

 Type=i, Algorismos romanos minúsculos (i,ii,iii,…)  Type=I, Algorismos romanos maiúsculos (I,II,III,…)

(42)

42

Listas Não-Ordenadas

 L i s t a s n ã o -o r d e n a d a s s ã o d e l i m i t a d a s p e l a s t a g s < U L > e < / U L > .  C a d a u m d o s s e u s i t e n s é d e l i m i t a d o p e l a s t a g s < L I > e < / L I

(43)

Listas Não-Ordenadas –

cont.

 Atributo type

 Permite a alteração do tipo de símbolo utilizado.  Type=square

 Type=disc  Type= circle

(44)

Listas de Definições

 Lista de Definições são delimitadas pelas tag

<dl> e </dl>.

 Os seus itens são delimitados pelas tags <dt> e

</dt>.

 Cada uma das definições é delimitada pelas tags

<dd> e </dd>.

 Exemplo:

<DL>

 <DT> Termo a ser definido </DT>

 <DD> Definição do termo</DD> <p>  <DT> Novo Termo </DT>

(45)

(46)

Definição do Fundo

da Página

(47)

Definição do fundo da

página

 A definição do fundo de uma página pode ser feita através

da:

 Atribuição de uma cor,

 Atribuição de uma imagem.

 Utilizam-se os atributos _BACKGROUND e _BGCOLOR da tag

<body>.

 Podem ser utilizados:

 BACKGROUND, URL da imagem de fundo  BGCOLOR, cor de fundo

 TEXT, cor do texto

 LINK, cor de marcador de ligação

 VLINK, cor de marcador de ligação já visitado

 ALINK, cor de marcador de ligação quando “clicado”

 Cores:

 Nomes: Black, Silver, Gray, White, Green, Red, Purple,

(48)

Tag <BODY>

 Especifica o corpo do documento; a parte que é realmente

visualizada no browser

 <BODY BACKGROUND=“fundo.gif”> indica uma figura de

fundo replicada em toda a página

 <BODY BGCOLOR=#FFFFFF TEXT=#000000

LINK=#FF0000 VLINK=#CC0000 ALINK=#FFFFFF> especifica as cores para texto, fundo e links.

Cor

Branco

Vermelho

Amarelo

Código

#FFFFFF

#FF0000

#FFFF00

(49)

Exemplo para Inserir Imagem

de Fundo

(50)

Exemplo para Inserir Imagem

de Fundo

<title> Definição do fundo da pagina </title> </head>

<p>Isto é o documento com imagem de fundo</p> </body>

(51)

Exemplo para Inserir Cor

de Fundo

(52)

Exemplo para Inserir Cor

de Fundo

<title> Definição do fundo da pagina </title> </head>

<p>Isto é o documento com cor de fundo</p> </body>

(53)

Texto nas Páginas HTML

 A linguagem HTML define vários elementos para

formatar texto, como por exemplo, negrito, itálico, sublinhado,…

(54)

Texto nas Páginas HTML

 Estilo de caracteres

Tag Resultado

<b> Texto a negrito <big> Texto grande

<em> Texto itálico e sombreado <i> Texto itálico

<small> Texto pequeno

<strong> Texto grande negrito <sub> Texto inferior à linha <sup> Texto superior à linha

(55)

Elementos de estilo de

fonte

 Para alterar a fonte, tipo de letra e o seu

tamanho nos documentos HTML, utiliza-se a tag <font> que pode conter os elementos:

 Size;  Color;  Face.

(56)

Exemplo do estilo de fonte

<html> <head> <title>Formatação de texto</title> </head> <body>

<font face=“arial” color="#00FF00" size="4">Olá sou do Sporting</font><br><br> <font face=“verdana” color="blue" size="2">Olá sou do Porto</font><br><br> <font face=“geneva” color="red" size="5">Olá sou do Benfica</font><br><br>

<font face=“consolas” color="#cc00ff" size="15"><b>Grande Susto</b></font><br><br> <hr color=”#ff0000”align=”left” width=”50%” size=”1"><br>

<b> Este texto está a negrito </b><br><br> <i> Este texto está em itálico </i><br><br>

<ins> Este texto está sublinhado </ins><br><br> <del>Risco a meio da frase</del><br><br>

(57)

(58)

Imagens

 São vários os formatos de imagem que podem ser inseridos num documento HTML: Jpeg, gif e Png.

 Para inserir uma imagem num documento HTML, utiliza-se a tag <img>.

 O atributo scr é muito importante, pois sem ele o browser apenas identifica um espaço reservado à imagem mas esta não existe.

(59)

Imagens - Atributos

 Alt – usa-se para definir texto alternativo à

imagem. O texto aparece no caso do browser, não conseguir mostrar a imagem.

 Alinhamento da imagem

 O alinhamento da imagem em relação aos elementos

circundantes, faz-se através do atributo align, que pode assumir os valores right, left, top, middle, Bottom,…

 Contorno

 O atributo Border, permite efectuar o contorno em

(60)

Imagens - Atributos

 Alinhamento da imagem

Atributo Descrição

top Alinha o topo da imagem pelo elemento mais acima da linha

middle Alinha o centro vertical da imagem com a linha de texto

botton Alinha a parte de baixo da imagem com a parte de baixo dos outros elementos

absmiddle Centra a imagem no centro do texto

texttop Alinha o topo da imagem com o topo do texto

(61)

(62)

Tabelas

Para definir tabelas nos documentos HTML utilizam-se as tags <table> e </table>, que podem conter, entre outras, as tags <caption>, </caption>, <tr> e </tr>. Por sua vez, a tag <tr> apenas pode conter as tags <th>, </th>, <td> e </td>, que permitem definir as células da respetiva tabela.

tag Descrição

<table> _{Define uma tabela}

<th> _{Define um cabeçalho numa linha da}

tabela

<tr> _{Insere uma linha numa tabela}

(63)

63

Atributo Valor Descrição

align left; center;right Define o alinhamento horizontal valign top; middle;

bottom Define o alinhamento vertical

bgcolor rgb(x,x,x); #xxxxxx; nomeDaCor

Especifica a cor de fundo

border píxeis Especifica a espessura da linha de contorno

cellpadding píxeis Especifica o espaço em branco entre o texto e os limites da célula,

definindo a área do texto

cellspacing píxeis Especifica o espaço em branco que fica entre células adjacentes

summary texto Fornece um sumário da tabela para

ser lido por software de síntese de voz

width píxeis % Especifica a largura da tabela

colspan número Une horizontalmente duas ou mais células

(64)

Exemplo estrutura básica

das tabelas

<title>Estrutura básica de uma tabela</title>

</head> <body>

<p> Exemplo de uma tabela</p> <table border=2> <tr> <td> Linha 1 coluna 1 </td> <td> Linha 1 coluna 2 </td> <td> Linha 1 coluna 3 </td> </tr> <tr> <td> Linha 2 coluna 1 </td> <td> Linha 2 coluna 2 </td> <td> &nbsp </td> </tr> <tr bgcolor=“green”> <td> Linha 3 coluna 1 </td> <td> Linha 3 coluna 2 </td>

(65)

Unir linhas (rowspan) e colunas

(colspan)

<html>

<td colspan="2" height="100">Logotipo do Site</td> </tr> <tr> <td rowspan="2">Menu</td> <td>Submenu</td> </tr> <tr> <td height="350">Informação</td> </tr> <tr> <td colspan="2"> <p align="right">Rodapé: Assinatura</td> </tr> </table> </body> </html>

(66)

(67)

Frames

 É possível dividir a nossa página em várias

páginas distintas, isto é, muitas páginas a serem mostradas ao utilizador em simultâneo, sem que este se aperceba disso

 Com a ajuda dos frames é possível dividir a

página, como se de uma tabela com células independentes se tratasse

 A tag responsável pela inserção de frames é a

 Nesta tag define-se o número de frames que

(68)

Atributos aceites pelas tags

frameset e frame

 <frameset>

 Rows – define frames em forma de linhas  Cols - define frames em forma de colunas  <frame>

 Name – atribuir um nome ao frame

 Scrolling – permite visualizar ou não a barra de movimento

horizontal/vertical

 Noresize – permite ao utilizador alterar ou não o tamanho

das frames

 Frameborder – mostrar ou omitir a borda  Bordercolor – alterar a cor da borda

(69)

(70)

(71)

(72)

(73)

(74)

(75)

(76)

(77)

iframes

 Os iframes distinguem-se dos frames, visto

serem declarados inline, podendo ocupar apenas uma porção da nossa página principal

 A tag responsável por criar um inline frame é a

 Os atributos que esta tag aceita são:

 Width – definir a largura ocupada pelo iframe  Height – definir a altura ocupada pelo iframe  Frameborder – mostrar ou omitir a borda

(78)

(79)

(80)

Formulários



A possibilidade de receber informação dos

utilizadores através da utilização de

formulários traz alguma versatilidade aos

documentos HTML.



Contudo, não basta criar um formulário e

publicá-lo, é necessário também que exista

do lado do servidor uma aplicação que saiba

lidar com a informação que é enviada pelo

utilizador.



Estas aplicações podem ser desenvolvidas

(81)

A tag form



Para se indicar ao browser que se deseja

criar um formulário, utilizam-se as tags

<form> e </form>.



Estas tags servirão de contentor, onde são

definidos os campos através dos quais se vai

obter a informação e a forma de despoletar

o envio da informação.

(82)

A tag FORM aceita os seguintes

atributos

 action – Url para onde devem ser enviados os dados

do formulário, quando o botão de submit é pressionado (normalmente para um ficheiro php ou asp).

 method - forma como os dados do formulário são

enviados para o servidor. Opções- GET ou POST

 Name – nome atribuído a cada elemento do

formulário

 Target – Onde o url do atributo action será mostrado.

As opções são:

 _self

(83)

Tags: Input, select,

textarea, button

Entre a tag de abertura e fecho de um formulário, ficarão os elementos de interação com o utilizador. Estes elementos podem ser inseridos através das seguintes tags:

<input> - tag que indica o tipo de elemento a ser

inserido (checkbox, radio button, text, button, reset, )

<select> - tag para criar uma dropbox

<textarea> - tag para criar uma textbox com

medidas mais alargadas

(84)

Tag input



A tag <input> é de longe a mais

importante de todas as anteriores, devido

à variedade de elementos que pode inserir



Essa variedade é definida pelo atributo

type



Type – define o tipo de elemento a inserir

ex: type=“text”



Outros valores aceites por type:

(85)

Tag input

 A tag <input> aceita outros atributos para além

do anterior, são eles:

 Name – nome atribuido a cada elemento do

formulário

 Value – valor por defeito de elemento e forma de

captar dados pelo programador

(86)

(87)

(88)

(89)

(90)

Introdução às Cascaded Style

Sheets (CSS)



As folhas de estilos em cascata (CSS)

definem a aparência e a formatação do

conteúdo em páginas web



Permitem maior controlo sobre o modo

como o conteúdo é apresentado nos

browsers



Estas surgiram com a evolução e o

crescimento da web



Em que o HTML foi sendo explorado até ao

(91)

Definição de estilos –

Externamente (numa folha de

estilos externa)



Uma folha de estilos externas, ou seja,

criada externamente ao documento em

HTML,

corresponde

à

opção

mais

adequada e que melhor se adapta à

criação de estilos para aplicar em vários

documentos



Podendo aplicar os mesmos estilos de

forma consistente num website inteiro



Esta é constituída, apenas, pela lista dos

(92)

Definição de estilos –

Externamente (numa folha de

estilos externa)



Posteriormente, pode ser integrada em

vários documentos HTML através da tag

<link>, que deverá ser colocada dentro

das tags <head> e </head>.

<head>

<link rel=“stylesheet” type=“text/css”

href=“nome_do_ficheiro.css”

title=“style”>

</head>

(93)

93

Exemplo do código de uma

folha de estilos externa

H2 { font-family: Comic Sans Ms; color: #00FF00; } P { font-family: Courier; color: red; } h1 { FONT-SIZE: 8pt; COLOR: #FFFFFF; FONT-FAMILY: times new roman;

}

<title>Folha de estilo externa</title> <link rel=“stylesheet” t y p e = “ t e x t / c s s ” h r e f = “ e x t e r n o . c s s ” > </head> <body>

<h2>Texto com letra de cor

v e r d e < / h 2 > <p>Texto com letra de cor

v e r m e l h o < / p > <h1><a href="index.html">Índex < / a > < / h 1 > Exemplo do código de um

folha de estilos externa

Exemplificação do código de um documento HTML com referência a uma folha de estilos externa

(94)

Definição de estilos –

Internamente (numa folha de

estilos interna)

 Uma folha de estilos interna corresponde à

definição de um conjunto de etilos a aplicar internamente apenas a um documento.

 Para aplicar os estilos é necessário defini-los, em

cada documento HTML, entre as tags <style> e

</style>.

 Estas tags deverão, também, ser colocadas

dentro das tags <head> e </head>.

<head>

(95)

Exemplo do código de uma

folha de estilos interna

(96)

Exemplo código folha estilos contendo a

aplicação de diferentes espaçamentos

dentro das células

(97)

(98)

(99)

Linguagem javascript



A linguagem javascript confere a uma

página HTML dinamismo e interactividade

através dos seus scripts



Estes podem ser combinados com a

linguagem HTML de duas formas:



Declarando

o

código

Javascript

internamente (juntamente com o código

HTML)



Recorrendo a um ficheiro externo de

(100)

Declaração interna

 Podem ser inseridas no cabeçalho <head>

“exemplo 1” ou dentro do corpo <body> “exemplo 2”

 Exemplo 1:

 Este tipo de declarações é usada quando queremos

carregar os scripts antes de ser possível a sua utilização.

(101)

Declaração interna e

externa

 Exemplo 2:

 Este tipo de declarações é utilizada quando pretendemos

que uma página ao carregar execute os scripts

 Declaração externa

 Se pretendermos declarar os scripts externamente, isto

é, num ficheiro à parte, basta para isso incluir uma referência no código html sobre a localização desse ficheiro

(102)

Operadores aritméticos

Operador Descrição Exemplo Resultado

+ Adição 2+2 4 - Subtracção 5-2 3 * Multiplicação 4*5 20 / Divisão 15/5 5/2 3 2.5 % Modulus (resto da divisão) 5%2

10%8 10%2

1 2 0 ++ Incrementar (aumentar uma

(103)

Operadores de

comparação

Operad

or

Descrição

Exemplo Resultad

o

== _{é igual a} 5==8 false != _{não é igual a} 5!=8 _true > _{é maior do que} 5>8 _false < é menor do que 5<8 true >= é maior ou igual a 5>=8 false <= é menor ou igual a 5<=8

(104)

Operadores lógicos

Operado

r

Descrição

Exemplo

&& e (and) x=6 y=3 (x < 10 && y > 1) dá true || ou (or) x=6 y=3 (x==4 || y==4) dá false

(105)

Declaração de variáveis

 As variáveis podem ser declaradas de duas

formas:

 Procedidas da palavra var…

var idade=18;

var nome=“Joana”;

 …ou diretamente

idade=18;

nome=“Joana”;

 A palavra var não é obrigatória, com exceção da

situação em que a variável não toma qualquer valor

(106)

Estruturas de controlo

 Estrutura de decisão if-else

if (condição)

{<bloco de instruções>;} else

(107)

Estruturas de controlo

 Estrutura de decisão switch-case

switch (expressão) {

case valor1:

<bloco de instruções>; break case valor2:

<bloco de instruções>; break (…)

case valorN:

<bloco de instruções>; break default:<bloco de instruções>; }

(108)

Ciclos

 For

for

(inicialização; condição_de_paragem; incremento) { < bloco de instruções > }  While e do-while while (condição) { < bloco de instruções > } do {< bloco de instruções >} while (condição); < bloco de instruções >

(109)

Funções

 São definidas pela palavra function podendo,

receber ou não parâmetros, bem como, retornar ou não valores

 A estrutura é a seguinte:

function nome_da_funcao(parametro1, parametro2, …) {

<bloco de instruções>;

return [valor ou expressão]; }

(110)

Eventos

 A linguagem HTML evoluiu de forma a aceitar a

inclusão de eventos em Java Script.

 Assim, passou a permitir a possibilidade da

programação interativa em páginas web

 Alguns dos principais eventos encontram-se na

tabela seguinte:

onClick onSubmit MouseOver onUnload

onDragDrop KeyUp MouseUp onChange

onKeyDown MouseDown Move onReset

(111)

JavaScript e formulários

 Os formulários são a forma mais comum de

interação entre uma página Web e o seu visitante

 Usualmente servem para nos registarmos num

site, enviarmos uma mensagem para um fórum, etc

 A linguagem Java Script ficará encarregue de

validar (verificar) se os conteúdos desses

formulários respeitam certas regras de

preenchimento, impedindo a submissão dos dados até que estes se encontrem corretos

 No exemplo seguinte o utilizador deverá

(112)

JavaScript e formulários

<head>

if(form1.nome.value=="")

alert("A caixa encontra-se em branco");

else

{var testar=form1.nome.value; alert("O seu nome é" +testar);} } </script> </head> <body> <form name="form1"> Nome:<input type="text" name="nome">