JavaScript: Incorporando Scripts em HTML

Introdução

Bem-vindo ao seu primeiro laboratório de JavaScript! JavaScript é uma linguagem de script poderosa que permite criar conteúdo dinâmico e interativo em páginas web. Sem ele, as páginas web seriam estáticas e muito menos envolventes.

Neste laboratório, você aprenderá as duas maneiras fundamentais de incluir JavaScript em uma página web:

JavaScript Interno: Escrever código diretamente dentro de tags <script> em um arquivo HTML.
JavaScript Externo: Colocar o código em um arquivo .js separado e vinculá-lo ao arquivo HTML.

Começaremos com uma página HTML básica e adicionaremos progressivamente funcionalidades JavaScript. Você usará o WebIDE integrado para editar seus arquivos e visualizar suas alterações em tempo real usando a aba "Web 8080". Vamos começar!

Criar um arquivo HTML com a tag script

Nesta etapa, você adicionará um bloco de JavaScript interno ao seu arquivo HTML. O processo de configuração já criou um arquivo index.html para você no diretório ~/project. Agora adicionaremos a tag <script> a ele, que é a maneira padrão de declarar um bloco de código JavaScript.

Primeiro, localize o arquivo index.html no explorador de arquivos no lado esquerdo do WebIDE e clique duas vezes para abri-lo.

Agora, adicione uma tag <script> vazia logo antes da tag de fechamento </body>. Esta é a prática recomendada, pois garante que o conteúdo HTML seja analisado e exibido ao usuário antes que o navegador comece a executar qualquer JavaScript, melhorando o tempo de carregamento percebido da página.

Seu arquivo index.html deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script></script>
  </body>
</html>

Certifique-se de salvar o arquivo após fazer as alterações (você pode usar Ctrl+S ou Cmd+S).

HTML file with script tag added

Escrever console.log para exibir Hello World

Agora que você tem um local para escrever seu JavaScript, vamos adicionar sua primeira linha de código. Usaremos a função console.log(). Esta é uma ferramenta fundamental para qualquer desenvolvedor JavaScript, pois permite imprimir mensagens no console do desenvolvedor do navegador. É incrivelmente útil para depuração e para entender como seu código está sendo executado.

No seu arquivo index.html, adicione console.log('Hello World'); dentro das tags <script> que você criou na etapa anterior.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script>
      console.log("Hello World");
    </script>
  </body>
</html>

Após salvar o arquivo, vamos ver o resultado.

Clique na aba Web 8080 no topo da interface do LabEx.
Você verá o cabeçalho <h1>. Para ver a saída do console, clique com o botão direito em qualquer lugar da página e selecione "Inspecionar" (Inspect).
Um novo painel será aberto. Clique na aba "Console" neste painel.
Você deverá ver a mensagem Hello World impressa no console.

Console output showing Hello World

Vincular um arquivo JavaScript externo usando o atributo src

Embora scripts internos sejam adequados para tarefas pequenas, a melhor prática é manter seu JavaScript em arquivos separados. Isso torna seu código mais limpo, fácil de gerenciar e reutilizável em diferentes páginas HTML.

Nesta etapa, moveremos nosso código para um arquivo externo chamado script.js (que já foi criado para você) e o vincularemos ao index.html.

Primeiro, modifique seu arquivo index.html. Remova a linha console.log de dentro das tags <script> e adicione o atributo src à tag <script> de abertura para apontar para seu arquivo externo.

Seu index.html agora deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Lab</title>
  </head>
  <body>
    <h1>Welcome to the JavaScript Lab!</h1>

    <script src="script.js"></script>
  </body>
</html>

Em seguida, abra o arquivo script.js no explorador de arquivos. Ele está atualmente vazio. Adicione a mesma instrução console.log a este arquivo.

Seu arquivo script.js deve conter apenas esta linha:

console.log("Hello World");

Salve ambos os arquivos. Se você voltar para a aba Web 8080 e atualizar a página, verá exatamente o mesmo resultado no console. O navegador agora carrega index.html, vê a tag <script src="script.js"> e, em seguida, busca e executa o conteúdo de script.js.

Adicionar função alert para mensagem pop-up

Além de registrar no console, o JavaScript pode interagir com o usuário de forma mais direta. Uma das maneiras mais simples de fazer isso é com a função alert(), que exibe uma caixa de mensagem pop-up para o usuário.

Vamos adicionar um alerta ao nosso script. Abra o arquivo script.js e adicione uma nova linha de código para criar um alerta de boas-vindas.

Seu arquivo script.js agora deve ficar assim:

console.log("Hello World");
alert("Welcome to JavaScript!");

A função alert() pausará a execução do script e a renderização da página até que o usuário clique em "OK" na caixa pop-up. Isso a torna uma forma muito direta de comunicar informações importantes.

Salve o arquivo script.js. Veremos seu efeito na próxima etapa.

Atualizar o navegador para executar o script

Você agora adicionou um console log e um alerta ao seu arquivo JavaScript externo. É hora de ver o resultado final.

Navegue de volta para a aba Web 8080.

Para ver as alterações que você fez no arquivo script.js, você deve atualizar a aba do navegador. Isso instrui o navegador a baixar novamente o HTML e quaisquer arquivos vinculados, incluindo seu script atualizado.

Ao atualizar, você deverá ver imediatamente uma caixa pop-up com a mensagem "Welcome to JavaScript!".

Depois de clicar em "OK", o pop-up desaparecerá e o restante da página será carregado. Se você abrir o console do desenvolvedor novamente (Clique com o botão direito -> Inspecionar -> Console), você ainda verá a mensagem "Hello World" registrada lá. Isso demonstra a ordem de execução em seu script.

Parabéns, você incorporou com sucesso o JavaScript em uma página da web usando métodos internos e externos!

Resumo

Neste laboratório, você deu seus primeiros passos no mundo do scripting web com JavaScript. Você ganhou experiência prática com os conceitos centrais de inclusão de JavaScript em um projeto web.

Você aprendeu:

Como adicionar JavaScript diretamente em um arquivo HTML usando a tag <script>.
Como usar console.log() para imprimir mensagens no console do desenvolvedor do navegador para depuração.
Os benefícios de separar seu código em arquivos .js externos.
Como vincular um arquivo JavaScript externo ao seu HTML usando o atributo src da tag <script>.
Como criar uma mensagem pop-up voltada para o usuário com a função alert().

Esta base é crucial para construir aplicações web mais complexas e interativas. Continue experimentando e construindo sobre o que você aprendeu!

Introdução e Incorporação de JavaScript