O JavaScript é uma linguagem de programação essencial que desempenha um papel fundamental na criação de experiências interativas na web. Se você é um iniciante no mundo da programação ou deseja expandir suas habilidades, este guia é para você!
Continue a leitura para entender os conceitos básicos do JavaScript e os recursos valiosos capazes de ajudar você a iniciar sua jornada de programação. Você saberá mais sobre:
- quais são as principais etapas do desenvolvimento de páginas web;
- o que é JavaScript;
- JavaScript para iniciantes: por que aprender;
- JavaScript para iniciantes: como inserir o JavaScript na página HTML;
- JavaScript para iniciantes: criando o primeiro código;
- manipulação do HTML;
- saiba mais sobre as funções JS e as Interações;
- como separar os arquivos HTML e JavaScript;
- JavaScript para iniciantes: quais são os próximos passos.
Quais são as principais etapas do desenvolvimento de páginas web?
No desenvolvimento de páginas web, iniciamos nosso trabalho com duas etapas principais:
- criação do HTML (estrutura do documento);
- desenvolvimento de uma estrutura de CSS, para estilizar os elementos do HTML e dar o visual que gostaríamos para a página.
Em seguida, criamos páginas com o visual e o conteúdo que desejamos. Mas uma web dinâmica traz a necessidade de interagir com o usuário, e não é possível fazer isso apenas com HTML e CSS.Essa necessidade dá origem ao JavaScript, que possibilita diversas funcionalidades, das mais simples às mais complexas.
Entre as primeiras funcionalidades que possibilita estão: manipulação de botões, alertas, sliders e galerias.
Além disso, é possível realizar a criação de jogos e animações em 2D e 3D, Single Page Applications, criação de aplicativos para celular e outras funcionalidades que surgem através das novas tecnologias disponíveis no mercado.
Toda essa dinâmica e as possibilidades que o JavaScript apresenta o colocam entre as linguagens mais populares atualmente. Agora que você já sabe um pouco mais sobre essas etapas essenciais, entenda a linguagem que pode abrir uma gama gigante de possibilidades ao desenvolvedor web e também ao DBA NoSQL.
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, como mapas interativos, gráficos 2D/3D animados e etc, que se atualizam em um intervalo de tempo.
Isso quer dizer que ela está presente em toda página da web que faz mais do que simplesmente mostrar a você informação estática. Em outras palavras, o JavaScript é amplamente utilizado para adicionar funcionalidades dinâmicas e interativas a sites e aplicativos web. Para isso, ele é executado no navegador do usuário.
Leia também: 13 bibliotecas JavaScript para apoiar o desenvolvimento de soluções criativas
JavaScript para iniciantes: por que aprender?
Entre os motivos que fazem o JavaScript tão interessante está sua versatilidade, já que ele permite o desenvolvimento de uma ampla variedade de aplicativos, desde jogos até aplicativos de negócios.
Há também uma alta demanda por desenvolvedores JavaScript, o que o torna uma habilidade valiosa no mercado de trabalho. Além disso, essa é uma comunidade grande, ativa e participativa, o que significa que você encontrará suporte e recursos facilmente.
JavaScript para iniciantes: como inserir o JavaScript na página HTML
Quer saber como inserir o JavaScript na página HTML? Os pré-requisitos para cumprir esta etapa são: interação básica com o computador, entendimento básico de HTML e CSS.
Sendo assim, para que o navegador consiga interpretar o código JavaScript, você precisa associá-lo a um documento HTML. Existem duas formas de fazer isso: por meio da criação de códigos em meio ao HTML e pela separação dos 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 concluir esta missão e 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
Após concluir a etapa anterior e abrir nossa página exemplo.html no navegador, não conseguiremos notar diferença alguma, e isso acontece porque nosso JavaScript está vazio. Porém, agora podemos testar algumas funcionalidades que, mesmo simples, poderão resolver diversos problemas.
O que são variáveis em JavaScript?
As variáveis, em Javascript, são utilizadas para salvar dados que poderão ser acessados e/ou manipulados futuramente. Isso inclui diversos tipos de dados, como strings, números, booleanos, arrays, objetos e funções.
Criaremos nossas duas primeiras variáveis entre as tags </script> no nosso arquivo “exemplo.js”:
var numero1 = 10;
var numero2 = 15;
A utilização da palavra “var” permite a criação de variáveis em nosso script, e essas podem ser manipuladas, como, por exemplo, para fazer uma operação matemática. Para isso, não esqueça de utilizar o ponto e vírgula no final da linha:
var resultado = numero1 + numero2;
Agora, salve o documento e atualize nossa página para notar que nada acontece! Isso porque não dissemos à nossa aplicação que ela deve mostrar o resultado. Isso pode ser feito de diversas formas, como pelo uso da função alert().
Na linha abaixo do resultado, adicione um alert para exibir o resultado. Nosso script, então, deve ficar desta forma:
var numero1 = 10;
var numero2 = 15;
var resultado = numero1 + numero2;
alert(resultado);
Agora, ao atualizar nossa página, veremos uma caixa de alerta que exibirá o resultado matemático de 10 + 15. Porém, poder inserir esse valor diretamente no HTML é mais interessante do que exibir um alerta na tela, não é mesmo? E sim, isso é possível com JavaScript.
Manipulação do HTML
Uma dos objetivos mais utilizados do JavaScript, tanto para iniciantes quanto para usuários mais experientes, é a manipulação do documento HTML. Para entender um pouco melhor, 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 o valor desejado, e esta é 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.
Note que, mesmo carregando a página, não temos um resultado esperado, já que é preciso ter interação com o usuário. Entretanto, para isso, precisamos conhecer funções JavaScript (JS), e esse é o nosso próximo passo!
Saiba mais sobre as funções JS e as Interações
Em JavaScript, uma função é um bloco de código reutilizável que realiza uma tarefa específica ou calcula um valor. Ela pode ser executada quando necessário, sendo uma parte fundamental da linguagem de programação JavaScript.
Vamos, agora, 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, vamos adicionar ao nosso código um botão que trará um evento chamado “onclick()”, que significa “quando clicado” pelo usuário. Sendo assim, 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, é necessário salvar o HTML e testá-lo! Você verá uma pequena aplicação em ação, ativada por meio do seu clique (usuário).
Como separar os arquivos HTML e JavaScript?
O consórcio W3C é considerado a autoridade máxima da Web no assunto e indica que 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:
<!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. Isso será suficiente para identificar o documento como sendo do tipo JavaScript. A seguir, usamos nele 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>. Como resultado, o documento completo ficará assim:
<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, será necessário apontar o caminho onde ele está, por exemplo: src=”js/exemplo.js”.
Agora, salve as mudanças e veja o mesmo resultado apresentado na etapa anterior, com a diferença existente apenas no código. Nele, associamos dois documentos separados (.html e .js) por meio do método apresentado acima.
JavaScript para iniciantes: quais são os próximos passos?
O exemplo acima pode parecer básico, mas 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.
Ele também nos permite observar que o JavaScript é uma tecnologia muito poderosa e, conforme o desenvolvedor vai se aprofundando, pode criar muitas funções que deixam as páginas HTML mais dinâmicas, com interações e ferramentas poderosas.
O mundo Web é repleto de JavaScript que, 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.
Então, os próximos passos de quem deseja ir além do conteúdo de JavaScript para iniciantes incluem conhecer mais sobre o assunto e o mundo front-end. Por isso, confira o Conexão KingHost: uma plataforma repleta de conteúdos relevantes para quem quer saber mais sobre empreendedorismo, gestão, design, presença digital e marketing.
Não perca a oportunidade, são conteúdos gratuitos que irão ajudar o seu negócio a evoluir no digital! Clique no banner abaixo e saiba mais!
