Aprender Javascript: 10 dicas para começar a desenvolver sites

Javascript é um dos pilares da Internet que conhecemos hoje. Essa linguagem é tão relevante que sua utilização se expande em várias vertentes do desenvolvimento de software. Por isso, aprender Javascript (JS) faz várias portas se abrirem.

Existem inúmeras vagas que pedem indiretamente por JS, pois vários frameworks famosos atualmente usam essa linguagem por baixo dos panos. Porém, saber filtrar conteúdo de qualidade pode ser um problema, já que tem muito material de graça na Internet, bom e ruim.

Pensando nisso, trouxemos artigo completo com os seguintes tópicos:

O que é Javascript?

Javascript (ou simplesmente JS) é uma linguagem de programação criada nos anos 90 para trazer mais dinamismo às páginas estáticas que só possuíam HTML e CSS. Graças ao JS, o front-end foi se desenvolvendo e se tornando mais completo e complexo.

Atualmente, o JS é muito utilizado para o desenvolvimento WEB. É uma linguagem interpretada, suporta orientação a objetos e possui tipagem fraca.

Porém não se engane pelo nome! Javascript não tem nada haver com Java, apenas a empresa responsável (Netscape) aproveitou que o Java vinha crescendo na época e decidiu fazer essa jogada de marketing.

Para que serve o Javascript?

O Javascript serve principalmente para trazer mais dinamismo ao lado cliente, ou seja, tornar mais poderosos e melhorar visualmente os sites disponíveis na Internet. Por exemplo: carregar algum conteúdo em tempo real, exibir componentes interativos, adicionar animações, conteúdo em 3D e as mais diversas ações.

O JS hoje possui uma grande comunidade ao redor do mundo e graças a ela foram criados frameworks que estendem a utilização da linguagem para o lado do servidor (Ex.: Node), desenvolvimento mobile (Ex.: React Native) e desenvolvimento de jogos.

Vale a pena aprender Javascript?

Sim, a linguagem já se provou poderosa no tempo. Além do mais, grande parte da Internet que conhecemos atualmente carrega seus scripts, de forma direta ou indireta. Essa linguagem não vai cair em desuso, pois todo esse código requer manutenção.

Outro ponto é que a comunidade Javascript oferece todo o suporte necessário para que qualquer pessoa aprenda e se desenvolva na linguagem. Isso sem falar nos frameworks (como o React, Angular, Vue) que são bem aceitos e utilizados no mercado, resultando em uma grande demanda por esse conhecimento.

É difícil aprender Javascript?

Se comparar com outras linguagens mais antigas, que são mais verbosas e têm menos abstrações, aprender JS se parece bem fácil. Mas claro, para ter essa facilidade é necessário uma certa experiência em programação. Afinal, existem conhecimentos e conceitos que servem de base para qualquer linguagem.

A sintaxe do Javascript é mais simplificada. A linguagem provê várias formas de se escrever um mesmo comando, possibilitando tornar o código mais curto ou “mais bonito”. Mas muito cuidado com essa escrita! O importante em todo código é se manter simples e legível, pois nem sempre quem faz a manutenção é quem escreveu aquele trecho de código.

Para quem está começando a aprender Javascript, uma notícia animadora: não precisa de muito para preparar um ambiente de desenvolvimento, basta apenas um navegador e um editor de texto!

Qual a relação do HTML e CSS com Javascript?

HTML, CSS e Javascript são tecnologias fundamentais para o front-end, pois funcionam em conjunto. Com o Javascript manipulamos a estrutura e o estilo da página em questão.

Além de trazer mais complexidade para a página, o código Javascript permite até mesmo escrever código HTML e CSS a partir dele. Também dá pra fazer o caminho inverso: escrever código JS em um arquivo HTML utilizando a tag

Repare que o conteúdo do console só aparece após confirmar a caixa de diálogo. Para ver o console aperte F12.

Animação curta mostrando o resultado do código de "Hello, world!" escrito em Javascript
  1. Criando funções

Como em qualquer linguagem, o Javascript permite declarar funções e fazer código reutilizável. No exemplo a seguir, veremos como declarar uma função e como declarar variáveis (do tipo constantes):

O código acima exibirá o seguinte resultado, aperte F12 para abrir o console:

Animação curta mostrando o resultado da função escrita em Javascript
  1. Manipulando o DOM

O JS também nos permite manipular a árvore HTML através do DOM. A seguir, um exemplo em que, sem escrever uma tag

no HTML, vamos renderizar-lá no navegador. Podemos até aplicar estilo CSS em tal elemento:


Animação curta mostrando o resultado da manipulação de DOM, onde vemos um quadrado verde aparecer e sumir na tela
  1. Inserindo valores do teclado

Vamos renderizar uma caixa de diálogo um pouco diferente dessa vez, com um input. Assim, seremos capazes de inserir um valor do teclado e, com esse valor, vamos atualizar nosso código HTML:


 

O id que declaramos para a tag

é que nos permite recuperar aquele elemento dentro do Javascript. Vamos ver abaixo como ficou o resultado:

Animação curta mostrando o resultado da renderização de uma caixa de diálogo com um input, onde vemos um quadro de "informe seu nome" e o nome da pessoa aparecendo na tela logo em seguida
  1. Calculadora

Agora vamos fazer um último exemplo, mais interessante: uma calculadora. Vamos renderizar dois inputs HTML. A partir deles, nós iremos capturar os valores que foram inseridos e realizar uma operação matemática. Por fim exibiremos o resultado na tela:


 
 
 
 
 
 
 

Resultado:

Note que dessa vez nós recuperamos do HTML os inputs, os botões e o

. Com a propriedade onClick do HTML, especificamos um comportamento que será chamado toda vez que o elemento for clicado.

Animação curta mostrando o resultado da renderização de uma caixa de diálogo com um input em Javascript, onde vemos a criação de uma calculadora na tela

Conclusão

Aprender javascript tornou-se requisito obrigatório nos dias atuais. Vimos que graças a comunidade essa linguagem se fez muito poderosa e foi ganhando seu espaço em vários meios de atuação.

Siga as dicas para iniciar ou aprimorar sua experiência com Javascript, pois aprender nunca é demais. Apesar de parecer simples, essa linguagem tem muito a ser explorada. As oportunidades de trabalho no mercado estão aí, pedindo cada vez mais um conhecimento específico.

Portanto, não pare por aqui. Ainda há muito o que explorar na linguagem! Continue lendo sobre Yarn, um gerenciador de pacotes Javascript.