Pular para conteúdo

Aula 10 - Web Moderna: JavaScript e TypeScript 🌐

Objetivo

Objetivo: Entender o papel do JavaScript na web e como o TypeScript ajuda a escrever códigos mais robustos e seguros.

4. Mini-Projeto: To-Do Console 🚀

JS é excelente para manipular listas e objetos.

Desafio do Projeto

Crie um array (vetor) de objetos chamado tarefas. Cada objeto deve ter descricao e concluida (booleano). 1. Adicione 3 tarefas iniciais. 2. Crie uma função que liste apenas as tarefas que NÃO foram concluídas. 3. Use o Node.js para rodar seu script no terminal.

5. Exercícios de Fixação 📝

O JavaScript (JS) é a única linguagem que roda nativamente em todos os navegadores. Ele manipula o DOM (Document Object Model), que é a estrutura da página HTML.

Visualizando o DOM (Mermaid)

graph TD;
    Doc[Document] --> HTML;
    HTML --> Head;
    HTML --> Body;
    Head --> Meta;
    Body --> H1[Título];
    Body --> P[Parágrafo];
    Body --> Button[Botão];

    style Doc fill:#f9f;
    style Button fill:#bbf;

2. JavaScript: Dinamismo ⚡

// Seleciona o botão e adiciona um evento
const botao = document.querySelector('button');

botao.addEventListener('click', () => {
    alert("Você clicou no botão!");
});

Node.js: JS fora do Navegador

Hoje, JS também roda no servidor com o Node.js.

node servidor.js Servidor rodando na porta 3000...

A Revolução do Express.js

Para criar sites complexos, usamos frameworks. O Express é o padrão da indústria.

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Olá do Backend!');
});

app.listen(3000);

3. Variáveis Modernas (Esqueça o var) 🆕

O JS é "fracamente tipado" (você pode somar texto com número e ele deixa). O TypeScript (TS) adiciona Tipagem Estática para evitar erros bobos.

Código JS (Suscetível a erro) Código TS (Seguro)
function soma(a, b) { return a + b; } function soma(a: number, b: number): number { return a + b; }

Note

O navegador não entende TS. Ele precisa ser transpilado para JS.

4. Exercícios de Fixação 📝

  1. Fácil: Crie um arquivo HTML com um botão. Use JS para mudar a cor de fundo da página quando clicar nele.
  2. Médio (Node): Crie um script tabuada.js que mostre a tabuada do 7 no terminal.
  3. Desafio (TS): Crie uma interface Pessoa com nome e idade. Crie uma função que receba um objeto desse tipo e diga se é maior de idade.

Próxima Aula: O gigante corporativo. Vamos aprender sobre Classes e Objetos robustos com Java.

🔗 Materiais da Aula

  • Slides

    Material visual com diagramas e conceitos-chave.

    Slide 10

  • Quiz

    Teste seu conhecimento com 10 questões interativas.

    Quiz 10

  • Exercícios

    5 exercícios progressivos (básico → desafio).

    Exercício 10

  • Projeto

    Aplicação prática dos conceitos da aula.

    Projeto 10

➡️ Próxima Aula: Java