Aula 5:
“Conhecendo o JavaScript”
Prof. Nathan Cirillo Universidade Paulista UNIP
@PWR_01_23
[Link]@[Link] Ciência da Computação
O que é JavaScript?
➢ HTML: É a camada base para as
aplicações (conteúdo);
➢ CSS: consiste na apresentação, ou
seja, aparência;
➢ JavaScript: define a interatividade
(comportamento).
Prof. Nathan Cirillo Programação para Web Responsiva@2023 2
Adicionando JavaScript na Página
Diretamente no conteúdo HTML:
<a href=“[Link]” onclick=“código_javascript;”>
1
No início do documento com a tag <script>:
<script type=“text/javascript”>
código_javascript;
Dentro do <head> </head> 2
</script>
Em um arquivo separado: Dentro do <head> </head>
<script type=“text/javascript” src=“[Link]”> </script> 3
Prof. Nathan Cirillo Programação para Web Responsiva@2023 3
Vamos a um Exemplo!
Embutido:
Prof. Nathan Cirillo Programação para Web Responsiva@2023 4
E se estivesse em um Arquivo Separado?
Arquivo Externo:
[Link] [Link]
Prof. Nathan Cirillo Programação para Web Responsiva@2023 5
Alguns Pontos Importantes
Toda instrução deve ser separada por uma Os comentários
nova linha ou por ponto-e-vírgula. podem ser em
linha ou em bloco.
Exemplo 1:
Comando um Comentário em Linha:
Comando dois //Isso é um comentário
Comando três
Comando um; //Outro
Exemplo 2:
Comando um; Comando dois; Comando três; //Comentário final
Exemplo 2:
Exemplo 3:
Comando um;
/*Comentário em
Comando dois;
Modo mais Indicado! bloco (várias linhas)*/
Comando três; Comando um;
Prof. Nathan Cirillo Programação para Web Responsiva@2023 6
Trabalhando com Variáveis
➢ No JavaScript usa-se a palavra reservada var para criar uma variável,
seguida pelo seu nome;
➢ Faz referência a um endereço de memória que será alocado para
armazenar valores;
➢ As variáveis permitem, por exemplo, criar operações matemáticas com
dados numéricos;
➢ Tipos de variáveis: numérico;
string e booleano.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 7
Exemplo de Programa com Variáveis
Atribui valores e
calcula a média!
Como verificar
se o aluno foi
aprovado?
Apresenta a média
final obtida!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 8
Estrutura de Seleção/Decisão
➢ Tomar decisões nada mais é do que controlar ou direcionar o fluxo do
programa;
➢ O caminho a ser seguido é definido com base no resultado de uma
expressão lógica;
➢ Os programas não executam as suas rotinas
apenas de maneira sequencial;
➢ O JavaScript utiliza a estrutura de decisão
IF (SE) e suas variações.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 9
Instrução IF
SINTAXE: EXEMPLO:
IF (CONDIÇÃO) Operadores Relacionais:
{ < | > | <= | >= | !=
Comando 1; IF (media >= 6)
Comando 2; {
Comando N; [Link](“Aprovado!”);
} }
Será executado somente se a condicional for VERDADEIRA!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 10
Instrução IF...ELSE
SINTAXE: EXEMPLO:
Executado se condição
IF (CONDIÇÃO) IF (media >= 6) VERDADEIRA!
{ {
Comando(s) caso verdadeiro; [Link](“Aprovado!”);
} }
ELSE ELSE Executado se condição FALSA!
{ {
Comandos(s) caso falso; [Link](“Reprovado!”);
} }
Sempre será executado uma das opções (VERDADEIRO OU FALSO)
Prof. Nathan Cirillo Programação para Web Responsiva@2023 11
Solução do Problema!
Usando a Estrutura
de Decisão!
Mostrando resultados com
TAGs HTML!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 12
Instrução IF...ELSE IF...ELSE
SINTAXE: EXEMPLO:
IF (CONDIÇÃO 1) Testa a primeira
var op = 2; opção!
{
IF (op == 1)
Comando(s) caso verdadeiro;
{
} Testa a segunda
opção! alert(“Opção 1 escolhida!”);
ELSE IF(CONDIÇÃO 2)
}
{
ELSE IF(op == 2)
Comandos(s) caso verdadeiro;
{
}
alert(“Opção 2 escolhida!”);
ELSE
}
{ Executado se nenhuma
ELSE
Comandos(s) caso nenhuma atenda; condição for atendida!
{
}
alert(“Opção Inválida!”);
}
Usado quando há várias opções para testar!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 13
Instrução SWITCH...CASE
SINTAXE: EXEMPLO:
SWITCH (<variável>) var op = 4;
{
Executa se a SWITCH (op)
CASE <valor1>: variável for 1! {
<comando(s)>; CASE 1:
break; alert(“Opção 1!”);
CASE <valor2>: break; Executa se a
<comando(s)>; CASE 2: variável for 2!
break; alert(“Opção 2!”);
CASE <valorN>:
Default é executado
break;
<comando(s)>;
em último caso! DEFAULT:
break; alert(“Opção Inválida!”);
DEFAULT: }
<comando(s)>;
}
Versão mais Elegante do IF Aninhado!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 14
Estruturas de Repetição
❑ Estruturas de repetição ou loops são instruções que permitem repetir um
conjunto de tarefas;
❑ São muito usadas na programação, evitando redundâncias e facilitando a
vida do programador;
❑ Existem basicamente três tipos de loops: WHILE;
DO...WHILE; e FOR.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 15
Estrutura de Repetição WHILE
➢ Enquanto a expressão lógica for VERDADEIRA
o loop será executado;
WHILE (condição)
➢ A expressão sempre será testada antes da {
primeira execução (pré-testado); código(s) a repetir;
}
➢ Se a expressão for falsa logo de cara, o loop não
será executado.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 16
Exemplo usando WHILE
Prof. Nathan Cirillo Programação para Web Responsiva@2023 17
Estrutura de Repetição DO...WHILE
➢ O REPITA-ATE testa a condição no final,
sendo executado pelo menos uma vez;
DO
{
➢ Essa estrutura será executada enquanto a
condigo(s) a repetir;
condição testada for FALSA;
}
WHILE (condição);
➢ Quando a expressão booleana retornar
verdadeira, o loop se encerra.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 18
Exemplo usando DO...WHILE
Prof. Nathan Cirillo Programação para Web Responsiva@2023 19
Estrutura de Repetição FOR
➢ Usado quando sabemos o nº de vezes que o loop deve ser rodado;
➢ Imagine enviar 3.000 e-mails para clientes de sua empresa;
➢ Ele deixa implícito a variável contadora, incremento e condição;
➢ Ele só irá parar quando atingir o valor final definido.
FOR(<variável>; <condição>;<contador>) {
<instruções a executar até atingir o valor final>
}
Prof. Nathan Cirillo Programação para Web Responsiva@2023 20
Exemplo usando FOR
Prof. Nathan Cirillo Programação para Web Responsiva@2023 21
O que são Arrays?
➢ Arrays são variáveis especiais que permitem armazenar mais de um
valor em sua estrutura;
➢ Os Arrays podem ser classificados em dois grupos
distintos: os vetores e as matrizes;
➢ Os vetores são arrays unidimensionais, ou seja,
possuem uma única dimensão;
➢ Já as matrizes são arrays multidimensionais, possuindo mais do que
uma única dimensão.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 22
Conhecendo os Vetores
➢ São variáveis que permitem armazenar vários valores;
➢ Cada item do vetor é acessado por um número chamado índice;
➢ Podemos acessar os itens de um vetor apenas alternando os seus índices.
Valores
Índices
Prof. Nathan Cirillo Programação para Web Responsiva@2023 23
Exemplo do Uso de Vetor
Prof. Nathan Cirillo Programação para Web Responsiva@2023 24
Facilitando as Coisas!
Prof. Nathan Cirillo Programação para Web Responsiva@2023 25
Conhecendo as Matrizes
Índice para Coluna (C)
➢ Uma matriz nada mais é do que um
vetor de vetores (multidimensional);
➢ Podemos fazer uma analogia a uma
tabela que possui linhas e colunas;
➢ Os elementos da matriz são acessados
por dois índices: L x C.
Índice para Linha (L)
Prof. Nathan Cirillo Programação para Web Responsiva@2023 26
Exemplo do Uso de Matriz
3 4 8
6 100 7
5 9 10
Prof. Nathan Cirillo Programação para Web Responsiva@2023 27
Facilitando as Coisas!
? ? ?
? ? ?
? ? ?
Prof. Nathan Cirillo Programação para Web Responsiva@2023 28
Dúvidas?
[Link]@[Link]
Prof. Nathan Cirillo Programação para Web Responsiva@2023 29
Vamos Trabalhar!
Resolva a Lista da Aula 5.
Prof. Nathan Cirillo Programação para Web Responsiva@2023 30