Confira nosso guia em v\u00eddeo<\/a> para JavaScript<\/h3>\n<\/kinsta-video>\nO que \u00e9 JavaScript?<\/h2>\n
De maneira mais simples, o JavaScript \u00e9 uma linguagem de script popular<\/a> para adicionar funcionalidade interativa e outros conte\u00fados din\u00e2micos da web \u00e0s p\u00e1ginas web. Exemplos bem conhecidos de conte\u00fado JavaScript incluem formul\u00e1rios que podem ser preenchidos, apresenta\u00e7\u00f5es de slides de galeria de fotos e gr\u00e1ficos animados.<\/p>\nO JavaScript tamb\u00e9m \u00e9 relativamente intuitivo e direto de aprender. \u00c9 um excelente ponto de partida para aqueles que procuram aprender mais sobre o desenvolvimento de sites.<\/p>\n
O JavaScript \u00e9 a camada final de funcionalidade em sites altamente interativos. O HTML<\/a> fornece a estrutura b\u00e1sica para a p\u00e1gina. CSS<\/a> \u00e9 o recurso para estilizar seu site – ele define o estilo do seu site. O JavaScript ent\u00e3o adiciona tempero.<\/p>\nAo aprender JavaScript, \u00e9 essencial entender a rela\u00e7\u00e3o entre HTML, CSS e JavaScript, e como eles se unem na exibi\u00e7\u00e3o de um site.<\/p>\n
Para que \u00e9 usado o JavaScript<\/h2>\n
O JavaScript tem diversos aplicativos<\/a> que qualquer pessoa que tenha visitado p\u00e1ginas web interativas ou aplicativos para dispositivos m\u00f3veis provavelmente j\u00e1 experimentou. Embora o desenvolvimento de sites – incluindo a adi\u00e7\u00e3o de elementos como formas interativas e anima\u00e7\u00f5es – seja o uso mais tradicional para o JavaScript, ele tamb\u00e9m encontra uso em:<\/p>\n\n- Jogos baseados em navegador da web <\/strong>– incluindo jogos 2D e 3D<\/li>\n
- Desenvolvimento de aplicativos para dispositivos m\u00f3veis <\/strong>– ben\u00e9fico porque \u00e9 independente da plataforma telef\u00f4nica.<\/li>\n
- Apresenta\u00e7\u00f5es <\/strong>– a cria\u00e7\u00e3o de plataformas de slides animados baseados na web<\/li>\n<\/ul>\n
Embora a maioria dos aplicativos JavaScript sejam do lado do cliente, o JavaScript tamb\u00e9m \u00e9 \u00fatil em aplicativos do lado do servidor, tais como a cria\u00e7\u00e3o de servidores web.<\/p>\n![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/dinosaur-gameover-1024x358.png\")
<\/a>O Jogo dos Dinossauros, um exemplo de um jogo de navegador web integrado criado usando JavaScript.<\/figcaption><\/figure>\nDiferen\u00e7as entre Java e JavaScript<\/h2>\n
Primeiro, \u00e9 importante notar que Java e JavaScript n\u00e3o est\u00e3o relacionados, apesar de compartilhar o termo “Java”. Tanto o Java quanto o JavaScript s\u00e3o linguagens para o desenvolvimento de p\u00e1ginas web e aplicativos web. No entanto, eles t\u00eam diferen\u00e7as distintas, inclusive:<\/p>\n
\n- Programa\u00e7\u00e3o orientada a objetos: <\/strong>Java \u00e9 uma linguagem de programa\u00e7\u00e3o orientada a objetos<\/a>. JavaScript \u00e9 uma linguagem de script baseada em objetos.<\/li>\n
- Sintaxe:<\/strong> A sintaxe do JavaScript n\u00e3o \u00e9 t\u00e3o formal ou estruturada como Java. Portanto, \u00e9 mais simples para a maioria dos usu\u00e1rios.<\/li>\n
- Compila\u00e7\u00e3o:<\/strong> Java \u00e9 uma linguagem compilada, enquanto o JavaScript \u00e9 uma linguagem interpretada linha por linha em tempo de execu\u00e7\u00e3o; as linguagens compiladas tendem a ser mais r\u00e1pidas, mas as linguagens interpretadas tendem a ser mais flex\u00edveis.<\/li>\n
- Ambiente: <\/strong>Voc\u00ea pode usar aplicativos Java em qualquer ambiente rodando em m\u00e1quinas virtuais ou navegadores<\/a>; o JavaScript \u00e9 somente para navegadores.<\/li>\n
- Uso de mem\u00f3ria: <\/strong>Java \u00e9 mais intensivo em mem\u00f3ria<\/a> do que JavaScript; isso torna o JavaScript prefer\u00edvel para p\u00e1ginas da web e aplicativos web.<\/li>\n<\/ul>\n
O JavaScript \u00e9 seguro?<\/h2>\n
Embora o JavaScript seja amplamente aceito e utilizado para o desenvolvimento web, ele tem vulnerabilidades bem conhecidas. Um dos ataques cibern\u00e9ticos mais comuns introduzidos atrav\u00e9s das vulnerabilidades do JavaScript \u00e9 o ataque de cross-site scripting (XSS). Os criminosos cibern\u00e9ticos usam ataques XSS para obter acesso e roubar informa\u00e7\u00f5es de identidade.<\/p>\n
Para minimizar as explora\u00e7\u00f5es, \u00e9 fundamental testar e revisar seu c\u00f3digo<\/a> durante o desenvolvimento. M\u00e9todos de teste como o teste de seguran\u00e7a est\u00e1tico e din\u00e2mico do aplicativo (SAST e DAST) ajudam a identificar vulnerabilidades em todos os pontos do ciclo de vida do desenvolvimento de software.<\/p>\nDe acordo com os analistas de seguran\u00e7a do Cloud Defense<\/a>, SAST verifica seu c\u00f3digo para violar as regras de seguran\u00e7a e compara as vulnerabilidades encontradas entre as branches de origem e destino. Voc\u00ea ser\u00e1 notificado se as depend\u00eancias do seu projeto forem afetadas pelas novas vulnerabilidades reveladas.<\/p>\nVanilla JavaScript<\/h2>\n
O Vanilla JavaScript \u00e9 uma implementa\u00e7\u00e3o leve de linguagem JavaScript pura sem bibliotecas adicionais. Aqui, o termo “Vanilla” refere-se ao JavaScript n\u00e3o-personalizado.<\/p>\n
Grandes empresas utilizam Vanilla JS<\/a>, incluindo Google, Microsoft, Apple, Amazon, entre outras. O Vanilla JavaScript \u00e9 uma excelente maneira de aprender os conceitos b\u00e1sicos da <\/a>programa\u00e7\u00e3o JavaScript<\/a> antes de adicionar recursos mais avan\u00e7ados oferecidos em bibliotecas.<\/p>\nBibliotecas JavaScript<\/h2>\n
Uma biblioteca JavaScript \u00e9 uma cole\u00e7\u00e3o de c\u00f3digo pr\u00e9-escrito que desempenha certas fun\u00e7\u00f5es. As bibliotecas permitem que at\u00e9 mesmo usu\u00e1rios novatos construam sites \u00fateis rapidamente. E elas poupam tanto aos usu\u00e1rios novatos quanto aos experientes um tempo significativo na constru\u00e7\u00e3o de sites e aplicativos.<\/p>\n
Embora existam muitas bibliotecas JavaScript<\/a>, algumas das mais populares incluem jQuery, Anime.js, Animate on Scroll, e Leaflet.js.<\/p>\nComo o JavaScript se relaciona com frameworks do site<\/h2>\n
Os frameworks de sites s\u00e3o construtores avan\u00e7ados de sites, normalmente com extensas bibliotecas de funcionalidades e conjuntos de testes pr\u00e9-constru\u00eddos. Voc\u00ea pode estar familiarizado com frameworks do lado do servidor, como Laravel<\/a>, Ruby on Rails ou Django. Mas h\u00e1 tamb\u00e9m v\u00e1rios frameworks populares baseados em JavaScript do lado do cliente, incluindo React.js, Vue.js, e Node.js<\/a>.<\/p>\n![\"Biblioteca](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reactjs2.jpg\")
<\/a>Biblioteca do React (Fonte de imagem: Betica<\/a>)<\/figcaption><\/figure>\nO JavaScript DOM<\/h2>\n
O DOM, ou Document Object Model, atua como uma interface entre uma linguagem de programa\u00e7\u00e3o como o JavaScript e um documento subjacente – especificamente, documentos HTML e XML.<\/p>\n
DOM \u00e9 um padr\u00e3o W3C (World Wide Web Consortium)<\/a>, definido como “uma plataforma e interface neutra em termos de linguagem que permite aos programas e scripts acessar e atualizar dinamicamente o conte\u00fado, a estrutura e o estilo de um documento”. Os documentos consistem em uma cole\u00e7\u00e3o de elementos e propriedades individuais (texto<\/a>, bot\u00f5es, links, etc.).<\/p>\nComponentes b\u00e1sicos do JavaScript<\/h2>\n
Como em outras linguagens de programa\u00e7\u00e3o<\/a>, o JavaScript usa vari\u00e1veis para identificar os locais de armazenamento dos dados. As vari\u00e1veis podem ser globais (acess\u00edveis por qualquer fun\u00e7\u00e3o no c\u00f3digo) ou locais, tamb\u00e9m conhecidas como block-scoped (acess\u00edveis somente no bloco onde s\u00e3o declaradas).<\/p>\nAs vari\u00e1veis podem conter tanto valores fixos (constantes conhecidas como literais) quanto valores alter\u00e1veis. O JavaScript tem uma sintaxe particular para declarar (criar) constantes e vari\u00e1veis, e atribuir valores a elas.<\/p>\n
Declarando uma Constante<\/h3>\n
As constantes verdadeiras s\u00e3o criadas usando uma declara\u00e7\u00e3o const<\/code><\/a>. Const<\/code> cria constantes somente leitura, imut\u00e1veis e em bloco (“bloco em bloco” significa que a constante n\u00e3o \u00e9 acess\u00edvel de fora do seu bloco declarado).<\/p>\nUm exemplo de utiliza\u00e7\u00e3o de const para criar uma constante \u00e9:<\/p>\n
const GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\nObserve o uso de letras mai\u00fasculas para nomear a constante; esta \u00e9 uma conven\u00e7\u00e3o de nomenclatura comumente aceita, embora n\u00e3o seja necess\u00e1ria. Os nomes de vari\u00e1veis, incluindo nomes constantes, devem come\u00e7ar com uma letra (min\u00fascula ou mai\u00fascula), o caractere de sublinhado (_<\/code>), ou o sinal de d\u00f3lar ($<\/code>). Eles s\u00e3o sens\u00edveis a mai\u00fasculas e min\u00fasculas, portanto, n\u00e3o se esque\u00e7a de como voc\u00ea nomeia suas vari\u00e1veis.<\/p>\nAs constantes, ao contr\u00e1rio das vari\u00e1veis, devem receber um valor na cria\u00e7\u00e3o. A seguinte declara\u00e7\u00e3o retornar\u00e1 um erro:<\/p>\n
const GOLDEN_RATIO;<\/code><\/pre>\nDeclara\u00e7\u00e3o de uma vari\u00e1vel<\/h3>\n
As vari\u00e1veis s\u00e3o declaradas usando a palavra-chave<\/a> var<\/code>. Elas n\u00e3o precisam ter um valor atribu\u00eddo no momento da declara\u00e7\u00e3o, embora seja permitido fazer isso e com freq\u00fc\u00eancia. A palavra-chave var<\/code> tem escopo global em vez de escopo de bloco (a menos que esteja em uma fun\u00e7\u00e3o, ent\u00e3o ela tem escopo de fun\u00e7\u00e3o).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\nNote que as declara\u00e7\u00f5es em JavaScript devem terminar com um ponto-e-v\u00edrgula. Voc\u00ea pode criar coment\u00e1rios usando \/\/<\/code> – O JavaScript ignora qualquer coisa entre \/\/<\/code> e o final da linha.<\/p>\nAs vari\u00e1veis podem conter uma variedade de tipos de dados, incluindo n\u00fameros, cordas e objetos. A atribui\u00e7\u00e3o de vari\u00e1veis em JavaScript \u00e9 din\u00e2mica. Portanto, voc\u00ea pode atribuir uma vari\u00e1vel a um tipo de dado diferente no mesmo c\u00f3digo.<\/p>\n
Hoisting<\/h2>\n
Agora que voc\u00ea entende a declara\u00e7\u00e3o de vari\u00e1veis em JavaScript<\/a>, podemos discutir como o JavaScript lida com a localiza\u00e7\u00e3o da declara\u00e7\u00e3o de vari\u00e1veis. A pr\u00e1tica comum de codifica\u00e7\u00e3o requer que voc\u00ea declare vari\u00e1veis antes ou ao mesmo tempo em que as define. Algumas linguagens de programa\u00e7\u00e3o realmente exigem isso.<\/p>\nO JavaScript, entretanto, permite que as vari\u00e1veis sejam declaradas ap\u00f3s serem definidas ou utilizadas. Usando um recurso chamado hoisting, o JavaScript move as declara\u00e7\u00f5es para a parte superior de um script ou fun\u00e7\u00e3o atual. Embora o hoisting possa simplificar a programa\u00e7\u00e3o, permitindo que um programador corrija uma falha na declara\u00e7\u00e3o sem ter que rolar de volta atrav\u00e9s do c\u00f3digo, declarar vari\u00e1veis ap\u00f3s o uso n\u00e3o \u00e9 consistente com as melhores pr\u00e1ticas de programa\u00e7\u00e3o<\/a>.<\/p>\nO Hoisting tamb\u00e9m pode causar problemas inesperados, principalmente porque o Hoisting s\u00f3 se aplica \u00e0 declara\u00e7\u00e3o. Se uma vari\u00e1vel for declarada e inicializada na mesma declara\u00e7\u00e3o, o Hoisting criar\u00e1 uma declara\u00e7\u00e3o no topo do bloco e atribuir\u00e1 \u00e0 vari\u00e1vel um valor indefinido. Assim, qualquer uso da vari\u00e1vel no bloco antes da declara\u00e7\u00e3o real assumir\u00e1 que a vari\u00e1vel \u00e9 indefinida em vez de ter o valor de inicializa\u00e7\u00e3o.<\/p>\n
Vamos usar o exemplo acima para rever o comportamento de i\u00e7amento:<\/p>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nEmbora o hoisting mova a declara\u00e7\u00e3o da vari\u00e1vel variable_2<\/code> para o topo do bloco, ela n\u00e3o move o valor atribu\u00eddo. Esta l\u00f3gica funciona aproximadamente equivalente \u00e0 seguinte sintaxe:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nEm ambos os cen\u00e1rios, o valor final “Thank goodness it’s 2021” n\u00e3o faz parte da produ\u00e7\u00e3o.<\/p>\n
Recomendamos que voc\u00ea utilize a melhor pr\u00e1tica de declarar vari\u00e1veis para evitar problemas potenciais e criar um c\u00f3digo mais limpo.<\/p>\n
Objetos<\/h2>\n
O JavaScript \u00e9 baseado no conceito de objetos<\/a>. Os objetos s\u00e3o cont\u00eaineres que podem conter propriedades, m\u00e9todos ou ambos.<\/p>\nConsidere um exemplo simples. Voc\u00ea tem um objeto chamado “country”. Suas propriedades incluem seu nome, continente, cidade capital e popula\u00e7\u00e3o. Voc\u00ea pode criar este objeto de v\u00e1rias maneiras com JavaScript.<\/p>\n
Primeiro, voc\u00ea pode usar a abordagem literal do objeto ou do inicializador do objeto:<\/p>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nVoc\u00ea tamb\u00e9m pode instanciar um objeto e depois atribuir suas propriedades:<\/p>\n
var country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nNote que voc\u00ea se refere \u00e0s propriedades de um objeto usando a sintaxe object.property<\/code>.<\/p>\nFinalmente, voc\u00ea pode criar objetos usando fun\u00e7\u00f5es de construtor:<\/p>\n
function country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nA cria\u00e7\u00e3o de uma inst\u00e2ncia do objeto seria ent\u00e3o feita por:<\/p>\n
france = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nAs propriedades dos objetos podem ser vari\u00e1veis ou fun\u00e7\u00f5es. Como discutido abaixo, quando uma propriedade de objeto \u00e9 uma fun\u00e7\u00e3o, ela \u00e9 chamada de m\u00e9todo.<\/p>\n
Objetos vs Classes<\/h3>\n
Em poucas palavras, uma classe \u00e9 um modelo gen\u00e9rico de estrutura para um objeto. As classes utilizam o formul\u00e1rio do construtor para descrever objetos.<\/p>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nAssim como acontece com objetos, as classes podem ter m\u00e9todos.<\/p>\n
Trabalhando com Constantes e Vari\u00e1veis<\/h2>\n
Como em outras linguagens, o JavaScript tem v\u00e1rios tipos de operadores<\/a> para uso com vari\u00e1veis e fun\u00e7\u00f5es, a maioria dos quais ser\u00e3o imediatamente reconhec\u00edveis:<\/p>\n\n- Operadores de atribui\u00e7\u00e3o (
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n- Operadores de compara\u00e7\u00e3o (
==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n- Operadores Bitwise e Logical (ver abaixo)<\/li>\n
- Operadores aritm\u00e9ticos (
+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n- Operadores especiais<\/li>\n<\/ul>\n
Alguns poucos operadores est\u00e3o menos familiarizados com programadores<\/a> novatos, tais como operadores de compara\u00e7\u00e3o id\u00eanticos e n\u00e3o id\u00eanticos.<\/p>\n===<\/code> compara se dois operandos t\u00eam o mesmo valor e tipo (ou seja, s\u00e3o id\u00eanticos). !==<\/code> compara se dois operandos n\u00e3o s\u00e3o id\u00eanticos.<\/p>\nConsidere o seguinte exemplo:<\/p>\n
var variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nA sa\u00edda para este trecho de c\u00f3digo seria:<\/p>\n
FALSE\nTRUE<\/code><\/pre>\nTamb\u00e9m \u00e9 essencial entender a diferen\u00e7a entre =<\/code> (um operador de atribui\u00e7\u00e3o) e ==<\/code> (um operador de compara\u00e7\u00e3o).<\/p>\nEnquanto =<\/code> define o valor de uma vari\u00e1vel, ==<\/code> verifica se dois operandos t\u00eam o mesmo valor, incluindo se uma vari\u00e1vel tem um determinado valor. N\u00e3o se deve usar o = operador em declara\u00e7\u00f5es condicionais (como declara\u00e7\u00f5es IF) para verificar a equival\u00eancia.<\/p>\nOperadores Bitwise e l\u00f3gico<\/h3>\n
O JavaScript suporta as opera\u00e7\u00f5es AND (&<\/code> ), OR (|<\/code>), NOT (~<\/code>), e XOR (^<\/code>). Em JavaScript, estes s\u00e3o conhecidos como operadores bitwise. As opera\u00e7\u00f5es bitwise convertem os operandos em representa\u00e7\u00f5es bin\u00e1rias de 32 bits antes de operar (i.e. 20 torna-se 10100). Estas opera\u00e7\u00f5es s\u00e3o chamadas bitwise porque comparam os operandos convertidos<\/a> bitwise, depois retornam um resultado bin\u00e1rio de 32 bits convertido em um n\u00famero inteiro.<\/p>\nExemplo:<\/p>\n
var variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\nConverter operandos em bin\u00e1rios:<\/p>\n
20 = 010100\n\n50 = 110010<\/code><\/pre>\nUma opera\u00e7\u00e3o OR retorna verdadeiro (1) quando um dos bits \u00e9 1, ent\u00e3o o valor de compara\u00e7\u00e3o exibido \u00e9 110110 ou 53. Em JavaScript, o termo operador l\u00f3gico se refere a opera\u00e7\u00f5es cujos operandos t\u00eam apenas os valores booleanos 0 ou 1. Os operadores l\u00f3gicos JavaScript s\u00e3o &&<\/code> (logical AND), ||<\/code> (logical OR), e !<\/code> (logical NOT).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFun\u00e7\u00f5es e m\u00e9todos<\/h2>\n
Pense nas fun\u00e7\u00f5es como os cavalos de trabalho em JavaScript. Eles s\u00e3o blocos de c\u00f3digo que executam tarefas espec\u00edficas. Se voc\u00ea estiver familiarizado com procedimentos e sub-rotinas em outras linguagens de programa\u00e7\u00e3o, voc\u00ea reconhecer\u00e1 fun\u00e7\u00f5es imediatamente.<\/p>\n
As fun\u00e7\u00f5es s\u00e3o definidas usando a seguinte sintaxe:<\/p>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\nA defini\u00e7\u00e3o de fun\u00e7\u00f5es \u00e9 apenas o primeiro passo; voc\u00ea deve posteriormente invocar fun\u00e7\u00f5es usando ()<\/code> no c\u00f3digo:<\/p>\n$()<\/h3>\n
A fun\u00e7\u00e3o $()<\/code> \u00e9 a abrevia\u00e7\u00e3o do m\u00e9todo getElementByID, que, como observado acima, retorna a identifica\u00e7\u00e3o de um elemento espec\u00edfico de um DOM HTML. Ele \u00e9 frequentemente usado para manipular elementos de um documento. A fun\u00e7\u00e3o $()<\/code> permite uma codifica\u00e7\u00e3o JavaScript mais curta e eficiente.<\/p>\nM\u00e9todo tradicional:<\/p>\n
document.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFun\u00e7\u00e3o vs M\u00e9todo<\/h3>\n
As fun\u00e7\u00f5es realizam tarefas; os m\u00e9todos s\u00e3o propriedades dos objetos que cont\u00eam defini\u00e7\u00e3o funcional. A sintaxe dos m\u00e9todos de chamada \u00e9 object.function()<\/code>. As fun\u00e7\u00f5es s\u00e3o autocontidas; os m\u00e9todos s\u00e3o associados a objetos.<\/p>\nNo exemplo acima, o m\u00e9todo document.getElementByID(\"element_id\")<\/code> refere-se a um objeto (document<\/code>) e propriedade associada para aquele objeto (getElementbyID()<\/code>).<\/p>\nH\u00e1 dois tipos de m\u00e9todos em JavaScript:<\/p>\n
\n- M\u00e9todos de inst\u00e2ncia<\/li>\n
- M\u00e9todos est\u00e1ticos<\/li>\n<\/ul>\n
Os m\u00e9todos de inst\u00e2ncia podem acessar e manipular as propriedades de uma inst\u00e2ncia de objeto. Os m\u00e9todos de inst\u00e2ncia tamb\u00e9m podem chamar outro m\u00e9todo de inst\u00e2ncia ou m\u00e9todo est\u00e1tico.<\/p>\n
Os m\u00e9todos est\u00e1ticos cont\u00eam l\u00f3gica relacionada a uma classe, ao inv\u00e9s de uma inst\u00e2ncia da classe. Para criar um m\u00e9todo est\u00e1tico, voc\u00ea deve usar a palavra est\u00e1tica antes da defini\u00e7\u00e3o da fun\u00e7\u00e3o. Os m\u00e9todos est\u00e1ticos s\u00f3 podem acessar campos est\u00e1ticos; eles n\u00e3o podem acessar campos de inst\u00e2ncia.<\/p>\n
Promessas no JavaScript<\/h2>\n
Uma promessa \u00e9 um objeto que produz um resultado em um momento futuro<\/a>. Na terminologia JavaScript, as promessas s\u00e3o conhecidas como produzir e consumir c\u00f3digo.<\/p>\nAs fun\u00e7\u00f5es podem demorar um tempo n\u00e3o especificado e significativo<\/a> para serem conclu\u00eddas. O c\u00f3digo de consumo aguarda os resultados do c\u00f3digo de produ\u00e7\u00e3o ass\u00edncrona antes de executar suas fun\u00e7\u00f5es. As promessas definem a rela\u00e7\u00e3o entre o c\u00f3digo de produ\u00e7\u00e3o e o c\u00f3digo de consumo.<\/p>\nAs promessas t\u00eam tr\u00eas estados poss\u00edveis: pendente, cumprido ou rejeitado. Na defini\u00e7\u00e3o de uma promessa, s\u00e3o especificados dois argumentos: resolver ou rejeitar. Pendente \u00e9 o estado inicial de uma promessa e significa que a promessa n\u00e3o foi cumprida nem rejeitada. Cumprida implica que a promessa retornou resolvida. Rejeitada significa que a promessa retornou. Uma promessa que n\u00e3o se encontra mais no estado pendente \u00e9 considerada cumprida.<\/p>\n
Um exemplo de sintaxe para criar uma promessa \u00e9:<\/p>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nEnclosures no JavaScript<\/h2>\n
Closures s\u00e3o uma caracter\u00edstica do JavaScript que confundem muitas vezes\u00a0os programadores<\/a>, embora n\u00e3o sejam t\u00e3o complicados. Closures no JavaScript s\u00e3o m\u00e9todos para tratar a opera\u00e7\u00e3o de fun\u00e7\u00f5es aninhadas. Especificamente, closures permitem que uma fun\u00e7\u00e3o interna acesse o conte\u00fado de uma fun\u00e7\u00e3o principal, al\u00e9m das vari\u00e1veis globais comumente acess\u00edveis. Note que, enquanto a fun\u00e7\u00e3o interna tem acesso \u00e0s vari\u00e1veis da fun\u00e7\u00e3o externa, o inverso n\u00e3o ocorre.<\/p>\nPara entender closures, \u00e9 essencial relembrar os fundamentos de escopo. Vari\u00e1veis dentro de uma fun\u00e7\u00e3o normalmente s\u00f3 s\u00e3o acess\u00edveis a partir dessa fun\u00e7\u00e3o espec\u00edfica, e o escopo \u00e9 criado por chamada, n\u00e3o de forma gen\u00e9rica para a fun\u00e7\u00e3o. Closures lidam com o fato de que vari\u00e1veis geralmente desaparecem ap\u00f3s a conclus\u00e3o de uma fun\u00e7\u00e3o. Eles tamb\u00e9m permitem que as vari\u00e1veis permane\u00e7am acess\u00edveis ap\u00f3s a execu\u00e7\u00e3o de uma fun\u00e7\u00e3o.<\/p>\n
Considere o seguinte c\u00f3digo de exemplo:<\/p>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nPara entender como funciona esse closure, vamos analisar o c\u00f3digo passo a passo. Primeiramente, voc\u00ea define a fun\u00e7\u00e3o externa e, em seguida, uma vari\u00e1vel associada a ela. Depois, define a fun\u00e7\u00e3o interna. \u00c9 crucial notar que voc\u00ea n\u00e3o invoca a fun\u00e7\u00e3o interna \u2014 apenas a define. Em seguida, h\u00e1 uma instru\u00e7\u00e3o que retorna a fun\u00e7\u00e3o interna. Mas o que ela retorna n\u00e3o \u00e9 o resultado da execu\u00e7\u00e3o da fun\u00e7\u00e3o interna; ao contr\u00e1rio, \u00e9 a pr\u00f3pria fun\u00e7\u00e3o interna.<\/p>\n
Portanto, quando voc\u00ea define um closure como outer_closure_function<\/code>, ele n\u00e3o retorna o valor real produzido pela fun\u00e7\u00e3o interna. Em vez disso, retorna uma refer\u00eancia \u00e0 inner_closure_function<\/code>. Mesmo que a fun\u00e7\u00e3o externa tenha sido conclu\u00edda ap\u00f3s essa declara\u00e7\u00e3o e a outer_variable<\/code> oficialmente n\u00e3o exista mais, ela ainda \u00e9 mantida na refer\u00eancia \u00e0 inner_closure_function<\/code>. Agora, quando voc\u00ea invoca o closure na \u00faltima declara\u00e7\u00e3o, o resultado desejado \u00e9 exibido.<\/p>\nPara realmente compreender os closures, \u00e9 recomend\u00e1vel que voc\u00ea mesmo escreva e teste alguns exemplos<\/a>. Demora um pouco para se familiarizar com eles. Ademais, praticar com atualiza\u00e7\u00f5es e testes repetidos ajudar\u00e1 a desenvolver uma mentalidade de desenvolvimento \u00e1gil.<\/p>\nEntretanto, \u00e0 medida que voc\u00ea avan\u00e7a, \u00e9 importante sempre considerar os problemas de seguran\u00e7a<\/a> \u2014 o JavaScript pode estar sujeito a s\u00e9rios problemas de seguran\u00e7a, como inje\u00e7\u00f5es SQL e LDAP<\/a>, ataques XSS, entre outros.<\/p>\nResumo<\/h2>\n
Se voc\u00ea deseja fazer mais com suas p\u00e1ginas web al\u00e9m do que servi\u00e7os prontos como Wix e Squarespace oferecem, considerar aprender JavaScript \u00e9 uma excelente escolha. Trata-se de uma introdu\u00e7\u00e3o simples e acess\u00edvel \u00e0 programa\u00e7\u00e3o de sites e aplicativos<\/a>, que pode permitir que voc\u00ea adicione funcionalidades altamente interativas ao seu site sem dedicar muito tempo ao processo de aprendizagem.<\/p>\n
O que \u00e9 JavaScript?<\/h2>\n
De maneira mais simples, o JavaScript \u00e9 uma linguagem de script popular<\/a> para adicionar funcionalidade interativa e outros conte\u00fados din\u00e2micos da web \u00e0s p\u00e1ginas web. Exemplos bem conhecidos de conte\u00fado JavaScript incluem formul\u00e1rios que podem ser preenchidos, apresenta\u00e7\u00f5es de slides de galeria de fotos e gr\u00e1ficos animados.<\/p>\n O JavaScript tamb\u00e9m \u00e9 relativamente intuitivo e direto de aprender. \u00c9 um excelente ponto de partida para aqueles que procuram aprender mais sobre o desenvolvimento de sites.<\/p>\n O JavaScript \u00e9 a camada final de funcionalidade em sites altamente interativos. O HTML<\/a> fornece a estrutura b\u00e1sica para a p\u00e1gina. CSS<\/a> \u00e9 o recurso para estilizar seu site – ele define o estilo do seu site. O JavaScript ent\u00e3o adiciona tempero.<\/p>\n Ao aprender JavaScript, \u00e9 essencial entender a rela\u00e7\u00e3o entre HTML, CSS e JavaScript, e como eles se unem na exibi\u00e7\u00e3o de um site.<\/p>\n O JavaScript tem diversos aplicativos<\/a> que qualquer pessoa que tenha visitado p\u00e1ginas web interativas ou aplicativos para dispositivos m\u00f3veis provavelmente j\u00e1 experimentou. Embora o desenvolvimento de sites – incluindo a adi\u00e7\u00e3o de elementos como formas interativas e anima\u00e7\u00f5es – seja o uso mais tradicional para o JavaScript, ele tamb\u00e9m encontra uso em:<\/p>\n Embora a maioria dos aplicativos JavaScript sejam do lado do cliente, o JavaScript tamb\u00e9m \u00e9 \u00fatil em aplicativos do lado do servidor, tais como a cria\u00e7\u00e3o de servidores web.<\/p>\n Primeiro, \u00e9 importante notar que Java e JavaScript n\u00e3o est\u00e3o relacionados, apesar de compartilhar o termo “Java”. Tanto o Java quanto o JavaScript s\u00e3o linguagens para o desenvolvimento de p\u00e1ginas web e aplicativos web. No entanto, eles t\u00eam diferen\u00e7as distintas, inclusive:<\/p>\n Embora o JavaScript seja amplamente aceito e utilizado para o desenvolvimento web, ele tem vulnerabilidades bem conhecidas. Um dos ataques cibern\u00e9ticos mais comuns introduzidos atrav\u00e9s das vulnerabilidades do JavaScript \u00e9 o ataque de cross-site scripting (XSS). Os criminosos cibern\u00e9ticos usam ataques XSS para obter acesso e roubar informa\u00e7\u00f5es de identidade.<\/p>\n Para minimizar as explora\u00e7\u00f5es, \u00e9 fundamental testar e revisar seu c\u00f3digo<\/a> durante o desenvolvimento. M\u00e9todos de teste como o teste de seguran\u00e7a est\u00e1tico e din\u00e2mico do aplicativo (SAST e DAST) ajudam a identificar vulnerabilidades em todos os pontos do ciclo de vida do desenvolvimento de software.<\/p>\n De acordo com os analistas de seguran\u00e7a do Cloud Defense<\/a>, SAST verifica seu c\u00f3digo para violar as regras de seguran\u00e7a e compara as vulnerabilidades encontradas entre as branches de origem e destino. Voc\u00ea ser\u00e1 notificado se as depend\u00eancias do seu projeto forem afetadas pelas novas vulnerabilidades reveladas.<\/p>\n O Vanilla JavaScript \u00e9 uma implementa\u00e7\u00e3o leve de linguagem JavaScript pura sem bibliotecas adicionais. Aqui, o termo “Vanilla” refere-se ao JavaScript n\u00e3o-personalizado.<\/p>\n Grandes empresas utilizam Vanilla JS<\/a>, incluindo Google, Microsoft, Apple, Amazon, entre outras. O Vanilla JavaScript \u00e9 uma excelente maneira de aprender os conceitos b\u00e1sicos da <\/a>programa\u00e7\u00e3o JavaScript<\/a> antes de adicionar recursos mais avan\u00e7ados oferecidos em bibliotecas.<\/p>\n Uma biblioteca JavaScript \u00e9 uma cole\u00e7\u00e3o de c\u00f3digo pr\u00e9-escrito que desempenha certas fun\u00e7\u00f5es. As bibliotecas permitem que at\u00e9 mesmo usu\u00e1rios novatos construam sites \u00fateis rapidamente. E elas poupam tanto aos usu\u00e1rios novatos quanto aos experientes um tempo significativo na constru\u00e7\u00e3o de sites e aplicativos.<\/p>\n Embora existam muitas bibliotecas JavaScript<\/a>, algumas das mais populares incluem jQuery, Anime.js, Animate on Scroll, e Leaflet.js.<\/p>\n Os frameworks de sites s\u00e3o construtores avan\u00e7ados de sites, normalmente com extensas bibliotecas de funcionalidades e conjuntos de testes pr\u00e9-constru\u00eddos. Voc\u00ea pode estar familiarizado com frameworks do lado do servidor, como Laravel<\/a>, Ruby on Rails ou Django. Mas h\u00e1 tamb\u00e9m v\u00e1rios frameworks populares baseados em JavaScript do lado do cliente, incluindo React.js, Vue.js, e Node.js<\/a>.<\/p>\n O DOM, ou Document Object Model, atua como uma interface entre uma linguagem de programa\u00e7\u00e3o como o JavaScript e um documento subjacente – especificamente, documentos HTML e XML.<\/p>\n DOM \u00e9 um padr\u00e3o W3C (World Wide Web Consortium)<\/a>, definido como “uma plataforma e interface neutra em termos de linguagem que permite aos programas e scripts acessar e atualizar dinamicamente o conte\u00fado, a estrutura e o estilo de um documento”. Os documentos consistem em uma cole\u00e7\u00e3o de elementos e propriedades individuais (texto<\/a>, bot\u00f5es, links, etc.).<\/p>\n Como em outras linguagens de programa\u00e7\u00e3o<\/a>, o JavaScript usa vari\u00e1veis para identificar os locais de armazenamento dos dados. As vari\u00e1veis podem ser globais (acess\u00edveis por qualquer fun\u00e7\u00e3o no c\u00f3digo) ou locais, tamb\u00e9m conhecidas como block-scoped (acess\u00edveis somente no bloco onde s\u00e3o declaradas).<\/p>\n As vari\u00e1veis podem conter tanto valores fixos (constantes conhecidas como literais) quanto valores alter\u00e1veis. O JavaScript tem uma sintaxe particular para declarar (criar) constantes e vari\u00e1veis, e atribuir valores a elas.<\/p>\n As constantes verdadeiras s\u00e3o criadas usando uma declara\u00e7\u00e3o Um exemplo de utiliza\u00e7\u00e3o de const para criar uma constante \u00e9:<\/p>\n Observe o uso de letras mai\u00fasculas para nomear a constante; esta \u00e9 uma conven\u00e7\u00e3o de nomenclatura comumente aceita, embora n\u00e3o seja necess\u00e1ria. Os nomes de vari\u00e1veis, incluindo nomes constantes, devem come\u00e7ar com uma letra (min\u00fascula ou mai\u00fascula), o caractere de sublinhado ( As constantes, ao contr\u00e1rio das vari\u00e1veis, devem receber um valor na cria\u00e7\u00e3o. A seguinte declara\u00e7\u00e3o retornar\u00e1 um erro:<\/p>\n As vari\u00e1veis s\u00e3o declaradas usando a palavra-chave<\/a> Note que as declara\u00e7\u00f5es em JavaScript devem terminar com um ponto-e-v\u00edrgula. Voc\u00ea pode criar coment\u00e1rios usando As vari\u00e1veis podem conter uma variedade de tipos de dados, incluindo n\u00fameros, cordas e objetos. A atribui\u00e7\u00e3o de vari\u00e1veis em JavaScript \u00e9 din\u00e2mica. Portanto, voc\u00ea pode atribuir uma vari\u00e1vel a um tipo de dado diferente no mesmo c\u00f3digo.<\/p>\n Agora que voc\u00ea entende a declara\u00e7\u00e3o de vari\u00e1veis em JavaScript<\/a>, podemos discutir como o JavaScript lida com a localiza\u00e7\u00e3o da declara\u00e7\u00e3o de vari\u00e1veis. A pr\u00e1tica comum de codifica\u00e7\u00e3o requer que voc\u00ea declare vari\u00e1veis antes ou ao mesmo tempo em que as define. Algumas linguagens de programa\u00e7\u00e3o realmente exigem isso.<\/p>\n O JavaScript, entretanto, permite que as vari\u00e1veis sejam declaradas ap\u00f3s serem definidas ou utilizadas. Usando um recurso chamado hoisting, o JavaScript move as declara\u00e7\u00f5es para a parte superior de um script ou fun\u00e7\u00e3o atual. Embora o hoisting possa simplificar a programa\u00e7\u00e3o, permitindo que um programador corrija uma falha na declara\u00e7\u00e3o sem ter que rolar de volta atrav\u00e9s do c\u00f3digo, declarar vari\u00e1veis ap\u00f3s o uso n\u00e3o \u00e9 consistente com as melhores pr\u00e1ticas de programa\u00e7\u00e3o<\/a>.<\/p>\n O Hoisting tamb\u00e9m pode causar problemas inesperados, principalmente porque o Hoisting s\u00f3 se aplica \u00e0 declara\u00e7\u00e3o. Se uma vari\u00e1vel for declarada e inicializada na mesma declara\u00e7\u00e3o, o Hoisting criar\u00e1 uma declara\u00e7\u00e3o no topo do bloco e atribuir\u00e1 \u00e0 vari\u00e1vel um valor indefinido. Assim, qualquer uso da vari\u00e1vel no bloco antes da declara\u00e7\u00e3o real assumir\u00e1 que a vari\u00e1vel \u00e9 indefinida em vez de ter o valor de inicializa\u00e7\u00e3o.<\/p>\n Vamos usar o exemplo acima para rever o comportamento de i\u00e7amento:<\/p>\n Embora o hoisting mova a declara\u00e7\u00e3o da vari\u00e1vel Em ambos os cen\u00e1rios, o valor final “Thank goodness it’s 2021” n\u00e3o faz parte da produ\u00e7\u00e3o.<\/p>\n Recomendamos que voc\u00ea utilize a melhor pr\u00e1tica de declarar vari\u00e1veis para evitar problemas potenciais e criar um c\u00f3digo mais limpo.<\/p>\n O JavaScript \u00e9 baseado no conceito de objetos<\/a>. Os objetos s\u00e3o cont\u00eaineres que podem conter propriedades, m\u00e9todos ou ambos.<\/p>\n Considere um exemplo simples. Voc\u00ea tem um objeto chamado “country”. Suas propriedades incluem seu nome, continente, cidade capital e popula\u00e7\u00e3o. Voc\u00ea pode criar este objeto de v\u00e1rias maneiras com JavaScript.<\/p>\n Primeiro, voc\u00ea pode usar a abordagem literal do objeto ou do inicializador do objeto:<\/p>\n Voc\u00ea tamb\u00e9m pode instanciar um objeto e depois atribuir suas propriedades:<\/p>\n Note que voc\u00ea se refere \u00e0s propriedades de um objeto usando a sintaxe Finalmente, voc\u00ea pode criar objetos usando fun\u00e7\u00f5es de construtor:<\/p>\n A cria\u00e7\u00e3o de uma inst\u00e2ncia do objeto seria ent\u00e3o feita por:<\/p>\n As propriedades dos objetos podem ser vari\u00e1veis ou fun\u00e7\u00f5es. Como discutido abaixo, quando uma propriedade de objeto \u00e9 uma fun\u00e7\u00e3o, ela \u00e9 chamada de m\u00e9todo.<\/p>\n Em poucas palavras, uma classe \u00e9 um modelo gen\u00e9rico de estrutura para um objeto. As classes utilizam o formul\u00e1rio do construtor para descrever objetos.<\/p>\n Assim como acontece com objetos, as classes podem ter m\u00e9todos.<\/p>\n Como em outras linguagens, o JavaScript tem v\u00e1rios tipos de operadores<\/a> para uso com vari\u00e1veis e fun\u00e7\u00f5es, a maioria dos quais ser\u00e3o imediatamente reconhec\u00edveis:<\/p>\n Alguns poucos operadores est\u00e3o menos familiarizados com programadores<\/a> novatos, tais como operadores de compara\u00e7\u00e3o id\u00eanticos e n\u00e3o id\u00eanticos.<\/p>\n Considere o seguinte exemplo:<\/p>\n A sa\u00edda para este trecho de c\u00f3digo seria:<\/p>\n Tamb\u00e9m \u00e9 essencial entender a diferen\u00e7a entre Enquanto O JavaScript suporta as opera\u00e7\u00f5es AND ( Exemplo:<\/p>\n Converter operandos em bin\u00e1rios:<\/p>\n Uma opera\u00e7\u00e3o OR retorna verdadeiro (1) quando um dos bits \u00e9 1, ent\u00e3o o valor de compara\u00e7\u00e3o exibido \u00e9 110110 ou 53. Em JavaScript, o termo operador l\u00f3gico se refere a opera\u00e7\u00f5es cujos operandos t\u00eam apenas os valores booleanos 0 ou 1. Os operadores l\u00f3gicos JavaScript s\u00e3o Pense nas fun\u00e7\u00f5es como os cavalos de trabalho em JavaScript. Eles s\u00e3o blocos de c\u00f3digo que executam tarefas espec\u00edficas. Se voc\u00ea estiver familiarizado com procedimentos e sub-rotinas em outras linguagens de programa\u00e7\u00e3o, voc\u00ea reconhecer\u00e1 fun\u00e7\u00f5es imediatamente.<\/p>\n As fun\u00e7\u00f5es s\u00e3o definidas usando a seguinte sintaxe:<\/p>\n A defini\u00e7\u00e3o de fun\u00e7\u00f5es \u00e9 apenas o primeiro passo; voc\u00ea deve posteriormente invocar fun\u00e7\u00f5es usando A fun\u00e7\u00e3o M\u00e9todo tradicional:<\/p>\n As fun\u00e7\u00f5es realizam tarefas; os m\u00e9todos s\u00e3o propriedades dos objetos que cont\u00eam defini\u00e7\u00e3o funcional. A sintaxe dos m\u00e9todos de chamada \u00e9 No exemplo acima, o m\u00e9todo H\u00e1 dois tipos de m\u00e9todos em JavaScript:<\/p>\n Os m\u00e9todos de inst\u00e2ncia podem acessar e manipular as propriedades de uma inst\u00e2ncia de objeto. Os m\u00e9todos de inst\u00e2ncia tamb\u00e9m podem chamar outro m\u00e9todo de inst\u00e2ncia ou m\u00e9todo est\u00e1tico.<\/p>\n Os m\u00e9todos est\u00e1ticos cont\u00eam l\u00f3gica relacionada a uma classe, ao inv\u00e9s de uma inst\u00e2ncia da classe. Para criar um m\u00e9todo est\u00e1tico, voc\u00ea deve usar a palavra est\u00e1tica antes da defini\u00e7\u00e3o da fun\u00e7\u00e3o. Os m\u00e9todos est\u00e1ticos s\u00f3 podem acessar campos est\u00e1ticos; eles n\u00e3o podem acessar campos de inst\u00e2ncia.<\/p>\n Uma promessa \u00e9 um objeto que produz um resultado em um momento futuro<\/a>. Na terminologia JavaScript, as promessas s\u00e3o conhecidas como produzir e consumir c\u00f3digo.<\/p>\n As fun\u00e7\u00f5es podem demorar um tempo n\u00e3o especificado e significativo<\/a> para serem conclu\u00eddas. O c\u00f3digo de consumo aguarda os resultados do c\u00f3digo de produ\u00e7\u00e3o ass\u00edncrona antes de executar suas fun\u00e7\u00f5es. As promessas definem a rela\u00e7\u00e3o entre o c\u00f3digo de produ\u00e7\u00e3o e o c\u00f3digo de consumo.<\/p>\n As promessas t\u00eam tr\u00eas estados poss\u00edveis: pendente, cumprido ou rejeitado. Na defini\u00e7\u00e3o de uma promessa, s\u00e3o especificados dois argumentos: resolver ou rejeitar. Pendente \u00e9 o estado inicial de uma promessa e significa que a promessa n\u00e3o foi cumprida nem rejeitada. Cumprida implica que a promessa retornou resolvida. Rejeitada significa que a promessa retornou. Uma promessa que n\u00e3o se encontra mais no estado pendente \u00e9 considerada cumprida.<\/p>\n Um exemplo de sintaxe para criar uma promessa \u00e9:<\/p>\n Closures s\u00e3o uma caracter\u00edstica do JavaScript que confundem muitas vezes\u00a0os programadores<\/a>, embora n\u00e3o sejam t\u00e3o complicados. Closures no JavaScript s\u00e3o m\u00e9todos para tratar a opera\u00e7\u00e3o de fun\u00e7\u00f5es aninhadas. Especificamente, closures permitem que uma fun\u00e7\u00e3o interna acesse o conte\u00fado de uma fun\u00e7\u00e3o principal, al\u00e9m das vari\u00e1veis globais comumente acess\u00edveis. Note que, enquanto a fun\u00e7\u00e3o interna tem acesso \u00e0s vari\u00e1veis da fun\u00e7\u00e3o externa, o inverso n\u00e3o ocorre.<\/p>\n Para entender closures, \u00e9 essencial relembrar os fundamentos de escopo. Vari\u00e1veis dentro de uma fun\u00e7\u00e3o normalmente s\u00f3 s\u00e3o acess\u00edveis a partir dessa fun\u00e7\u00e3o espec\u00edfica, e o escopo \u00e9 criado por chamada, n\u00e3o de forma gen\u00e9rica para a fun\u00e7\u00e3o. Closures lidam com o fato de que vari\u00e1veis geralmente desaparecem ap\u00f3s a conclus\u00e3o de uma fun\u00e7\u00e3o. Eles tamb\u00e9m permitem que as vari\u00e1veis permane\u00e7am acess\u00edveis ap\u00f3s a execu\u00e7\u00e3o de uma fun\u00e7\u00e3o.<\/p>\n Considere o seguinte c\u00f3digo de exemplo:<\/p>\n Para entender como funciona esse closure, vamos analisar o c\u00f3digo passo a passo. Primeiramente, voc\u00ea define a fun\u00e7\u00e3o externa e, em seguida, uma vari\u00e1vel associada a ela. Depois, define a fun\u00e7\u00e3o interna. \u00c9 crucial notar que voc\u00ea n\u00e3o invoca a fun\u00e7\u00e3o interna \u2014 apenas a define. Em seguida, h\u00e1 uma instru\u00e7\u00e3o que retorna a fun\u00e7\u00e3o interna. Mas o que ela retorna n\u00e3o \u00e9 o resultado da execu\u00e7\u00e3o da fun\u00e7\u00e3o interna; ao contr\u00e1rio, \u00e9 a pr\u00f3pria fun\u00e7\u00e3o interna.<\/p>\n Portanto, quando voc\u00ea define um closure como Para realmente compreender os closures, \u00e9 recomend\u00e1vel que voc\u00ea mesmo escreva e teste alguns exemplos<\/a>. Demora um pouco para se familiarizar com eles. Ademais, praticar com atualiza\u00e7\u00f5es e testes repetidos ajudar\u00e1 a desenvolver uma mentalidade de desenvolvimento \u00e1gil.<\/p>\n Entretanto, \u00e0 medida que voc\u00ea avan\u00e7a, \u00e9 importante sempre considerar os problemas de seguran\u00e7a<\/a> \u2014 o JavaScript pode estar sujeito a s\u00e9rios problemas de seguran\u00e7a, como inje\u00e7\u00f5es SQL e LDAP<\/a>, ataques XSS, entre outros.<\/p>\n Se voc\u00ea deseja fazer mais com suas p\u00e1ginas web al\u00e9m do que servi\u00e7os prontos como Wix e Squarespace oferecem, considerar aprender JavaScript \u00e9 uma excelente escolha. Trata-se de uma introdu\u00e7\u00e3o simples e acess\u00edvel \u00e0 programa\u00e7\u00e3o de sites e aplicativos<\/a>, que pode permitir que voc\u00ea adicione funcionalidades altamente interativas ao seu site sem dedicar muito tempo ao processo de aprendizagem.<\/p>\nPara que \u00e9 usado o JavaScript<\/h2>\n
\n
<\/a>Diferen\u00e7as entre Java e JavaScript<\/h2>\n
\n
O JavaScript \u00e9 seguro?<\/h2>\n
Vanilla JavaScript<\/h2>\n
Bibliotecas JavaScript<\/h2>\n
Como o JavaScript se relaciona com frameworks do site<\/h2>\n
<\/a>O JavaScript DOM<\/h2>\n
Componentes b\u00e1sicos do JavaScript<\/h2>\n
Declarando uma Constante<\/h3>\n
const<\/code><\/a>. Const<\/code> cria constantes somente leitura, imut\u00e1veis e em bloco (“bloco em bloco” significa que a constante n\u00e3o \u00e9 acess\u00edvel de fora do seu bloco declarado).<\/p>\nconst GOLDEN_RATIO = 1.618; \/\/ create a constant named GOLDEN_RATIO with value 1.618<\/code><\/pre>\n_<\/code>), ou o sinal de d\u00f3lar ($<\/code>). Eles s\u00e3o sens\u00edveis a mai\u00fasculas e min\u00fasculas, portanto, n\u00e3o se esque\u00e7a de como voc\u00ea nomeia suas vari\u00e1veis.<\/p>\nconst GOLDEN_RATIO;<\/code><\/pre>\nDeclara\u00e7\u00e3o de uma vari\u00e1vel<\/h3>\n
var<\/code>. Elas n\u00e3o precisam ter um valor atribu\u00eddo no momento da declara\u00e7\u00e3o, embora seja permitido fazer isso e com freq\u00fc\u00eancia. A palavra-chave var<\/code> tem escopo global em vez de escopo de bloco (a menos que esteja em uma fun\u00e7\u00e3o, ent\u00e3o ela tem escopo de fun\u00e7\u00e3o).<\/p>\nvar variable1; \/\/ declare a variable called variable1\n\nvar variable2 = \"2021\"; \/\/ declare a string variable called variable2 and initialize with value 2021\n\nvariable1 = \"Thank goodness it's\" \/\/ assign string value to previously declared variable variable1\n\nconsole.log(variable1 + \" \" + variable2); \/\/ display \"Thank goodness it's 2021\"<\/code><\/pre>\n\/\/<\/code> – O JavaScript ignora qualquer coisa entre \/\/<\/code> e o final da linha.<\/p>\nHoisting<\/h2>\n
var variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nconsole.log(variable_1 + \" \" + variable_2); \/\/\n\nvar variable_2 = \"2021\" \/\/ declare and initialize a string variable called variable2<\/code><\/pre>\nvariable_2<\/code> para o topo do bloco, ela n\u00e3o move o valor atribu\u00eddo. Esta l\u00f3gica funciona aproximadamente equivalente \u00e0 seguinte sintaxe:<\/p>\nvar variable_1 = \"Thank goodness it's\"; \/\/ declare and initialize a string variable called variable_1\n\nvar variable_2;\n\nconsole.log(variable1 + \" \" + variable2); \/\/\n\nvariable_2 = \"2021\" \/\/ assign string value to variable2<\/code><\/pre>\nObjetos<\/h2>\n
var country = {\n\n name:\"France\",\n\n continent:\"Europe\",\n\n capital:\"Paris\",\n\n population:62250000;\n\n}<\/code><\/pre>\nvar country = new Object();\n\ncountry.name = \"France\";\n\ncountry.continent = \"Europe\";\n\ncountry.capital = \"Paris\";\n\ncountry.population = 62250000;<\/code><\/pre>\nobject.property<\/code>.<\/p>\nfunction country(name, continent, capital, population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n}<\/code><\/pre>\nfrance = new country(\"France\",\"Europe\",\"Paris\",62250000)<\/code><\/pre>\nObjetos vs Classes<\/h3>\n
class country {\n\n Constructor (name,continent,capital,population) {\n\n country.name = name;\n\n country.continent = continent;\n\n country.capital = capital;\n\n country.population = population;\n\n }\n\n}<\/code><\/pre>\nTrabalhando com Constantes e Vari\u00e1veis<\/h2>\n
\n
=<\/code>, +=<\/code>, -=<\/code>, *=<\/code>, \/=<\/code>, %=<\/code>)<\/li>\n==<\/code>, ===<\/code>, !=<\/code>, !==<\/code>, ><\/code>, >=<\/code>, <<\/code>, <=<\/code>)<\/li>\n+<\/code>, -<\/code>, *<\/code>, \/<\/code>, %<\/code>, ++<\/code>, --<\/code>)<\/li>\n===<\/code> compara se dois operandos t\u00eam o mesmo valor e tipo (ou seja, s\u00e3o id\u00eanticos). !==<\/code> compara se dois operandos n\u00e3o s\u00e3o id\u00eanticos.<\/p>\nvar variable_1 = 5; \/\/ declare variable_1 and assign numeric value 5\n\nvar variable_2 = \"5\"; \/\/ declare variable_2 and assign string value \"5\"\n\nconsole.log(variable_1 === variable_2);\n\nconsole.log(variable_1 !== variable_2);<\/code><\/pre>\nFALSE\nTRUE<\/code><\/pre>\n=<\/code> (um operador de atribui\u00e7\u00e3o) e ==<\/code> (um operador de compara\u00e7\u00e3o).<\/p>\n=<\/code> define o valor de uma vari\u00e1vel, ==<\/code> verifica se dois operandos t\u00eam o mesmo valor, incluindo se uma vari\u00e1vel tem um determinado valor. N\u00e3o se deve usar o = operador em declara\u00e7\u00f5es condicionais (como declara\u00e7\u00f5es IF) para verificar a equival\u00eancia.<\/p>\nOperadores Bitwise e l\u00f3gico<\/h3>\n
&<\/code> ), OR (|<\/code>), NOT (~<\/code>), e XOR (^<\/code>). Em JavaScript, estes s\u00e3o conhecidos como operadores bitwise. As opera\u00e7\u00f5es bitwise convertem os operandos em representa\u00e7\u00f5es bin\u00e1rias de 32 bits antes de operar (i.e. 20 torna-se 10100). Estas opera\u00e7\u00f5es s\u00e3o chamadas bitwise porque comparam os operandos convertidos<\/a> bitwise, depois retornam um resultado bin\u00e1rio de 32 bits convertido em um n\u00famero inteiro.<\/p>\nvar variable_1 = 20;\n\nvar variable_2 = 50;\n\nconsole.log(variable_1 | variable_2) \/\/ display the result of variable_1 OR variable_2<\/code><\/pre>\n20 = 010100\n\n50 = 110010<\/code><\/pre>\n&&<\/code> (logical AND), ||<\/code> (logical OR), e !<\/code> (logical NOT).<\/p>\nvar variable_1;\n\nvar variable_2;\n\nvariable _1 = (6 > 5); \/\/ sets variable_1 to true or 1\n\nvariable_2 = (7 <= 6); \/\/ sets variable_2 to false or 0\n\nConsole.log(variable_1 && variable_2); \/\/ displays 0<\/code><\/pre>\nFun\u00e7\u00f5es e m\u00e9todos<\/h2>\n
function function_name(parameter list) {\n\n \/\/ tasks to be performed\n\n}<\/code><\/pre>\n()<\/code> no c\u00f3digo:<\/p>\n$()<\/h3>\n
$()<\/code> \u00e9 a abrevia\u00e7\u00e3o do m\u00e9todo getElementByID, que, como observado acima, retorna a identifica\u00e7\u00e3o de um elemento espec\u00edfico de um DOM HTML. Ele \u00e9 frequentemente usado para manipular elementos de um documento. A fun\u00e7\u00e3o $()<\/code> permite uma codifica\u00e7\u00e3o JavaScript mais curta e eficiente.<\/p>\ndocument.getElementByID(\"element_id\")\n\n$() method:\n\n$(\"element_id\")<\/code><\/pre>\nFun\u00e7\u00e3o vs M\u00e9todo<\/h3>\n
object.function()<\/code>. As fun\u00e7\u00f5es s\u00e3o autocontidas; os m\u00e9todos s\u00e3o associados a objetos.<\/p>\ndocument.getElementByID(\"element_id\")<\/code> refere-se a um objeto (document<\/code>) e propriedade associada para aquele objeto (getElementbyID()<\/code>).<\/p>\n\n
Promessas no JavaScript<\/h2>\n
var newPromise = new Promise(\n\n function(resolve, reject) {\n\n \/\/ condition to be tested\n\n }\n\n)<\/code><\/pre>\nEnclosures no JavaScript<\/h2>\n
function outer_closure_function() {\n\n var outer_variable = \"we want to keep the outer variable\";\n\n var inner_closure_function = function() {\n\n inner_variable = \"use closures because\"\n\n console.log(inner_variable + \" \" + outer_variable);\n\n }\n\n return inner_closure_function;\n\n}\n\nvar closure = outer_closure_function(); \/\/ returns a reference to inner_closure_function\n\nclosure(); \/\/ displays \"use closures because we want to keep the outer variable\"<\/code><\/pre>\nouter_closure_function<\/code>, ele n\u00e3o retorna o valor real produzido pela fun\u00e7\u00e3o interna. Em vez disso, retorna uma refer\u00eancia \u00e0 inner_closure_function<\/code>. Mesmo que a fun\u00e7\u00e3o externa tenha sido conclu\u00edda ap\u00f3s essa declara\u00e7\u00e3o e a outer_variable<\/code> oficialmente n\u00e3o exista mais, ela ainda \u00e9 mantida na refer\u00eancia \u00e0 inner_closure_function<\/code>. Agora, quando voc\u00ea invoca o closure na \u00faltima declara\u00e7\u00e3o, o resultado desejado \u00e9 exibido.<\/p>\nResumo<\/h2>\n