Histórico JavaScript
Prof. Tiago Henrique Trojahn
tiagotrojahn@[Link]
HTML
Linguagem de marcação de conteúdo
Criada por Tim Berners Lee em 1991
HTML5 proposta em 2008
2
HTML – Características e
Funcionalidades * Adaptado por Mateus
Área Descrição
Uso de tags como <header>, <nav>, <section>, <article>,
Estrutura semântica
<footer> para indicar o papel de cada parte da página.
Suporte nativo a áudio e vídeo com as tags <audio> e
Multimídia
<video> sem plugins.
Tags como <input type="date">, <input type="email">,
Formulários avançados
validação nativa e datalist.
HTML atua como base para a aplicação de estilos via CSS e
Integração com JavaScript e CSS
interatividade via JavaScript.
Permite combinação com CSS e atributos como aria-* para
Responsividade e acessibilidade
melhorar acessibilidade.
Compatível com APIs como Web Storage, Geolocation,
APIs e extensões modernas
WebRTC, Canvas, entre outras.
3
HTML – Utilidades atuais
* Adaptado por Mateus
Criação de sites responsivos e acessíveis
Base de estrutura para aplicações web modernas (Single Page
Applications)
Documentação técnica e interfaces web internas
Renderização de conteúdo dinâmico por frameworks (React, Angular,
Vue)
Email marketing (embora com restrições no uso de CSS e JS)
4
CSS
Linguagem de estilos
Descreve o como os elementos HTML devem
aparecer nas páginas web – formatação
Criada em 1994 por Håkon Wium Lie e Bert Bos
CSS3 proposta em 1999
5
CSS – Características e
Funcionalidades * Adaptado por Mateus
Área Descrição
Permite manter o HTML limpo e o estilo separado
Separação de conteúdo e forma
(em arquivos .css).
Estilos são aplicados com base em regras
Cascata e especificidade
hierárquicas (cascata).
Uso de media queries para adaptar layouts a
Responsividade
diferentes tamanhos de tela.
Flexbox, Grid Layout e positioning para controle
Layouts modernos
avançado da disposição de elementos.
Suporte nativo a efeitos visuais com transition,
Animações e transições
animation, @keyframes.
Variáveis CSS com --nome e var(--nome) para
Custom Properties (variáveis)
estilos reutilizáveis.
Ex: :hover, :nth-child(), ::before, ::after para
Pseudo-classes e pseudo-elementos
interações e manipulação refinada. 6
CSS – Utilidades atuais
* Adaptado por Mateus
Especificidade: qual regra prevalece? (inline > id > classe >
tag)
Herança: alguns estilos são herdados (ex: cor, fonte)
Box Model: entender margin, border, padding e content
Unidades de medida: px, %, vh, vw
Mobile First Design: começa-se o layout para celular e
expande para telas maiores
7
Problemas
Páginas web que usam puramente HTML5 e CSS3 são páginas
estáticas
A interação do usuário pouco afeta a apresentação do site
A adição ou remoção de novos elementos na página depende diretamente do
servidor
HTML e CSS não são linguagens de programação: não permitem a adição de
lógica de negócios ao site (O HTML5 e o CSS3 adotaram diversos recursos “dinâmicos” que
melhoram a interação entre o usuário e a página web. Porém, tais recursos ainda são limitados)
Solução? Páginas web dinâmicas
8
Páginas web dinâmicas
Permite uma interação com usuário mais elaborada, sem necessitar
comunicação com servidor
Tem como consequência a redução do tráfego entre cliente e servidor, aumentando
o desempenho do servidor e reduzindo o consumo de banda do cliente.
Adiciona lógica de negócios ao site, facilitando o uso de checagens e
verificações de maneira imediata, entre outras funcionalidades
Permite a manipulação direta dos elementos CSS/HTML da página web
(DOM)
Como criar uma página web dinâmica? JavaScript
9
Cliente/Servidor
O modelo cliente-servidor é uma arquitetura de comunicação
onde dois componentes interagem:
Cliente: é quem faz requisições (por exemplo, o navegador do
usuário).
Servidor: é quem responde com os dados ou serviços solicitados
(como arquivos HTML, dados de um banco, etc).
* Adaptado por Mateus 10
Cliente/Servidor
Usuário →
Navegador (Cliente) →
Servidor Web →
Lógica da Aplicação →
Banco de Dados
← HTML/JSON/Código ←
* Adaptado por Mateus 11
JavaScript - Histórico
Em 1987 a Apple lançou o HyperCard, um ambiente onde o usuário
poderia criar “aplicativos” visuais suportando banco de dados,
interatividade e a linguagem de script HyperTalk
O HyperTalk era uma linguagem para leigos bastante amigável.
12
JavaScript - Histórico
A Web surgiu no início dos anos 1990 como uma tecnologia aberta e livre de
patentes, o que facilitou sua rápida adoção global.
Com o crescimento da popularidade e o caráter aberto do projeto, diversos
desenvolvedores passaram a criar seus próprios navegadores.
Isso deu origem ao que ficou conhecido como a “guerra dos navegadores”.
Para se destacar, cada empresa buscava introduzir recursos inéditos ou
inovadores, com o objetivo de atrair mais usuários e dominar o mercado.
13
JavaScript - Histórico
Em 1994, a Netscape contratou Brendan Eich para criar uma
linguagem de programação para seu navegador
Inicialmente, Brendan propôs usar a linguagem Scheme
Mais complexa e menos amigável que o HyperTalk
14
JavaScript - Histórico
A Netscape rejeitou a ideia de usar Scheme como linguagem de script
em seu navegador.
Após apenas 10 dias de trabalho, Brendan Eich apresentou uma nova
linguagem, mais acessível e amigável, inicialmente chamada de Mocha.
Inspirada em Hypertalk, Java, Scheme, Perl e Self.
A Netscape adotou a linguagem, renomeando-a para JavaScript,
aproveitando a popularidade do nome Java — embora as linguagens
não estejam diretamente relacionadas.
15
JavaScript - Histórico
Com o crescimento da Web, a Microsoft criou sua própria implementação do JavaScript,
chamada JScript.
JScript era semelhante, mas havia diferenças e incompatibilidades em relação ao
JavaScript original da Netscape.
Para evitar fragmentações e conflitos entre navegadores, a Netscape propôs a
padronização da linguagem por meio de um organismo neutro.
Em 1997, surgiu a padronização oficial da linguagem: o ECMAScript, mantido pela
organização ECMA International.
Em 1998, se tornou o padrão internacional ISO/IEC 16262.
16
Material extra
História do Netscape:
[Link] (em inglês)
Resumo da “guerra dos navegadores”
[Link]
[Link]
(em português).
17
JavaScript
Linguagem interpretada
Executada diretamente no navegador, sem necessidade de compilação.
Executada por um motor JavaScript (engine)
V8 (Chrome, Edge), SpiderMonkey (Firefox), JavaScriptCore (Safari)
Tipagem dinâmica e fraca
As variáveis não precisam de tipo explícito e seu tipo pode mudar em tempo
de execução.
18
JavaScript
Funções de primeira classe
Funções podem ser tratadas como valores. Podem ser atributos a variáveis,
passadas como argumentos, retornadas de outras funções, etc...
Single-Thread
Usa modelo assíncrono baseado em eventos para lidar com tarefas
concorrentes.
ECMAScript 2025 (ES16)
[Link]
19
O que o JavaScript NÃO PODE
fazer?
Ação JavaScript pode? Observação
Acessar diretamente banco de
❌ Não Apenas via backend/API
dados
Gravar arquivos locais livremente ❌ Não Exceto cookies, localStorage, etc.
Acessar domínios externos
⚠️Com restrições Depende do CORS
livremente
* Adaptado por Mateus 20
Back-end vs Front-end
Nos primórdios da Web (anos 90), as páginas eram estáticas
(HTML puro).
Com o tempo, surgiram necessidades:
Front-end: exibir conteúdo visual e interativo no navegador.
Back-end: processar dados, lógica de negócio e acesso ao banco.
A separação se consolidou nos anos 2000 com a evolução de
aplicações mais dinâmicas (ex: AJAX, PHP, Java EE, [Link]).
* Adaptado por Mateus 21
Front-end
Parte visual e interativa da aplicação.
Executada no navegador do usuário.
Tecnologias principais:
HTML (estrutura)
CSS (estilo)
JavaScript (interação)
Responsável por: exibir interfaces, capturar eventos do
usuário e enviar dados ao servidor.
* Adaptado por Mateus 22
Back-end
Parte lógica da aplicação, executada no servidor.
Responsável por:
Processar regras de negócio
Acessar bancos de dados
Enviar dados ao front-end via API
Linguagens comuns: Python, PHP, Java, [Link], Ruby,
C#
* Adaptado por Mateus 23
Back-end e Front-end
Framework Tipo Linguagem Descrição / Uso
Descrição / Uso Comum
Framework Tipo Linguagem
Comum
Interfaces SPA, Spring Boot Back-end Java Aplicações corporativas
e APIs REST robustas
React Front-end JavaScript mantido pelo
Facebook APIs REST rápidas e
[Link] Back-end JavaScript (Node) minimalistas
Framework
Angular Front-end TypeScript
completo da Google Framework completo
Django Back-end Python com ORM e sistema
Framework leve e admin
[Link] Front-end JavaScript
progressivo
Flask Back-end Python Microframework leve,
Compila para ótimo para APIs
Svelte Front-end JavaScript
código JS otimizado
SSR + SPA híbrido, Laravel Back-end PHP Web apps robustas com
Front-end / Full- MVC e blade templates
[Link] JavaScript (React) usado para apps
stack
escaláveis
Framework opinativo
Interfaces gráficas Ruby on Rails Back-end Ruby com foco em
Flutter Web Front-end Dart multiplataforma do produtividade
Google
APIs modernas e
Web APIs e FastAPI Back-end Python assíncronas com
[Link] Core Back-end C# aplicações tipagem
Microsoft
Phoenix Back-end Elixir Alta performance,
baseado no Erlang VM
24
* Adaptado por Mateus
Obrigado!
Professor Mateus
Prof. Tiago Oliveira
Henrique Trojahn Cabral
mateusoliveiracabral@[Link]
tiagotrojahn@[Link]
* Adaptado por Mateus 25