{"id":8649,"date":"2018-08-13T15:07:40","date_gmt":"2018-08-13T18:07:40","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=8649"},"modified":"2023-09-08T13:47:53","modified_gmt":"2023-09-08T16:47:53","slug":"o-que-e-javascript","status":"publish","type":"post","link":"\/pt\/tutoriais\/o-que-e-javascript","title":{"rendered":"O que \u00e9 JavaScript e para que serve na programa\u00e7\u00e3o web"},"content":{"rendered":"<p><span style=\"font-weight: 400\">N&atilde;o importa se voc&ecirc; est&aacute; come&ccedil;ando sua jornada no mundo da programa&ccedil;&atilde;o agora ou j&aacute; tem experi&ecirc;ncia com outras linguagens. Voc&ecirc; provavelmente j&aacute; ouviu falar sobre <strong>Javascript<\/strong>. <\/span><\/p><p><span style=\"font-weight: 400\">Esta que &eacute; uma das principais linguagens de programa&ccedil;&atilde;o oferece uma variedade muito grande de frameworks e aplica&ccedil;&otilde;es para os mais diversos dispositivos. E, quem domina o Javascript, acaba se tornando um programador muito vers&aacute;til.<\/span><\/p><p><span style=\"font-weight: 400\">Neste artigo, vamos falar sobre o que &eacute; Javascript e a hist&oacute;ria por tr&aacute;s de seu desenvolvimento. Tamb&eacute;m vamos abordar suas principais aplica&ccedil;&otilde;es e funcionalidades. Tudo isso com o intuito de dar a voc&ecirc; a base necess&aacute;ria para dominar o Javascript! <\/span><\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/BR-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">Baixar Gloss&aacute;rio Completo de Desenvolvimento Web<\/a><\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-javascript\"><strong>O Que &eacute; JavaScript<\/strong><\/h2><p><span style=\"font-weight: 400\">Antes de mais nada, vamos deixar claro: <\/span><b>Javascript n&atilde;o &eacute; Java<\/b><span style=\"font-weight: 400\">. Apesar da confus&atilde;o que as pessoas normalmente fazem sobre essas duas linguagens, Java e Javascript n&atilde;o possuem nenhuma liga&ccedil;&atilde;o direta uma com a outra a n&atilde;o ser o <\/span><i><span style=\"font-weight: 400\">java<\/span><\/i> <span style=\"font-weight: 400\">no nome. Tendo isso em mente, vamos para a defini&ccedil;&atilde;o de <\/span><b>o que &eacute; Javascript<\/b><span style=\"font-weight: 400\">. <\/span><\/p><p><span style=\"font-weight: 400\">O <\/span><b><i>JS <\/i><\/b><span style=\"font-weight: 400\">ou JavaScript &eacute; uma linguagem de programa&ccedil;&atilde;o de alto-n&iacute;vel, criada no meio da d&eacute;cada de 90, mais precisamente em 1996 pelo lend&aacute;rio programador Brendan Eich que, al&eacute;m de criar o JavaScript, foi tamb&eacute;m um dos fundadores da Mozilla Corporation. <\/span><\/p><p><span style=\"font-weight: 400\">Ele criou a linguagem quando ainda trabalhava na Netscape Communications Corporation, originalmente criado para funcionar no navegador Netscape Navigator, seu objetivo era facilitar processos dentro de p&aacute;ginas web, tornado a programa&ccedil;&atilde;o de anima&ccedil;&otilde;es e alertas muito mais simples. <\/span><\/p><p><span style=\"font-weight: 400\">Pouco tempo depois, cerca de 1 ano depois do seu lan&ccedil;amento, a Microsoft come&ccedil;ou a aceitar esta linguagem em seu navegador da &eacute;poca, o que foi um dos grandes impulsionadores para consolidar o que &eacute; Javascript como uma das principais linguagens de programa&ccedil;&atilde;o dos dias de hoje. <\/span><\/p><p><span style=\"font-weight: 400\">Desse tempo para c&aacute;, o JScript vem sofrendo diversas fun&ccedil;&otilde;es e aplica&ccedil;&otilde;es diferentes, ficando mais vers&aacute;til e completo de acordo com o tempo. Hoje, por exemplo, j&aacute; &eacute; poss&iacute;vel usar Javascript para criar aplicativos Desktop e Mobile, n&atilde;o s&oacute; aplica&ccedil;&otilde;es baseadas em web e navegadores.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-como-o-javascript-se-diferencia-das-outras-linguagens-de-programacao\"><strong>Como o JavaScript se Diferencia das Outras Linguagens de Programa&ccedil;&atilde;o?&nbsp;<\/strong><\/h2><p><span style=\"font-weight: 400\">A linguagem de programa&ccedil;&atilde;o Javascript permite ao desenvolvedor implementar diversos itens de alto n&iacute;vel de complexidade em p&aacute;ginas web, como anima&ccedil;&otilde;es, mapas, gr&aacute;ficos ou informa&ccedil;&otilde;es que se atualizam em intervalos de tempo padr&atilde;o, por exemplo. <\/span><\/p><p><span style=\"font-weight: 400\">Javascript &eacute; a terceira camada do bolo de desenvolvimento web e front-end, junto com HTML, CSS e PHP. <\/span><\/p><p><span style=\"font-weight: 400\">Possu&iacute;mos artigos falando tanto sobre <\/span><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/o-que-e-html-conceitos-basicos\/\" target=\"_blank\" rel=\"noopener\">o que &eacute; HTML<\/a><strong>,<\/strong><span style=\"font-weight: 400\"><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/o-que-e-css-guia-basico-de-css\/\" target=\"_blank\" rel=\"noopener\">o que &eacute; CSS&nbsp;<\/a>e&nbsp;<a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/o-que-e-php-guia-basico\/\" target=\"_blank\" rel=\"noopener\">o que &eacute; PHP<\/a>. Eles v&atilde;o ajudar voc&ecirc;, e muito, a entender e dominar o que &eacute; Javascript. Mas, mesmo assim, vamos a um breve resumo do que &eacute; cada uma dessas &ldquo;camadas&rdquo; do bolo.<\/span><\/p><ul class=\"wp-block-list\">\n<li><strong>O que &eacute; HTML?<\/strong>&nbsp;&ndash; &Eacute; uma linguagem de <strong>marca&ccedil;&atilde;o<\/strong> que serve para dar significado e estrutura ao conte&uacute;do web, como, por exemplo, definir cabe&ccedil;alhos, par&aacute;grafos, fazer refer&ecirc;ncias ou inserir imagens e v&iacute;deos.<\/li>\n\n\n\n<li><strong>O que &eacute; CSS?<\/strong> &ndash; &Eacute; uma linguagem de folha de <strong>estilos<\/strong>, que tem o papel de tornar uma p&aacute;gina apresent&aacute;vel na web, relacionada diretamente com o design e apar&ecirc;ncia.<\/li>\n\n\n\n<li><strong>O que &eacute; PHP?<\/strong> &ndash; &Eacute; uma linguagem de programa&ccedil;&atilde;o para <strong>p&aacute;ginas<\/strong>. Com ela, voc&ecirc; desenvolver sites din&acirc;micos, extens&otilde;es de aplica&ccedil;&otilde;es e agilizar o processo de desenvolvimento de um sistema.<\/li>\n\n\n\n<li><strong>O que &eacute; JavaScript?<\/strong> &ndash; &Eacute; uma linguagem de programa&ccedil;&atilde;o de <strong>comportamento<\/strong> que permite a cria&ccedil;&atilde;o de conte&uacute;dos din&acirc;micos, controle de m&iacute;dias e anima&ccedil;&otilde;es para deixar seu site mais interativo e interessante.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-as-vantagens-do-javascript\"><strong>As Vantagens do JavaScript<\/strong><\/h2><p>O JavaScript tem uma s&eacute;rie de vantagens que fazem com ele seja a melhor escolha entre seus competidores. Especialmente em certos tipos de usos e casos. Abaixo est&atilde;o apenas alguns dos benef&iacute;cios de usar a linguagem JS:<\/p><ol class=\"wp-block-list\">\n<li>Voc&ecirc; n&atilde;o precisa de um compilador porque os navegadores de internet o interpretam com HTML;<\/li>\n\n\n\n<li>&Eacute; mais f&aacute;cil de aprender do que as outras linguagens de programa&ccedil;&atilde;o;<\/li>\n\n\n\n<li>Erros s&atilde;o bem mais f&aacute;ceis de localizar e, por conta disso, de serem corrigidos;<\/li>\n\n\n\n<li>Ele pode ser designado a certos elementos de p&aacute;ginas de internet ou eventos espec&iacute;ficos, como cliques e rolagens de mouse personalizados;<\/li>\n\n\n\n<li>&Eacute; totalmente compat&iacute;vel com v&aacute;rias plataformas e navegadores;<\/li>\n\n\n\n<li>Voc&ecirc; pode validar entradas e reduzir a necessidade de verifica&ccedil;&otilde;es manuais de dados;<\/li>\n\n\n\n<li>Ele faz com que os sites sejam bem mais interativos e segurem a aten&ccedil;&atilde;o dos visitantes por mais tempo, caracter&iacute;stica que define a <a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/ux-o-que-e-user-experience\/\" target=\"_blank\" rel=\"noopener\">experi&ecirc;ncia do usu&aacute;rio<\/a> (UX).<\/li>\n\n\n\n<li>Ele &eacute; mais r&aacute;pido e mais leve que outras linguagens de programa&ccedil;&atilde;o.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-as-fraquezas-do-javascript\"><strong>As Fraquezas do JavaScript<\/strong><\/h2><p>Todas as linguagens de programa&ccedil;&atilde;o t&ecirc;m fraquezas. Com o JavaScript, n&atilde;o &eacute; diferente. Parte do problema &eacute; que, quando uma linguagem de programa&ccedil;&atilde;o se torna t&atilde;o popular como o JS, existe um incentivo extra para hackers e outros tipos de usu&aacute;rios t&oacute;xicos trabalhem em fun&ccedil;&atilde;o de achar brechas de seguran&ccedil;a. Assim, algumas fraquezas do JS s&atilde;o:<\/p><ol class=\"wp-block-list\">\n<li>Vulner&aacute;vel a brechas de seguran&ccedil;a;<\/li>\n\n\n\n<li>Pode ser usado para executar c&oacute;digos maliciosos no computador do usu&aacute;rio;<\/li>\n\n\n\n<li>Nem sempre tem suporte a diferentes navegadores e dispositivos;<\/li>\n\n\n\n<li>Os trechos de c&oacute;digo em JS costumam ser bem grandes;<\/li>\n\n\n\n<li>Pode ser renderizado diferentemente em v&aacute;rios dispositivos, o que pode ocasionar inconsist&ecirc;ncias.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-o-que-podemos-fazer-com-javascript-aplicacoes\"><strong>O Que Podemos Fazer com JavaScript (Aplica&ccedil;&otilde;es)<\/strong><\/h2><p><span style=\"font-weight: 400\">Como comentamos anteriormente, o JavaScript foi criado como uma linguagem de programa&ccedil;&atilde;o <\/span><b>client-side<\/b><span style=\"font-weight: 400\">. No in&iacute;cio dos anos 2000 a empresa Google resolveu adotar esta linguagem para desenvolver algumas de suas aplica&ccedil;&otilde;es como, por exemplo, o <\/span><b>Gmail<\/b><span style=\"font-weight: 400\">, mas existia um problema, os <\/span><b>interpretadores <\/b><span style=\"font-weight: 400\">de JS que os navegadores possu&iacute;am na &eacute;poca eram muito lentos.&nbsp;<\/span><\/p><p><span style=\"font-weight: 400\">Para resolver esta situa&ccedil;&atilde;o, a companhia desenvolveu o <\/span><b>Engine V8<\/b><span style=\"font-weight: 400\">, uma engine de JS open-source que veio como padr&atilde;o no navegador Google Chrome e, por ser open-source e ter um alto desempenho, em pouco tempo foi adotada pelo mercado.<\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-node-js-uma-definicao-para-o-que-e-javascript\"><strong>Node.js &ndash; Uma Defini&ccedil;&atilde;o para o Que &eacute; Javascript<\/strong><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"316\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/node-js-pagina-inicial-1024x316.jpg\" alt=\"p&aacute;gina inicial do site do node.js\" class=\"wp-image-36947\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/node-js-pagina-inicial.jpg 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/node-js-pagina-inicial-300x93.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/node-js-pagina-inicial-150x46.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/node-js-pagina-inicial-768x237.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Gra&ccedil;as ao <\/span><b>Engine V8 <\/b><span style=\"font-weight: 400\">e as novas propor&ccedil;&otilde;es que o JS tomou, foram desenvolvidas diversas plataformas em cima desta linguagem. <\/span><\/p><p><span style=\"font-weight: 400\">Uma das mais importantes &eacute; a <\/span><a href=\"https:\/\/nodejs.org\" target=\"_blank\" rel=\"noopener\"><b>Node.js<\/b><\/a><span style=\"font-weight: 400\">, que abriu novas portas para o que &eacute; Javascript, permitindo agora a cria&ccedil;&atilde;o tamb&eacute;m de aplica&ccedil;&otilde;es <\/span><b>server-side<\/b><span style=\"font-weight: 400\">, abrindo um novo e imenso leque para os desenvolvedores que escreviam programas nesta linguagem. <\/span><\/p><p><span style=\"font-weight: 400\">Com a plataforma Node.js, &eacute; poss&iacute;vel criar aplica&ccedil;&otilde;es em servidor web e linha de comando usando JS. <\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-mobile\"><strong>Mobile<\/strong><\/h3><p><span style=\"font-weight: 400\">Al&eacute;m de aplica&ccedil;&otilde;es Web, gra&ccedil;as ao Node.js e o ecossistema criado em torno dele que impulsionaram ainda mais o Javascript. <\/span><\/p><p><span style=\"font-weight: 400\">Hoje em dia tamb&eacute;m &eacute; poss&iacute;vel criar aplica&ccedil;&otilde;es <\/span><b>Mobile <\/b><span style=\"font-weight: 400\">usando JS usando frameworks como a <\/span><a href=\"https:\/\/vuejs.org\/\" target=\"_blank\" rel=\"noopener\"><b>VueJS<\/b><\/a><b> <\/b><span style=\"font-weight: 400\">e a<\/span><b> <\/b><a href=\"https:\/\/ionicframework.com\/\" target=\"_blank\" rel=\"noopener\"><b>Ionic Framework<\/b><\/a><span style=\"font-weight: 400\">. <\/span><\/p><p><span style=\"font-weight: 400\">Por exemplo, fazendo com o programador que domina esta linguagem ainda mais vers&aacute;til.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"547\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/ionic-framework-pagina-inicial-1024x547.jpg\" alt=\"p&aacute;gina inicial do site do ionic framework \" class=\"wp-image-36948\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/ionic-framework-pagina-inicial.jpg 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/ionic-framework-pagina-inicial-300x160.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/ionic-framework-pagina-inicial-150x80.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/ionic-framework-pagina-inicial-768x410.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">O Ionic &eacute; um <\/span><b>framework <\/b><span style=\"font-weight: 400\">open-source criado em cima da linguagem Javascript voltado para o desenvolvimento de aplica&ccedil;&otilde;es mobile. E<\/span><\/p><p><span style=\"font-weight: 400\">le possui compatibilidade com todos os sistemas operacionais m&oacute;veis, mais de 120 plugins nativos e uma interface limpa e simples para o uso do desenvolvedor. <\/span><\/p><p><span style=\"font-weight: 400\">Diversas empresas j&aacute; utilizaram este framework para desenvolver aplicativos, como a Microsoft, Mcdonald&rsquo;s e a IBM.<\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-desktop\"><strong>Desktop<\/strong><\/h3><p><span style=\"font-weight: 400\">Usando o Javascript tamb&eacute;m &eacute; poss&iacute;vel desenvolver aplicativos Desktop muito poderosos e &uacute;teis. Por ser uma linguagem muito difundida, v&aacute;rias empresas a utilizam para programar aplicativos, tanto para uso interno, quanto para o usu&aacute;rio final no mercado.<\/span><\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/electron-js-pagina-inicial-1024x355.jpg\" alt=\"p&aacute;gina inicial do site do Electron JS\" class=\"wp-image-36949\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/electron-js-pagina-inicial.jpg 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/electron-js-pagina-inicial-300x104.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/electron-js-pagina-inicial-150x52.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/electron-js-pagina-inicial-768x266.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">Um dos frameworks mais utilizados para este tipo de tarefa &eacute; o <\/span><a href=\"https:\/\/electronjs.org\/\" target=\"_blank\" rel=\"noopener\"><b>Electron JS<\/b><\/a><span style=\"font-weight: 400\">, que tamb&eacute;m &eacute; baseado em JS.<\/span><\/p><p><span style=\"font-weight: 400\">O <\/span><b>Electron JS <\/b><span style=\"font-weight: 400\">foi criado originalmente para ser utilizado no editor de texto <\/span><b>Atom <\/b><span style=\"font-weight: 400\">e &eacute; uma plataforma que usa tecnologias Web, HTML, CSS e Javascript para desenvolver aplicativos Desktop. <\/span><\/p><p><span style=\"font-weight: 400\">Alguns exemplos de aplica&ccedil;&otilde;es criadas atrav&eacute;s do Electron, &eacute; o Slack, Github Desktop e o Flow.<\/span><\/p><h3 class=\"wp-block-heading\" id=\"h-games\"><strong>Games<\/strong><\/h3><p><span style=\"font-weight: 400\">Devido ao tamanho da suas versatilidade e tamanho de conte&uacute;do dispon&iacute;vel para ajudar os desenvolvedores, o JavaScript tamb&eacute;m &eacute; usado por v&aacute;rios deles para desenvolver jogos completos, inclusive, existem frameworks de JS focados em desenvolvimento de games. <\/span><\/p><p><span style=\"font-weight: 400\">Alguns dos frameworks de desenvolvimento mais utilizados para esta finalidade s&atilde;o <\/span><a href=\"http:\/\/phaser.io\" target=\"_blank\" rel=\"noopener\"><b>Phaser<\/b><\/a><b>,<\/b><span style=\"font-weight: 400\"> <a href=\"https:\/\/docs.gdevelop.io\/GDJS%20Runtime%20Documentation\/\" target=\"_blank\" rel=\"noopener\">GDevelop<\/a> e <a href=\"https:\/\/github.com\/gamelab\/kiwi.js\/\" target=\"_blank\" rel=\"noopener\">Kiwi.js<\/a>.<\/span><\/p><p>Alguns jogos criados com <em>engines<\/em> baseadas em JavaScript s&atilde;o <strong>Angry Birds<\/strong>, <strong>The Wizard<\/strong> e <strong>2048<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"492\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/angry-birds-dream-blast-1024x492.jpg\" alt=\"p&aacute;gina inicial da franquia Angry Birds, anunciando o jogo Angry Birds Dream Blast\" class=\"wp-image-36950\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/angry-birds-dream-blast.jpg 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/angry-birds-dream-blast-300x144.jpg 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/angry-birds-dream-blast-150x72.jpg 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/05\/angry-birds-dream-blast-768x369.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p><span style=\"font-weight: 400\">No caso do Phaser, al&eacute;m dele apresentar facilidade para desenvolver games, a pr&oacute;pria companhia disponibiliza no seu site um curso completo para quem quer aprender a desenvolver games em Javascript na sua plataforma. <\/span><\/p><p><span style=\"font-weight: 400\">O curso aborda os temas mais simples, desde o seu primeiro &ldquo;<\/span><i><span style=\"font-weight: 400\">hello, world&rdquo; <\/span><\/i><span style=\"font-weight: 400\">at&eacute; o desenvolvimento de um jogo completo. Al&eacute;m do mais, tamb&eacute;m no site, voc&ecirc; pode encontrar uma loja com diversos plugins, apps e cursos relacionados a plataforma e desenvolvimento de games.<\/span><\/p><h2 class=\"wp-block-heading\" id=\"h-como-adicionar-javascript-em-um-site\"><strong>Como adicionar JavaScript em um site?<\/strong><\/h2><p>Para <a href=\"\/tutoriais\/como-adicionar-javascript-no-html\"><strong>inserir um trecho de c&oacute;digo JavaScript<\/strong><\/a> em um site, voc&ecirc; vai precisar usar a tag &lt;script&gt;. Voc&ecirc; pode usar o exemplo abaixo para testar como ela funciona na pr&aacute;tica.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/javascript\"&gt;\nYour JavaScript code\n&lt;\/script&gt;<\/pre><p>Como regra geral, &eacute; uma &oacute;tima ideia incluir seu c&oacute;digo JS dentro das tags &lt;header&gt; do seu site. A menos que ele precise ser executado em um tempo espec&iacute;fico ou com um elemento espec&iacute;fico de p&aacute;gina.<\/p><p>Voc&ecirc; tamb&eacute;m pode salvar seu c&oacute;digo JS em arquivos separados, podendo us&aacute;-los pelo seu site sempre que quiser.<\/p><h2 class=\"wp-block-heading\" id=\"h-como-aprender-javascript\"><strong>Como aprender Javascript<\/strong><\/h2><p><span style=\"font-weight: 400\">Por ser uma linguagem de programa&ccedil;&atilde;o muito famosa e difundida, existem diversos blogs com conte&uacute;dos interessantes, v&iacute;deos tutoriais e cursos online falando sobre este assunto. <\/span><\/p><p><span style=\"font-weight: 400\">Para aprender Javascript, &eacute; importante ter uma boa no&ccedil;&atilde;o de <\/span><b>l&oacute;gica de programa&ccedil;&atilde;o<\/b><span style=\"font-weight: 400\">, bem como dominar HTML e CSS para dar o suporte visual da sua programa&ccedil;&atilde;o. <\/span><\/p><p><span style=\"font-weight: 400\">Para te ajudar a aprender a programar n&oacute;s criamos um conte&uacute;do com os<\/span><a href=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/11-sites-aprender-como-programar-de-graca\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">&nbsp;20 lugares para aprender a programar de gra&ccedil;a<\/span><\/a><span style=\"font-weight: 400\">&nbsp;na web, que re&uacute;ne diversos cursos com as mais diferentes metodologias para aprender a programar.<\/span><\/p><figure class=\"wp-block-image size-large\"><a href=\"\/pt\/hospedagem-barata\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/pt-tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-content\/uploads\/sites\/26\/2023\/02\/BR-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p><span style=\"font-weight: 400\">Neste artigo falamos sobre o que &eacute; Javascript, contamos um pouco da sua hist&oacute;ria, evolu&ccedil;&atilde;o e tentamos tirar as principais d&uacute;vidas relacionadas a esta linguagem de programa&ccedil;&atilde;o. <\/span><\/p><p><span style=\"font-weight: 400\">Tamb&eacute;m abordamos as vantagens de fazer aplica&ccedil;&otilde;es, al&eacute;m de dar exemplos de aplica&ccedil;&otilde;es para esta linguagem e dicas de frameworks para voc&ecirc; desenvolver os seus programas.&nbsp;<\/span><span style=\"font-weight: 400\">Esperamos que voc&ecirc; possa tirar um &oacute;timo proveito desse material e tenha entendido o que &eacute; JS!<\/span><\/p><p>Ficou com alguma d&uacute;vida ou tem uma sugest&atilde;o para a gente? Use os coment&aacute;rios abaixo para enviar uma mensagem! Estamos bem curiosos para saber o que voc&ecirc; tem achado dos nossos conte&uacute;dos e servi&ccedil;os! \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>N&atilde;o importa se voc&ecirc; est&aacute; come&ccedil;ando sua jornada no mundo da programa&ccedil;&atilde;o agora ou j&aacute; tem experi&ecirc;ncia com outras linguagens. Voc&ecirc; provavelmente j&aacute; ouviu falar sobre Javascript. Esta que &eacute; uma das principais linguagens de programa&ccedil;&atilde;o oferece uma variedade muito grande de frameworks e aplica&ccedil;&otilde;es para os mais diversos dispositivos. E, quem domina o Javascript, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/pt\/tutoriais\/o-que-e-javascript\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"Aprenda o que \u00e9 Javascript, como ele funciona e a hist\u00f3ria por tr\u00e1s da sua cria\u00e7\u00e3o. Amplie os seus conhecimentos e encarne novos desafios com o Javascript!","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","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\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/comments?post=8649"}],"version-history":[{"count":15,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8649\/revisions"}],"predecessor-version":[{"id":39830,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/posts\/8649\/revisions\/39830"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/media?parent=8649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/categories?post=8649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/pt\/tutoriais\/wp-json\/wp\/v2\/tags?post=8649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}