the donato code

O que é JavaScript?

janeiro 18, 2025 | by Lucas Souza

DALL·E 2025-01-18 04.30.32 – An educational image showing a computer screen displaying a simple webpage with a console showing ‘Olá, JavaScript!’ message. The screen includes an H

Bem-vindo ao Mundo do JavaScript! 🚀

Se você está começando a aprender JavaScript, é importante entender que essa linguagem é superpoderosa! Não é apenas para criar sites interativos, mas também para construir servidores, aplicativos e até jogos. Vamos mergulhar em tudo isso!

O que é JavaScript?

JavaScript é uma linguagem de programação de propósito geral, o que significa que pode ser usada para desenvolver uma ampla gama de aplicações. Originalmente, JavaScript era usado apenas para front-end (a parte do site que o usuário vê), mas com a chegada do Node.js, JavaScript também pode ser usado no back-end (o servidor que processa os dados e interage com o banco de dados).

Vamos entender melhor esses dois mundos!


1. Front-End: A Magia que o Usuário Vê

O front-end é tudo o que o usuário interage diretamente. É onde o JavaScript realmente brilha em termos de interatividade! Sem JavaScript, a web seria basicamente um monte de páginas estáticas.

Exemplo simples de Front-End: Interação com o Usuário

Vamos começar com algo simples, mas divertido. Crie um arquivo index.html e escreva o seguinte código:


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro Código em JavaScript</title>
</head>
<body>
    <h1>Bem-vindo ao mundo de JavaScript!</h1>

    <button id="clickMeButton">Clique em mim!</button>

    <script>
        // Quando o botão for clicado, exiba um alerta
        document.getElementById("clickMeButton").addEventListener("click", function() {
            alert("Você clicou no botão!");
        });
    </script>
</body>
</html>

2. Back-End: O Poder de JavaScript no Servidor com Node.js

Agora que você já sabe como o JavaScript pode tornar os sites interativos, vamos explorar o poder que ele tem no back-end, usando o Node.js.

O Node.js é uma plataforma de desenvolvimento baseada no motor JavaScript V8 (o mesmo usado no Google Chrome) que permite rodar JavaScript no servidor. Isso significa que, com JavaScript, você pode criar servidores, gerenciar requisições de clientes e até interagir com bancos de dados!

Exemplo simples de Back-End com Node.js

Se você não tem o Node.js instalado, baixe e instale aqui. Depois, crie um arquivo chamado server.js


// Importa o módulo http do Node.js
const http = require("http");

// Cria o servidor
const server = http.createServer((req, res) => {
    // Define o tipo de resposta (html)
    res.setHeader("Content-Type", "text/html");

    // Envia uma resposta simples
    res.end("<h1>Olá do servidor Node.js!</h1>");
});

// O servidor escuta na porta 3000
server.listen(3000, () => {
    console.log("Servidor rodando na porta 3000...");
});

O que está acontecendo aqui?

  • Node.js permite que você crie servidores. Esse código cria um servidor simples que responde com um texto HTML quando alguém acessa a página.
  • Para rodar o código, basta abrir o terminal, navegar até o diretório onde está o arquivo e executar o comando: node server.js. Depois, acesse http://localhost:3000 no navegador e verá a mensagem: “Olá do servidor Node.js!”

O que Vem a Seguir?

A próxima aula vai ser sobre variáveis e tipos de dados, e eu vou te mostrar como o JavaScript pode lidar com textos, números, listas e mais! Vai ser incrível aprender como armazenar e manipular dados!

Dicas para Hoje:

  1. Experimente modificar o código do front-end: o que acontece se você alterar a mensagem do alerta? E se você adicionar mais botões?
  2. No back-end, tente alterar a resposta do servidor para algo mais complexo. Por exemplo, que tal criar uma página com uma saudação personalizada?

Até amanhã! E lembre-se: com o JavaScript, as possibilidades são infinitas! 💻✨

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

RELATED POSTS

View all

view all