0% acharam este documento útil (0 voto)

57 visualizações

0793 3 JavaScript

JavaScript permite adicionar dinamismo e interatividade às páginas HTML através de scripts. Os scripts podem ser declarados internamente na página ou em arquivos externos, e contêm operadores, variáveis, estruturas de controle e funções semelhantes às de outras linguagens como C e C++. JavaScript também suporta eventos que permitem a programação interativa em páginas da web.

Enviado por

alfredo.figueiras3325

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

57 visualizações

0793 3 JavaScript

Enviado por

alfredo.figueiras3325

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 45

JAVASCRIPT

JavaScript (Jscript)
• A linguagem JavaScript confere a uma página
HTML dinamismo e interatividade, através dos
seus scripts.

• Estes podem ser combinados com a linguagem

HTML de duas formas.

• Declarando o código JavaScript internamente ou

recorrendo a um ficheiro externo de extensão .js
JavaScript - Declarações
• À semelhança do que ocorria em CSS, os scripts
JS podem ser declarados internamente ou
externamente, embora quando internamente,
não exista a possibilidade de o fazer inline.

• As vantagens de cada uma delas são as mesmas

que anteriormente enunciadas para os estilos
CSS
JavaScript – Declaração Interna
• As declarações internas podem ser inseridas no
cabeçalho <head> ou dentro do corpo <body>
Exemplo 1
<head>
<script language=“JavaScript”> (código JS aqui)
</script>
</head>

• Este tipo de declaração é usada quando queremos

carregar os sripts antes de ser possível a sua
utilização.
• Usando para eventos ou para declaração de funções.
JavaScript – Declaração Interna

Exemplo 2
<body>
<script language=“JavaScript”> (código JS aqui)
</script>
</body>

• Este tipo de declaração é utilizado quando

pretendemos que uma página ao carregar
execute os scripts.
JavaScript – Declaração Interna
• A declaração pode englobar várias declarações e em sítios
diferentes do documento.

• Não existe limite de número de declarações de scripts num

documento HTML.

• O atributo language da tag <script> pode ser omitido, visto os

brwosers atualmente conseguirem distinguir
automaticamente o tipo de linguagem que o script está a
utilizar.

• Contudo, o mais correto será declarar como indicado nos

exemplos anteriores.
JavaScript – Declaração externa
• Se pretendermos declarar scripts externamente, isto é,
num ficheiro à parte, basta para isso incluir uma
referência no código HTML sobre a localização desse
ficheiro.
Exemplo 3
<body>
<script src=“script.js”></script>
</body>

• Este é apenas um exemplo de onde colocar o script. Para

todos os efeitos, deve-se colocar a referência externa na
parte do documento onde normalmente o escrevemos se
o fizéssemos de forma interna.
JavaScript – Operadores
• Vejamos alguns elementos básicos da linguagem
JavaScript.

• Estes são responsáveis por realizar operações

aritméticas, incrementar ou decrementar
valores, comparar expressões ou determinar o
tipo de variáveis.
JavaScript – Operadores
Operadores Aritméticos Operadores aritméticos de atribuição
Operador Descrição Operador Descrição
+ Adição += Adição seguida de atribuição
- Subtração -= Subtração seguida de atribuição
* Multiplicação *= Multiplicação seguida de atribuição
/ Divisão /= Divisão seguida de atribuição
% Resto da divisão inteira %= Resto da divisão inteira seguida de
atribuição
JavaScript – Operadores
Operadores Lógicos Operadores de indicação de tipo
Operador Descrição Operador Descrição
! Not - negação typeof Indica o tipo (string, number, etc)
&& Ande - e
|| Or - ou
JavaScript – Operadores
Operadores de incremento e Operadores relacionais ou
decremento comparativos
Operador Descrição Operador Descrição
++ Incremento == Igual a
-- Decremento != Diferente de
< Menor que
> Maior que
<= Menor ou igual que
>= Maior ou igual que
JavaScript – Declaração de variáveis

• As variáveis em JS podem ser declaradas de

duas formas:
• Precedidas da palavra var…
var idade=18;
var nome=“Joana”;

• Ou diretamente
idade=18;
nome=“Joana”
JavaScript – Declaração de variáveis

• Como se pode verificar, a palavra var não é

obrigatória, com excepção da situação em que a
variável não toma qualquer valor.
var idade;
JavaScript – Declaração de variáveis

• Apesar da simplicidade com que se declaram

