{"id":943,"date":"2017-11-30T13:37:18","date_gmt":"2017-11-30T13:37:18","guid":{"rendered":"http:\/\/www.andrefelizardo.com.br\/blog\/?p=943"},"modified":"2017-12-01T16:14:59","modified_gmt":"2017-12-01T16:14:59","slug":"javascript-comecando-do-jeito-certo","status":"publish","type":"post","link":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","title":{"rendered":"JavaScript &#8211; Come\u00e7ando do jeito certo"},"content":{"rendered":"<p><a name=\"o-que-e-javascript\"><\/a><\/p>\n<h2>O que \u00e9 JavaScript?<\/h2>\n<p><strong>JavaScript<\/strong> \u00e9 uma linguagem de programa\u00e7\u00e3o, que foi criada originalmente para rodar em navegadores. Na tr\u00edade do <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/\" target=\"_blank\" rel=\"noopener\">Front-end<\/a>, a linguagem \u00e9 respons\u00e1vel por interagir com o usu\u00e1rio (como mensagens de erro e outros), sem a necessidade das informa\u00e7\u00f5es irem<!--more--> at\u00e9 o servidor.<\/p>\n<ul>\n<li><a href=\"#o-que-e-javascript\">O que \u00e9 JavaScript?<\/a><\/li>\n<li><a href=\"#historia\">Hist\u00f3ria do JavaScript<\/a>\n<ul>\n<li><a href=\"#v8\">V8<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#principais-conceitos\">Principais conceitos<\/a>\n<ul>\n<li><a href=\"#tipagem\">Tipagem<\/a><\/li>\n<li><a href=\"#sintaxe\">Sintaxe<\/a><\/li>\n<li><a href=\"#objetos\">Objetos<\/a><\/li>\n<li><a href=\"#metodos\">M\u00e9todos\/Fun\u00e7\u00f5es<\/a><\/li>\n<li><a href=\"#prototipos\">Prot\u00f3tipos<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#como-comecar\">Como come\u00e7ar?<\/a>\n<ul>\n<li><a href=\"#passo-1\">Passo 1<\/a><\/li>\n<li><a href=\"#passo-2\">Passo 2<\/a><\/li>\n<li><a href=\"#passo-3\">Passo 3<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a name=\"historia\"><\/a><\/p>\n<h2>Hist\u00f3ria do JavaScript<\/h2>\n<p>A hist\u00f3ria do JavaScript se confunde com a hist\u00f3ria dos navegadores. Eu n\u00e3o sei quantos anos voc\u00ea tem, mas quando tudo isso aqui era mato, nem existia Google Chrome.<\/p>\n<p>A linguagem foi desenvolvida por Brendan Eich, quando ele trabalhava no Netscape. S\u00f3 tem um detalhe, se chamava\u00a0<em>Mocha<\/em>. Depois o nome foi mudado pra LiveScript. LiveScript foi lan\u00e7ado em 1995, junto com o Netscape 2.0.<\/p>\n<p>Quando a Netscape adicionou suporte \u00e0 Java (Applets) em seu navegador, ela mudou o nome da linguagem para JavaScript, e isso gera confus\u00e3o at\u00e9 hoje. O Java tinha sido rec\u00e9m-lan\u00e7ado nessa \u00e9poca e tudo indica que foi uma baita estrat\u00e9gia de marketing. Mas isso gera uma confus\u00e3o at\u00e9 hoje, e vamos esclarecer: JavaScript\u00a0<strong>n\u00e3o\u00a0<\/strong>\u00e9 baseado em Java.<\/p>\n<p>A linguagem\u00a0<em>bombou<\/em> e a Microsoft,\u00a0<del>mais uma vez<\/del> copiou a linguagem mas pra n\u00e3o ter problemas com copyright, usou o nome de JScript. Com um por\u00e9m, n\u00e3o era apenas uma c\u00f3pia, a Microsoft corrigiu alguns m\u00e9todos do JavaScript, e incluiu o seu script no Internet Explorer 3.0, em 1996. JavaScript e JScript eram t\u00e3o iguais, que muitas vezes eram confundidos, apesar da Microsoft sempre declarar que n\u00e3o era igual.<\/p>\n<p>No fim de 1996 a Netscape informou que tinha submetido o Javascript para a ECMA.<\/p>\n<p>Um instantinho pra te explicar o ECMA.\u00a0<em><strong>E<\/strong>uropean\u00a0<strong>C<\/strong>omputer\u00a0<strong>M<\/strong>anufactures\u00a0<strong>A<\/strong>ssociation<\/em> \u00e9 uma associa\u00e7\u00e3o dedicada a padroniza\u00e7\u00e3o de sistemas de informa\u00e7\u00e3o. V\u00e1rias linguagens s\u00e3o padronizadas pela ECMA, como C#, Eiffel, CLI e outras.<\/p>\n<p>Portanto, oficialmente ECMAScript \u00e9 a especifica\u00e7\u00e3o do Javascript. Por isso, atualmente falamos em ES6, ES7 e outros. S\u00e3o as vers\u00f5es da especifica\u00e7\u00e3o ECMA.<\/p>\n<p>Em 2009 foi criado o projeto <a href=\"http:\/\/requirejs.org\/docs\/commonjs.html\" target=\"_blank\" rel=\"noopener\">CommonJS<\/a>. O objetivo desse projeto \u00e9 especificar uma biblioteca padr\u00e3o de desenvolvimento JavaScript fora do navegador. E a\u00ed amigo, o mundo \u00e9 nosso.<\/p>\n<h3>V8<\/h3>\n<p>Um dos respons\u00e1veis, na minha humilde opini\u00e3o, pela populariza\u00e7\u00e3o do JavaScript e pela cria\u00e7\u00e3o de in\u00famero frameworks, \u00e9 o Interpretador V8 que foi lan\u00e7ado junto com o Google Chrome 2. E porque ele \u00e9 um dos respons\u00e1veis, porque ele acelerou o desempenho da aplica\u00e7\u00e3o compilando todo o c\u00f3digo para o formato nativo de m\u00e1quina, antes de execut\u00e1-lo, ou seja, ele roda com a mesma velocidade de um c\u00f3digo bin\u00e1rio compilado. Se voc\u00ea n\u00e3o entendeu muita coisa, apenas entenda que ficou muito r\u00e1pido. Opera e Firefox atualmente tem bons interpretadores tamb\u00e9m, at\u00e9 o Edge. Mas o lan\u00e7amento de V8 ali em 2008\/2009 foi um divisor de \u00e1guas.<br \/>\n<a name=\"principais-conceitos\"><\/a><\/p>\n<h2>Principais conceitos<\/h2>\n<p><a name=\"tipagem\"><\/a><\/p>\n<h3>Tipagem<\/h3>\n<p>JavaScript \u00e9 uma linguagem n\u00e3o fortemente tipada. Tipagem refere-se as vari\u00e1veis. A mesma vari\u00e1vel pode ser uma string, depois um n\u00famero e assim por diante. Se voc\u00ea aprendeu os conceitos de vari\u00e1veis com as linguagens backend, isso pode at\u00e9 soar um pouco estranho para voc\u00ea, mas \u00e9 comum entre as linguagens de script ter tipagem din\u00e2mica.<br \/>\n<a name=\"sintaxe\"><\/a><\/p>\n<h3>Sintaxe<\/h3>\n<p>JavaScript tem os elementos de sintaxe de programa\u00e7\u00e3o estruturada (if, while, switch), assim como C.<\/p>\n<h3>Objetos<\/h3>\n<p>Se eu pudesse resumir JavaScript num debate t\u00e9cnico eu diria algo como: \u00e9 tudo objeto. JavaScript \u00e9 quase toda baseada em objetos. Isso quer dizer que propriedades e seus valores podem ser adicionadas, mudadas e deletadas em tempo de execu\u00e7\u00e3o em praticamente qualquer coisa em JavaScript.<\/p>\n<h3>M\u00e9todos\/Fun\u00e7\u00f5es<\/h3>\n<p>Em JavaScript m\u00e9todo == fun\u00e7\u00e3o. N\u00e3o tem diferen\u00e7a entre definir um m\u00e9todo ou uma fun\u00e7\u00e3o. As fun\u00e7\u00f5es s\u00e3o objetos que tem propriedades e m\u00e9todos que podem ser passados como argumentos, atribu\u00eddos a vari\u00e1veis ou ainda retornadas.<br \/>\n<a name=\"prototipos\"><\/a><\/p>\n<h3>Prot\u00f3tipos<\/h3>\n<p>A linguagem n\u00e3o usa classes, mas usa prot\u00f3tipos para fazer heran\u00e7a. D\u00e1 pra usar muitas caracter\u00edsticas de POO (Programa\u00e7\u00e3o Orientada a Objetos), criando classes com prot\u00f3tipos.<br \/>\n<a name=\"como-comecar\"><\/a><\/p>\n<h2>Como come\u00e7ar?<\/h2>\n<p>Existem v\u00e1rias formas de inserir JavaScript nas nossas p\u00e1ginas HTML. Uma forma simples, mas n\u00e3o aconselhada \u00e9 usar a tag script e s seus comandos dentro do pr\u00f3prio HTML. Bora colocar a m\u00e3o na massa?<br \/>\n<a name=\"passo-1\"><\/a><\/p>\n<h3>Passo 1<\/h3>\n<p>Vamos criar uma p\u00e1gina HTML simples com o seguinte c\u00f3digo. Salve onde voc\u00ea quiser, e abra no seu navegador favorito. Aqui entre n\u00f3s, use o Chrome.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/sq1dmqz8\/embed\/html\/dark\/\"><\/script><br \/>\n<a name=\"passo-2\"><\/a><\/p>\n<h3>Passo 2<\/h3>\n<p>Temos duas formas de inserir o script na p\u00e1gina, de forma bem similar ao CSS. Uma \u00e9 o script inline. Vamos come\u00e7ar com essa forma. Antes do fechamento da tag body, criaremos a tag script, com uma pequena a\u00e7\u00e3o interna.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/sq1dmqz8\/3\/embed\/html\/dark\/\"><\/script><\/p>\n<p>It&#8217;s a magic!<br \/>\n<a name=\"passo-3\"><\/a><\/p>\n<h3>Passo 3<\/h3>\n<p>Mas como boa pr\u00e1tica, vamos separar nossos arquivos por camadas. A p\u00e1gina HTML \u00e9 pra ter apenas a estrutura da p\u00e1gina, n\u00e3o \u00e9 pra ter tamb\u00e9m as a\u00e7\u00f5es, valida\u00e7\u00f5es e outros. Ent\u00e3o, de forma geral, sempre separe os arquivos. Bora fazer isso?<\/p>\n<p>Crie um arquivo com o nome de script.js. Nele cole todo o conte\u00fado que colocamos dentro da nossa tag script.<br \/>\n<script async src=\"\/\/jsfiddle.net\/andrefelizardo\/sq1dmqz8\/4\/embed\/js\/dark\/\"><\/script><\/p>\n<p>Por \u00faltimo, volte ao html, e vamos alterar a tag script, para chamar um arquivo externo.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/andrefelizardo\/sq1dmqz8\/4\/embed\/html\/dark\/\"><\/script><\/p>\n<p>Bom, JavaScript \u00e9 bem mais poderoso do que apenas escrever um texto na p\u00e1gina. Ent\u00e3o, pra que eu possa te ajudar mais, criei uma s\u00e9rie &#8211; que se inicia com esse artigo, e vamos evoluindo os conhecimentos aos poucos.<\/p>\n<p>Se voc\u00ea quiser dar uma olhada j\u00e1 num exemplo que fiz anteriormente para capturar propriedades de elementos na p\u00e1gina e manipular outros elementos, d\u00e1 uma olhada <a href=\"http:\/\/www.andrefelizardo.com.br\/blog\/manipulando-elementos-de-acordo-com-a-altura-da-janela\/\" target=\"_blank\" rel=\"noopener\">aqui<\/a>.<\/p>\n<p>Qualquer d\u00favida, deixa nos coment\u00e1rios!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que \u00e9 JavaScript? JavaScript \u00e9 uma linguagem de programa\u00e7\u00e3o, que foi criada originalmente para rodar em navegadores. Na tr\u00edade do Front-end, a linguagem \u00e9 respons\u00e1vel por interagir com o usu\u00e1rio (como mensagens de erro e outros), sem a necessidade das informa\u00e7\u00f5es irem<\/p>\n","protected":false},"author":1,"featured_media":950,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117],"tags":[119,96,114,53,60,55,137,116],"class_list":["post-943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","tag-angular","tag-angularjs","tag-frontend","tag-html","tag-html5","tag-javascript","tag-netscape","tag-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo<\/title>\n<meta name=\"description\" content=\"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"og:description\" content=\"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog do Andr\u00e9 Felizardo\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-30T13:37:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-01T16:14:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"391\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andr\u00e9 Felizardo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andr\u00e9 Felizardo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#article\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/\"},\"author\":{\"name\":\"Andr\u00e9 Felizardo\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"headline\":\"JavaScript &#8211; Come\u00e7ando do jeito certo\",\"datePublished\":\"2017-11-30T13:37:18+00:00\",\"dateModified\":\"2017-12-01T16:14:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/\"},\"wordCount\":1005,\"commentCount\":0,\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/javascript-comecando_jeito_certo.png\",\"keywords\":[\"angular\",\"angularjs\",\"frontend\",\"html\",\"html5\",\"javascript\",\"netscape\",\"react\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/\",\"name\":\"JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#primaryimage\"},\"image\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/javascript-comecando_jeito_certo.png\",\"datePublished\":\"2017-11-30T13:37:18+00:00\",\"dateModified\":\"2017-12-01T16:14:59+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\"},\"description\":\"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.\",\"breadcrumb\":{\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/javascript-comecando_jeito_certo.png\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/javascript-comecando_jeito_certo.png\",\"width\":750,\"height\":391},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/javascript-comecando-do-jeito-certo\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript &#8211; Come\u00e7ando do jeito certo\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/\",\"name\":\"Blog do Andr\u00e9 Felizardo\",\"description\":\"Programa\u00e7\u00e3o de dev para dev\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/7ffba68b251851fb519600e2e387a02b\",\"name\":\"Andr\u00e9 Felizardo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/wp-content\\\/wphb-cache\\\/gravatar\\\/9f9\\\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg\",\"caption\":\"Andr\u00e9 Felizardo\"},\"sameAs\":[\"http:\\\/\\\/www.andrefelizardo.com.br\"],\"url\":\"https:\\\/\\\/www.andrefelizardo.com.br\\\/blog\\\/author\\\/andrefelizardo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo","description":"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.","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":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","og_locale":"pt_BR","og_type":"article","og_title":"JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo","og_description":"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.","og_url":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","og_site_name":"Blog do Andr\u00e9 Felizardo","article_published_time":"2017-11-30T13:37:18+00:00","article_modified_time":"2017-12-01T16:14:59+00:00","og_image":[{"width":750,"height":391,"url":"http:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","type":"image\/png"}],"author":"Andr\u00e9 Felizardo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Andr\u00e9 Felizardo","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#article","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/"},"author":{"name":"Andr\u00e9 Felizardo","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"headline":"JavaScript &#8211; Come\u00e7ando do jeito certo","datePublished":"2017-11-30T13:37:18+00:00","dateModified":"2017-12-01T16:14:59+00:00","mainEntityOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/"},"wordCount":1005,"commentCount":0,"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","keywords":["angular","angularjs","frontend","html","html5","javascript","netscape","react"],"articleSection":["Dev"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","url":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/","name":"JavaScript - Come\u00e7ando do jeito certo - Blog do Andr\u00e9 Felizardo","isPartOf":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#primaryimage"},"image":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","datePublished":"2017-11-30T13:37:18+00:00","dateModified":"2017-12-01T16:14:59+00:00","author":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b"},"description":"O que \u00e9 Javascript? Entenda a hist\u00f3ria e os principais conceitos da linguagem, para que depois voc\u00ea possa aprender React, Angular e outros.","breadcrumb":{"@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#primaryimage","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","width":750,"height":391},{"@type":"BreadcrumbList","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/javascript-comecando-do-jeito-certo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"http:\/\/www.andrefelizardo.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript &#8211; Come\u00e7ando do jeito certo"}]},{"@type":"WebSite","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#website","url":"http:\/\/www.andrefelizardo.com.br\/blog\/","name":"Blog do Andr\u00e9 Felizardo","description":"Programa\u00e7\u00e3o de dev para dev","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.andrefelizardo.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"http:\/\/www.andrefelizardo.com.br\/blog\/#\/schema\/person\/7ffba68b251851fb519600e2e387a02b","name":"Andr\u00e9 Felizardo","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","contentUrl":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/wphb-cache\/gravatar\/9f9\/9f92d8b773ef5acf9b462d6dab41d783x96.jpg","caption":"Andr\u00e9 Felizardo"},"sameAs":["http:\/\/www.andrefelizardo.com.br"],"url":"https:\/\/www.andrefelizardo.com.br\/blog\/author\/andrefelizardo\/"}]}},"jetpack_featured_media_url":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/11\/javascript-comecando_jeito_certo.png","jetpack_shortlink":"https:\/\/wp.me\/p6EP66-fd","jetpack-related-posts":[{"id":993,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-reduce\/","url_meta":{"origin":943,"position":0},"title":"JavaScript &#8211; Reduce","author":"Andr\u00e9 Felizardo","date":"5 de abril de 2018","format":false,"excerpt":"JavaScript Reduce \u00e9 um dos m\u00e9todos recentes de programa\u00e7\u00e3o funcional que a linguagem possui. Ele foi definido no EcmaScript 2015, e \u00e9 um m\u00e9todo de arrays. Acesse aqui para entender um pouco mais dessa hist\u00f3ria do JavaScript. Se voc\u00ea n\u00e3o entende muito bem sobre programa\u00e7\u00e3o funcional, deixa um coment\u00e1rio que\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"Capa do blog para JavaScript reduce","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2018\/04\/javascript-reduce.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":3010,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/comparando-strings-em-javascript-e-porque-parece-errado\/","url_meta":{"origin":943,"position":1},"title":"Comparando strings em Javascript e porque parece errado","author":"Andr\u00e9 Felizardo","date":"28 de abril de 2025","format":false,"excerpt":"Muitas vezes Javascript \u00e9 motivo de piadas\/memes de algu\u00e9m dizendo que o funcionamento do Javascript \u00e9 estranho quando compara algumas coisas. Mas em geral, isso \u00e9 s\u00f3 falta de conhecimento de como a linguagem funciona por baixo dos panos. E uma desses tipos de compara\u00e7\u00f5es que parecem erradas \u00e9 a\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2025\/04\/Comparando-strings-Javascript.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":799,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/angular-2-nao-continuacao-do-angular-1\/","url_meta":{"origin":943,"position":2},"title":"Angular 2 &#8211; A n\u00e3o continua\u00e7\u00e3o do Angular 1","author":"Andr\u00e9 Felizardo","date":"15 de janeiro de 2017","format":false,"excerpt":"T\u00e1 estudando Angular 2? N\u00e3o? Fica ligado que a gente j\u00e1 est\u00e1 no Angular 4 beta 3! Angular 2 foi oficialmente lan\u00e7ado em setembro de 2016. Mas tamb\u00e9m n\u00e3o precisa ficar t\u00e3o preocupado. De qualquer forma vamos colocar os pingos nos is\u00a0pra voc\u00ea entender de uma vez por toda o\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/01\/angular2.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":35,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/front-end-o-que-e\/","url_meta":{"origin":943,"position":3},"title":"Front-end. O que \u00e9?","author":"Andr\u00e9 Felizardo","date":"29 de janeiro de 2015","format":false,"excerpt":"Front-end. Voc\u00ea sabe o que \u00e9? O que ele faz? Alguns anos atr\u00e1s, o termo que mais se ouvia quanto ao profissional que trabalha com o desenvolvimento de sites era WebDesigner. E a fun\u00e7\u00e3o de WebDesigner era meio m\u00edstica, parecia ser um profissional que sabia de tudo um pouco, c\u00f3digos,\u2026","rel":"","context":"Em &quot;Tecnologia&quot;","block_context":{"text":"Tecnologia","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/tecnologia\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2015\/01\/vaga-para-desenvolvedor-front-end-webdesign-agencia-diretriz-digital-marketing-branding.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":953,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/javascript-variaveis\/","url_meta":{"origin":943,"position":4},"title":"JavaScript &#8211; Vari\u00e1veis: var, let e const","author":"Andr\u00e9 Felizardo","date":"3 de dezembro de 2017","format":false,"excerpt":"O que \u00e9 uma vari\u00e1vel? Vari\u00e1veis JavaScript s\u00e3o objetos onde n\u00f3s guardamos uma informa\u00e7\u00e3o apenas em tempo de execu\u00e7\u00e3o. Por exemplo: se voc\u00ea digita sua data de nascimento em um formul\u00e1rio, podemos guardar essa data em uma vari\u00e1vel para calcular a sua idade. Mas se voc\u00ea sair do site e\u2026","rel":"","context":"Em &quot;Dev&quot;","block_context":{"text":"Dev","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/dev\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/12\/javascript-variaveis.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/12\/javascript-variaveis.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/12\/javascript-variaveis.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2017\/12\/javascript-variaveis.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":668,"url":"https:\/\/www.andrefelizardo.com.br\/blog\/manipulando-elementos-de-acordo-com-a-altura-da-janela\/","url_meta":{"origin":943,"position":5},"title":"Manipulando elementos de acordo com a altura da janela","author":"Andr\u00e9 Felizardo","date":"30 de setembro de 2016","format":false,"excerpt":"Se voc\u00ea v\u00e1rias vezes j\u00e1 se pegou\u00a0manipulando elementos com JavaScript e jQuery nem precisa ler esse post, sei l\u00e1, vai ler sobre Ionic\u00a0:) Caso voc\u00ea esteja come\u00e7ando no mundo do Front-end\u00a0talvez voc\u00ea tenha tido esta d\u00favida. Como eu fa\u00e7o pra deixar um elemento (como uma div) da altura da janela?\u2026","rel":"","context":"Em &quot;Curiosidades&quot;","block_context":{"text":"Curiosidades","link":"https:\/\/www.andrefelizardo.com.br\/blog\/category\/curiosidades\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.andrefelizardo.com.br\/blog\/wp-content\/uploads\/2016\/09\/javascript.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=943"}],"version-history":[{"count":0,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/posts\/943\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media\/950"}],"wp:attachment":[{"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andrefelizardo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}