[UFMS Digital] Fundamentos de Web - Videoaula do Módulo 3 - Unidade 1

Prévia do material em texto

Fundamentos de Web
Prof. Dr. Leonardo Souza Silva
Módulo 3 - Interatividade em 
páginas Web
Unidade 1 — A Linguagem JavaScript
Neste ponto da nossa disciplina…
● Compreendemos a importância de separar conteúdo (HTML) da 
apresentação (CSS). 
● Aprendemos a estruturar a informação de nossa página, ou site, 
usando os diferentes elementos da linguagem HTML.
● Entendemos como refinar a apresentação do conteúdo e manter a 
coerência dessa apresentação entre todas as páginas usando folha 
de estilo em cascata (CSS).
Neste módulo…
● Vamos avançar na interatividade de nossas páginas.
○ Até o momento o foco era a apresentação da informação.
● A partir deste momento, além de estruturar e apresentar a nossa 
página, teremos condições de definir o comportamento que a 
página deverá ter a partir de interações com o nosso usuário.
Linguagem de Programação
● Maneira formal de comunicar instruções aos computadores.
● Baixo nível → pouca ou nenhuma abstração ao conjunto de 
instruções da arquitetura
○ São rápidas, não compiladas.
● Alto nível → alta abstração do conjunto de instruções.
○ Mais lentas, em relação às linguagens de baixo nível e exigem 
um compilador.
Linguagem de Programação
● Alto Nível (Exemplo de código em linguagem Python)
Fonte: Própria
A Linguagem JavaScript
● Criada em 1995, Brendan Eich, com o nome de LiveScript.
○ Presente no navegador Netscape.
■ Evolução do Mosaic.
● Quando no Netscape passou a oferecer suporte a tecnologia Java a 
linguagem LiveScript foi rebatizada como JavaScript.
○ Não há relação com a linguagem Java.
○ Sintaxe mais próxima da linguagem C/C++
Fonte: Internet
A Linguagem JavaScript
● Criada em 1995, Brendan Eich, com o nome de LiveScript.
○ É uma linguagem de alto nível e interpretada.
○ O navegador é o interpretador da linguagem Javascript.
● Possibilita interação entre usuário e a página.
○ Validação de dados em formulários, por exemplo.
● Utilizada tanto no lado do cliente (Front-End) como no lado do 
servidor (Back-End).
Fonte: Internet
Mas o que é um script?
Texto com uma série de instruções escritas para serem seguidas por 
pessoas ou executadas por um computador.
● Informática → associado a um conjunto de instruções escritas em 
uma linguagem de computador.
○ Normalmente associado às linguagens interpretadas.
JavaScript e HTML
● A marcação pode ser utilizada nas marcações 
 ou .
○ Assim como acontece com o CSS, a inclusão do script pode ser 
de maneira incorporada ou vinculada a um arquivo externo.
 
○
Fonte: Própria
JavaScript e HTML
Fonte: Própria
JavaScript e HTML
Fonte: Própria
JavaScript e HTML
Fonte: Própria
JavaScript — Variáveis
● A declaração de variáveis pode ser feita usando as palavras-chave: 
var, let ou const.
■ Não há declaração explícita do tipo das variáveis, contudo 
elas possuem um tipo.
■ Há dois tipos nativos: números e cadeia de caracteres.
Fonte: Própria
JavaScript — Variáveis
● A declaração de variáveis pode ser feita usando as palavras-chave: 
var, let ou const.
■ Não há declaração explícita do tipo das variáveis, contudo 
elas possuem um tipo.
■ Há dois tipos nativos: números e cadeia de caracteres.
Fonte: Própria
JavaScript — Variáveis — Conversão de Tipo
● Cadeia de caracteres → numéricas
● Numérico → Cadeia de caracteres
Fonte: Própria
JavaScript — Operadores
● Aritméticos
OPERADOR DESCRIÇÃO
+ Adição
- Subtração
* Multiplicação
/ Divisão
% Módulo / Resto
JavaScript — Operadores
● Lógicos
OPERADOR DESCRIÇÃO
%% E (AND) Condicional
|| Ou (OR) Condicional
! Negação (NOT)
JavaScript — Entrada/Saída de Dados
● Entrada de dados
● Saída de dados
Fonte: Própria
JavaScript — Estrutura de Repetição
Fonte: Própria
● Comando while ● Comando for
JavaScript — Estrutura de Repetição
Fonte: Própria
● Comando for
Inicialização
JavaScript — Estrutura de Repetição
Fonte: Própria
● Comando for
Inicialização
Condição de Parada
JavaScript — Estrutura de Repetição
Fonte: Própria
● Comando for
Inicialização
Condição de Parada
Incremento
Interação entre JavaScript e HTML
● O código pode alterar elementos do HTML
Fonte: Própria
Interação entre JavaScript e HTML
● Funções
○ Podem ser implementadas como mini programas
○ chamando a função sem parâmetros:
Fonte: Própria
Interação entre JavaScript e HTML
● Funções com parâmetros:
Fonte: Própria
Interação entre JavaScript e HTML
● Funções com parâmetros e retorno:
● Chamada da função:
Fonte: Própria
Interação entre JavaScript e HTML
● Eventos do HTML
○ Uma mudança em um elemento HTML (onchange)
○ Um clique do mouse (onclick)
○ Passar o mouse sobre um elemento HTML (onmouseover)
○ Pressionar uma tecla do teclado (onkeydown)
○ Quando a página acabar de carregar (onload)
Fonte: Própria
Finalizando…
● A linguagem JavaScript é um importante recurso no 
desenvolvimento de páginas e sites para a Web.
○ Em conjunto com a linguagem HTML e as folhas de estilo em 
cascata (CSS).
● Permite definir e alterar o comportamento das páginas escritas em 
linguagem HTML.
○ Atua em elementos e eventos do HTML.
Referências
MAZZA, Lucas. HTML5 e CSS3: domine a web do futuro. São Paulo, SP: Casa do Código, 2014. Recurso 
on-line. ISBN 9788566250909. Capítulo 1 e Capítulo 2. Disponível na Biblioteca Digital da UFMS. 
OLIVEIRA, Cláudio Luís Vieira; ZANETTI, Humberto Augusto Piovesana. JavaScript descomplicado: 
programação para a Web, IoT e dispositivos móveis. São Paulo: Érica, 2020. ISBN 9788536533100. Capítulo 
4. Disponível na Biblioteca Digital da UFMS. 
W3 Schools. JAVASCRIPT Tutorial. Disponível em: https://www.w3schools.com/js/ . Acesso em maio de 
2025.
https://pergamum.ufms.br/
https://pergamum.ufms.br/
https://www.w3schools.com/js/
Licenciamento
Respeitadas as formas de citação formal de autores de acordo com as normas 
da ABNT NBR 6023 (2018), a não ser que esteja indicado de outra forma, todo 
material desta apresentação está licenciado sob uma Licença Creative Commons 
- Atribuição 4.0 Internacional. 
https://creativecommons.org/licenses/by/4.0/
https://creativecommons.org/licenses/by/4.0/