Procurando conteúdo sobre JavaScript para iniciantes? Aqui você terá uma visão completa e repleta de exemplos que ajudarão você a conhecer a linguagem de programação mais utilizada no mundo.
No desenvolvimento de páginas web, iniciamos nosso trabalho com duas etapas principais: a criação do HTML (estrutura do documento) e o desenvolvimento de uma estrutura de CSS, para estilizar os elementos do HTML e dar o visual que gostaríamos para a página.
Com essas duas etapas, criamos páginas que possuem um visual e apresentam o conteúdo que desejamos. Porém, uma web dinâmica traz a necessidade de interagir com o usuário, onde somente HTML e CSS não são capazes de resolver. Nessa necessidade, surge o JavaScript.
O JavaScript possibilita diversas funcionalidades, começando por itens mais simples como manipulação de botões, alertas, sliders e galerias, até diversas complexidades, como a criação de jogos e animações em 2D e 3D, Single Page Applications, criação de aplicativos para celular e tantas outras funcionalidades que surgem através das novas tecnologias disponíveis no mercado.
A dinâmica e as possibilidades que o JavaScript apresentam colocam ele entre as linguagens mais populares atualmente.
Nesse artigo você terá uma visão de como começar a entender a linguagem, que com estudo e dedicação, pode abrir uma gama gigante de possibilidades ao desenvolvedor web e também ao DBA NoSQL, como você pode ver nesse post.
O que é JavaScript?
Segundo definição do MDN Web Docs, JavaScript é uma linguagem de programação que permite implementar itens complexos em páginas web — toda vez que uma página da web faz mais do que simplesmente mostrar a você informação estática — mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está envolvido.
JavaScript para iniciantes: inserindo o JavaScript na página HTML
Pré requisitos: interação básica com o computador, entendimento básico de HTML e CSS.
Primeiramente, para que o navegador consiga interpretar o código JavaScript, você precisa associá-lo a um documento HTML. Existem duas formas de fazer a associação, sendo possível criar os códigos em meio ao HTML e também separar os arquivos.
Neste primeiro exemplo, vamos criar o script junto ao HTML. Supomos que você tem um arquivo chamado exemplo.html:
<!doctype html> <html lang="pt-br"> <head> <title>Exemplo</title> <meta charset="utf-8"> </head> <body> <p>….</p> </body> </html>
Para criar um script junto ao código HTML é preciso marcar o local utilizando a tag </script> que deve estar entre a tag </head>. Desta forma, o documento HTML ganha mais duas linhas, veja.
<!doctype html> <html lang="pt-br"> <head> <title>JAVASCRIPT</title> <meta charset="utf-8"> <script> </script> </head> <body> <p>...</p> </body> </html>
JavaScript para iniciantes: criando o primeiro código
Se abrirmos nossa página exemplo.html no navegador, não veremos diferença alguma, pois nosso JavaScript está vazio. Porém, agora podemos testar algumas funcionalidades que, mesmo simples, poderão resolver diversos problemas.
Variáveis: O que é isso?
Variáveis em Javascript são utilizadas para salvar dados que poderão ser acessados e/ou manipulados futuramente, independente do tipo do dados, strings, números, booleanos, arrays, objetos ou funções.
No nosso arquivo “exemplo.js” criaremos nossas duas primeiras variáveis. Entre as tags </script> criamos as duas primeiras variáveis
var numero1 = 10;
var numero2 = 15;
Com a utilização da palavra “var”, podemos criar variáveis em nosso script. Essas variáveis podem ser manipuladas, fazendo por exemplo uma operação matemática (não esqueça de utilizar o ponto e virgula no final da linha):
var resultado = numero1 + numero2;
Salve o documento e atualize nossa página e … nada acontece!
Isso porque não dissemos a nossa aplicação que ela deve mostrar o resultado. Diversas formas podem ser feitas para visualizar o resultado em nosso navegador. De uma maneira rápida, poderemos utilizar a função alert().
Na linha abaixo do resultado, adicione um alert para exibir o resultado. Nosso script fica desta forma.
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
alert(resultado);
Quando atualizarmos nossa página, uma caixa de alerta exibirá o resultado matemático de 10 + 15. Porém, mais interessante que exibir um alerta na tela, é poder inserir esse valor diretamente no HTML. E sim, isso é possível com JavaScript.
Manipulação do HTML
Uma dos objetivos mais utilizados do JavaScript é a manipulação do documento HTML. Para entender um pouco melhor, vamos seguir os exemplos abaixo:
Primeiro, vamos alterar nosso HTML para:
<!doctype html> <html lang="pt-br"> <head> <title>JAVASCRIPT</title> <meta charset="utf-8"> </head> <body> <h2>JS</h2> <p>10 + 15 = <strong id=’resultado’></strong></p> </body> </html>
Veja que deixamos uma tag strong com o id “resultado” sem um valor dentro. É importante entender que o JavaScript manipula o HTML através das tags, ou seja, poderemos acessar a tag HTML “strong” e inserir nosso valor nela, sendo a forma mais fácil de acessar através de um ID.
Em nosso script, faremos da seguinte forma:
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
document.getElementById(‘resultado’).innerHTML = resultado;
O JavaScript transforma o HTML em objetos, onde é possível acessar diversas propriedades de cada tag, como a cor, os tamanhos e os valores.
Nesse exemplo, estamos utilizando o objeto “document”, que referencia nosso arquivo HTML, depois procuramos pelo elemento com ID “resultado” dentro do HTML e para ele utilizamos a função innerHTML para alterar o texto.
E note, que mesmo carregando a página, não temos um resultado esperado, pois é preciso ter interação com o usuário. Entretanto, para isso, precisamos conhecer funções JavaScript (JS). O nosso próximo passo!
Funções JS e Interações
Funções são partes de código que podem ser chamadas quando quisermos. Vamos adicionar a apresentação do resultado a uma função.
Nosso código script ficará assim:
function mostraResultado()
{
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
document.getElementById('resultado').innerHTML = resultado;
}
Uma das principais funções do JavaScript é proporcionar interação com o usuário, como por exemplo, exibir o resultado do cálculo somente após o usuário clicar em um botão.
Pensando nisso, em nosso código, vamos adicionar um botão que, por sua vez, irá trazer um evento chamado “onclick()” que significa “quando clicado” pelo usuário, a função executa uma ação.
Veja como ficou nosso HTML com a adição do botão:
<!doctype html>
<html lang="pt-br">
<head>
<title>JAVASCRIPT</title>
<meta charset="utf-8">
<script>
function mostraResultado()
{
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
document.getElementById('resultado').innerHTML = resultado;
}
</script>
</head>
<body>
<p>10 + 15 = <strong id="resultado"></strong></p>
<input type="button" value="Calcular" id="botao" />
</body>
</html>
Agora, incluindo a função “onclick()”:
<!doctype html>
<html lang="pt-br">
<head>
<title>JAVASCRIPT</title>
<meta charset="utf-8">
<script>
function mostraResultado()
{
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
document.getElementById('resultado').innerHTML = resultado;
}
</script>
</head>
<body>
<p>10 + 15 = <strong id="resultado"></strong></p>
<input type="button" onclick="mostraResultado()" value="Calcular" id="botao" />
</body>
</html>
Agora salve o seu HTML e teste! Você verá uma pequena aplicação em ação, ativada através do seu clique (usuário).
Separando os arquivos HTML e JavaScript
Conforme indicação do consórcio W3C – a autoridade máxima da Web, o ideal é manter os arquivos separados. Sendo assim, vamos usar o mesmo exemplo e aprender a associar um arquivo do tipo .js (JavaScript) a um documento HTML.
Vamos usar o mesmo documento HTML:
<!doctype html> <html lang="pt-br"> <head> <title>Exemplo</title> <meta charset="utf-8"> </head> <body> <p>10 + 15 = <strong id="resultado"></strong></p> <input type="button" onclick="mostraResultado()" value="Calcular" id="botao" /> </body> </html>
Agora, vamos criar um novo documento em um editor de texto como o sublime por exemplo e salvá-lo com o nome de exemplo.js, assim identificando que este documento é do tipo JavaScript.
E nele usamos o mesmo script:
function mostraResultado()
{
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
document.getElementById('resultado').innerHTML = resultado;
}
Por fim, vamos associá-los, utilizando a linha:
<script type=”text/javascript” src=”exemplo.js”></script>
Este é o documento completo:
<!doctype html> <html lang="pt-br"> <head> <title>Exemplo</title> <meta charset="utf-8"> <script type="text/javascript" src="exemplo.js"></script> </head> <body> <p>10 + 15 = <strong id="resultado"></strong></p> <input type="button" onclick="mostraResultado()" value="Calcular" id="botao" /> </body> </html>
Para utilizar o nome do arquivo na referência, precisamos que o HTML e o JavaScript estejam na mesma pasta. Do contrário, precisaremos apontar o caminho onde ele está, por exemplo: src=”js/exemplo.js”.
Agora salve e veja o mesmo resultado apresentado na etapa anterior, com a diferença existente apenas no código, onde associamos dois documentos separados (.html e .js) através do método apresentado acima.
Conclusão
Apesar de básico, o exemplo acima apresenta uma nova forma de manipular o HTML, criando a possibilidade de interação entre o usuário e do script com a página.
O JavaScript é uma tecnologia muito poderosa e conforme o desenvolvedor vai se aprofundando, é possível criar muitas funções que podem dar dinâmica às páginas HTML, criando interações e ferramentas poderosas.
O mundo Web é repleto de JavaScript. Na sua grande maioria, atua no front-end de uma aplicação Web. Contudo, atualmente, a tecnologia também está se expandindo para o mundo back-end e hoje possuímos bancos de dados NoSQL que utilizam fortemente a tecnologia para o desenvolvimento da base de dados.
Conheça mais sobre o JavaScript e o mundo front-end, confira o curso de HTML, CSS e JavaScript para iniciantes que montei para a Becode.
Após o curso, com certeza você possuirá uma excelente compreensão sobre o mundo front-end, estando apto a construir o seu primeiro website do zero!
Esperamos que esse conteúdo sobre JavaScript para iniciantes tenha tenha ajudado você a despertar o interesse por essa tecnologia incrível.
Agora que você entende sobre JavaScript, recomendamos que pratique usando o Servidor Cloud da KingHost. Você mesmo faz configuração desse produto, que tem servidor no Brasil e preço em real. Clique no banner abaixo e confira os planos!
