{"id":3804,"date":"2020-02-03T15:00:39","date_gmt":"2020-02-03T18:00:39","guid":{"rendered":"https:\/\/www.valuehost.com.br\/blog\/?p=3804"},"modified":"2026-01-22T22:56:59","modified_gmt":"2026-01-23T01:56:59","slug":"javascript","status":"publish","type":"post","link":"https:\/\/www.valuehost.com.br\/blog\/javascript\/","title":{"rendered":"\u00a0O mais completo guia sobre JavaScript para desenvolvedores de site"},"content":{"rendered":"

Todo mundo que tem um conhecimento, mesmo que b\u00e1sico, sobre o funcionamento dos sites, j\u00e1 ouviu falar sobre JavaScript. Essa linguagem de scripts foi criada para dar mais dinamismo aos sites e, gra\u00e7as \u00e0 sua versatilidade, extensa comunidade, variedade de bibliotecas e frameworks, tornou-se uma solu\u00e7\u00e3o para os diversos tipos de aplica\u00e7\u00f5es.<\/p>\n

O desenvolvedor especialista nessa linguagem transforma-se em um profissional completo. Um dos principais respons\u00e1veis pela mudan\u00e7a de patamar do JavaScript, de uma linguagem client-side para uma solu\u00e7\u00e3o integral, foi o interpretador Node.js<\/a>, que permitiu a sua utiliza\u00e7\u00e3o tamb\u00e9m do lado do servidor e viabilizou a cria\u00e7\u00e3o de sites completos.<\/p>\n

Neste post, vamos conhecer o que \u00e9 a linguagem JavaScript, suas aplica\u00e7\u00f5es, principais bibliotecas e frameworks e por que ela est\u00e1 crescendo cada vez mais. Confira!<\/p>\n

O que \u00e9 a linguagem JavaScript?<\/h2>\n

JavaScript \u00e9 uma linguagem que permite a inser\u00e7\u00e3o de fun\u00e7\u00f5es em uma aplica\u00e7\u00e3o web, ou seja, permite que um site seja mais do que uma p\u00e1gina est\u00e1tica e informativa. Com o JavaScript \u00e9 poss\u00edvel atualizar conte\u00fados em uma p\u00e1gina em intervalos de tempo, criar mapas interativos, gr\u00e1ficos animados, entre outros recursos.<\/p>\n

Na estrutura de um site, ou seja, em seu c\u00f3digo, o JavaScript fica na terceira camada, abaixo do HTML<\/a> e do CSS. Veja abaixo a ordem e o que representa cada uma dessas camadas.<\/p>\n

HTML<\/h3>\n

O HTML \u00e9 a linguagem de marca\u00e7\u00e3o, que d\u00e1 a estrutura para a p\u00e1gina, o seu esqueleto. Aqui s\u00e3o indicadas as posi\u00e7\u00f5es de cada elemento do site: os par\u00e1grafos, tabelas, listas, t\u00edtulos, inser\u00e7\u00e3o de imagens e v\u00eddeos.<\/p>\n

CSS<\/h3>\n

O CSS \u00e9 uma linguagem que define as regras de estilo que ser\u00e3o utilizadas em uma p\u00e1gina. Aqui s\u00e3o definidas as cores e estilo das fontes, do plano de fundo, posicionamento de conte\u00fado em colunas e at\u00e9 regras de transi\u00e7\u00e3o de elementos.<\/p>\n

Afinal, qual \u00e9 a fun\u00e7\u00e3o do JavaScript em um site?<\/h2>\n

Vimos acima que os sites s\u00e3o estruturados em tr\u00eas camadas, sendo que duas delas foram explicadas brevemente no t\u00f3pico anterior. Vamos entender com mais detalhe a camada JavaScript e como ela se relaciona com as outras. Antes de tudo, precisamos entender como o c\u00f3digo \u00e9 interpretado, para que seja exibida a imagem e os recursos que o usu\u00e1rio v\u00ea na tela quando acessa um site.<\/p>\n

Quando abrimos um site em nosso navegador favorito, estamos implementando um c\u00f3digo dentro de um ambiente de execu\u00e7\u00e3o. A linguagem JavaScript \u00e9 acionada pelo motor de renderiza\u00e7\u00e3o do navegador, ap\u00f3s a interpreta\u00e7\u00e3o do HTML e do CSS \u2014 isso assegura que a estrutura da p\u00e1gina estar\u00e1 pronta quando o JavaScript for executado.<\/p>\n

Essas a\u00e7\u00f5es tamb\u00e9m garantem que o conte\u00fado principal da p\u00e1gina ficar\u00e1 dispon\u00edvel, pois se o JavaScript fosse carregado antes do HTML e do CSS, poderiam ocorrer erros de TI<\/a> que comprometeriam toda a estrutura. Como se trata de uma linguagem criada para dar dinamismo \u00e0 p\u00e1gina, o JavaScript tinha como foco inicial ser uma linguagem que rodava do lado do cliente, ou seja, no navegador, mas essa limita\u00e7\u00e3o j\u00e1 foi rompida. Veja como isso \u00e9 feito no t\u00f3pico seguinte.<\/p>\n

Como a linguagem JavaScript deixou de ser apenas client-side?<\/h2>\n

Quando falamos de cria\u00e7\u00e3o de sites, temos que especificar de qual lado da aplica\u00e7\u00e3o estamos nos referindo \u2014 s\u00e3o basicamente dois, o lado do servidor (server-side) e o lado do cliente (client-side), ou seja, o conte\u00fado que aparece no navegador. Os c\u00f3digos do lado do cliente \u2014 criados em HTML, CSS e JavaScript \u2014 s\u00e3o executados na casa do usu\u00e1rio, em seu navegador. J\u00e1 os c\u00f3digos server-side s\u00e3o executados no servidor em que o site foi hospedado.<\/p>\n

Embora tenha sido criado para atuar do lado do cliente, atualmente o JavaScript pode ser utilizado em ambas as faces, incluindo a do servidor. Isso permite que um desenvolvedor especializado nessa linguagem consiga atuar em todas as etapas da cria\u00e7\u00e3o de uma aplica\u00e7\u00e3o web. Esses desenvolvedores s\u00e3o chamados de dev full stack e est\u00e3o cada vez mais valorizados no mercado.<\/p>\n

Quais s\u00e3o as tecnologias que permitem a utiliza\u00e7\u00e3o do JavaScript full stack?<\/h3>\n

Para que possamos entender melhor como o JavaScript \u00e9 utilizado em todas as camadas de uma aplica\u00e7\u00e3o web, precisamos conhecer as seguintes tecnologias \u2014 Node.js, Express, EJS e MongoDB \u2014 pois s\u00e3o elas que permitem a cria\u00e7\u00e3o de um site do in\u00edcio ao fim com JavaScript.<\/p>\n

Node.js<\/h3>\n

Se hoje podemos construir um site do in\u00edcio ao fim utilizando o JavaScript, temos que agradecer ao programador Ryan Dahl. A plataforma Node.js possibilita a interpreta\u00e7\u00e3o do c\u00f3digo do lado do servidor, levando o JavaScript para o back-end.<\/p>\n

Ao criar um ambiente de desenvolvimento, a equipe de desenvolvedores dever\u00e1 fazer a instala\u00e7\u00e3o do Node.js e, depois, uma ferramenta chamada NPM \u2014 Node Package Manager. \u00c9 o NPM que permitir\u00e1 a instala\u00e7\u00e3o e o gerenciamento de m\u00f3dulos no Node.js. H\u00e1 desenvolvedores que preferem o Yarn ao NPM, mas o importante n\u00e3o \u00e9 a ferramenta em si, e sim sua funcionalidade, mais especificamente, a instala\u00e7\u00e3o do framework Express.<\/p>\n

Express<\/h3>\n

O Express permite a cria\u00e7\u00e3o de qualquer tipo de aplica\u00e7\u00e3o web com facilidade, pois estamos falando de uma plataforma minimalista e robusta. Com ele, \u00e9 poss\u00edvel passar facilmente do navegador para o back-end, economizando o trabalho de programa\u00e7\u00e3o.<\/p>\n

EJS<\/h3>\n

O EJS \u2014 Embedded JavaScript templates \u2014 \u00e9 uma linguagem que possibilita a cria\u00e7\u00e3o de HTML utilizando somente JavaScript. Ou seja, com ela, o programador pode criar o site inteiro utilizando apenas uma linguagem. Assim, o desenvolvedor ganha em velocidade de cria\u00e7\u00e3o, al\u00e9m do c\u00f3digo ser mais integrado e padronizado.<\/p>\n

MongoDB<\/h3>\n

O MongoDB<\/a> \u00e9 a ferramenta que finaliza a cria\u00e7\u00e3o de um site de ponta a ponta utilizando apenas JavaScript, pois ela permite a estrutura\u00e7\u00e3o do banco de dados em arquivos JSON-like. \u00c9 um banco de dados open source<\/a> e gratuito, que dever\u00e1 ser utilizado com as demais ferramentas indicadas neste t\u00f3pico.<\/p>\n

Al\u00e9m de sites, o que podemos fazer com JavaScript?<\/h2>\n

Apesar de estar sempre relacionado a sites e aplica\u00e7\u00f5es web, a linguagem JavaScript vem adquirindo uma versatilidade cada vez maior nos \u00faltimos anos. Essa mudan\u00e7a come\u00e7ou a acontecer no in\u00edcio dos anos 2000, quando a Google adotou a linguagem para desenvolver alguns de seus produtos, como o Gmail. Nessa \u00e9poca, os desenvolvedores encontraram um grande problema: os interpretadores JS dos navegadores ainda eram bastante lentos.<\/p>\n

Para contornar essa situa\u00e7\u00e3o, a empresa desenvolveu uma engine de JS \u2014 o Engine V8 \u2014 open source e colocou como padr\u00e3o em seu navegador, o Google Chrome. N\u00e3o demorou muito para que a engine se tornasse padr\u00e3o de mercado e fosse adotada por outros navegadores.<\/p>\n

A partir disso, com o crescimento da comunidade de desenvolvedores especialistas em JavaScript, novas ferramentas surgiram e a linguagem passou a ser utilizada para o desenvolvimento de solu\u00e7\u00f5es que v\u00e3o muito al\u00e9m das aplica\u00e7\u00f5es web.<\/p>\n

Veja abaixo o que pode ser feito utilizando a linguagem JavaScript.<\/p>\n

Aplica\u00e7\u00f5es Mobile<\/h3>\n

O JavaScript permite a cria\u00e7\u00e3o de aplicativos para smartphones, com a vantagem de que o desenvolvedor pode utilizar apenas uma linguagem em diferentes plataformas. Tudo come\u00e7ou com as aplica\u00e7\u00f5es h\u00edbridas, que t\u00eam esse nome por utilizar duas tecnologias diferentes.<\/p>\n

Por exemplo, o Sistema operacional Android \u00e9 escrito em Java. Ao utilizar o Cordova, o programador consegue criar aplica\u00e7\u00f5es web comuns, na estrutura HTML, CSS e JavaScript e acessar as funcionalidades do dispositivo m\u00f3vel pelo JavaScript, por meio de uma integra\u00e7\u00e3o com o c\u00f3digo nativo em Java.<\/p>\n

Quando abrimos o aplicativo, na verdade estamos abrindo o navegador interno, que exibir\u00e1 a aplica\u00e7\u00e3o e permitir\u00e1 o acesso a essas funcionalidades. O nome h\u00edbrido vem justamente dessa jun\u00e7\u00e3o entre tecnologia web e tecnologia nativa.<\/p>\n

H\u00e1 tamb\u00e9m a possibilidade do desenvolvimento de aplicativos nativos, utilizando as ferramentas React Native e o NativeScript. Nesse modelo, em vez de criar uma tela HTML, \u00e9 utilizado o XML estilizado com CSS. Em vez de utilizar o navegador padr\u00e3o como base, nesse modelo, \u00e9 criada uma tela nativa da plataforma \u2014 iOS ou Android \u2014 com as a\u00e7\u00f5es escritas em JavaScript.<\/p>\n

A grande vantagem dos aplicativos nativos em rela\u00e7\u00e3o aos h\u00edbridos, \u00e9 que o primeiro entrega um desempenho maior do que o segundo. As aplica\u00e7\u00f5es h\u00edbridas dependem do navegador padr\u00e3o do sistema, o que gera um risco de incompatibilidade de c\u00f3digos. Na aplica\u00e7\u00e3o nativa n\u00e3o h\u00e1 a depend\u00eancia de navegadores, ou seja, o desenvolvedor n\u00e3o precisar\u00e1 se preocupar se ter\u00e1 ou n\u00e3o suporte para as funcionalidades.<\/p>\n

Softwares para Desktop<\/h3>\n

Sim! \u00c9 poss\u00edvel criar aplica\u00e7\u00f5es para desktops utilizando JavaScript, aproveitando o Chromium \u2014 o navegador de c\u00f3digo aberto que serve de base para o Google Chrome \u2014 al\u00e9m do Node.js. Nesse modelo de aplica\u00e7\u00e3o as telas s\u00e3o feitas utilizando o HTML5 e o CSS3, al\u00e9m do JavaScript, que se comunica diretamente com o Node.js, que ficar\u00e1 embutido na aplica\u00e7\u00e3o.<\/p>\n

O framework mais utilizado para esse tipo de aplica\u00e7\u00e3o \u00e9 o Electron, criado pela equipe do GitHub. Com ela, j\u00e1 foram desenvolvidos softwares como o Atom, Slack e o Visual Studio Code.<\/p>\n

Jogos<\/h3>\n

Se podemos criar softwares para desktops e para dispositivos m\u00f3veis, tamb\u00e9m podemos criar jogos completos tendo como base a linguagem JavaScript. Ali\u00e1s, existem Frameworks especializados na cria\u00e7\u00e3o de games. Um dos frameworks mais utilizados para esse objetivo \u00e9 o Phaser, que permite ao desenvolvedor utilizar a trinca de linguagens \u2014 HTML, CSS e JavaScript \u2014 para a cria\u00e7\u00e3o dos games.<\/p>\n

Um dos benef\u00edcios de se utilizar o Phaser \u00e9 que a pr\u00f3pria empresa oferece um curso completo de desenvolvimento de jogos para quem quer desenvolver games utilizando sua plataforma. O curso vai desde o \u201cHello, World\u201d at\u00e9 o desenvolvimento de um jogo completo. Al\u00e9m disso, para quem resolver investir na engine como ferramenta de trabalho, o site oficial do Phaser traz uma loja com in\u00fameros plugins, apps e cursos que ensinam a utilizar a plataforma e a desenvolver games.<\/p>\n

O que \u00e9 necess\u00e1rio para aprender JavaScript?<\/h2>\n

A linguagem JavaScript \u00e9 uma das mais procuradas por quem quer aprender programa\u00e7\u00e3o. Isso n\u00e3o \u00e9 por acaso, afinal, estamos falando de uma linguagem extremamente vers\u00e1til e que permite ao desenvolvedor criar aplica\u00e7\u00f5es para diversos ambientes, muitas vezes com apenas um c\u00f3digo.<\/p>\n

Para ser um bom desenvolvedor JavaScript, o aprendiz deve tamb\u00e9m buscar conhecimento em HTML e CSS, aproveitando-se dos in\u00fameros materiais, f\u00f3runs e reposit\u00f3rios sobre o desenvolvimento web. Al\u00e9m disso, voc\u00ea dever\u00e1 ter conhecimento de sintaxe de programa\u00e7\u00e3o, para criar um c\u00f3digo padronizado, limpo e leve.<\/p>\n

O que \u00e9 sintaxe de programa\u00e7\u00e3o?<\/h3>\n

A linguagem de programa\u00e7\u00e3o n\u00e3o tem esse nome \u00e0 toa. Estamos realmente falando de uma linguagem, que tem estrutura e sintaxe, com um conjunto de comandos, v\u00edrgulas, pontos, caracteres especiais e regras bem definidas sobre o que pode e o que n\u00e3o pode ser feito. Se na linguagem humana os erros de sintaxes geram falhas na comunica\u00e7\u00e3o, na linguagem de programa\u00e7\u00e3o, um erro de sintaxe pode significar um programa com bugs.<\/p>\n

Ao contr\u00e1rio do que muita gente pode pensar, para estudar programa\u00e7\u00e3o a pessoa n\u00e3o precisa ser um g\u00eanio da matem\u00e1tica ou um especialista em tecnologia. Um bom programador \u00e9 um bom resolvedor de problemas, ou seja, \u00e9 uma pessoa que consegue dividir a solu\u00e7\u00e3o de um problema em passos bem estruturados.<\/p>\n

Isso pode ser feito com papel e caneta ou com um computador, n\u00e3o importa, o importante \u00e9 que a pessoa descreva todas as etapas para executar uma tarefa. Depois disso, dever\u00e1 instruir o computador, por meio de uma linguagem de programa\u00e7\u00e3o, a executar essas tarefas, de forma sequencial e l\u00f3gica \u2014 \u00e9 a isso que damos o nome de l\u00f3gica de programa\u00e7\u00e3o.<\/p>\n

Ali\u00e1s, existem cursos de l\u00f3gica de programa\u00e7\u00e3o, que ensinam a cria\u00e7\u00e3o de algoritmos e tamb\u00e9m a estrutura\u00e7\u00e3o deles em c\u00f3digos, que depois podem ser transportados para sua linguagem de programa\u00e7\u00e3o preferida, como o JavaScript.<\/p>\n

Posso aprender JavaScript e programa\u00e7\u00e3o gratuitamente?<\/h3>\n

N\u00e3o h\u00e1 desculpas para quem deseja aprender a programar. Uma gama de cursos gratuitos de programa\u00e7\u00e3o est\u00e1 dispon\u00edvel na internet, tanto para iniciantes quanto para programadores intermedi\u00e1rios. Alguns deles, inclusive, com qualidade superior a cursos pagos. No meio de tantas op\u00e7\u00f5es, podemos destacar duas: o Instituto TIM e o Canal Curso em V\u00eddeo<\/a>, do professor Gustavo Guanabara. Separamos abaixo alguns cursos das duas plataformas que t\u00eam rela\u00e7\u00e3o com o tema deste post.<\/p>\n

Curso em v\u00eddeo<\/h4>\n

O canal Curso em V\u00eddeo oferece v\u00e1rias forma\u00e7\u00f5es voltadas para a \u00e1rea de programa\u00e7\u00e3o e tecnologia, com uma excelente did\u00e1tica e um pacote gr\u00e1fico profissional, superior a muitos cursos pagos. Veja abaixo algumas op\u00e7\u00f5es:<\/p>\n