Aluno(a)

Turma

Nº

Data

Objectivos da ficha

JavaScript
DOM
Fetch
Deploy

Parte I · JavaScript

Exercício 1 · Sintaxe moderna (15 pts)

Reescreve este código JS para ES6+ moderno:

var nome = "Ana";
var idade = 25;

function saudar(nome, saudacao) {
  if (saudacao === undefined) saudacao = "Olá";
  return saudacao + ", " + nome + "!";
}

var numeros = [1, 2, 3];
var dobros = [];
for (var i = 0; i < numeros.length; i++) {
  dobros.push(numeros[i] * 2);
}

var pessoa = { nome: nome, idade: idade };

Exercício 2 · DOM (15 pts)

Implementa funcionalidade: - Input para nome. - Botão "Adicionar à lista". - Lista que se actualiza. - Cada item tem botão "Remover". - Persistência no localStorage.

Parte II · Fetch e APIs

Exercício 3 · Fetch API (15 pts)

Faz request GET a API pública e mostra resultado.

**Conceitos demonstrados**:

**1. `fetch()`** (built-in moderno):
```javascript
const response = await fetch(url);

2. Async/await: - async function declara função assíncrona. - await espera Promise resolver. - Mais legível que .then() chain.

3. Response handling:

if (!response.ok) {
  // Erro HTTP (4xx, 5xx)
}

const data = await response.json();  // parse JSON

4. Try/catch:

try {
  await fetch(...);
} catch (error) {
  // Network error ou erro lançado
}

5. Estados UI: - Loading. - Sucesso. - Erro.

6. Template literals para HTML:

resultado.innerHTML = `
  <div class="card">
    <h2>${user.name}</h2>
  </div>
`;

Cuidado XSS: para conteúdo de utilizador (não de API confiável), usar textContent em vez de innerHTML, ou escapar.

Outras opções HTTP:

POST:

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'Ana',
    email: 'ana@x.pt'
  })
});

PUT (update):

const response = await fetch(`https://api.example.com/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

DELETE:

const response = await fetch(`https://api.example.com/users/${id}`, {
  method: 'DELETE'
});

Authentication:

const response = await fetch(url, {
  headers: {
    'Authorization': `Bearer ${token}`
  }
});

Múltiplos requests em paralelo:

const [users, posts, comments] = await Promise.all([
  fetch('/users').then(r => r.json()),
  fetch('/posts').then(r => r.json()),
  fetch('/comments').then(r => r.json())
]);

APIs públicas para praticar:

JSONPlaceholder: jsonplaceholder.typicode.com (teste).
OpenWeather: weather data.
NASA APOD: foto astronómica diária.
PokéAPI: pokemon.
CoinGecko: crypto prices.
Rest Countries: info de países.

Exercício 4 · Deploy (10 pts)

Como fazer deploy do site para a internet?

Parte III · Acessibilidade e SEO

Exercício 5 · Auditoria (15 pts)

Audita este HTML e lista problemas:

<html>
<head>
<title></title>
</head>
<body>
<div>
<div>logo</div>
<div>
<div onclick="menu()">menu</div>
</div>
</div>
<div>
<div>texto importante</div>
<div>
<img src="foto.jpg">
<div>clica aqui</div>
</div>
</div>
<div>copyright 2026</div>
</body>
</html>

Exercício 6 · Performance (10 pts)

Como optimizar performance de site lento?

Parte IV · Projecto

Exercício 7 · Landing page (15 pts)

Projecta estrutura HTML de landing page para um produto SaaS:

</div>

O CRM mais simples para PMEs portuguesas

Gerir clientes, vendas e marketing num só lugar. Comece grátis em 30 segundos.

Começar grátis → Ver demo (2 min)

✓ 14 dias grátis ✓ Sem cartão de crédito ✓ Setup em 5 minutos

Tudo o que precisa para crescer

Ferramentas profissionais sem complicação.

📊

Dashboard intuitivo

Veja todos os indicadores essenciais num único ecrã.

👥

Gestão de clientes

Toda a informação dos seus clientes organizada e acessível.

💰

Pipeline de vendas

Acompanhe oportunidades do primeiro contacto ao fecho.

📧

Email marketing

Campanhas profissionais com templates prontos a usar.

📈

Relatórios automáticos

Insights semanais e mensais enviados para o seu email.

🔒

Seguro e GDPR

Os seus dados em servidores europeus, em conformidade total.

Comece em 3 passos

1
Crie a sua conta

Registo em 30 segundos com email. Sem cartão de crédito.
2
Importe os seus dados

Excel, CSV, ou conecte directamente com Gmail/Outlook.
3
Comece a vender

Dashboard pronto, equipa configurada. Vamos!

O que dizem os nossos clientes

"Triplicámos as vendas em 6 meses usando o CRM Pro."

Ana Silva CEO, Empresa A

"A interface mais simples que já usei. Equipa adoptou em 1 dia."

João Costa Director Comercial, Empresa B

"Suporte em português, em horário português. Inestimável!"

Maria Santos Fundadora, Empresa C

Preços simples e transparentes

Comece grátis. Pague apenas quando crescer.

Free

0€ /mês

✓ Até 100 contactos
✓ 1 utilizador
✓ Funcionalidades essenciais
✓ Suporte por email

Começar grátis

Mais Popular

Pro

29€ /mês

✓ Contactos ilimitados
✓ Até 5 utilizadores
✓ Todas as funcionalidades
✓ Email marketing
✓ Suporte prioritário

Teste 14 dias grátis

Enterprise

99€ /mês

✓ Tudo do Pro
✓ Utilizadores ilimitados
✓ API access
✓ Account manager dedicado
✓ SLA 99.9%

Falar com vendas

Perguntas frequentes

Quanto tempo posso testar gratuitamente?

14 dias completos com todas as funcionalidades do plano Pro.

Posso cancelar a qualquer momento?

Sim. Sem fidelizações ou taxas de cancelamento.

Os meus dados estão seguros?

Servidores europeus, encriptação SSL, GDPR-compliant, backups diários.

Posso migrar de outro CRM?

Sim, oferecemos migração gratuita do seu CRM actual.

Pronto para transformar o seu negócio?

Junte-se a milhares de empresas portuguesas.

Começar grátis →

14 dias grátis · Sem cartão · Cancele quando quiser

```

Estrutura demonstrada:

✅ Header com nav + CTAs: branding + navegação + acções.

✅ Hero: H1 + subtitle + CTAs + social proof.

✅ Social proof: logos de clientes (trust).

✅ Features: 6 cards com ícones (visualizar oferta).

✅ How it works: 3 passos numerados (reduz fricção).

✅ Testimonials: 3 quotes com foto + cargo (credibilidade).

✅ Pricing: 3 planos (Free, Pro destacado, Enterprise).

✅ FAQ: <details> para expansão nativa.

✅ Final CTA: última oportunidade.

✅ Footer: links organizados, social, copyright.

Princípios de conversão aplicados:

Acima da fold: H1, subtitle, CTA, screenshot.
Pricing visível sem fricção.
Trust signals múltiplos: clientes, testemunhos, garantias.
CTAs claros e repetidos.
Objecções respondidas no FAQ.
Mobile-first semântico.

Seguir: CSS para visual + JavaScript para interactividade (FAQ toggle, smooth scroll, etc.).

Exercício 8 · Projecto plano (10 pts)

Define plano de projecto pessoal para portfolio.