variáveis, existem algumas regras que devem ser
respeitadas:
• As variáveis têm de começar obrigatoriamente por
uma letra ou enderscore;
• Linguagem JavaScript é case-sensitive ex.: variável
teste!=Teste!=TeStE (!= significa diferente).
JavaScript – Estruturas de Controlo
• As estruturas de controlo usadas em JavaScript são
as mesmas que as utilizadas nas linguagens C e C++.
Servem para controlarmos as sequencias das ações
realizadas pelo nosso código. Comecemos por
conhecer a estrutura de decisão if-else:
(…)
if (condição)
{<bloco de instruções>;}
else
{<bloco de instruções>;}
(…)
JavaScript – Estruturas de Controlo
• Esta estrutura de controlo é utilizada quando
pretendemos executar ações distintas dependendo
da condição imposta. Por exemplo, num sistema de
passagem de cartão magnético numa porta de
segurança é verificado se o cartão é válido. Se assim
for abre, caso contrário mostra um erro de cartão
inválido.
(…)
if (cartão válido)
{abre a porta;}
else
(…) {Mostra mensagem de erro;}
JavaScript – Estruturas de Controlo
• Outra 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>;
}
(…)
JavaScript – Estruturas de Controlo
• Esta estrutura pode ser utilizada nas mesmas circunstancias
da anterior, embora seja mais indicada para situações onde
existam mais que duas opções. Por exemplo, ao preenchemos
um questionário on-line perguntam-nos, de entre uma lista de
5 desportos, qual é o nosso preferido.

• De seguida, o programa irá fazer uma análise estatística

baseado nos resultados desta pergunta.

• Para fazer tem de analisar qual a resposta dada pelo

utilizador.

• Neste caso pode-se utilizar uma estruturas switch-case

JavaScript – Estruturas de Controlo
switch (resposta) {
case futebol: futebol + 1; break;
case basquetebol: basquetebol + 1; break;
case andebol: andebol + 1; break;
case voleibol: voleibol + 1; break;
case ténis: ténis + 1; break;
default: mensagem de erro;
}
(…)
JavaScript – Estruturas de Controlo
• Para garantir que a estrutura de decisão apenas
executa um dos “case”, no final de cada um existe a
instrução break.

• No caso de nenhuma das opções se verificar existe

uma secção da estrutura que nos permite colocar
uma instrução a executar por defeito (default:).

• Das estruturas de decisão passamos aos ciclos. Estes

servem para repetirmos um pedaço de código um
certo número de vezes.
JavaScript – Estruturas de Controlo
• Comecemos por decompor o ciclo for:
(…)
for(inicialização; condição_de_paragem;incremento)
{
<bloco de instruções>;
}
(…)
JavaScript – Estruturas de Controlo
• Por exemplo, imaginem que pretendíamos fazer
a soma das idades de todos os alunos (16 no
total) de uma turma.

(…)
for(desde aluno1;até aluno16;incrementar1)
{
Somar idades;
}
(…)
JavaScript – Estruturas de Controlo
• Os ciclos seguintes são idênticos ao anterior mas
não têm contadores (incremento).
• Apenas se repetem enquanto se verificar a
condição
• Ciclos while e do-while:
(…) (…)
while (condição) do
{<bloco de instruções>;} {>bloco de instruções>;}
(…) while (condição);
(…)
JavaScript – Estruturas de Controlo
• A grande diferença entre ciclos While e Do-
While é que o segundo executa sempre pelo
menos uma vez o bloco de instruções que se
encontra dentro do ciclo, já que a condição de
paragem se encontra no final e não no inicio
como o ciclo While.
JavaScript – Estruturas de Controlo
• Aplicando o exemplo do ciclo For a estes dois
ciclos resultaria em algo do género:
(…) (…)
while (existirem alunos) do
{somar idades;} {somar idades}
(…) while (existirem alunos);
(…)
JavaScript – Funções
• As funções em JS são semelhante às estruturas das
funções nas linguagens C e C++. São definidas pela
palavra fuction podendo, receber ou não
parâmetros, bem como, retornar ou não valores.
• A estrutura de uma função encontra-se de seguida:
(…)
function nome_da_funcao(parâmetro1, parâmentro2, …)
{
<bloco de instruções>;
return [valor ou expressão];
}
(…)
JavaScript – Funções
• As funções permitem que os códigos fiquem mais percetíveis e
menos confusos.
• Por outro lado, deixa de haver necessidades de repetir um certo
pedaço de código ao longo do programa.
• Muitas vezes necessitamos de aplicar o mesmo código inúmeras
vezes a diferentes partes de um programa.
• Em vez de repetirmos o código substituímo-lo por uma função
• O código pretendido fica dentro da função sendo esta chamada
sempre que necessário, ao longo do programa.
(…)
function soma(valor1, valor2)
{
Var soma_val = valor1 + valor2;
return soma_val;
}
(…)
JavaScript – Funções
• A função anterior, recebe dois parâmetros, isto
é, dois valores que irá somar.
• O resultado dessa soma será guardado na
variável soma_val, que por sua vez, será
retornado para o ponto do código onde a função
foi chamada.
JavaScript – Eventos
• A linguagem HTML evoluiu de forma a aceitar a
inclusão de eventos em JS.

