04 ‐ Criando seu primeiro código em Javascript! - sabrinabm94/javascript GitHub Wiki
Neste capítulo, vamos explorar o processo de como rodar um script de JavaScript em um navegador web. Vou guiá-lo através de três passos simples, desde a criação do arquivo JavaScript até a execução do script no navegador. Ao seguir essas etapas, você será capaz de criar e testar seus próprios scripts JavaScript e entender como eles interagem com o ambiente do navegador. Vamos começar!
Para rodar um script JavaScript, primeiro, você precisa criar um arquivo contendo o código JavaScript desejado. Em seguida, é necessário ter um arquivo HTML para incluir o script JavaScript e visualizar o resultado no navegador. Depois de criar esses arquivos, você pode abrir o arquivo HTML em seu navegador favorito para executar o script JavaScript e interagir com ele.
Mas fique tranquilo, que vou explicar tudo isso em três passos simples.
Primeiro, você precisa ter um arquivo contendo o código JavaScript que deseja executar. Você pode criar um novo arquivo de texto simples usando o Bloco de Notas ou qualquer editor de texto que preferir.
Nesse arquivo, você escreverá seu código JavaScript. Por exemplo, você pode criar um arquivo chamado meuScript.js e escrever algumas instruções simples, como:
alert("Olá, mundo!");Nesta imagem, você pode ver como o arquivo ficou no meu editor de código:
O que é o alert?
O alert no JavaScript é uma função embutida que exibe uma caixa de diálogo na tela do navegador, geralmente usada para exibir uma mensagem simples para o usuário. Essa mensagem pode ser um aviso, uma informação importante ou qualquer outra coisa que você queira comunicar.
O usuário precisa clicar em "OK" para fechar a caixa de diálogo. É uma maneira simples de interagir com o usuário e fornecer feedback em tempo real em um site ou aplicativo web.
Vamos utilizar o alert no nosso exemplo pois fica mais fácil identificar se nosso script funcionou.
Em seguida, você precisa criar um arquivo HTML para incluir o seu script JavaScript e visualizar o resultado no navegador. Você também pode fazer isso usando um editor de texto simples. Crie um novo arquivo chamado index.html e adicione 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 Script JavaScript</title>
</head>
<body>
<h1>Executando JavaScript no Navegador</h1>
<script defer src="meuScript.js"></script>
</body>
</html>No campo src da tag <script>, adicionamos o caminho aonde está localizado o script de js criado em sua máquina.
Como tanto o arquivo index.html quanto o meuScript.js estão localizados no mesmo diretório, somente é necessário indicar o nome do arquivo javascript no src, juntamente com sua extensão .js.
Um ponto crucial é utilizar o defer na chamada dos arquivos JS, pois o defer permite que o navegador carregue o script em segundo plano, sem bloquear o processamento do HTML.
Isso resulta em uma experiência mais rápida para o usuário, pois o conteúdo da página é exibido mais rapidamente, e o script é executado apenas após o HTML ser totalmente processado, diminuindo aquela sensação da página estar carregando.
Agora, basta abrir o arquivo index.html que você acabou de criar em seu navegador favorito. Para isso, vá até a pasta onde você salvou o arquivo, clique com o botão direito no arquivo index.html e selecione a opção "Abrir com" e, em seguida, escolha o navegador que deseja usar.
O navegador abrirá o arquivo HTML e executará o script JavaScript contido nele.
Uma vez que o navegador executa o script JavaScript, você verá o resultado da execução. No nosso exemplo simples, você verá uma caixa de diálogo com a mensagem "Olá, mundo!". Isso acontece porque o código JavaScript instrui o navegador a exibir essa mensagem usando o comando alert().
Essa é apenas uma das muitas maneiras pelas quais o JavaScript pode interagir com o navegador. Ele pode ser usado para manipular elementos HTML, responder a eventos do usuário, fazer requisições para servidores web, entre outras coisas.
No próximo capítulo, exploraremos diversas maneiras de mostrar mensagens ao usuário usando JavaScript. Desde simples alertas para os usuários até registros de mensagens para auxiliar no seu desenvolvimento. Não perca!