{"id":8649,"date":"2018-08-13T15:07:40","date_gmt":"2018-08-13T18:07:40","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=8649"},"modified":"2025-10-23T13:24:22","modified_gmt":"2025-10-23T16:24:22","slug":"o-que-e-javascript","status":"publish","type":"post","link":"\/br\/tutoriais\/o-que-e-javascript","title":{"rendered":"O que \u00e9 JavaScript? Defini\u00e7\u00e3o, recursos e usos explicados"},"content":{"rendered":"<p>JavaScript (JS) &eacute;&nbsp;<strong>uma linguagem de script leve e interpretada que cria conte&uacute;do din&acirc;mico e interativo em sites<\/strong>.<\/p><p>Ela cuida de tudo, desde anima&ccedil;&otilde;es simples e mapas interativos a aplica&ccedil;&otilde;es web complexas. Enquanto o HTML fornece a estrutura e o CSS ajusta o estilo, o JavaScript torna os sites responsivos &agrave;s a&ccedil;&otilde;es do usu&aacute;rio.<\/p><p>Para entender o JavaScript, voc&ecirc; precisa se familiarizar com seus elementos principais:<\/p><ul class=\"wp-block-list\">\n<li><strong>Recursos principais<\/strong>. &Eacute; vers&aacute;til e eficiente, com interpreta&ccedil;&atilde;o leve, tipagem din&acirc;mica e respostas orientadas a eventos.<\/li>\n\n\n\n<li><strong>Sintaxe e no&ccedil;&otilde;es b&aacute;sicas<\/strong>. Isso inclui vari&aacute;veis, tipos de dados, operadores, fun&ccedil;&otilde;es e condicionais para a l&oacute;gica de tomada de decis&atilde;o.<\/li>\n\n\n\n<li><strong>Vantagens e desvantagens<\/strong>. implicidade, velocidade e versatilidade versus diferen&ccedil;as de compatibilidade entre navegadores e desafios de depura&ccedil;&atilde;o (debug).<\/li>\n\n\n\n<li><strong>Casos de uso<\/strong>. JavaScript &eacute; usado em desenvolvimento de apps, desenvolvimento de jogos, interatividade em sites, aplica&ccedil;&otilde;es de back-end, entre outros.<\/li>\n\n\n\n<li><strong>Frameworks populares<\/strong>. Os principais incluem React, Angular, jQuery, Node.js e Vue.js.<\/li>\n\n\n\n<li><strong>Posicionamento da linguagem<\/strong>. Sua natureza interpretada e flexibilidade o distinguem das alternativas compiladas.<\/li>\n<\/ul><p>Se voc&ecirc; prefere um guia visual para aprender o que &eacute; JavaScript, assista ao v&iacute;deo abaixo do nosso canal no YouTube:<\/p><figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"O Que &eacute; JavaScript? &#128270; - Hostinger Brasil\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/DTwKDADACwY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-principais-recursos-do-javascript\"><strong>Principais recursos do JavaScript<\/strong><\/h2><p>As principais caracter&iacute;sticas do JavaScript s&atilde;o sua&nbsp;<strong>versatilidade e efici&ecirc;ncia na cria&ccedil;&atilde;o de conte&uacute;do din&acirc;mico para a web<\/strong>. Essas caracter&iacute;sticas o tornam um pilar do desenvolvimento web moderno.<\/p><ul class=\"wp-block-list\">\n<li><strong>Leve e interpretado<\/strong>. O JavaScript n&atilde;o precisa ser compilado antes de executar &ndash; os navegadores interpretam o c&oacute;digo diretamente, acelerando o desenvolvimento e os testes.<\/li>\n\n\n\n<li><strong>Tipagem din&acirc;mica<\/strong>. As vari&aacute;veis n&atilde;o t&ecirc;m tipo fixo. Voc&ecirc; pode atribuir um n&uacute;mero e depois uma string &agrave; mesma vari&aacute;vel, ganhando flexibilidade.<\/li>\n\n\n\n<li><strong>Orientado a eventos<\/strong>. O JavaScript responde a a&ccedil;&otilde;es do usu&aacute;rio (eventos) &mdash; cliques, movimentos do mouse ou pressionamento de teclas &mdash; possibilitando experi&ecirc;ncias altamente interativas.<\/li>\n\n\n\n<li><strong>Suporta programa&ccedil;&atilde;o orientada a objetos e funcional<\/strong>. A linguagem funciona com orienta&ccedil;&atilde;o a objetos (organiza o c&oacute;digo em objetos) e com programa&ccedil;&atilde;o funcional (fun&ccedil;&otilde;es como &ldquo;cidad&atilde;os de primeira classe&rdquo;). Essa natureza h&iacute;brida permite escolher a abordagem ideal para cada necessidade.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-sintaxe-e-nocoes-basicas-de-javascript\"><strong>Sintaxe e no&ccedil;&otilde;es b&aacute;sicas de JavaScript<\/strong><\/h2><p>A sintaxe do JavaScript &eacute; o&nbsp;<strong>conjunto de regras que definem como escrever c&oacute;digo na linguagem<\/strong>. Compreender esses fundamentos &eacute; o primeiro passo para escrever c&oacute;digo funcional.<\/p><ul class=\"wp-block-list\">\n<li><strong>Vari&aacute;veis<\/strong>. S&atilde;o &ldquo;recipientes&rdquo; que armazenam valores. No JavaScript moderno, a boa pr&aacute;tica &eacute; declarar vari&aacute;veis com&nbsp;<strong>let<\/strong>&nbsp;para valores que podem mudar,&nbsp;<strong>const<\/strong>&nbsp;para valores que n&atilde;o devem mudar e&nbsp;<strong>var<\/strong>&nbsp;apenas para c&oacute;digo legado.<\/li>\n\n\n\n<li><strong>Tipos de dados<\/strong>. Cada vari&aacute;vel tem um tipo de dados. Os mais comuns s&atilde;o&nbsp;<strong>String&nbsp;<\/strong>(para textos como&nbsp;<strong>&ldquo;Ol&aacute;&rdquo;<\/strong>),&nbsp;<strong>Number&nbsp;<\/strong>(para n&uacute;meros como<strong>&nbsp;100<\/strong>),&nbsp;<strong>Boolean&nbsp;<\/strong>(para valores<strong>&nbsp;verdadeiros&nbsp;<\/strong>ou&nbsp;<strong>falsos<\/strong>),&nbsp;<strong>Object&nbsp;<\/strong>(para cole&ccedil;&otilde;es de dados e entidades mais complexas) e&nbsp;<strong>Undefined<\/strong>.<\/li>\n\n\n\n<li><strong>Operadores<\/strong>. S&atilde;o s&iacute;mbolos usados para realizar opera&ccedil;&otilde;es com vari&aacute;veis e valores. Os tipos comuns incluem operadores aritm&eacute;ticos (<strong>+<\/strong>,&nbsp;<strong>&ndash;<\/strong>,&nbsp;<strong>*<\/strong>,&nbsp;<strong>\/<\/strong>), operadores de atribui&ccedil;&atilde;o (<strong>=<\/strong>) e operadores de compara&ccedil;&atilde;o (<strong>==<\/strong>,&nbsp;<strong>&gt;<\/strong>). Por exemplo, o operador&nbsp;<strong>+&nbsp;<\/strong>pode unir duas strings (<strong>&ldquo;Ol&aacute;&rdquo; + &rdquo; Mundo&rdquo;<\/strong>).<\/li>\n\n\n\n<li><strong>Fun&ccedil;&otilde;es<\/strong>. Blocos de c&oacute;digo reutiliz&aacute;veis que executam uma tarefa espec&iacute;fica. Definir fun&ccedil;&otilde;es ajuda a organizar o c&oacute;digo e evitar repeti&ccedil;&atilde;o.<\/li>\n\n\n\n<li><strong>Condicionais<\/strong>. Permitem executar blocos diferentes conforme uma condi&ccedil;&atilde;o. A estrutura&nbsp;<strong>if&hellip;else&nbsp;<\/strong>funciona como uma decis&atilde;o: se a condi&ccedil;&atilde;o for verdadeira, fa&ccedil;a algo; caso contr&aacute;rio, fa&ccedil;a outra coisa.<\/li>\n<\/ul><p>Aqui vai um exemplo simples de &ldquo;Hello, World!&rdquo; em JavaScript. O c&oacute;digo cria uma fun&ccedil;&atilde;o que mostra um alerta no navegador:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Esta fun&ccedil;&atilde;o exibe uma caixa pop-up\nfunction&nbsp;greet() {\n&nbsp;&nbsp;alert(\"Hello, World!\");\n}\n\/\/ Esta linha chama a fun&ccedil;&atilde;o para execut&aacute;-la\ngreet();<\/pre><p>Para ver esse c&oacute;digo em a&ccedil;&atilde;o, copie e cole dentro de um arquivo HTML, salve e abra em qualquer navegador. Use este modelo completo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&nbsp;&nbsp;&lt;title&gt;Meu primeiro JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&nbsp;&nbsp;&lt;h1&gt;Minha p&aacute;gina da web&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Esta fun&ccedil;&atilde;o exibe uma caixa pop-up\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;greet() {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(\"Hello, World!\");\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Esta linha chama a fun&ccedil;&atilde;o para que ela seja executada\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;greet();\n&nbsp;&nbsp;&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><p>Ao abrir o arquivo no navegador, o JavaScript dentro das tags&nbsp;<strong>&lt;script&gt;<\/strong>&nbsp;&eacute; executado automaticamente e o pop-up&nbsp;<strong>&ldquo;Hello, World!&rdquo;<\/strong>&nbsp;aparece.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f22bd881be8\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"402\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/public\" alt='chrome exibindo popup javascript com a mensagem \"hello, world!\"' class=\"wp-image-51301\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2018\/08\/chrome-javascript-hello-world-popup.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Ampliar\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-quais-sao-as-vantagens-do-javascript\"><strong>Quais s&atilde;o as vantagens do JavaScript?<\/strong><\/h2><p>A principal vantagem do JavaScript &eacute; sua&nbsp;<strong>capacidade de criar interfaces de usu&aacute;rio ricas e interativas que s&atilde;o executadas diretamente no navegador<\/strong>. Essa execu&ccedil;&atilde;o no lado do cliente traz v&aacute;rios benef&iacute;cios importantes.<\/p><ul class=\"wp-block-list\">\n<li><strong>Simplicidade<\/strong>. O JavaScript tem uma sintaxe relativamente simples, inspirada em linguagens como&nbsp;<strong>Java<\/strong>&nbsp;e&nbsp;<strong>C<\/strong>, o que o torna&nbsp;<a href=\"\/br\/tutoriais\/linguagens-de-programacao-mais-usadas\" target=\"_blank\" rel=\"noreferrer noopener\">uma das linguagens mais f&aacute;ceis para iniciantes<\/a>&nbsp;aprenderem e lerem.<\/li>\n\n\n\n<li><strong>Velocidade<\/strong>. Como roda no cliente, o JavaScript responde imediatamente &agrave;s a&ccedil;&otilde;es do usu&aacute;rio, sem precisar ir ao servidor. Exemplo: ao preencher um formul&aacute;rio de contato com um e-mail inv&aacute;lido, a mensagem de erro instant&acirc;nea &eacute; trabalho do JavaScript &mdash; sem recarregar a p&aacute;gina.<\/li>\n\n\n\n<li><strong>Versatilidade<\/strong>. Criado para o front-end, hoje o JavaScript est&aacute; em todo lugar: no back-end com<strong>&nbsp;Node.js<\/strong>, em apps m&oacute;veis para iOS e Android (<strong>React Native<\/strong>) e at&eacute; em aplicativos desktop (<strong>Electron<\/strong>).<\/li>\n\n\n\n<li><strong>Popularidade<\/strong>. O JavaScript tem uma comunidade enorme e ativa. De acordo com a&nbsp;<a href=\"https:\/\/survey.stackoverflow.co\/2025\/technology#most-popular-technologies-language\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Pesquisa com Desenvolvedores Stack Overflow 2025<\/strong><\/a>, ele continua sendo a linguagem mais usada. Na pr&aacute;tica, isso significa que, se voc&ecirc; travar em algo, &eacute; bem prov&aacute;vel achar uma solu&ccedil;&atilde;o r&aacute;pida em f&oacute;runs ou tutoriais.<\/li>\n\n\n\n<li><strong>Menor carga no servidor<\/strong>. Ao processar tarefas no navegador, o JavaScript reduz o trabalho do servidor. No exemplo de valida&ccedil;&atilde;o de formul&aacute;rio, o browser checa os erros primeiro; o servidor s&oacute; recebe envios v&aacute;lidos, economizando recursos.<\/li>\n\n\n\n<li><strong>Atualiza&ccedil;&otilde;es constantes<\/strong>. A ECMA International atualiza regularmente a linguagem por meio da especifica&ccedil;&atilde;o ECMAScript, adicionando novos recursos e melhorando a funcionalidade. Por exemplo, a atualiza&ccedil;&atilde;o&nbsp;<strong>ES16&nbsp;<\/strong>introduziu m&eacute;todos como&nbsp;<strong>Set.intersection<\/strong>,&nbsp;<strong>Set.difference&nbsp;<\/strong>e&nbsp;<strong>Set.symmetricDifference<\/strong>, que permitem aos desenvolvedores comparar rapidamente conjuntos e lidar com dados exclusivos de forma mais eficiente.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-quais-sao-as-desvantagens-do-javascript\"><strong>Quais s&atilde;o as desvantagens do JavaScript?<\/strong><\/h2><p>A principal desvantagem do JavaScript &eacute; que&nbsp;<strong>a execu&ccedil;&atilde;o no lado do cliente pode introduzir vulnerabilidades de seguran&ccedil;a e inconsist&ecirc;ncias entre navegadores<\/strong>.<\/p><ul class=\"wp-block-list\">\n<li><strong>Compatibilidade entre navegadores<\/strong>. DNavegadores diferentes interpretam o JavaScript de formas ligeiramente distintas. Em muitos casos, &eacute; preciso escrever c&oacute;digo extra ou usar&nbsp;<em>polyfills<\/em>&nbsp;para manter o site consistente em Chrome, Firefox e Safari.<\/li>\n\n\n\n<li><strong>Seguran&ccedil;a<\/strong>. Como o c&oacute;digo roda no computador do usu&aacute;rio, atacantes podem explor&aacute;-lo caso a aplica&ccedil;&atilde;o n&atilde;o esteja bem protegida. Um exemplo comum &eacute; o XSS (cross-site scripting), que injeta c&oacute;digo malicioso no navegador quando o site n&atilde;o valida e higieniza entradas corretamente.<\/li>\n\n\n\n<li><strong>Desafios de depura&ccedil;&atilde;o<\/strong>. &Agrave;s vezes, um erro em JavaScript falha silenciosamente &mdash; o script para de funcionar sem exibir mensagem de erro. Isso pode dificultar a identifica&ccedil;&atilde;o e corre&ccedil;&atilde;o de bugs em compara&ccedil;&atilde;o com algumas linguagens do lado do servidor.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-para-que-o-javascript-e-usado\"><strong>Para que o JavaScript &eacute; usado?<\/strong><\/h2><p>O JavaScript &eacute; vers&aacute;til e aparece em quase todas as &aacute;reas do desenvolvimento de software &mdash; do navegador ao servidor e al&eacute;m.<\/p><p><strong>Desenvolvimento de web apps e aplicativos m&oacute;veis<\/strong><\/p><p>Os desenvolvedores usam JavaScript para&nbsp;<strong>construir o front-end de sites e aplicativos m&oacute;veis<\/strong>. Frameworks modernos como&nbsp;<strong>React<\/strong>,&nbsp;<strong>Angular&nbsp;<\/strong>e&nbsp;<strong>Vue.js&nbsp;<\/strong>permitem que eles criem aplicativos complexos de p&aacute;gina &uacute;nica (SPAs).<\/p><p>Uma SPA &eacute; um site que interage com o usu&aacute;rio reescrevendo dinamicamente a p&aacute;gina atual, em vez de carregar p&aacute;ginas inteiras do servidor. Isso gera uma experi&ecirc;ncia mais r&aacute;pida e fluida.<\/p><p>No desenvolvimento mobile, frameworks como&nbsp;<strong>React Native<\/strong>&nbsp;e&nbsp;<strong>NativeScript<\/strong>&nbsp;permitem escrever o c&oacute;digo uma vez e public&aacute;-lo como app nativo para iOS e Android, economizando tempo de desenvolvimento.<\/p><p><strong>Servidores web e aplicativos back-end<\/strong><\/p><p>Com a introdu&ccedil;&atilde;o do&nbsp;<a href=\"\/br\/tutoriais\/o-que-e-node-js\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Node.js<\/strong><\/a>, muitos desenvolvedores passaram a escolher JavaScript para&nbsp;<strong>criar aplica&ccedil;&otilde;es de back-end r&aacute;pidas e escal&aacute;veis<\/strong>.<\/p><p>O Node.js executa JavaScript no servidor, lidando com tarefas como processamento de dados, autentica&ccedil;&atilde;o de usu&aacute;rios e comunica&ccedil;&atilde;o com bancos de dados.<\/p><p>Sua arquitetura n&atilde;o bloqueante (I\/O ass&iacute;ncrona + event loop) &eacute; altamente eficiente &ndash; o Node.js atende muitas requisi&ccedil;&otilde;es ao mesmo tempo sem desacelerar, o que &eacute; ideal para apps em tempo real, como chats e streams de dados ao vivo.<\/p><p><strong>Comportamentos interativos de sites<\/strong><\/p><p>Um dos usos mais antigos &mdash; e importantes &mdash; do JavaScript &eacute;&nbsp;<strong>adicionar interatividade &agrave;s p&aacute;ginas web<\/strong>. Exemplos comuns: menus suspensos clic&aacute;veis, sliders animados e formul&aacute;rios que validam os campos na hora.<\/p><p>O JavaScript tamb&eacute;m permite atualizar partes da p&aacute;gina sem recarregar tudo.<\/p><p>Usando um m&eacute;todo chamado&nbsp;<a href=\"\/br\/tutoriais\/o-que-e-ajax\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>AJAX<\/strong><\/a>, a p&aacute;gina busca dados do servidor em segundo plano, criando experi&ecirc;ncias cont&iacute;nuas &mdash; como no Google Maps (carregando mapas e rotas enquanto voc&ecirc; navega) ou nos feeds de redes sociais, que atualizam automaticamente.<\/p><p><strong>Desenvolvimento de jogos<\/strong><\/p><p>O JavaScript tamb&eacute;m&nbsp;<strong>alimenta jogos que rodam direto no navegador<\/strong>. Combinado com o elemento&nbsp;<strong>&lt;canvas&gt;&nbsp;<\/strong>do HTML5 e tecnologias de renderiza&ccedil;&atilde;o gr&aacute;fica como&nbsp;<strong>WebGL<\/strong>, os desenvolvedores podem criar jogos 2D e 3D complexos que rodam diretamente no navegador, sem necessidade de plugins.<\/p><p>Muitos jogos populares na web usam esse conjunto de tecnologias, incluindo o puzzle viral 2048.<\/p><h2 class=\"wp-block-heading\" id=\"h-frameworks-e-bibliotecas-javascript-populares\"><strong>Frameworks e bibliotecas JavaScript populares<\/strong><\/h2><p>O ecossistema do JavaScript re&uacute;ne milhares de frameworks e&nbsp;<strong>bibliotecas com c&oacute;digo pronto para acelerar o desenvolvimento<\/strong>.<\/p><p><strong>React<\/strong><\/p><p>Desenvolvido e mantido pela Meta,&nbsp;<a href=\"\/br\/tutoriais\/o-que-e-react-javascript\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>o React<\/strong><\/a>&nbsp;&eacute; uma biblioteca de front-end para construir interfaces de usu&aacute;rio. Sua principal inova&ccedil;&atilde;o &eacute; a arquitetura baseada em componentes, que permite montar UIs complexas combinando pequenas partes isoladas chamadas componentes.&nbsp;<\/p><p>Pense em blocos de Lego &ndash; cada pe&ccedil;a &eacute; simples sozinha, mas, juntas, formam qualquer coisa. Essa abordagem torna o c&oacute;digo altamente reutiliz&aacute;vel e mais f&aacute;cil de manter, por isso o React &eacute; muito popular no desenvolvimento de SPAs.<\/p><p><strong>Angular<\/strong><\/p><p>O Angular &eacute; um framework de front-end abrangente, desenvolvido e mantido pelo Google. Diferente do React, que &eacute; apenas uma biblioteca para a interface, o Angular &eacute; uma plataforma completa.&nbsp;<\/p><p>Ele oferece um conjunto estruturado de regras e ferramentas para criar aplica&ccedil;&otilde;es grandes, em escala corporativa. O Angular usa&nbsp;<strong>TypeScript<\/strong>, que adiciona verifica&ccedil;&atilde;o de tipos ao JavaScript para ajudar a encontrar erros durante o desenvolvimento.<\/p><p><strong>Vue.js<\/strong><\/p><p>O Vue.js se destaca pela simplicidade e facilidade de ado&ccedil;&atilde;o. Muitos desenvolvedores o consideram o mais f&aacute;cil dos &ldquo;tr&ecirc;s grandes&rdquo; (React, Angular e Vue) para iniciantes.&nbsp;<\/p><p>O Vue &eacute; um framework progressivo, o que significa que voc&ecirc; pode us&aacute;-lo para aprimorar uma parte pequena de um site existente ou ampli&aacute;-lo para construir uma SPA completa do zero. Sua flexibilidade e excelente documenta&ccedil;&atilde;o o tornaram favorito de muitos times.<\/p><p><strong>Node.js<\/strong><\/p><p>Ao contr&aacute;rio dos anteriores, o Node.js n&atilde;o &eacute; um framework de front-end. &Eacute; um runtime de back-end que executa JavaScript no servidor. Antes do Node.js, o JavaScript s&oacute; podia ser usado no navegador.&nbsp;<\/p><p>Hoje, os desenvolvedores usam Node.js para criar servidores web, APIs e integrar bancos de dados, tudo com a mesma linguagem usada no front-end. Essa possibilidade de usar uma &uacute;nica linguagem no cliente e no servidor &eacute; uma grande vantagem.<\/p><p><strong>jQuery<\/strong><\/p><p>Popular pelo lema &ldquo;escreva menos, fa&ccedil;a mais&rdquo;,&nbsp;<a href=\"\/br\/tutoriais\/o-que-e-jquery\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>o jQuery<\/strong><\/a>&nbsp;foi extremamente influente por muitos anos. Ele simplificou tarefas como tratar eventos, animar elementos e fazer requisi&ccedil;&otilde;es a APIs.<\/p><p>&nbsp;Embora frameworks modernos, como React e Vue, tenham substitu&iacute;do o jQuery na maioria dos projetos novos, milh&otilde;es de sites e CMS (como o WordPress) ainda dependem dele. &Eacute; menos comum em novos desenvolvimentos, mas segue sendo parte importante da hist&oacute;ria do JavaScript.<\/p><p>Al&eacute;m disso, se voc&ecirc; deseja melhorar o desempenho do aplicativo, considere explorar&nbsp;os melhores compiladores JavaScript. Ferramentas como&nbsp;<strong>Babel&nbsp;<\/strong>e&nbsp;<strong>ReScript&nbsp;<\/strong>podem otimizar o c&oacute;digo, reduzir o tamanho dos arquivos e melhorar a velocidade de execu&ccedil;&atilde;o.<\/p><h2 class=\"wp-block-heading\" id=\"h-qual-a-diferenca-entre-o-javascript-e-outras-linguagens-de-programacao\"><strong>Qual a diferen&ccedil;a entre o JavaScript e outras linguagens de programa&ccedil;&atilde;o?<\/strong><\/h2><p>Uma diferen&ccedil;a fundamental &eacute; que&nbsp;<strong>o JavaScript funciona principalmente como uma linguagem de script interpretada para navegadores, enquanto muitas outras linguagens populares compilam c&oacute;digo e s&atilde;o executadas sobretudo no servidor<\/strong>.<\/p><p>A tabela abaixo compara o JavaScript com outras linguagens comuns, incluindo&nbsp;<strong>Java<\/strong>,&nbsp;<strong>PHP<\/strong>,&nbsp;<strong>Python&nbsp;<\/strong>e&nbsp;<strong>C#<\/strong>:<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Recurso<\/strong><\/td><td><strong>JavaScript<\/strong><\/td><td><strong>Java<\/strong><\/td><td><strong>PHP<\/strong><\/td><td><strong>Python<\/strong><\/td><td><strong>C<\/strong><\/td><\/tr><tr><td><strong>Execu&ccedil;&atilde;o<\/strong><\/td><td>Roda em navegadores ou em servidores (com Node.js)<\/td><td>Roda na M&aacute;quina Virtual Java (JVM)<\/td><td>Roda em servidores<\/td><td>Roda em servidores<\/td><td>Roda no .NET Framework<\/td><\/tr><tr><td><strong>Tipagem<\/strong><\/td><td>Tipagem din&acirc;mica<\/td><td>Tipagem est&aacute;tica<\/td><td>Tipagem din&acirc;mica<\/td><td>Tipagem din&acirc;mica<\/td><td>Tipagem est&aacute;tica<\/td><\/tr><tr><td><strong>Compila&ccedil;&atilde;o<\/strong><\/td><td>Interpretada (com just-in-time nos navegadores modernos)<\/td><td>Compilada para bytecode<\/td><td>Interpretada<\/td><td>Interpretada<\/td><td>Compilada<\/td><\/tr><tr><td><strong>Uso principal<\/strong><\/td><td>Front-end interativo, servidores back-end, apps mobile<\/td><td>Apps corporativos, apps Android<\/td><td>Desenvolvimento web, CMS<\/td><td>Desenvolvimento web, ci&ecirc;ncia de dados, IA, automa&ccedil;&atilde;o<\/td><td>Apps Windows, desenvolvimento de jogos, servi&ccedil;os web<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-comecar-a-usar-javascript-no-seu-site\"><strong>Como come&ccedil;ar a usar JavaScript no seu site?<\/strong><\/h2><p>Agora que voc&ecirc; j&aacute; entende o que &eacute; JavaScript, o pr&oacute;ximo passo &eacute; colocar em pr&aacute;tica. A forma de adicionar JavaScript ao site depende da plataforma que voc&ecirc; usa. Temos dois caminhos para come&ccedil;ar:<\/p><ul class=\"wp-block-list\">\n<li><strong>Usu&aacute;rios do WordPress<\/strong>. Se o seu site &eacute; executado em um CMS como o WordPress, voc&ecirc; provavelmente adicionar&aacute; scripts usando plugins ou as fun&ccedil;&otilde;es do seu tema. Nosso guia sobre&nbsp;<a href=\"\/br\/tutoriais\/javascript-externo-no-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como adicionar JavaScript ao WordPress<\/strong><\/a>&nbsp;explica as melhores pr&aacute;ticas para fazer isso com seguran&ccedil;a.<\/li>\n\n\n\n<li><strong>Sites est&aacute;ticos<\/strong>. Se voc&ecirc; estiver trabalhando diretamente com arquivos HTML, precisar&aacute; saber onde e como colocar seu c&oacute;digo usando a tag<strong>&nbsp;&lt;script&gt;<\/strong>. Para aprender os fundamentos, comece com nosso tutorial sobre&nbsp;<a href=\"\/br\/tutoriais\/como-adicionar-javascript-no-html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>como adicionar JavaScript ao HTML<\/strong><\/a>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript (JS) &eacute;&nbsp;uma linguagem de script leve e interpretada que cria conte&uacute;do din&acirc;mico e interativo em sites. Ela cuida de tudo, desde anima&ccedil;&otilde;es simples e mapas interativos a aplica&ccedil;&otilde;es web complexas. Enquanto o HTML fornece a estrutura e o CSS ajusta o estilo, o JavaScript torna os sites responsivos &agrave;s a&ccedil;&otilde;es do usu&aacute;rio. Para entender [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/o-que-e-javascript\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":51302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Descubra o que \u00e9 JavaScript e por que ele \u00e9 essencial para sites modernos. Veja exemplos e frameworks que tornam a web mais interativa.","rank_math_focus_keyword":"o que \u00e9 javascript","footnotes":""},"categories":[5602],"tags":[4793,5825,5824],"class_list":["post-8649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-glossario","tag-javascript","tag-linguagem-javascript","tag-o-que-e-javascript"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-javascript","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-javascript","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/qu-est-ce-que-javascript","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-javascript-introduccion-basica","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-javascript","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-javascript","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-javascript","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-javascript","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-javascript","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-javascript","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-javascript","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-javascript","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-javascript","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-javascript","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-javascript","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-javascript","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=8649"}],"version-history":[{"count":17,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8649\/revisions"}],"predecessor-version":[{"id":51303,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/8649\/revisions\/51303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/51302"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=8649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=8649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=8649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}