0% acharam este documento útil (0 voto)

5 visualizações

5. JavaScript

O documento apresenta uma introdução ao JavaScript, destacando sua função como linguagem de programação para adicionar interatividade às páginas web. Ele aborda a sintaxe, variáveis, operadores, tipos de dados, e funções, além de estruturas de controle como seleções e repetições. O conteúdo é estruturado para fornecer uma compreensão básica e prática do uso do JavaScript em desenvolvimento web.

Enviado por

elianeedna7

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)

5 visualizações

5. JavaScript

Enviado por

elianeedna7

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/ 58

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

➢ 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

➢ 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?

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