Seja bem-vindo à segunda aula do Guilherme Machado DEV

Hoje, vamos dividir a aula em duas partes:

1. Exploraremos como adicionar JavaScript (JS) ao seu HTML.
2. Aprenderemos sobre o console.log e os tipos de comentários em JS.

O JavaScript é a linguagem que permite adicionar interatividade ao seu site, como exibir mensagens, reagir a cliques de botões e muito mais. Vamos começar!

Para começar, você aprenderá as duas formas de usar JavaScript no HTML: Interna e Externa. Nesta aula, vamos entender suas características.

O que é o JavaScript Interno?

O JavaScript interno é quando você escreve o código diretamente no arquivo HTML, dentro da tag <script>. Ele é ideal para quem está começando ou deseja testar ideias rapidamente.

Por que usar o JavaScript Interno?

1. Definição clara: A tag <script> informa ao navegador que o conteúdo dentro dela é código JavaScript.
2. Praticidade para testes: É fácil inserir scripts diretamente no HTML, sem precisar criar arquivos separados.
3. Flexibilidade: Ideal para pequenos códigos ou exemplos simples.

Exemplo Prático:

Vamos criar uma página HTML com um JavaScript interno básico.

Entendendo o Código

Vamos detalhar o que está acontecendo no código, passo a passo:

1. window.alert("Hello World!");
   • O que faz? Exibe uma caixa de alerta com a mensagem “Hello World!”.
   • Por que usar? É uma ótima forma de testar o JavaScript ou chamar a atenção do usuário.
2. window.confirm("Bem-vindo ao Guilherme Machado Dev. Deseja continuar?");
   • O que faz? Exibe uma caixa de confirmação com dois botões: “OK” e “Cancelar”.
   • Para que serve? Permite que o usuário tome uma decisão simples e o navegador armazena a resposta (sim ou não).
3. window.prompt("Qual é a sua linguagem de programação favorita?");
   • O que faz? Exibe uma caixa de entrada para o usuário digitar algo.
   • Para que serve? É uma maneira de coletar informações do usuário diretamente pela página.

Resultado Final

Quando você abrir essa página no navegador:

1. Um alerta aparecerá com “Hello World!”.
2. Em seguida, uma caixa de confirmação perguntará “Deseja continuar?”.
3. Por fim, uma caixa solicitará que você insira sua linguagem favorita.

Observação Importante

No exemplo acima, as respostas das interações 2 e 3 não são armazenadas em variáveis nem utilizadas para tomar decisões no código. Isso significa que:

• No exemplo 2: Mesmo que o usuário clique em “OK” ou “Cancelar”, o resultado não impacta o fluxo do programa porque não há nenhuma lógica implementada para processar essa resposta.
• No exemplo 3: O texto inserido pelo usuário na caixa de entrada também não é armazenado, então não pode ser reutilizado ou exibido posteriormente.

Por que isso acontece?

Porque, neste exemplo, estamos apenas introduzindo como as funções confirm e prompt funcionam. Em aulas futuras, aprenderemos a capturar essas respostas, armazená-las em variáveis e usá-las para criar condições e fluxos mais dinâmicos.

Por que o JavaScript Interno NÃO É Recomendado?

Apesar de prático para aprender, usar o JavaScript interno em projetos maiores traz desvantagens:

1. Mistura de código: O HTML e o JavaScript ficam no mesmo arquivo, dificultando a organização.
2. Dificuldade de manutenção: Alterar ou corrigir o código pode se tornar complicado.
3. Impossibilidade de reaproveitar código: Não é possível usar o mesmo script em várias páginas facilmente.

JavaScript Externo Uma Alternativa Melhor:

Agora que já entendemos como funciona o JavaScript interno, é hora de aprender a separar o código em um arquivo próprio. Essa prática ajuda a manter o projeto mais organizado e facilita a manutenção.

Vou mostrar dois exemplos:

1. Um arquivo JS fora da pasta.
2. Um arquivo JS dentro de uma pasta (recomendado para melhor organização).

Exemplo 1: Arquivo script.js fora de uma pasta

Estrutura de Arquivos:

Código HTML:

Código JavaScript (script.js):

Exemplo 2: Arquivo script.js dentro de uma pasta

Estrutura de Arquivos:

Código HTML:

Código JavaScript (./src/js/script.js):

Por que usar Arquivo Externo?

• Organização: Facilita o entendimento e a manutenção do projeto.
• Reutilização: Um mesmo arquivo JavaScript pode ser usado em várias páginas.
• Separação de responsabilidades: O HTML foca na estrutura da página, enquanto o JavaScript lida com a lógica e interatividade.

