Desenvolvedor de Software e Especialista em Tecnologia da Informação

Primeiro código em JavaScript: O guia definitivo para iniciantes escreverem seu primeiro programa

Se você quer aprender JavaScript do zero, este é provavelmente o melhor ponto de partida. Em apenas alguns minutos você entenderá o que é JavaScript, como um programador pensa durante o desenvolvimento de um sistema e escreverá seu primeiro código funcionando diretamente no navegador, sem instalar frameworks, bibliotecas ou ferramentas complicadas. Este é o momento que marca o início da sua jornada na programação.

JavaScript do Zero: Seu Primeiro Código Funcionando em 3 Minutos (HTML + Script + Console)

Este artigo faz parte do meu projeto JavaScript para Iniciantes, onde ensino programação de forma prática, sem enrolação e com foco em quem está começando do absoluto zero. Se você procura um curso de JavaScript, deseja aprender desenvolvimento web, HTML, CSS e JavaScript, ou simplesmente quer escrever seu primeiro programa funcionando hoje mesmo, este vídeo foi feito exatamente para você.

JavaScript Primeiro Código JavaScript para Iniciantes Aprender JavaScript Programação Desenvolvimento Web Console.log Frontend Node.js Curso JavaScript RogerioPontesTI

"Como pensa um programador? Na verdade, o programador pensa numa entrada de dados, seja um CPF, seja um nome de uma pessoa, seja um e-mail. Ele vai pensar também no processamento, o que que ele vai fazer com aquele dado? E feito isso, processado o dado, ele vai pensar numa resposta, numa saída. Basicamente, os códigos que são utilizados em todas as linguagens de programação seguem essa ordem."

🚀 O que você vai aprender neste artigo

  1. Como pensa um programador — o fluxo de entrada, processamento e saída
  2. O que é JavaScript e para que ele serve
  3. Onde o JavaScript roda — navegador e Node.js
  4. Como criar um arquivo index.html
  5. Estrutura básica de uma página HTML
  6. Como usar a tag <script>
  7. Como escrever o primeiro alert()
  8. Como abrir o Console do navegador (F12)
  9. Como usar console.log()
  10. Como executar seu primeiro programa JavaScript

📌 Conceitos abordados

  • Pensamento computacional — entrada, processamento e saída
  • JavaScript — linguagem de programação para web
  • HTML — estrutura básica de uma página
  • Tag script — como inserir código JavaScript no HTML
  • alert() — exibindo mensagens em janelas
  • console.log() — exibindo informações no Console
  • Ferramentas do Desenvolvedor — debug e testes
  • Node.js — JavaScript no servidor

🧠 Como pensa um programador?

O programador pensa em três etapas fundamentais que estão presentes em praticamente todos os programas:

📥 1. Entrada de dados
O programa recebe informações do usuário ou de outras fontes. Pode ser um CPF, um nome, um e-mail, um arquivo, ou qualquer outra informação que o sistema precise processar.
⚙️ 2. Processamento
O programa realiza operações com os dados recebidos. Pode ser um cálculo, uma validação, uma transformação, ou qualquer processamento necessário para gerar o resultado desejado.
📤 3. Saída de dados
O programa exibe o resultado do processamento. Pode ser uma mensagem na tela, um relatório, uma resposta em uma API, ou qualquer outra forma de saída.
EXEMPLO PRÁTICO 

// Entrada: o usuário informa o nome
let nome = prompt("Qual é o seu nome?");

// Processamento: transforma o nome em maiúsculas
let nomeMaiusculo = nome.toUpperCase();

// Saída: exibe a mensagem com o nome processado
console.log("Olá, " + nomeMaiusculo + "!");

🌐 Onde o JavaScript roda?

O JavaScript roda em dois ambientes principais:

🌍 No navegador (Client-side)

O JavaScript é executado diretamente no navegador do usuário. É o que chamamos de frontend.

  • Interação com o usuário
  • Manipulação do DOM
  • Validação de formulários
  • Animações e efeitos
⚙️ No servidor (Server-side)

Com o Node.js, o JavaScript também roda no servidor, permitindo criar APIs, sistemas e aplicações completas.

  • APIs REST e GraphQL
  • Banco de dados
  • Autenticação e segurança
  • Sistemas escaláveis
💡 O que você precisa para começar?
  • Um editor de texto — Bloco de Notas, VS Code, Sublime, etc.
  • Um navegador — Chrome, Firefox, Edge, etc.
  • Vontade de aprender — o mais importante de todos!

📄 Criando seu primeiro arquivo index.html

O primeiro passo para escrever seu primeiro código JavaScript é criar um arquivo HTML.

ESTRUTURA HTML 

<!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 JavaScript</title>
    </head>
    <body>
        <h1>Olá, mundo!</h1>
        <p>Este é meu primeiro contato com JavaScript.</p>
    </body>
</html>

Salve este arquivo como index.html e abra-o no navegador. Você verá uma página simples com um título e um parágrafo.

📝 A tag <script> — Onde o JavaScript vive

Para adicionar código JavaScript à sua página, usamos a tag <script>. Ela pode ser colocada no <head> ou no final do <body>.

TAG SCRIPT 

