Antes de tudo, caso você não saiba o que é JavaScript, aconselho a leitura de nosso artigo “O que é e como começar com JS” e também sobre “O que se pode fazer com JS hoje em dia”. Com esses artigos você terá uma dimensão maior do que é a linguagem e das possibilidades que ela pode proporcionar.
Curso JavaScript - Fundamentos
Conhecer o cursoJavaScript no console do navegador
Dito isto, vamos começar a colocar a mão na massa e rodar algo básico utilizando JavaScript. Primeiramente, vamos utilizar o console do navegador, para isto crie um arquivo index.html simples, pode ser como abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Começando com JavaScript</title>
</head>
<body>
<h2>Começando com JavaScript</h2>
</body>
</html>
Logo em seguida abra o arquivo em seu navegador de preferência e entre no console pelo inspecionar (normalmente pode ser aberto apertando Ctrl+Shift+i no Windows/linux, cmd+option+c no MacOS ou botão direito → Inspecionar/Inspecionar elemento).
Será aberto um painel com inúmeras ferramentas de desenvolvimento, clique em console. Neste local podemos fazer alguns testes e entender o comportamento de nosso código direto no navegador (além de inúmeras outras funções).
Neste exemplo vamos criar uma caixa de diálogo usando a função alert(), portanto, basta digitar alert("hello world"). Ao executar a função esperamos que seja exibida a seguinte caixa de diálogo:
Legal! Acabamos de executar nossa primeira função em JavaScript, agora vamos estruturar um arquivo em JavaScript para entender o seu funcionamento.
Curso JavaScript Intermediário
Conhecer o cursoCriando e executando um arquivo JavaScript
Crie um arquivo chamado script.js na mesma pasta que criamos o arquivo index.html, com a função que acabamos de utilizar no exemplo anterior:
alert("hello world")
Desta forma, nossa pasta com os arquivos html e js terá a seguinte estrutura:
Agora precisamos alterar o nosso arquivo index.html. Lembrando que nós podemos colocar um código JavaScript em qualquer lugar de nosso arquivo html utilizando a tag script. Mas não é recomendado, pois irá gerar certa desorganização e futuras complicações na manutenção de seu projeto.
O ideal é criarmos o arquivo .js e então chamar este arquivo dentro de nosso index.html, para isto também vamos usar a tag script, da seguinte forma:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Começando com JavaScript</title>
</head>
<body>
<h2>Começando com JavaScript</h2>
<script src="./scripts.js"></script>
</body>
</html>
Desta forma, o arquivo scripts.js será executado logo na abertura de nosso index.html, exibindo a caixa de diálogo referente ao código de alerta que criamos, como abaixo:
Além das formas citadas acima, para fins de teste e aprendizado, nós também podemos executar nosso código JavaScript em ferramentas online, como o JSFiddle.
Utilizando a ferramenta JSFiddle
Ao entrar no JSFillde logo percebemos que o layout é dividido em quatro seções, sendo: HTML, CSS, JavaScript e a última conta com a preview gerada.
Como podemos ver abaixo, perceba que está implementado o mesmo código que utilizamos no exemplo acima, com a única diferença no CSS, onde podemos ver exatamente o resultado esperado na última seção:
Existem outras ferramentas similares como o JSEditor.io e playcode.io.
Conclusão
Neste artigo demos os primeiros passos em JavaScript. Aprendemos como utilizar o console do próprio navegador, como estruturar os arquivos .js de forma ideal e por último como podemos utilizar ferramentas online que vão nos auxiliar em testes e no aprendizado da linguagem.
Aguarde para mais artigos sobre JavaScript logo em breve :)
Formação Desenvolvedor JavaScript
Conhecer a formaçãoPor fim, caso queira aprender mais sobre JavaScript saiba que aqui na TreinaWeb temos o curso JavaScript - Fundamentos que possui 07h13 de vídeos e um total de 93 exercícios. Conheça também nossos outros cursos de JavaScript.
Veja quais são os tópicos abordados durante o curso de JavaScript - Fundamentos:
- Como os computadores funcionam;
- O primeiro código no navegador e no Node.js;
- Declaração de variáveis e operadores;
- Tomadas de decisão e laços de repetição;
- Trabalhando com Numbers, Strings, Arrays, Objects e Functions;
- Vários exercícios;
- Vários desafios de programação direto no navegador;
- Projeto prático para fixar o que foi aprendido.