• Assim, passou a permitir a possibilidade da

programação interactiva 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
KeyPress MouseMove Resize
onSelect MouseOut onLoad
JavaScript – Principais objetos
• Neste ponto, volta-se a referir a linguagem HTML.
• É possível aceder e manipular documentos HTML
através de objetos standard desenvolvidos e
definidos pela W3C na plataforma DOM –
Documente Object Model.
• Estes objetos e outros podem ser manipulados pela
linguagem JS, visto enta ser orientada para o
objeto.
• Contudo, na linguagem HTML os objetos recebem o
nome de elementos (ex: form)
JavaScript – Principais objetos
Windows

• De seguida, History Document Location

representam-se os
principais objetos do
Anchor Form Link

modelo DOM Textarea

adoptada pelos Password

principais browsers Select

(firefox, i.explorer, Radio

Netescape, etc). Text

Button

Reset

CheckBox

Submit
JavaScript – Principais objetos
• No modelo anterior, atribui-se particularmente
atenção aos objetos relacionados com
formulários.

• Como podemos verificar, o modelo está disposto

de uma forma hierárquica, pelo que o acesso a
objetos de mais baixo nível tem de ser acedidos
através dos de alto nível.
JavaScript – Principais objetos
• Por exemplo, para aceder ao conteúdo de uma
caixa texto com o nome caixatxt inserida
dentro de um formulário de nome form1 seria
necessário o codigo seguinte:

documente.form1.caixatxt.value
Ou abreviado (no caso de ser a própria página)
form1.caixatxt.value
JavaScript – Principais objetos
• O acesso aos objetos de baixo nível faz-se através
de pontos, desde o de mais alto nível até ao
objeto que pretendemos.

• Mas nem todos os objetos em JS são

relacionados com formulários.
JavaScript – Principais objetos
• Vejamos exemplos de alguns objetos mais
comuns e uteis desta linguagem
Exemplo 1
JavaScript – Principais objetos
•Vejamos um exemplo com objetos e variavei:
Exemplo 2
JavaScript – Principais objetos
• No exemplo anterior a forma de imprimir mudou
ligeiramente.
• Sempre que se pretende imprimir texto ou código
HTML, fazemo-lo entre aspas. Contudo, com as
variáveis isso não é possível ou seriam encaradas
como texto. Assim, para além das varáveis não se
encontrarem envolvidas em aspas também têm de
ser concatenadas.
• Concatenar é necessário quando se mistura texto
com variáveis. Em JS para concatenar usa-se o sinal
+, daí os resultados de peso e polivar do exemplo
anterior terem sido concatenados.
JavaScript – Principais objetos
•É ainda possível usar os objetos com funções:
Exemplo 3
JavaScript – Formulários
• Com o intuito deos
nomeadamente fazer
que aabordam
ligação aPhP
futuros módulos,
e Base de Dados
SQL, a aplicação de javascript será centrada
principalmente em formulários.
• Como já foi referido, os formulários são a forma mais
comum de interação entre a página Web e o seu
visitante.
• Normalmente,
enviarmos umaservem par nos
mensagem registarmos
para um fórum,num site,
realizamos
uma candidatura a um emprego, responder a um
inquérito, etc.
• A linguagem
conteúdos JS ficará
desses encarregue
formulários de validar
respeitam se os
certas regras de
preenchimento, impedindo a submissão dos dados até
que estes se encontrem corretos.
JavaScript – Formulários
• No exemplo seguinte o utilizador deverá
preencher uma caixa de texto com o seu nome,
sendo este campo alvo de verificação.
Exemplo 4 – “Nome”
JavaScript – Formulários
• Exemplo de como inserir restrições aos casos
mais comuns em formulários.
Exemplo 5 – “Idade”
JavaScript – Formulários
• O campo do formulário onde se preenche a
idade vai ser testado, duas situações de erro são
ponderadas:
▫ Se não preencheu o campo;

▫ IsNaN(), abreviatura de “is not a number”, verifica

se o que se encontra dentro de parenteses não é
um número.
JavaScript – Formulários
Exemplo 6 – “Chekbox”
JavaScript – Formulários
Exemplo 6 – “Radiobutton”
JavaScript – Formulários
Exemplo 6 – “Dropbox”