<!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 JavaScript</title>
        <script type="text/javascript">
            // Seu código JavaScript aqui
            alert("Olá, JavaScript!");
        </script>
    </head>
    <body>
        <h1>Olá, mundo!</h1>
    </body>
</html>
🔑 O que faz a tag <script>?

A tag <script> permite inserir código JavaScript dentro de uma página HTML. O navegador lê e executa esse código automaticamente.

O atributo type="text/javascript" não é mais obrigatório em HTML5, mas é uma boa prática mantê-lo para compatibilidade.

🔔 Seu primeiro código: alert()

A função alert() exibe uma janela com uma mensagem para o usuário. É a forma mais simples de interagir com o usuário em JavaScript.

ALERT() 

<script type="text/javascript">
    // Primeiro código JavaScript
    alert("Olá, JavaScript!");
</script>

Ao abrir a página no navegador, uma janela aparecerá com a mensagem "Olá, JavaScript!". É a primeira vez que seu código interage com o usuário.

🖥️ O Console do navegador e console.log()

O Console é uma ferramenta essencial para programadores. Ele permite testar código, depurar erros e visualizar mensagens durante o desenvolvimento.

🔑 Como abrir o Console?
  • Windows/Linux: Pressione F12 e selecione a aba "Console"
  • Mac: Pressione Cmd + Option + I e selecione a aba "Console"
  • Clique com o botão direito na página e selecione "Inspecionar"
CONSOLE.LOG() 

<script type="text/javascript">
    // Exibindo mensagem no Console
    console.log("Olá, alunos!");

    // Exibindo resultados de operações
    console.log("O resultado da multiplicação é: " + 2 * 10);
    console.log("O resultado da adição é: " + (10 + 10));
    console.log("O resultado da subtração é: " + (10 - 2));
</script>

💡 Dica: O console.log() é a ferramenta mais utilizada por programadores para depurar código. Sempre que algo não estiver funcionando, use console.log() para entender o que está acontecendo.

⏱️ Capítulos do vídeo

  • 00:00 — Como pensa um programador? Entrada, processamento e saída
  • 00:26 — Onde o JavaScript roda? Navegador e Node.js
  • 00:48 — O que você precisa para começar a programar
  • 00:58 — Criando seu primeiro arquivo index.html
  • 01:19 — Estrutura básica de uma página HTML
  • 01:36 — Como adicionar a tag <script> no HTML
  • 01:52 — Primeiro código JavaScript: usando alert()
  • 02:22 — Como abrir o Console do navegador (F12)
  • 02:44 — Como usar console.log() na prática
  • 03:12 — Conclusão: seu primeiro programa JavaScript funcionando

🎯 Conclusão

Escrever seu primeiro código em JavaScript é um marco importante na sua jornada como programador. A partir deste momento, você começou a entender como os programas funcionam e como você pode criar soluções para problemas reais.

Neste artigo, você aprendeu:

  • ✅ Como pensa um programador (entrada, processamento e saída)
  • ✅ O que é JavaScript e para que ele serve
  • ✅ Onde o JavaScript roda: navegador e Node.js
  • ✅ Como criar um arquivo index.html
  • ✅ Estrutura básica de uma página HTML
  • ✅ Como usar a tag <script>
  • ✅ Como escrever o primeiro alert()
  • ✅ Como abrir o Console do navegador (F12)
  • ✅ Como usar console.log()
  • ✅ Como executar seu primeiro programa JavaScript

💡 Lembre-se: Todo programador começou exatamente onde você está agora. O importante não é saber tudo de uma vez, mas dar o primeiro passo e continuar aprendendo. Parabéns por escrever seu primeiro código!

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Primeiro Código em JavaScript

É uma linguagem de programação usada para criar interatividade em páginas web e também aplicações de servidor com Node.js.

Não. Um editor de texto e um navegador já são suficientes para escrever o primeiro código.

No navegador do usuário e também no servidor através do Node.js.

Ela permite inserir código JavaScript dentro de uma página HTML.

alert() exibe uma janela na tela; console.log() envia informações para o Console do navegador.

Pressione F12 e selecione a aba Console nas Ferramentas do Desenvolvedor.

Não. Com Node.js ele também é utilizado para backend, APIs e aplicações completas.

Entrada é o dado recebido, processamento é o que o programa faz com ele e saída é o resultado produzido.

Exibir uma mensagem com alert() ou imprimir um texto usando console.log().

Sim. Ele foi gravado pensando em iniciantes absolutos que estão dando o primeiro passo na programação.

É um ambiente que permite executar JavaScript no servidor, fora do navegador.

Não. São linguagens completamente diferentes. O nome JavaScript foi escolhido por marketing, mas não tem relação com Java.

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Você já tinha escrito algum código antes deste vídeo ou este foi realmente o seu primeiro contato com JavaScript? Conseguiu fazer o Olá JavaScript aparecer na tela? Escreve nos comentários qual foi a sua primeira impressão da linguagem! 👇

#JavaScript #JavaScriptDoZero #Programação #ProgramaçãoParaIniciantes #CursoJavaScript #HTML #CSS #Frontend #NodeJS #ConsoleLog #DesenvolvimentoWeb #AprenderProgramação #RogerioPontesTI