2º Semestre 2023/24
JavaScript 1
Introdução ao JavaScript
JavaScript 2
➢ Linguagem utilizada para adicionar comportamento as
páginas web.
➢ Não têm relação com a linguagem de programação java.
➢ Pode alterar os contéudos de uma página web no seu
carregamento ou em resposta a alguma acção do utilizador.
➢ É uma linguagem client side ou seja é executado no cliente
(web browser).
Adição no documento HTML 3
➢ Internal: o código JavaScript fica entre a tag <script> e </script>
<body>
<script>
alert(‘Hello World’);
</script>
</body>
➢ External: o código JavaScript fica num ficheiro externo com
extensão .js e depois referencia-se esse ficheiro tal como um
ficheiro .css
<script src="script.js"></script>
Comandos de Saída JavaScript 4
Output
➢ alert(): escreve o contéudo numa caixa de alerta
➢ document.write(): escreve o contéudo no documento HTML
Nota: Se for utilizado após a página estar
carregada remove todo o conteúdo HTML.
Por isso deve ser utilizado apenas para efeito de
testes.
➢ innerHTML(): escreve o contéudo num elemento HTML
➢ console.log(): escreve o contéudo na consola do browser
JavaScript 5
➢ Sintaxe: conjunto de regras que ditam como devemos escrever
um programa em JavaScript
➢ Um programa é composto por um conjunto de instruções e
estas podem ser:
◆ Variáveis ◆Palavras Reservadas
◆Operadores ◆Comentários
◆Expressões
➢ Uma instrução termina sempre com um ;
JavaScript - Varíaveis 6
➢ JavaScript é untyped ou seja quando declaramos uma variável
não é necessario especificar o seu tipo.
➢ Para declarar varíaveis usamos a keyword(palavra reservada) var
➢ O var permite no momento da execução do código determinar
qual o tipo de dados da variável
<script>
var x = 10;
var disciplina = “Aplicações Web”;
</script>
JavaScript - Varíaveis 7
➢ O nome das variáveis podem conter nomes mas não podem
começar com um número.
➢ Exemplos válidos ➢ Exemplos Inválidos
▪ x1 ▪ 4Teste
▪ y2 ▪ 2give
▪ gift4you
▪ 1ForAll
JavaScript - Varíaveis 8
➢As variáveis não podem ter operadores matemáticos ou
lógicos.
➢ Exemplo inválidos:
▪ nome-completo
▪ boxes+bags
▪ preco*5
JavaScript - Varíaveis 9
➢ As variáveis não podem conter espaços em branco
➢ O nome das variáveis não podem ser palavras resrvadas do
JavaScript mas podem conter palavras reservadas.
➢ Exemplo inválidos: ➢ Exemplo Válidos:
▪ function ▪ theFunction
▪ char ▪ myVar
▪ class ▪ forLoop
▪ for
▪ var
➢ O nome das variáveis são case-sensitive. MyData, myData,
mydata, MYDATA são variáveis diferentes.
JavaScript - Operadores 10
➢ Operadores aritméticos
▪ Binários
▪ Incremento ou decremento
JavaScript - Operadores 11
➢ Operadores relacionais
JavaScript - Operadores 12
➢ Operadores de atribuição
❖ Operador de atribuição normal: =
❖ Operadores de atribuição compactos
JavaScript - Operadores 13
➢ Operadores lógicos
JavaScript - Operadores 14
➢ O operador + quando utilizado com strings concatena os
valores em causa
▪ Exemplo
▪ Qual o resultado disto?
▪ Jose Antunes
JavaScript – Tipos de Dados 15
➢ Numa linguagem de programação um tipo de dados é definido pela:
▪ Gama de valores que pode representar e pelas
▪ Operações que sobre eles se podem efectuar
➢ Cada linguagem de programação disponibiliza ao programador um conjunto de
tipo de dados próprio.
➢ Uma variável em JavaScript pode guardar valores dos seguintes tipos de
dados:
➢ Number ➢ Array
➢ String ➢ Object
➢ boolean
JavaScript – Numbers 16
➢ Para o JavaScript o tipo para os números é sempre o float 64 bits
ao contrário de outras linguagens.
➢ Os números são guardados como vírgula fluatuante precisão dupla
➢ Os números podem ser inscritos com ou sem casas decimais
var nota = 15;
Var nota = 15.7;
➢ Por definição o JavaScript apresenta os números na base 10 mas podemos utilizar o
metodo .toString() para mudar isso.
var numero = 128;
numero.toString(base que pretendemos);
JavaScript – Numbers 17
➢ NaN – Not a Number : é uma palavra reservada do JavaScript que indica que um valor não é
um number
❑ Exemplo
var x = 100 / "Tacuara“
alert(x); // imprime NaN (Not a Number)
var z = 100 / "10"; // o z já será um number
➢ isNaN(): é uma função/ método que permite verificar se um dado valor é um number ou não.
var x = 100 / "Tacuara"; // o x será um NaN (Not a Number)
isNaN(x); // devolve true uma vez que x não é número
JavaScript
18
Funções para o tipo Number
➢ As funções para o tipo de dados Number ajudam-nos a realizar operações sobre os
números.
➢ Existem dois tipos de métodos(funções):
❑ Globais: podem ser usados em qualquer tipo de dados
▪ Number() : converte uma variável num número
▪ parseFloat() : converte o argumento recebido para um float
▪ parseInt() : converte o argumento recebido para um inteiro
❑ Específicos para um Number: são utilizados para o tipo de dados Number
▪ toString() : devolve um número como String
• Existem outros métodos para além do toString()
JavaScript
19
Funções para o tipo Number
➢ Number(): pode ser utilizado para converter varáveis em numbers
JavaScript
20
Funções para o tipo Number
➢ parseInt(): converte uma string em number, aceita espaços em brancos mas apenas
devolve o primeiro número
parseInt("10"); // devolve 10
parseInt("10.33"); // devolve 10
parseInt("10 20 30"); // devolve 10
parseInt("10 kwanzas"); // devove 10
parseInt("kwanzas 10"); // devolve um NaN porque não é possível
converter a string kwanzas para number
JavaScript – String 21
➢ As Strings são utilizadas para armazenar e manipular texto.
var disciplina = “Aplicações Web";
➢ O texto pode estar entre aspas ou plicas
var disciplina = "Aplicações Web";
ou
var disciplina = ' Aplicações Web';
JavaScript – String 22
Propriedades
➢ String Length: A propriedade length devolve-nos o tamanho de String
➢ Qual o resultado disto?
JavaScript – String 23
Funções
➢ As funções ajudam o programador a manipular as strings. O JavaScript têm
muitas funções para esse efeito são algumas delas:
❖ charAt(): devolve-nos o caracter que se encontra na posição(índice) que
passarmos como argumento.
➢ Qual o resultado disto?
á
JavaScript – String 24
Funções
❖ concat(): junta duas ou mais strings e devolve uma nova string
➢ Qual o resultado disto?
A função concat permite juntar duas ou mais strings!!!!
JavaScript – String 25
Funções
❖ indexOf(): devolve a primeira posição ou índice em que ocorre um caracter de
uma string
➢ Qual o resultado disto?
15
Nota: se o texto não for encontrado devolve -1
JavaScript – String 26
Funções
❖ replace(): substitui um valor numa string por outro valor
➢ Qual o resultado disto?
Hoje vamos aprender JavaScript
JavaScript – String 27
Funções para Extração
❖ slice(start, end)
❖ substring(start, end)
❖ substr(start, lenght)
➢ slice(): o método slice copia até, mas não incluindo o elemento, indicado por fim.
➢ Qual o resultado disto?
aprender
➢ O slice() aceita posições negativas
Nota: Se start for negativo, é tratado como length + start, onde length é o comprimento
da string. Se end for negativo, é tratado como length + end onde length é o comprimento
da string
JavaScript – String 28
Funções para Extração
➢ substring(): o método substring é semelhante ao slice
➢ Qual o resultado disto?
aprender
➢ O substring() não aceita índices negativos.
JavaScript – String 29
Funções Split
➢ split(): permite converter uma string num array, recebe como
parâmetro o caracter pelo qual vai efetuar a separação
➢ Qual o resultado disto?
BB
JavaScript – String 30
Funções para Extração
➢ toUpperCase(): permite converter uma string para maiúsculas
➢ Qual o resultado disto?
TÓPICOS ESPECIAIS I
JavaScript – String 31
Funções para Extração
➢ toLowerCase(): permite converter uma string para minúsculas
➢ Qual o resultado disto?
tópicos especiais i
JavaScript – Boolean 32
➢ O tipo Boolean representa os valores true e false
➢ É útil nos casos em que pretendemos que uma variável somente
possa guardar valores como:
❑Sim / Não
❑Ligado / Desligado
❑True / False
JavaScript – Array 33
➢ Um array pode ser visto como uma variável especial que é capaz de
armazenar mas do que um valor de uma só vez.
Sintaxe
➢ var nome_array = [elemeto1, elemento2, …];
JavaScript – Array 34
Propriedades
➢ length: devolve o número de elementos de um array
➢ Qual o resultado disto?
6
JavaScript – Array 35
Métodos
➢ Existem métodos que facilitam a tarefa do programador quando se manipulam
arrays. Abaixo podemos ver alguns deles:
❖ pop()
❖ push()
❖ shift()
❖ unshift()
❖ splice()
❖ sort()
❖ reverse()
JavaScript – Array 36
Métodos
➢ pop(): remove o último elemento de um array e devolve o elemento.
➢ push(): adiciona um novo elemento no final do array
➢ shift(): é semelhante ao pop() mas este remove o primeiro elemento do array em vez do
último.
➢ unshift(): é semelhante ao push() com a diferença de que este adiciona o
novo elemento ao inicio do array.
➢ Nota: Esse método não funciona muito no IE 8 e em versões anteriores
JavaScript – Array 37
Métodos
➢ splice(): permite adicionar ou remover elementos de um array de acordo com os
parâmetros passados.
➢ Adicionar elemento
Elemento a ser adicionado
Posição onde vamos adicionar Nº de elementos que pretendemos
o novo elemento que sejam removidos
JavaScript – Array 38
Métodos
➢ Remover elemento
Nº de elementos que pretendemos
Posição do elemento que que sejam removidos
vamos remover
➢ Remove o elemento “especiais” do array
JavaScript – Array 39
Métodos – sort()
➢ sort(): método que permite a ordenação de um array
▪ Por definição ordena os elementos do array como strings ou seja
alfabeticamente e por ordem crescente
▪ Para ordenar por ordem decrescente utilizamos o método reverse() que
inverte um vetor;
JavaScript – Array 40
Métodos – sort()
➢ E se tivermos um array de números o que acontece ao chamarmos array.sort()
➢ Qual o resultado ?
• [300, 40, 7]
JavaScript – Array 40
Métodos – sort()
➢ Para fazer a ordenação de um vetor com números o método sort() têm de receber um
parâmetro que vai ser uma função de comparação
▪ function (a, b){ return a-b } // compara “a” e “b” e devolve -1 , 0, ou 1
▪ Menor que 0: ordena de modo que o índice “a” seja menor que o de “b”
▪ Ordem crescente
▪ Igual a 0: “a” e “b” são considerados iguais por isso não é realizada a ordenação
▪ Maior que 0: ordena de modo que o índice de “b” seja maior que o do “a”
▪ Ordem decrescente
▪ Qual o resultado ?
• [7, 8, 25, 41]
JavaScript – Função 40
➢ É um bloco de instruções ao qual é atribuído um nome, que pode ser invocado a partir
desse.
➢ Pode receber parâmetros e devolver um valor.
➢ Com as funções podemos reutilizar código ou seja definir a função uma vez e utiliza-la
quantas vezes quisermos
➢ Evitar ter-se código repetido.
JavaScript – Função 41
➢ Sintaxe
JavaScript – Função 42
➢ Para função devolver valores é necessário utilizar o return
JavaScript – Função 43
➢ As funções são invocadas como resposta por exemplo:
➢ Ocorrência de um evento tal como o clique de um botão
JavaScript
44
Estruturas de selecção simples/ alternativa
➢ Funcionam tal com em C, JAVA, C#
➢ If ➢ If-else
if (cond){
if (cond){
instrução ou bloco de Instruções;
instrução ou bloco de Instruções; }
} else{
instrução ou bloco de instruçoes;
}
JavaScript
45
Estruturas de selecção simples/ alternativa
<body>
<script>
if (1)
{
alert(‘A condição if é verdadeira’);
}
else{
alert(‘Executou a instrução do else’);
}
</script>
</body>
JavaScript
46
Estruturas de selecção multipla
var corCarro = prompt('Qual a cor do carro que pretende');
switch (corCarro) {
case 'vermelho':
alert('Vermelho é uma cor espectacular!');
break;
case 'preto':
alert('Preto é bom, mas têm de se lavar o carro constantemente!');
break;
case 'branco':
alert('Branco está com desconto!');
break;
default:
alert('A cor:' + corCarro + ' não existe');
break;
};
JavaScript
47
Estruturas de Repetição - WHILE
➢ Sintaxe
while(cond) while(cond){
instrução instruções ou bloco de instruções;
}
JavaScript
48
Estruturas de Repetição - WHILE
JavaScript
49
Estruturas de Repetição – DO...WHILE
➢ Sintaxe
do do {
instrução; instrução ou bloco de instruções;
while(cond); }while(cond);
JavaScript
50
Estruturas de Repetição – DO...WHILE
JavaScript
51
Estruturas de Repetição – FOR
➢ Sintaxe
for for(inicialização; condição; ação){
instrução; instrunção ou bloco de instruções;
}
JavaScript
52
Estruturas de Repetição – FOR
DOM e HTML 53
➢ DOM (document object model): pode ser visto como a forma que os
navegadores(browsers) visualizam o documento HTML.
➢ Após carregar o documento o navegador(browser) cria uma estrutura de
árvore na memória que vai permitir manipula-lo a vontade.
➢ O JavaScript assim como outras linguagens, possui uma serie de funções
que vão pemitir criar, remover, alterar os elementos da árvore.
➢ getElementById()
➢ getElementsByTagName()
➢ getElementsByName()
DOM e HTML 54
html
head body
title p
text
text strong
text
Dúvidas 55
