JavaScript é uma linguagem de programação que permite implementar funcionalidades complexas em páginas web. Com ele, você pode criar desde simples interações até aplicações web completas. É executado no navegador, o que o torna uma ferramenta essencial para o desenvolvimento web.
Nesse artigo, vou te mostrar os principais tópicos sobre a linguagem de programação que você precisa conhecer para criar seus próprios códigos.
Ah! Não esquece que é muito importante aprofundar ainda mais seu conhecimento neste tema. Você pode buscar também outras referências, como por exemplo o W3Schools, que além de ter um tutorial passo-a-passo de como iniciar com o JavaScript, possui um acervo completo de artigos detalhados sobre cada tópico.
Não esqueça de praticar bastante!
Existem duas formas de escrever o código que você irá utilizar na sua página HTML:
A tag <script> é usada para incluir JavaScript dentro de um documento HTML. O código JavaScript inserido dentro dessa tag é executado pelo navegador quando a página é carregada.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de Script</title>
</head>
<body>
<h1>Bem-vindo ao JavaScript</h1>
<script>
document.body.style.backgroundColor = "lightblue";
console.log("O JavaScript foi executado com sucesso!");
</script>
</body>
</html>
No exemplo acima, usamos a tag <script> para alterar a cor de fundo da página para "lightblue" e para exibir uma mensagem no console do navegador. O JavaScript dentro da tag <script> é executado assim que o navegador encontra essa tag ao carregar a página.
Você pode incluir a tag <script> diretamente no <head> ou no <body> do seu documento HTML, dependendo de quando você deseja que o JavaScript seja executado.
Além de incluir código JavaScript diretamente no HTML usando a tag <script>, você também pode criar um arquivo JavaScript separado e vinculá-lo ao seu documento HTML. Isso torna o código mais organizado e facilita a manutenção.
Primeiro, crie um arquivo chamado script.js na mesma pasta que o seu arquivo HTML. Dentro desse arquivo, escreva o código JavaScript que você deseja executar:
/* script.js */
document.body.style.backgroundColor = "lightgreen";
console.log("Arquivo JavaScript externo foi executado com sucesso!");
Em seguida, inclua o arquivo JavaScript no seu documento HTML usando a tag <script> com o atributo src apontando para o caminho do arquivo. Coloque a tag <script> dentro da seção <head> ou antes do fechamento da tag </body>.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Usando Arquivo JavaScript Externo</title>
<script src="script.js"></script>
</head>
<body>
<h1>Bem-vindo ao JavaScript Externo</h1>
</body>
</html>
No exemplo acima, o arquivo script.js é carregado e executado quando a página é carregada. O JavaScript no arquivo altera a cor de fundo da página para "lightgreen" e exibe uma mensagem no console do navegador.
Usar arquivos JavaScript externos é uma prática recomendada para manter o código limpo e modular, facilitando a leitura e a manutenção do seu projeto.
Variáveis são usadas para armazenar informações que podem ser referenciadas e manipuladas no código. Em JavaScript, podemos declarar variáveis usando var, let, ou const.
var saudacao = "Olá, Mundo!";
console.log(saudacao);
No exemplo acima, criamos uma variável chamada saudacao e atribuímos a ela o valor "Olá, Mundo!". Em seguida, usamos console.log para exibir o valor da variável no console do navegador.
Estruturas condicionais são usadas para tomar decisões no código, permitindo a execução de blocos de código diferentes com base em certas condições. A mais comum é a instrução if, que verifica se uma condição é verdadeira e executa um bloco de código, senão, executa outro bloco.
var numero = 10;
if (numero > 5) {
console.log("O número é maior que 5");
} else {
console.log("O número é menor ou igual a 5");
}
No exemplo, declaramos uma variável numero com o valor 10. Usamos uma estrutura if para verificar se numero é maior que 5. Se a condição for verdadeira, exibimos "O número é maior que 5"; caso contrário, exibimos "O número é menor ou igual a 5".
Funções são blocos de código que realizam uma tarefa específica e podem ser reutilizados ao longo do programa. Elas podem receber parâmetros (informações de entrada) e retornar um valor de saída.
function somar(a, b) {
return a + b;
}
var resultado = somar(3, 4);
console.log("Resultado da soma:", resultado);
No exemplo, definimos uma função chamada somar que recebe dois parâmetros, a e b. A função retorna a soma desses dois valores. Chamamos a função com os argumentos 3 e 4 e armazenamos o resultado na variável resultado. Por fim, exibimos o resultado no console.
Laços de repetição permitem executar um bloco de código várias vezes. O laço mais comum é o for.
for (var i = 0; i < 5; i++) {
console.log(i);
}
No exemplo, usamos um laço for para iterar de 0 a 4. A cada iteração, o valor de i é incrementado em 1, e o valor atual de i é exibido no console.
O DOM (Document Object Model) é uma interface que representa o documento HTML em uma estrutura de árvore, permitindo que o JavaScript acesse e manipule o conteúdo e a estrutura da página.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Manipulação do DOM</title>
</head>
<body>
<div id="demo">Hello, World!</div>
<script>
document.getElementById("demo").innerText = "Olá, Mundo!";
</script>
</body>
</html>
No exemplo, usamos document.getElementById para selecionar um elemento HTML pelo seu ID e, em seguida, alteramos seu conteúdo de texto usando innerText.
Esses são os principais temas iniciais que precisamos aprender para começar a implementar funcionalidade nas nossas páginas web.
Reforçamos a importância de se aprofundar ainda mais em cada um dos temas. Você pode encontrar muito material bom, como o W3Schools que mencionamos acima, e também em vídeos no YouTube.
Mas fica a dica: ao acessar esses conteúdos na internet fique atento a data de publicação para não estudar um conteúdo desatualizado.
A tecnologia está em constante mudança e com isso surgem novas atualizações que trazem correções e melhorias.
Desejamos ótimos estudos!