JS Fundamentos

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.
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.
• 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.
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
Operadores Lógicos Operadores de indicação de tipo
! Not - negação typeof Indica o tipo (string, number, etc)
&& Ande - e
|| Or - ou
Operadores de incremento e Operadores relacionais ou
decremento comparativos
++ 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”
• 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;
• 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>;}
(…)
• 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;}
• 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>;
}
(…)
• 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

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;
}
(…)
• 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.
• Comecemos por decompor o ciclo for:
(…)
for(inicialização; condição_de_paragem;incremento)
{
<bloco de instruções>;
}
(…)
• 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;
}
(…)
• 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);
(…)
• 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.
• 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];
}
(…)
• 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;
}
(…)
• 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)
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
• 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.
• 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
• 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.
• Vejamos exemplos de alguns objetos mais
comuns e uteis desta linguagem
Exemplo 1
•Vejamos um exemplo com objetos e variavei:
Exemplo 2
• 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.
•É 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.
• 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”
• Exemplo de como inserir restrições aos casos
mais comuns em formulários.
Exemplo 5 – “Idade”
• 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.
Exemplo 6 – “Chekbox”
Exemplo 6 – “Radiobutton”
Exemplo 6 – “Dropbox”

JS Fundamentos

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

JS Fundamentos

Diunggah oleh

Hak Cipta:

Format Tersedia

JAVASCRIPT

• Estes podem ser combinados com a linguagem

• Declarando o código JavaScript internamente ou

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

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

• Este tipo de declaração é utilizado quando

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

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

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

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

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

• As variáveis em JS podem ser declaradas de

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

• Apesar da simplicidade com que se declaram

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

• Para fazer tem de analisar qual a resposta dada pelo

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

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

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

• Assim, passou a permitir a possibilidade da

• Alguns dos principais eventos encontram-se na

• De seguida, History Document Location

modelo DOM Textarea

adoptada pelos Password

principais browsers Select

(firefox, i.explorer, Radio

Netescape, etc). Text

• Como podemos verificar, o modelo está disposto

• Mas nem todos os objetos em JS são

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

Anda mungkin juga menyukai