Scribd
Carregar
31 visualizações11 páginas

Aula 3

O documento apresenta conceitos fundamentais de JavaScript, incluindo operadores, arrays, ciclos e métodos da API. Exemplos práticos demonstram como usar operadores para manipular variáveis, como acessar elementos em arrays e como iterar sobre arrays usando ciclos. Também aborda o uso de eventos em elementos HTML e a referência 'this' em contextos de eventos.

Enviado por

George Games
Direitos autorais
© © All Rights Reserved
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
31 visualizações11 páginas

Aula 3

O documento apresenta conceitos fundamentais de JavaScript, incluindo operadores, arrays, ciclos e métodos da API. Exemplos práticos demonstram como usar operadores para manipular variáveis, como acessar elementos em arrays e como iterar sobre arrays usando ciclos. Também aborda o uso de eventos em elementos HTML e a referência 'this' em contextos de eventos.

Enviado por

George Games
Direitos autorais
© © All Rights Reserved
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/ 11

Laboratório de Aplicações Interativas

LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA - 2017/2018

Aula 3

Docente: Nuno Palma / [email protected]


Javascript

Operadores
Em javascript existe um conjunto variado de operadores que permite
realizar operações entre valores ou variáveis.

== compara a igualdade entre dois valores


!= compara a diferença entre dois valores
> compara se um valor é maior que outro
< compara se um valor é menor que outro
++ incrementa uma unidade
-- decrementa uma unidade
+= adiciona um valor ao valor já guardado

var idade = 21; //variável "idade" guarda 21


idade++; //variável "idade" passa a guardar 22
idade += 5; //variável "idade" passa a guardar 27
Javascript

Arrays
Um array é um tipo de variável que permite guardar múltiplos
valores. Os vários valores guardados num array podem ser referidos
através de um índice numérico.
Os índices atribuídos aos valores guardados num array começam em
zero.

//Guardar na variável "nomes" um array com 3 valores


var nomes = ['João','Maria','Artur'];

var nome1 = nomes[0]; //Guarda João na variável nome1


var nome2 = nomes[2]; //Guarda Artur na variável nome2

No exemplo apresentado podemos ver como é possível referir, através do


seu índice, um valor guardado num array.
Javascript

array.length
A propriedade length existe em todas as variáveis do tipo array e
guarda o número de elementos contidos nesse array.

var nomes = ['João','Maria','Artur'];

//Guardar na variável "total" o número de elementos do array


//"nomes"
var total = nomes.length;

No exemplo acima a variável "total" guardaria o 3 pois esse é o


número de elementos contidos no array "nomes".
Javascript

Ciclos (ou Loops)


Os ciclos são instruções que permitem executar várias vezes um
determinado bloco de código. Existem vários tipos de ciclos em
javascript como, por exemplo, o ciclo for ou o ciclo while.

Ciclo for
O ciclo for permite executar várias vezes um bloco de código
mediante a definição de três expressões.

for( expressão1 ; expressão2 ; expressão3 ){


//Aqui ficará o código a executar em cada repetição
}

expressão1 - expressão executada antes do ciclo começar


expressão2 - condição que define o número de repetições do ciclo
expressão3 - expressão executada depois de cada repetição do ciclo
Javascript

Ciclo for
Exemplo

for( i=0; i<5; i++ ){


alert(i);
}

i=0 - antes do ciclo começar a variável i guarda 0


i<5 - o ciclo deverá executar enquanto i for menor que 5
i++ - no fim de cada volta do ciclo a variável i será incrementada em 1
unidade

Neste exemplo o ciclo será repetido 5 vezes pois se a variável i


começa por guardar 0 e é incrementada em 1 unidade no fim de cada
repetição, a expressão i<5 só será verdadeira durante 5 repetições. Neste
exemplo iriam acontecer 5 alertas apresentando os números 0, 1, 2, 3 e 4.
Javascript

Ciclos e arrays
Os ciclos são muitas vezes utilizados para iterar (percorrer) um array.
Tendo em conta que os arrays são variáveis que guardam vários
valores, é possível criar uma repetição que faça algo com cada um
desses valores através da utilização de um ciclo.

var alunos = ['Vanessa','Artur','Maria','Joaquim'];

for( i=0; i<alunos.length; i++ ){


alert( alunos[i] );
}

No exemplo acima o ciclo irá repetir tantas vezes quanto o número de


elementos do array alunos. Em cada repetição do ciclo irá acontecer
um alerta das vários elementos do array.
Javascript API

getElementsByTagName()
Este método devolve um conjunto de elementos com o mesmo
"nome de tag", ou seja, do mesmo tipo.

var imagens = document.getElementsByTagName('img');

for( i=0; i<imagens.length; i++ ){


imagens[i].addEventListener('click',function(){
alert('Eu sou uma imagem');
});
}

Neste exemplo a variável "imagens" guarda um conjunto de


elementos no formato de array. Através da criação de um ciclo é
associado um evento de click a cada um dos elementos.
Javascript API

getElementsByClassName()
Este método devolve um conjunto de elementos com uma
determinada class.

var botoes = document.getElementsByClassName('botao');

for( i=0; i<botoes.length; i++ ){


botoes[i].addEventListener('click',function(){
alert('Eu sou um botão');
});
}

Neste exemplo a variável "botoes" guarda um conjunto de elementos


no formato de array. Através da criação de um ciclo é associado um
evento de click a cada um dos elementos.
Javascript

this
A expressão this existe em muitas linguagens orientadas a objectos como é o
caso do javascript. Esta expressão refere-se à instancia actual do objecto ou
"ao próprio objecto". Esta expressão pode ter diferentes significados
consoante o âmbito em que é aplicada.

var botoes = document.getElementsByClassName('botao');

for( i=0; i<botoes.length; i++ ){


botoes[i].addEventListener('click',function(){
this.style.background = '#000';
});
}

Neste exemplo é atribuído um evento de click a todos os elementos com a


class 'botao' que fará alterar a cor de fundo do próprio elemento clicado.
Neste caso, dentro da função addEventListener(), a expressão this refere-se
ao próprio elemento clicado.
Exercício 3

www.escslab.pt/lai/aula3.zip

Você também pode gostar