{"id":8083,"date":"2025-05-23T15:24:16","date_gmt":"2025-05-23T18:24:16","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=8083"},"modified":"2025-05-29T19:02:04","modified_gmt":"2025-05-29T22:02:04","slug":"introducao-ao-javascript-numeros-e-objetos","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/introducao-ao-javascript-numeros-e-objetos\/","title":{"rendered":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ol\u00e1, meus caros leitores e leitoras. No \u00faltimo artigo fiz uma <strong>breve<\/strong> <strong>introdu\u00e7\u00e3o ao JavaScript<\/strong>, criamos um ambiente de desenvolvimento on-line e um exemplo de <em>aplica\u00e7\u00e3o web <\/em>manipulando <em>strings<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avan\u00e7ando em nossa jornada, vamos falar sobre outros tipos de dados e como podemos criar aplica\u00e7\u00f5es mais elaboradas, conforme temos mais ferramentas em nossas m\u00e3os.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vamos l\u00e1?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ei, antes de continuar a leitura, sabia que essa \u00e9 a segunda parte da nossa s\u00e9rie sobre <a rel=\"noreferrer noopener\" aria-label=\"linguagem JavaScript (abre numa nova aba)\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/linguagem-javascript-um-guia-para-iniciantes\/\" target=\"_blank\"><strong>linguagem JavaScript<\/strong><\/a>? D\u00e1 uma olhadinha no primeiro artigo \ud83d\ude1c <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-introdu-o-ao-javascript-tipo-number\">Introdu\u00e7\u00e3o ao JavaScript: Tipo Number<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-1024x576.jpg\" alt=\"imagem de fundo roxo com simbolo do javascript e da geekhunter\" class=\"wp-image-8098\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-1024x576.jpg 1024w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-150x84.jpg 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-100x56.jpg 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-600x337.jpg 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-450x253.jpg 450w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-960x540.jpg 960w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-300x169.jpg 300w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number-768x432.jpg 768w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Number.jpg 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Por mais prec\u00e1rio que possa ser seu conhecimento em ingl\u00eas, posso supor que voc\u00ea entende que<em> number<\/em> significa n\u00famero. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E o tipo <em>number <\/em>representa <strong>dados num\u00e9ricos<\/strong>, como 1, 100.027 ou -32.07. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 importante notar que, em programa\u00e7\u00e3o, <strong>o ponto tem o mesmo significado que a v\u00edrgula<\/strong> na nossa nota\u00e7\u00e3o escrita do dia a dia, indicando que se trata de um n\u00famero de ponto flutuante, ou seja, o n\u00famero 3,14 deve ser inserido no programa como 3.14. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos utilizar o tipo <em>number <\/em>para realizar opera\u00e7\u00f5es de soma, subtra\u00e7\u00e3o, divis\u00e3o, multiplica\u00e7\u00e3o e m\u00f3dulo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> let&nbsp;num1&nbsp;=&nbsp;10;\nlet&nbsp;num2&nbsp;=&nbsp;3;\nlet&nbsp;f1&nbsp;=&nbsp;5.02;\nlet&nbsp;neg&nbsp;=&nbsp;-3.8;\n&nbsp;\nlet&nbsp;sum&nbsp;=&nbsp;num1&nbsp;+&nbsp;num2;\nlet&nbsp;fsum&nbsp;=&nbsp;f1&nbsp;+&nbsp;num2;\nlet&nbsp;mul&nbsp;=&nbsp;num1&nbsp;*&nbsp;num2;\nlet&nbsp;fmul&nbsp;=&nbsp;f1&nbsp;*&nbsp;neg;\nlet&nbsp;div&nbsp;=&nbsp;num1\/num2;\nlet&nbsp;fdiv&nbsp;=&nbsp;num1&nbsp;\/&nbsp;f1;\nlet&nbsp;mod&nbsp;=&nbsp;num1&nbsp;%&nbsp;num2;\n&nbsp;\nconst&nbsp;op&nbsp;=&nbsp;document.getElementById(\"operacoes\");\nop.innerHTML&nbsp;=&nbsp;`&lt;p&gt;Veja&nbsp;alguns&nbsp;exemplos&nbsp;de&nbsp;opera\u00e7\u00f5es&nbsp;matem\u00e1ticas:&lt;\/p&gt;\n&lt;ul&gt;\n&nbsp;&nbsp;&lt;li&gt;${num1}&nbsp;+&nbsp;${num2}&nbsp;=&nbsp;${sum}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${f1}&nbsp;+&nbsp;${num2}&nbsp;=&nbsp;${fsum}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${num1}&nbsp;*&nbsp;${num2}&nbsp;=&nbsp;${mul}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${f1}&nbsp;*&nbsp;${neg}&nbsp;=&nbsp;${fmul}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${num1}&nbsp;\/&nbsp;${num2}&nbsp;=&nbsp;${div}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${num1}&nbsp;\/&nbsp;${f1}&nbsp;=&nbsp;${fdiv}&lt;\/li&gt;\n&nbsp;&nbsp;&lt;li&gt;${num1}&nbsp;%&nbsp;${num2}&nbsp;=&nbsp;${mod}&lt;\/li&gt;\n&lt;\/ul&gt;\n`; <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"> Este c\u00f3digo ir\u00e1 gerar, na sa\u00edda: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>10 + 3 = 13<\/li><li>5.02 + 3 = 8.02<\/li><li>10 * 3 = 30<\/li><li>5.02 * -3.8 = -19.075999999999997<\/li><li>10 \/ 3 = 3.3333333333333335<\/li><li>10 \/ 5.02 = 1.9920318725099604<\/li><li>10 % 3 = 1<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"> Podemos ver este c\u00f3digo no projeto abaixo: <\/p>\n\n\n\n<iframe src=\"https:\/\/stackblitz.com\/edit\/js-geekhunter-number-1?embed=1&amp;file=index.js\" width=\" 800px\" =\"\"=\"\" height=\"600px\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>opera\u00e7\u00e3o m\u00f3dulo<\/strong>, representada pelo operador %, retorna o valor do resto de uma divis\u00e3o. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No exemplo acima, 10%3 = 1 pois a divis\u00e3o inteira de 10 por 3 \u00e9 igual a 3 e tem por resto 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode perceber em nosso exemplo que, quando utilizamos n\u00fameros de ponto flutuante juntamente com n\u00fameros inteiros em uma mesma opera\u00e7\u00e3o, os resultados s\u00e3o em formato de <strong>ponto flutuante<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Outro ponto digno de nota em no nosso exemplo: o<strong> JavaScript<\/strong> converteu automaticamente os dados num\u00e9ricos em strings dentro do nosso <em>template<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os operadores matem\u00e1ticos, no <strong>JavaScript,<\/strong> s\u00e3o lidos executados da esquerda para a direita, respeitando as regras matem\u00e1ticas: multiplica\u00e7\u00f5es e divis\u00f5es s\u00e3o executas antes das somas e subtra\u00e7\u00f5es.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, podemos<strong> organizar as express\u00f5es utilizando par\u00eanteses<\/strong>. Assim, as opera\u00e7\u00f5es dentro de par\u00eanteses s\u00e3o executadas antes das express\u00f5es. Por exemplo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3 * 2 \/ 2 + 5 = 8<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pois, multiplica\u00e7\u00e3o e divis\u00e3o t\u00eam prioridade sobre a soma, e s\u00e3o executadas da esquerda para a direita. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, o JavaScript executa 3 * 2 = 6, em seguida 6\/2 = 3 e por fim 3 + 5 = 8.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Agora, se inserirmos par\u00eanteses na express\u00e3o a fim de alterar a forma de execu\u00e7\u00e3o:&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3 * 2 \/ (2 + 5) = 0.8571428571428571<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pois, primeiro executamos a express\u00e3o entre par\u00eanteses: 2 + 5 = 7. Assim teremos 3 * 2 \/ 7 = 6 \/ 7 = 0.8571428571428571<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode confirmar o resultado desta express\u00f5es no projeto abaixo:<\/p>\n\n\n\n<iframe src=https:\/\/stackblitz.com\/edit\/js-geekhunter-number-2?embed=1&#038;file=index.html width=\" 800px\"=\"\" height=\"600px\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&gt;&gt;Leitura Recomendada:<\/strong><br>Introdu\u00e7\u00e3o ao uso de <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/arrays-em-javascript\/\" target=\"_blank\">arrays em JavaScript<\/a><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-introdu-o-ao-javascript-tipo-object\">Introdu\u00e7\u00e3o ao JavaScript: Tipo Object<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-1024x576.jpg\" alt=\"imagem de fundo roxo com simbolo do javascript e da geekhunter\" class=\"wp-image-8099\" srcset=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-1024x576.jpg 1024w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-150x84.jpg 150w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-100x56.jpg 100w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-600x337.jpg 600w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-450x253.jpg 450w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-960x540.jpg 960w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-300x169.jpg 300w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object-768x432.jpg 768w, https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-Tipo-Object.jpg 1366w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Agora que aprendemos a utilizar os tipos <em>string<\/em> e <em>number<\/em>, vamos introduzir o tipo <em>object<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este tipo \u00e9 utilizado para representarmos elementos complexos. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Os objetos s\u00e3o <strong>formados por uma chave e um valor<\/strong>, de forma que a chave pode representar uma propriedade do objeto que estamos representando e o valor \u00e9 dado armazenado por esta propriedade. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Esta estrutura \u00e9 constru\u00edda <strong>entre chaves<\/strong>, e as propriedades s\u00e3o separadas por v\u00edrgula como no exemplo abaixo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> let&nbsp;objJorge&nbsp;=&nbsp;{\n&nbsp;&nbsp;nome:&nbsp;'Jorge&nbsp;da&nbsp;Silva',\n&nbsp;&nbsp;idade:&nbsp;37,\n&nbsp;&nbsp;sexo:&nbsp;'m',\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Como voc\u00ea pode notar, um mesmo objeto pode conter atributos do tipo <em>string<\/em> e do tipo <em>number<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na verdade, as propriedades de um objeto podem armazenar dados de qualquer tipo suportado pelo <strong>JavaScript<\/strong>, inclusive outros objetos: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> let&nbsp;objUsuario&nbsp;=&nbsp;{\n&nbsp;&nbsp;nome:&nbsp;'Jorge&nbsp;da&nbsp;Silva',\n&nbsp;&nbsp;idade:&nbsp;37,\n&nbsp;&nbsp;sexo:&nbsp;'m',\n&nbsp;&nbsp;endereco:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;rua:&nbsp;'Rua&nbsp;dos&nbsp;Bobos',\n&nbsp;&nbsp;&nbsp;&nbsp;numero:&nbsp;0\n&nbsp;&nbsp;}\n} <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Os valores de um atributo podem ser acessados e alterados com a nota\u00e7\u00e3o ponto. No trecho de c\u00f3digo abaixo n\u00f3s acessamos o conte\u00fado do objeto dentro de um<em> template<\/em>: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> let&nbsp;template&nbsp;=&nbsp;`\n&nbsp;&nbsp;&lt;p&gt;Nome&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.nome};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Idade&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.idade};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Sexo&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.sexo};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Endere\u00e7o:&nbsp;${objUsuario.endereco.rua},&nbsp;${objUsuario.endereco.numero}&lt;\/p&gt;\n`\nconst&nbsp;docRef&nbsp;=&nbsp;document.getElementById(\"usuario\");\ndocRef.innerHTML&nbsp;=&nbsp;template; <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, podemos enviar para o <strong>documento HTML<\/strong> as propriedades nome, idade e sexo de nosso usu\u00e1rio. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Perceba tamb\u00e9m, no trecho const docRef = document.getElementById(&#8220;usuario&#8221;); que <strong>document <\/strong>\u00e9 um objeto. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este objeto nos \u00e9 fornecido pela <strong>API DOM <\/strong>e permite que possamos manusear o documento <strong>HTML<\/strong> que ser\u00e1 renderizado pelo navegador. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E que <strong>docRef<\/strong> \u00e9 outro objeto, que permite que alteramos o elemento HTML de id usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quando conversarmos sobre <strong>m\u00e9todos<\/strong> e <strong>fun\u00e7\u00f5es, <\/strong>irei de explicar como um objeto pode ser gerado dinamicamente. Por hora, basta que saiba que estes elementos do nosso c\u00f3digo s\u00e3o <strong>objetos<\/strong> tamb\u00e9m.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bem, al\u00e9m de acessar o valor de um objeto, podemos alter\u00e1-los. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No c\u00f3digo acima alteramos o conte\u00fado <strong>HTML<\/strong> de <strong>docRef <\/strong>fazendo <em>docRef.innerHTML = template<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Abaixo, alteramos os valores do nosso objeto usu\u00e1rio e adicionamos mais conte\u00fado<strong> HTML<\/strong> a <strong>docRef<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> objUsuario.nome&nbsp;=&nbsp;\"Maria&nbsp;das&nbsp;Dores\";\nobjUsuario.idade&nbsp;=&nbsp;\"27\";\nobjUsuario.sexo&nbsp;=&nbsp;\"f\";\nobjUsuario.endereco.rua&nbsp;=&nbsp;\"Av.&nbsp;dos&nbsp;Ladrilhos\";\nobjUsuario.endereco.numero&nbsp;=&nbsp;\"1000\";\nobjUsuario.endereco.cidade&nbsp;=&nbsp;\"S\u00e3o&nbsp;Paulo\";\n&nbsp;\ntemplate&nbsp;=&nbsp;`\n&lt;hr&gt;\n&nbsp;&nbsp;&lt;p&gt;Nome&nbsp;do&nbsp;usu\u00e1rio&nbsp;2:&nbsp;${objUsuario.nome};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Idade&nbsp;do&nbsp;usu\u00e1rio&nbsp;2:&nbsp;${objUsuario.idade};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Sexo&nbsp;do&nbsp;usu\u00e1rio&nbsp;2:&nbsp;${objUsuario.sexo};&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Endere\u00e7o&nbsp;2:&nbsp;${objUsuario.endereco.rua},&nbsp;${objUsuario.endereco.numero}&lt;\/p&gt;\n&nbsp;&nbsp;&lt;p&gt;Cidade&nbsp;2:&nbsp;${objUsuario.endereco.cidade}&nbsp;&lt;\/p&gt;\n`\ndocRef.innerHTML&nbsp;+=&nbsp;template; <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Voc\u00ea pode ver todo o c\u00f3digo deste exemplo no projeto abaixo:<\/p>\n\n\n\n<iframe src=\" https:\/\/stackblitz.com\/edit\/js-object-1?embed=1&amp;file=index.js\" width=\" 800px\" =\"\"=\"\" height=\"600px\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&gt;&gt;Leitura Recomendada:<\/strong><br>Os <a href=\"https:\/\/www.geekhunter.com\/pt\/blog\/editor-html-css-e-javascript-qual-voce-deve-usar-em-2020-segundo-profissionais\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>melhores editores para programadores front-end<\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-aprendendo-js-na-pr-tica\">Aprendendo JS na pr\u00e1tica<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/Aprendendo-JS-na-pr\u00e1tica-1024x576.jpg\" alt=\"imagem de fundo roxo com simbolo do javascript e da geekhunter\" class=\"wp-image-8100\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Para apresentar tudo o que vimos aqui em uma aplica\u00e7\u00e3o simples, criei o projeto abaixo: <\/p>\n\n\n\n<iframe src=\"https:\/\/stackblitz.com\/edit\/js-object-2?embed=1&amp;file=index.js\" width=\" 800px\" =\"\"=\"\" height=\"600px\"><\/iframe>\n\n\n\n<p class=\"wp-block-paragraph\">Ele utiliza alguns conceitos que iremos explicar a fundo no <strong>pr\u00f3ximo artigo<\/strong>, mas a principio temos um <strong>documento HTML<\/strong> com os campos para inser\u00e7\u00e3o de nome, idade e sexo de um usu\u00e1rio:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> &nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Cadstre-se&lt;\/h3&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;label&gt;Nome:\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"text\"&nbsp;id=\"nome\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;label&gt;Idade:\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"number\"&nbsp;id=\"idade\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;label&gt;Sexo:\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type=\"radio\"&nbsp;name=\"sexo\"&nbsp;id=\"sexo\"&nbsp;value=\"m\"&gt;M&nbsp;&lt;input&nbsp;type=\"radio\"&nbsp;name=\"sexo\"&nbsp;value=\"f\"&gt;F\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;&lt;button&nbsp;id=\"cadastrar\"&gt;Cadastrar&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&nbsp;id=\"cadastrado\"&gt;&lt;\/section&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt; <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">E um <strong>c\u00f3digo JavaScript<\/strong>. A primeira parte cria o objeto cadastro, que utilizamos para alterar o <strong>HTML<\/strong> que ser\u00e1 exibido ao usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">E o <strong>objeto btn <\/strong>que, quando clicado, ir\u00e1 executar o c\u00f3digo dentro da fun\u00e7\u00e3o cadastrar. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Falaremos sobre m\u00e9todos e fun\u00e7\u00f5es nos pr\u00f3ximos artigos. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> const&nbsp;cadastro&nbsp;=&nbsp;document.getElementById(\"cadastrado\");\nconst&nbsp;btn&nbsp;=&nbsp;document.getElementById(\"cadastrar\");\nbtn.addEventListener(\"click\",&nbsp;cadastrar); <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">A parte mais importante do nosso c\u00f3digo hoje, e a que eu quero que voc\u00ea realmente entenda \u00e9 esta: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> function&nbsp;cadastrar()&nbsp;{\n&nbsp;&nbsp;let&nbsp;objUsuario&nbsp;=&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;nome:&nbsp;document.getElementById('nome').value,\n&nbsp;&nbsp;&nbsp;&nbsp;idade:&nbsp;document.getElementById('idade').value,\n&nbsp;&nbsp;&nbsp;&nbsp;sexo:&nbsp;document.getElementById('sexo').value,\n&nbsp;&nbsp;}\n&nbsp;\n&nbsp;&nbsp;let&nbsp;template&nbsp;=&nbsp;`\n&nbsp;&nbsp;&lt;hr&gt;\n&nbsp;&nbsp;&lt;h3&gt;Usu\u00e1rio&nbsp;cadastrado&lt;\/h3&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Nome&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.nome}&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Idade&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.idade}&lt;\/p&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Sexo&nbsp;do&nbsp;usu\u00e1rio:&nbsp;${objUsuario.sexo}&lt;\/p&gt;\n&nbsp;&nbsp;`\n&nbsp;\n&nbsp;&nbsp;cadastro.innerHTML&nbsp;=&nbsp;template;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>&gt;&gt;Leitura Recomendada:<\/strong><br>Conhe\u00e7a os 10 <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/frameworks-javascript-e-bibliotecas-java\/\" target=\"_blank\">frameworks e libraries javascript<\/a><\/strong> mais importantes atualmente<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A <strong>fun\u00e7\u00e3o cadastrar<\/strong> cont\u00e9m o c\u00f3digo que ser\u00e1 executado quando<strong> btn<\/strong> for clicado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Veja que os valores do <strong>objUsuario<\/strong> ser\u00e3o os valores dos elementos<strong><a href=\"https:\/\/www.geekhunter.com\/pt\/blog\/tudo-sobre-html-para-front-ends\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" HTML (abre numa nova aba)\"> HTML<\/a><\/strong> de id nome, idade e sexo.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>HTML<\/td><td>JavaScript<\/td><\/tr><tr><td>&lt;label&gt;Nome:<br>&lt;input&nbsp;type=&#8221;text&#8221;<br>id=&#8221;nome&#8221;&gt;<br>&lt;\/label&gt;<br><br>&lt;p&gt;&lt;label&gt;Idade:<br>&lt;input&nbsp;type=&#8221;number&#8221;<br>id=&#8221;idade&#8221;&gt;&lt;\/label&gt;<br><br>&lt;p&gt;&lt;label&gt;Sexo:<br>&lt;input&nbsp;type=&#8221;radio&#8221;<br>name=&#8221;sexo&#8221;&nbsp;id=&#8221;sexo&#8221;<br>value=&#8221;m&#8221;&gt;M<br>&lt;input&nbsp;type=&#8221;radio&#8221;<br>name=&#8221;sexo&#8221;<br>value=&#8221;f&#8221;&gt;F&lt;\/label&gt;<br><\/td><td> let&nbsp;objUsuario&nbsp;=&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;nome:&nbsp;document.getElementById(&#8216;nome&#8217;).value,<br><br>&nbsp;&nbsp;&nbsp;&nbsp;idade:&nbsp;document.getElementById(&#8216;idade&#8217;).value,<br><br>&nbsp;&nbsp;&nbsp;&nbsp;sexo:&nbsp;document.getElementById(&#8216;sexo&#8217;).value,<br>&nbsp;&nbsp;}<br><br> <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, a vari\u00e1vel <em>template <\/em>conter\u00e1 uma <em>string<\/em> com os dados informados pelo usu\u00e1rio e estes dados ser\u00e3o renderizados no <strong>elemento HTML <\/strong>de id cadastro. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bom galera, por hoje foi isso! Espero que estejam gostando da nossa s\u00e9rie de <strong>introdu\u00e7\u00e3o ao JavaScript<\/strong>. Al\u00e9m de estudar de forma autodidata, voc\u00ea tamb\u00e9m pode optar por um aprendizado mais r\u00e1pido, que seriam por meio de <strong><a href=\"https:\/\/www.geekhunter.com\/pt\/blog\/curso-javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">bons cursos de JavaScript<\/a><\/strong>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ah, quase ia esquecendo: d\u00e1 uma olhada na nossa p\u00e1gina com <a rel=\"noreferrer noopener\" href=\"https:\/\/www.geekhunter.com\/pt\/vagas?area=Front-end\" target=\"_blank\"><strong>vagas para desenvolvedor front-end<\/strong><\/a>. Quem sabe voc\u00ea acha uma oportunidade legal.  <br><br>Para demonstrar interesse em alguma vaga, basta criar um perfil na Geek, ou, se voc\u00ea j\u00e1 tem, \u00e9 s\u00f3 sinalizar as vagas que voc\u00ea gostaria de participar do processo seletivo. Simples assim \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/bit.ly\/2phIm1t\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/CTA-Rodap\u00e9-Front-end-3-1024x134.jpg\" alt=\"\" class=\"wp-image-8095\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1, meus caros leitores e leitoras. No \u00faltimo artigo fiz uma breve introdu\u00e7\u00e3o ao JavaScript, criamos um ambiente de desenvolvimento on-line e um exemplo de aplica\u00e7\u00e3o web manipulando strings. Avan\u00e7ando em nossa jornada, vamos falar sobre outros tipos de dados e como podemos criar aplica\u00e7\u00f5es mais elaboradas, conforme temos mais ferramentas em nossas m\u00e3os. Vamos [&hellip;]<\/p>\n","protected":false},"author":167,"featured_media":8097,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-8083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.6 (Yoast SEO v28.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos - Blog Geekhunter<\/title>\n<meta name=\"description\" content=\"Nesse artigo fazemos uma introdu\u00e7\u00e3o ao JavaScript, abordando Numbers e Objects e ensinando de forma pr\u00e1tica como fazer uso deles. Leia!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos\" \/>\n<meta property=\"og:description\" content=\"Ol\u00e1, meus caros leitores e leitoras. No \u00faltimo artigo fiz uma breve introdu\u00e7\u00e3o ao JavaScript, criamos um ambiente de desenvolvimento on-line e um exemplo\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-23T18:24:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-29T22:02:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos\",\"datePublished\":\"2025-05-23T18:24:16+00:00\",\"dateModified\":\"2025-05-29T22:02:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/\"},\"wordCount\":1179,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/\",\"name\":\"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos - Blog Geekhunter\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg\",\"datePublished\":\"2025-05-23T18:24:16+00:00\",\"dateModified\":\"2025-05-29T22:02:04+00:00\",\"description\":\"Nesse artigo fazemos uma introdu\u00e7\u00e3o ao JavaScript, abordando Numbers e Objects e ensinando de forma pr\u00e1tica como fazer uso deles. Leia!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg\",\"width\":1366,\"height\":768,\"caption\":\"imagem de fundo roxo com simbolo do javascript e da geekhunter\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/introducao-ao-javascript-numeros-e-objetos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos - Blog Geekhunter","description":"Nesse artigo fazemos uma introdu\u00e7\u00e3o ao JavaScript, abordando Numbers e Objects e ensinando de forma pr\u00e1tica como fazer uso deles. Leia!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/","og_locale":"pt_BR","og_type":"article","og_title":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos","og_description":"Ol\u00e1, meus caros leitores e leitoras. No \u00faltimo artigo fiz uma breve introdu\u00e7\u00e3o ao JavaScript, criamos um ambiente de desenvolvimento on-line e um exemplo","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2025-05-23T18:24:16+00:00","article_modified_time":"2025-05-29T22:02:04+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg","type":"image\/jpeg"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos","datePublished":"2025-05-23T18:24:16+00:00","dateModified":"2025-05-29T22:02:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/"},"wordCount":1179,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/","name":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos - Blog Geekhunter","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg","datePublished":"2025-05-23T18:24:16+00:00","dateModified":"2025-05-29T22:02:04+00:00","description":"Nesse artigo fazemos uma introdu\u00e7\u00e3o ao JavaScript, abordando Numbers e Objects e ensinando de forma pr\u00e1tica como fazer uso deles. Leia!","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/introducao-ao-javascript-numeros-e-objetos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2019\/10\/Introdu\u00e7\u00e3o-ao-JavaScript-n\u00fameros-e-objetos.jpg","width":1366,"height":768,"caption":"imagem de fundo roxo com simbolo do javascript e da geekhunter"},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/introducao-ao-javascript-numeros-e-objetos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Introdu\u00e7\u00e3o ao JavaScript: n\u00fameros e objetos"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/8083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=8083"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/8083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/8097"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=8083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=8083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=8083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}