<\/p>\n\n\n\n No desenvolvimento de p\u00e1ginas web, iniciamos nosso trabalho com duas etapas principais: <\/p>\n\n\n\n Em seguida, criamos p\u00e1ginas com o visual e o conte\u00fado que desejamos. Mas uma web din\u00e2mica traz a necessidade de interagir com o usu\u00e1rio, e n\u00e3o \u00e9 poss\u00edvel fazer isso apenas com HTML e CSS.Essa necessidade d\u00e1 origem ao JavaScript, que possibilita diversas funcionalidades, das mais simples \u00e0s mais complexas. <\/p>\n\n\n\n Entre as primeiras funcionalidades que possibilita est\u00e3o: manipula\u00e7\u00e3o de bot\u00f5es, alertas, sliders e galerias.<\/p>\n\n\n\n Al\u00e9m disso, \u00e9 poss\u00edvel realizar a cria\u00e7\u00e3o de jogos e anima\u00e7\u00f5es em 2D e 3D, Single Page Applications, cria\u00e7\u00e3o de aplicativos para celular e outras funcionalidades que surgem atrav\u00e9s das novas tecnologias dispon\u00edveis no mercado.<\/p>\n\n\n\n Toda essa din\u00e2mica e as possibilidades que o JavaScript apresenta o colocam entre as linguagens mais populares atualmente. Agora que voc\u00ea j\u00e1 sabe um pouco mais sobre essas etapas essenciais, entenda a linguagem que pode abrir uma gama gigante de possibilidades ao desenvolvedor web e tamb\u00e9m ao DBA NoSQL.<\/p>\n\n\n\n Segundo defini\u00e7\u00e3o do MDN Web Docs<\/a>, JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o que permite implementar itens complexos em p\u00e1ginas web, como mapas interativos, gr\u00e1ficos 2D\/3D animados e etc, que se atualizam em um intervalo de tempo.<\/p>\n\n\n\n Isso quer dizer que ela est\u00e1 presente em toda p\u00e1gina da web que faz mais do que simplesmente mostrar a voc\u00ea informa\u00e7\u00e3o est\u00e1tica. Em outras palavras, o JavaScript \u00e9 amplamente utilizado para adicionar funcionalidades din\u00e2micas e interativas a sites e aplicativos web. Para isso, ele \u00e9 executado no navegador do usu\u00e1rio.<\/p>\n\n\n\n Leia tamb\u00e9m: <\/em><\/strong>13 bibliotecas JavaScript para apoiar o desenvolvimento de solu\u00e7\u00f5es criativas<\/em><\/strong><\/a><\/p>\n\n\n\n Entre os motivos que fazem o JavaScript t\u00e3o interessante est\u00e1 sua versatilidade, j\u00e1 que ele permite o desenvolvimento de uma ampla variedade de aplicativos, desde jogos at\u00e9 aplicativos de neg\u00f3cios.<\/p>\n\n\n\n H\u00e1 tamb\u00e9m uma alta demanda por desenvolvedores JavaScript, o que o torna uma habilidade valiosa no mercado de trabalho. Al\u00e9m disso, essa \u00e9 uma comunidade grande, ativa e participativa, o que significa que voc\u00ea encontrar\u00e1 suporte e recursos facilmente.<\/p>\n\n\n\n Quer saber como inserir o JavaScript na p\u00e1gina HTML? Os pr\u00e9-requisitos para cumprir esta etapa s\u00e3o: intera\u00e7\u00e3o b\u00e1sica com o computador, entendimento b\u00e1sico de HTML e CSS.<\/p>\n\n\n\n Sendo assim, para que o navegador consiga interpretar o c\u00f3digo JavaScript, voc\u00ea precisa associ\u00e1-lo a um documento HTML. Existem duas formas de fazer isso: por meio da cria\u00e7\u00e3o de c\u00f3digos em meio ao HTML e pela separa\u00e7\u00e3o dos arquivos.<\/p>\n\n\n\n Neste primeiro exemplo, vamos criar o script junto ao HTML. Supomos que voc\u00ea tem um arquivo chamado exemplo.html:<\/p>\n\n\n\n Para concluir esta miss\u00e3o e criar um script junto ao c\u00f3digo HTML, \u00e9 preciso marcar o local utilizando a tag <\/script><\/strong>, que deve estar entre a tag <\/head><\/strong>. Desta forma, o documento HTML ganha mais duas linhas, veja:<\/p>\n\n\n\n Ap\u00f3s concluir a etapa anterior e abrir nossa p\u00e1gina exemplo.html no navegador, n\u00e3o conseguiremos notar diferen\u00e7a alguma, e isso acontece porque nosso JavaScript est\u00e1 vazio. Por\u00e9m, agora podemos testar algumas funcionalidades que, mesmo simples, poder\u00e3o resolver diversos problemas.<\/p>\n\n\n\n As vari\u00e1veis, em Javascript, s\u00e3o utilizadas para salvar dados que poder\u00e3o ser acessados e\/ou manipulados futuramente. Isso inclui diversos tipos de dados, como strings, n\u00fameros, booleanos, arrays, objetos e fun\u00e7\u00f5es.<\/p>\n\n\n\n Criaremos nossas duas primeiras vari\u00e1veis entre as tags <\/script> no nosso arquivo \u201cexemplo.js\u201d:<\/p>\n\n\n\n var numero1 = 10;<\/strong><\/p>\n\n\n\n var numero2 = 15;<\/strong><\/p>\n\n\n\n A utiliza\u00e7\u00e3o da palavra \u201cvar\u201d permite a cria\u00e7\u00e3o de vari\u00e1veis em nosso script, e essas podem ser manipuladas, como, por exemplo, para fazer uma opera\u00e7\u00e3o matem\u00e1tica. Para isso, n\u00e3o esque\u00e7a de utilizar o ponto e v\u00edrgula no final da linha:<\/p>\n\n\n\n var resultado = numero1 + numero2;<\/strong><\/p>\n\n\n\n Agora, salve o documento e atualize nossa p\u00e1gina para notar que nada acontece! Isso porque n\u00e3o dissemos \u00e0 nossa aplica\u00e7\u00e3o que ela deve mostrar o resultado. Isso pode ser feito de diversas formas, como pelo uso da fun\u00e7\u00e3o alert()<\/strong>.<\/p>\n\n\n\n Na linha abaixo do resultado, adicione um alert para exibir o resultado. Nosso script, ent\u00e3o, deve ficar desta forma:<\/p>\n\n\n\n var numero1 = 10;<\/strong><\/p>\n\n\n\n var numero2 = 15;<\/strong><\/p>\n\n\n\n var resultado = numero1 + numero2;<\/strong><\/p>\n\n\n\n alert(resultado);<\/strong><\/p>\n\n\n\n Agora, ao atualizar nossa p\u00e1gina, veremos uma caixa de alerta que exibir\u00e1 o resultado matem\u00e1tico de 10 + 15. Por\u00e9m, poder inserir esse valor diretamente no HTML \u00e9 mais interessante do que exibir um alerta na tela, n\u00e3o \u00e9 mesmo? E sim, isso \u00e9 poss\u00edvel com JavaScript.<\/p>\n\n\n\n Uma dos objetivos mais utilizados do JavaScript, tanto para iniciantes quanto para usu\u00e1rios mais experientes, \u00e9 a manipula\u00e7\u00e3o do documento HTML. Para entender um pouco melhor, primeiro, vamos alterar nosso HTML para:<\/p>\n\n\n\n Veja que deixamos uma tag strong com o id \u201cresultado\u201d sem um valor dentro. \u00c9 importante entender que o JavaScript manipula o HTML atrav\u00e9s das tags, ou seja, poderemos acessar a tag HTML \u201cstrong\u201d e inserir o valor desejado, e esta \u00e9 a forma mais f\u00e1cil de acessar atrav\u00e9s de um ID.<\/p>\n\n\n\n Em nosso script, faremos da seguinte forma:<\/p>\n\n\n\n var numero1 = 10;<\/strong><\/p>\n\n\n\n var numero2 = 15;<\/strong><\/p>\n\n\n\n var resultado = numero1 + numero2;<\/strong><\/p>\n\n\n\n document.getElementById(‘resultado’).innerHTML = resultado;<\/strong><\/p>\n\n\n\n O JavaScript transforma o HTML em objetos, onde \u00e9 poss\u00edvel acessar diversas propriedades de cada tag, como a cor, os tamanhos e os valores.<\/p>\n\n\n\n Nesse exemplo, estamos utilizando o objeto \u201cdocument\u201d, que referencia nosso arquivo HTML. Depois, procuramos pelo elemento com ID \u201cresultado\u201d dentro do HTML e, para ele, utilizamos a fun\u00e7\u00e3o innerHTML para alterar o texto.<\/p>\n\n\n\n Note que, mesmo carregando a p\u00e1gina, n\u00e3o temos um resultado esperado, j\u00e1 que \u00e9 preciso ter intera\u00e7\u00e3o com o usu\u00e1rio. Entretanto, para isso, precisamos conhecer fun\u00e7\u00f5es JavaScript (JS), e esse \u00e9 o nosso pr\u00f3ximo passo!<\/p>\n\n\n\n Em JavaScript, uma fun\u00e7\u00e3o \u00e9 um bloco de c\u00f3digo reutiliz\u00e1vel que realiza uma tarefa espec\u00edfica ou calcula um valor. Ela pode ser executada quando necess\u00e1rio, sendo uma parte fundamental da linguagem de programa\u00e7\u00e3o JavaScript.<\/p>\n\n\n\n Vamos, agora, adicionar a apresenta\u00e7\u00e3o do resultado a uma fun\u00e7\u00e3o. Nosso c\u00f3digo script ficar\u00e1 assim:<\/p>\n\n\n\n Uma das principais fun\u00e7\u00f5es do JavaScript \u00e9 proporcionar intera\u00e7\u00e3o com o usu\u00e1rio, como por exemplo, exibir o resultado do c\u00e1lculo somente ap\u00f3s o usu\u00e1rio clicar em um bot\u00e3o. Pensando nisso, vamos adicionar ao nosso c\u00f3digo um bot\u00e3o que trar\u00e1 um evento chamado \u201conclick()<\/strong>\u201d, que significa \u201cquando clicado\u201d pelo usu\u00e1rio. Sendo assim, a fun\u00e7\u00e3o executa uma a\u00e7\u00e3o.<\/p>\n\n\n\n Veja como ficou nosso HTML com a adi\u00e7\u00e3o do bot\u00e3o:<\/p>\n\n\n\n Agora, incluindo a fun\u00e7\u00e3o \u201conclick()<\/strong>\u201d:<\/p>\n\n\n\n Agora, \u00e9 necess\u00e1rio salvar o HTML e test\u00e1-lo! Voc\u00ea ver\u00e1 uma pequena aplica\u00e7\u00e3o em a\u00e7\u00e3o, ativada por meio do seu clique (usu\u00e1rio).<\/p>\n\n\n\n O cons\u00f3rcio W3C<\/a> \u00e9 considerado a autoridade m\u00e1xima da Web no assunto e indica que o ideal \u00e9 manter os arquivos separados. Sendo assim, vamos usar o mesmo exemplo e aprender a associar um arquivo do tipo .js (JavaScript)<\/strong> a um documento HTML:<\/p>\n\n\n\n Agora, vamos criar um novo documento em um editor de texto como o sublime<\/a>, por exemplo, e salv\u00e1-lo com o nome de exemplo.js. Isso ser\u00e1 suficiente para identificar o documento como sendo do tipo JavaScript. A seguir, usamos nele o mesmo script:<\/p>\n\n\n\n Por fim, vamos associ\u00e1-los, utilizando a linha <script type=\u201dtext\/javascript\u201d src=\u201dexemplo.js\u201d><\/script><\/strong>. Como resultado, o documento completo ficar\u00e1 assim:<\/p>\n\n\n\n <\/strong><script type=”text\/javascript” src=”exemplo.js”><\/script><\/strong><\/p>\n\n\n\n Este \u00e9 o documento completo:<\/p>\n\n\n\n Para utilizar o nome do arquivo na refer\u00eancia, precisamos que o HTML e o JavaScript estejam na mesma pasta. Do contr\u00e1rio, ser\u00e1 necess\u00e1rio apontar o caminho onde ele est\u00e1, por exemplo: src=\u201djs\/exemplo.js\u201d<\/strong>.<\/p>\n\n\n\n Agora, salve as mudan\u00e7as e veja o mesmo resultado apresentado na etapa anterior, com a diferen\u00e7a existente apenas no c\u00f3digo. Nele, associamos dois documentos separados (.html e .js)<\/strong> por meio do m\u00e9todo apresentado acima.<\/p>\n\n\n\n O exemplo acima pode parecer b\u00e1sico, mas apresenta uma nova forma de manipular o HTML, criando a possibilidade de intera\u00e7\u00e3o entre o usu\u00e1rio e do script com a p\u00e1gina.<\/p>\n\n\n\n Ele tamb\u00e9m nos permite observar que o JavaScript \u00e9 uma tecnologia muito poderosa e, conforme o desenvolvedor vai se aprofundando, pode criar muitas fun\u00e7\u00f5es que deixam as p\u00e1ginas HTML mais din\u00e2micas, com intera\u00e7\u00f5es e ferramentas poderosas.<\/p>\n\n\n\n O mundo Web \u00e9 repleto de JavaScript que, na sua grande maioria, atua no front-end de uma aplica\u00e7\u00e3o Web. Contudo, atualmente, a tecnologia tamb\u00e9m est\u00e1 se expandindo para o mundo back-end e hoje possu\u00edmos bancos de dados NoSQL que utilizam fortemente a tecnologia para o desenvolvimento da base de dados.![\"banner-kinghost\"](\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2023\/06\/banner_1.png\" "\\"\\"")
<\/a><\/figure>\n\n\n\nQuais s\u00e3o as principais etapas do desenvolvimento de p\u00e1ginas web?<\/strong><\/h2>\n\n\n\n
\n
O que \u00e9 JavaScript?<\/strong><\/h2>\n\n\n\n
![\"Banner](\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2025\/01\/banner-blog_798x250.webp\" "\\"\\"")
<\/a><\/figure>\n\n\n\nJavaScript para iniciantes: por que aprender?<\/strong><\/h2>\n\n\n\n
JavaScript para iniciantes: como inserir o JavaScript na p\u00e1gina HTML<\/strong><\/h2>\n\n\n\n
<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>Exemplo<\/title>\n<meta charset=\"utf-8\">\n<\/head>\n<body>\n <p>\u2026.<\/p>\n<\/body>\n<\/html><\/pre>\n\n\n\n
<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>JAVASCRIPT<\/title>\n<meta charset=\"utf-8\">\n<script>\n\t\n<\/script>\n<\/head>\n<body>\n<p>...<\/p>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
JavaScript para iniciantes: criando o primeiro c\u00f3digo<\/strong><\/h2>\n\n\n\n
O que s\u00e3o vari\u00e1veis em JavaScript?<\/strong><\/h3>\n\n\n\n
Manipula\u00e7\u00e3o do HTML<\/strong><\/h2>\n\n\n\n
<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>JAVASCRIPT<\/title>\n<meta charset=\"utf-8\">\n<\/head>\n<body>\n<h2>JS<\/h2>\n\n<p>10 + 15 = <strong id=\u2019resultado\u2019><\/strong><\/p>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
Saiba mais sobre as fun\u00e7\u00f5es JS e as Intera\u00e7\u00f5es<\/strong><\/h2>\n\n\n\n
function mostraResultado()\n{\n\tvar numero1 = 10;\n\tvar numero2 = 15;\n\tvar resultado = numero1 + numero2;\n\tdocument.getElementById('resultado').innerHTML = resultado;\n}\t\n<\/pre>\n\n\n\n<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>JAVASCRIPT<\/title>\n<meta charset=\"utf-8\">\n\n<script>\n\tfunction mostraResultado()\n{\n\tvar numero1 = 10;\n\tvar numero2 = 15;\n\tvar resultado = numero1 + numero2;\n\tdocument.getElementById('resultado').innerHTML = resultado;\n}\n<\/script>\n\n<\/head>\n\n<body>\n<p>10 + 15 = <strong id=\"resultado\"><\/strong><\/p>\n<input type=\"button\" value=\"Calcular\" id=\"botao\" \/>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>JAVASCRIPT<\/title>\n<meta charset=\"utf-8\">\n<script>\n\tfunction mostraResultado()\n{\n\tvar numero1 = 10;\n\tvar numero2 = 15;\n\tvar resultado = numero1 + numero2;\n\tdocument.getElementById('resultado').innerHTML = resultado;\n}\n\n<\/script>\n<\/head>\n<body>\n<p>10 + 15 = <strong id=\"resultado\"><\/strong><\/p>\n\n<input type=\"button\" onclick=\"mostraResultado()\" value=\"Calcular\" id=\"botao\" \/>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\nComo separar os arquivos HTML e JavaScript?<\/strong><\/h2>\n\n\n\n
<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>Exemplo<\/title>\n<meta charset=\"utf-8\">\n<\/head>\n<body>\n<p>10 + 15 = <strong id=\"resultado\"><\/strong><\/p>\n<input type=\"button\" onclick=\"mostraResultado()\" value=\"Calcular\" id=\"botao\" \/>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
function mostraResultado()\n{\n\tvar numero1 = 10;\n\tvar numero2 = 15;\n\tvar resultado = numero1 + numero2;\n\tdocument.getElementById('resultado').innerHTML = resultado;\n}\n<\/pre>\n\n\n\n<!doctype html>\n<html lang=\"pt-br\">\n<head>\n<title>Exemplo<\/title>\n<meta charset=\"utf-8\">\n\n <script type=\"text\/javascript\" src=\"exemplo.js\"><\/script>\n\n<\/head>\n<body>\n<p>10 + 15 = <strong id=\"resultado\"><\/strong><\/p>\n<input type=\"button\" onclick=\"mostraResultado()\" value=\"Calcular\" id=\"botao\" \/>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n
JavaScript para iniciantes: quais s\u00e3o os pr\u00f3ximos passos?<\/strong><\/h2>\n\n\n\n
Ent\u00e3o, os pr\u00f3ximos passos de quem deseja ir al\u00e9m do conte\u00fado de JavaScript para iniciantes incluem conhecer mais sobre o assunto e o mundo front-end. Por isso, confira o Conex\u00e3o KingHost<\/a>: uma plataforma repleta de conte\u00fados relevantes para quem quer saber mais sobre empreendedorismo, gest\u00e3o, design, presen\u00e7a digital e marketing.<\/p>\n\n\n\n
![\"banner](\"https:\/\/cdn-cms.king.host\/blog-hlg\/uploads\/2025\/04\/Banner-News-02.webp\" "\\"\\"")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"