Escolha a estrutura que se adapta melhor ao seu projeto, mas lembre-se: usar uma pasta como js deixa seu projeto mais limpo e organizado! 🚀

Por que usar defer no <script>?

Alguém reparou no atributo defer? Ele serve para instruir o navegador a carregar o script em segundo plano e executá-lo apenas depois que o HTML foi completamente carregado. Isso evita o bloqueio da renderização da página, como mostrado nos exemplos acima.

E se eu não usar defer?

Se você preferir não usar o atributo defer, o ideal é colocar a tag <script> antes do fechamento do </body>, assim:

Resumo: Por que colocar <script> no final do <body>?

1. Melhor desempenho: O navegador carrega o conteúdo da página antes de executar o JavaScript.
2. Garantia de que o DOM foi carregado: Scripts que interagem com elementos precisam que o HTML já tenha sido renderizado.

Veja o vídeo do exemplo abaixo do nosso primeiro código em Javascript:

Conclusão parte 1

Agora você sabe como usar o JavaScript no HTML de forma interna e por que o externo é uma prática melhor para projetos reais.

Parte 2: Explorando o console.log e Comentários no JavaScript

Nesta parte da aula, vamos explorar dois conceitos importantes no JavaScript: o console.log e os comentários. Entender como esses elementos funcionam vai te ajudar a escrever códigos mais claros e a depurá-los com mais eficiência.

A Importância do console.log

O console.log é uma ferramenta super importante quando você está começando a aprender JavaScript. Ele funciona como uma forma de “conversar” com o código, mostrando no console do navegador o que está acontecendo. Por exemplo, se você quer saber o valor de uma variável ou se alguma parte do seu código está funcionando como esperado, o console.log é a maneira mais simples de descobrir. Ele é ótimo para testar, aprender e entender melhor como tudo está funcionando por trás das cenas. Se acostume a usá-lo bastante no início – ele vai ser seu maior aliado enquanto você explora o JavaScript!

Acessando o Console no Navegador Chrome

1. Abra o navegador Google Chrome.
2. Clique com o botão direito em qualquer lugar da página e selecione Inspecionar.
3. No painel que se abrirá, clique na aba Console.

Pronto! Agora você está no console do navegador, onde pode executar comandos e visualizar saídas do console.log.

Como Funciona o console.log

O console é um objeto global do JavaScript que permite interagir com o console de depuração do navegador. Quando usamos console.log, estamos chamando o método log desse objeto, que é responsável por registrar informações no console. Em outras palavras, o console.log é como enviar uma mensagem para o navegador, dizendo: “Ei, me mostre isso aqui no console para que eu possa ver o que está acontecendo no meu código.”

Exemplo:

• Você pode usar aspas duplas ("") ou simples ('') para strings.
• O resultado será exibido no console do navegador.

O console.log é muito útil para:

• Depurar códigos, verificando valores de variáveis.
• Exibir mensagens durante a execução do código.
• Testar pequenas partes do código diretamente no console.

Outras Funções do Console

Embora o console.log seja o mais usado, existem outras funções interessantes:

• console.error(): Exibe mensagens de erro.
• console.warn(): Mostra mensagens de aviso.
• console.table(): Exibe dados em formato de tabela.

Explore essas funções para melhorar sua experiência de depuração.

Veja o vídeo do exemplo abaixo usando o console.log:

Comentários no JavaScript

Os comentários são uma parte essencial da programação, pois ajudam a explicar partes do código e tornam o código mais legível para você e para outras pessoas.

Existem dois tipos principais de comentários:

1. Comentário em Linha

Usado para textos curtos que ocupam apenas uma linha. Sintaxe:

2. Comentário em Bloco

Ideal para textos maiores que ocupam várias linhas. Sintaxe:

Os comentários são ignorados pelo navegador na execução do código, mas são valiosos para documentação e aprendizado.

Conclusão parte 2

• O console.log é usado para imprimir mensagens no console do navegador e é ótimo para depuração.
• Os comentários ajudam a documentar o código e existem em dois formatos: linha (//) e bloco (/* */).

É isso, pessoal! Encerramos mais uma aula.

Hoje, fizemos nosso primeiro código em JavaScript, aprendemos sobre o JavaScript interno e externo, o uso do console.log e como funcionam os comentários. Espero que tenham gostado e aprendido um pouco. Vamos continuar aprendendo juntos, sempre em constante evolução. BORA CODAR! 🚀

Segue abaixo o link do repositório das aulas no meu GitHub, onde está disponível o código que trabalhamos hoje:

https://github.com/guilherme-silvam/js-aulas-guilhermemachadodev/tree/main/aula-2-gulhermemachadodev

Próximos passos:

Na próxima aula, vamos aprender sobre variáveis e tipos primitivos. Fiquem ligados! 🚀