Quem não experimentou um pedido de atualização do Java ao tentar acessar certos sites?

Embora muitas pessoas estejam familiarizadas com Java a partir de recursos de sites interativos, os usuários podem estar menos familiarizados com JavaScript – ou, de fato, podem erroneamente considerar os dois como sendo os mesmos.

Neste artigo, discutimos o que é o JavaScript e as diferenças entre Java e JavaScript. Em seguida, apresentaremos uma visão geral de algumas das funcionalidades mais significativas do JavaScript.

Vamos começar!

Confira nosso guia em vídeo para JavaScript

O que é JavaScript?

De maneira mais simples, o JavaScript é uma linguagem de script popular para adicionar funcionalidade interativa e outros conteúdos dinâmicos da web às páginas web. Exemplos bem conhecidos de conteúdo JavaScript incluem formulários que podem ser preenchidos, apresentações de slides de galeria de fotos e gráficos animados.

O JavaScript também é relativamente intuitivo e direto de aprender. É um excelente ponto de partida para aqueles que procuram aprender mais sobre o desenvolvimento de sites.

O JavaScript é a camada final de funcionalidade em sites altamente interativos. O HTML fornece a estrutura básica para a página. CSS é o recurso para estilizar seu site – ele define o estilo do seu site. O JavaScript então adiciona tempero.

Ao aprender JavaScript, é essencial entender a relação entre HTML, CSS e JavaScript, e como eles se unem na exibição de um site.

Para que é usado o JavaScript

O JavaScript tem diversos aplicativos que qualquer pessoa que tenha visitado páginas web interativas ou aplicativos para dispositivos móveis provavelmente já experimentou. Embora o desenvolvimento de sites – incluindo a adição de elementos como formas interativas e animações – seja o uso mais tradicional para o JavaScript, ele também encontra uso em:

  • Jogos baseados em navegador da web – incluindo jogos 2D e 3D
  • Desenvolvimento de aplicativos para dispositivos móveis – benéfico porque é independente da plataforma telefônica.
  • Apresentações – a criação de plataformas de slides animados baseados na web

Embora a maioria dos aplicativos JavaScript sejam do lado do cliente, o JavaScript também é útil em aplicativos do lado do servidor, tais como a criação de servidores web.

O Jogo dos Dinossauros, um exemplo de um jogo de navegador web integrado criado usando JavaScript
O Jogo dos Dinossauros, um exemplo de um jogo de navegador web integrado criado usando JavaScript.

Diferenças entre Java e JavaScript

Primeiro, é importante notar que Java e JavaScript não estão relacionados, apesar de compartilhar o termo “Java”. Tanto o Java quanto o JavaScript são linguagens para o desenvolvimento de páginas web e aplicativos web. No entanto, eles têm diferenças distintas, inclusive:

  • Programação orientada a objetos: Java é uma linguagem de programação orientada a objetos. JavaScript é uma linguagem de script baseada em objetos.
  • Sintaxe: A sintaxe do JavaScript não é tão formal ou estruturada como Java. Portanto, é mais simples para a maioria dos usuários.
  • Compilação: Java é uma linguagem compilada, enquanto o JavaScript é uma linguagem interpretada linha por linha em tempo de execução; as linguagens compiladas tendem a ser mais rápidas, mas as linguagens interpretadas tendem a ser mais flexíveis.
  • Ambiente: Você pode usar aplicativos Java em qualquer ambiente rodando em máquinas virtuais ou navegadores; o JavaScript é somente para navegadores.
  • Uso de memória: Java é mais intensivo em memória do que JavaScript; isso torna o JavaScript preferível para páginas da web e aplicativos web.

O JavaScript é seguro?

Embora o JavaScript seja amplamente aceito e utilizado para o desenvolvimento web, ele tem vulnerabilidades bem conhecidas. Um dos ataques cibernéticos mais comuns introduzidos através das vulnerabilidades do JavaScript é o ataque de cross-site scripting (XSS). Os criminosos cibernéticos usam ataques XSS para obter acesso e roubar informações de identidade.

Para minimizar as explorações, é fundamental testar e revisar seu código durante o desenvolvimento. Métodos de teste como o teste de segurança estático e dinâmico do aplicativo (SAST e DAST) ajudam a identificar vulnerabilidades em todos os pontos do ciclo de vida do desenvolvimento de software.

De acordo com os analistas de segurança do Cloud Defense, SAST verifica seu código para violar as regras de segurança e compara as vulnerabilidades encontradas entre as branches de origem e destino. Você será notificado se as dependências do seu projeto forem afetadas pelas novas vulnerabilidades reveladas.

Vanilla JavaScript

O Vanilla JavaScript é uma implementação leve de linguagem JavaScript pura sem bibliotecas adicionais. Aqui, o termo “Vanilla” refere-se ao JavaScript não-personalizado.

Grandes empresas utilizam Vanilla JS, incluindo Google, Microsoft, Apple, Amazon, entre outras. O Vanilla JavaScript é uma excelente maneira de aprender os conceitos básicos da programação JavaScript antes de adicionar recursos mais avançados oferecidos em bibliotecas.

Bibliotecas JavaScript

Uma biblioteca JavaScript é uma coleção de código pré-escrito que desempenha certas funções. As bibliotecas permitem que até mesmo usuários novatos construam sites úteis rapidamente. E elas poupam tanto aos usuários novatos quanto aos experientes um tempo significativo na construção de sites e aplicativos.

Embora existam muitas bibliotecas JavaScript, algumas das mais populares incluem jQuery, Anime.js, Animate on Scroll, e Leaflet.js.

Como o JavaScript se relaciona com frameworks do site

Os frameworks de sites são construtores avançados de sites, normalmente com extensas bibliotecas de funcionalidades e conjuntos de testes pré-construídos. Você pode estar familiarizado com frameworks do lado do servidor, como Laravel, Ruby on Rails ou Django. Mas há também vários frameworks populares baseados em JavaScript do lado do cliente, incluindo React.js, Vue.js, e Node.js.

Biblioteca de reações (Fonte de imagem: Betica)
Biblioteca do React (Fonte de imagem: Betica)

O JavaScript DOM

O DOM, ou Document Object Model, atua como uma interface entre uma linguagem de programação como o JavaScript e um documento subjacente – especificamente, documentos HTML e XML.

DOM é um padrão W3C (World Wide Web Consortium), definido como “uma plataforma e interface neutra em termos de linguagem que permite aos programas e scripts acessar e atualizar dinamicamente o conteúdo, a estrutura e o estilo de um documento”. Os documentos consistem em uma coleção de elementos e propriedades individuais (texto, botões, links, etc.).

Componentes básicos do JavaScript

Como em outras linguagens de programação, o JavaScript usa variáveis para identificar os locais de armazenamento dos dados. As variáveis podem ser globais (acessíveis por qualquer função no código) ou locais, também conhecidas como block-scoped (acessíveis somente no bloco onde são declaradas).

As variáveis podem conter tanto valores fixos (constantes conhecidas como literais) quanto valores alteráveis. O JavaScript tem uma sintaxe particular para declarar (criar) constantes e variáveis, e atribuir valores a elas.

Declarando uma Constante

As constantes verdadeiras são criadas usando uma declaração const. Const cria constantes somente leitura, imutáveis e em bloco (“bloco em bloco” significa que a constante não é acessível de fora do seu bloco declarado).

Um exemplo de utilização de const para criar uma constante é:

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

Observe o uso de letras maiúsculas para nomear a constante; esta é uma convenção de nomenclatura comumente aceita, embora não seja necessária. Os nomes de variáveis, incluindo nomes constantes, devem começar com uma letra (minúscula ou maiúscula), o caractere de sublinhado (_), ou o sinal de dólar ($). Eles são sensíveis a maiúsculas e minúsculas, portanto, não se esqueça de como você nomeia suas variáveis.

As constantes, ao contrário das variáveis, devem receber um valor na criação. A seguinte declaração retornará um erro:

const GOLDEN_RATIO;

Declaração de uma variável

As variáveis são declaradas usando a palavra-chave var. Elas não precisam ter um valor atribuído no momento da declaração, embora seja permitido fazer isso e com freqüência. A palavra-chave var tem escopo global em vez de escopo de bloco (a menos que esteja em uma função, então ela tem escopo de função).

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

Note que as declarações em JavaScript devem terminar com um ponto-e-vírgula. Você pode criar comentários usando // – O JavaScript ignora qualquer coisa entre // e o final da linha.

As variáveis podem conter uma variedade de tipos de dados, incluindo números, cordas e objetos. A atribuição de variáveis em JavaScript é dinâmica. Portanto, você pode atribuir uma variável a um tipo de dado diferente no mesmo código.

Hoisting

Agora que você entende a declaração de variáveis em JavaScript, podemos discutir como o JavaScript lida com a localização da declaração de variáveis. A prática comum de codificação requer que você declare variáveis antes ou ao mesmo tempo em que as define. Algumas linguagens de programação realmente exigem isso.

O JavaScript, entretanto, permite que as variáveis sejam declaradas após serem definidas ou utilizadas. Usando um recurso chamado hoisting, o JavaScript move as declarações para a parte superior de um script ou função atual. Embora o hoisting possa simplificar a programação, permitindo que um programador corrija uma falha na declaração sem ter que rolar de volta através do código, declarar variáveis após o uso não é consistente com as melhores práticas de programação.

O Hoisting também pode causar problemas inesperados, principalmente porque o Hoisting só se aplica à declaração. Se uma variável for declarada e inicializada na mesma declaração, o Hoisting criará uma declaração no topo do bloco e atribuirá à variável um valor indefinido. Assim, qualquer uso da variável no bloco antes da declaração real assumirá que a variável é indefinida em vez de ter o valor de inicialização.

Vamos usar o exemplo acima para rever o comportamento de içamento:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

Embora o hoisting mova a declaração da variável variable_2 para o topo do bloco, ela não move o valor atribuído. Esta lógica funciona aproximadamente equivalente à seguinte sintaxe:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

Em ambos os cenários, o valor final “Thank goodness it’s 2021” não faz parte da produção.

Recomendamos que você utilize a melhor prática de declarar variáveis para evitar problemas potenciais e criar um código mais limpo.

Objetos

O JavaScript é baseado no conceito de objetos. Os objetos são contêineres que podem conter propriedades, métodos ou ambos.

Considere um exemplo simples. Você tem um objeto chamado “country”. Suas propriedades incluem seu nome, continente, cidade capital e população. Você pode criar este objeto de várias maneiras com JavaScript.

Primeiro, você pode usar a abordagem literal do objeto ou do inicializador do objeto:

var country = {

    name:"France",

    continent:"Europe",

    capital:"Paris",

    population:62250000;

}

Você também pode instanciar um objeto e depois atribuir suas propriedades:

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

Note que você se refere às propriedades de um objeto usando a sintaxe object.property.

Finalmente, você pode criar objetos usando funções de construtor:

function country(name, continent, capital, population) {

    country.name = name;

    country.continent = continent;

    country.capital = capital;

    country.population = population;

}

A criação de uma instância do objeto seria então feita por:

france = new country("France","Europe","Paris",62250000)

As propriedades dos objetos podem ser variáveis ou funções. Como discutido abaixo, quando uma propriedade de objeto é uma função, ela é chamada de método.

Objetos vs Classes

Em poucas palavras, uma classe é um modelo genérico de estrutura para um objeto. As classes utilizam o formulário do construtor para descrever objetos.

class country {

    Constructor (name,continent,capital,population) {

        country.name = name;

        country.continent = continent;

        country.capital = capital;

        country.population = population;

    }

}

Assim como acontece com objetos, as classes podem ter métodos.

Trabalhando com Constantes e Variáveis

Como em outras linguagens, o JavaScript tem vários tipos de operadores para uso com variáveis e funções, a maioria dos quais serão imediatamente reconhecíveis:

  • Operadores de atribuição (=, +=, -=, *=, /=, %=)
  • Operadores de comparação (==, ===, !=, !==, >, >=, <, <=)
  • Operadores Bitwise e Logical (ver abaixo)
  • Operadores aritméticos (+, -, *, /, %, ++, --)
  • Operadores especiais

Alguns poucos operadores estão menos familiarizados com programadores novatos, tais como operadores de comparação idênticos e não idênticos.

=== compara se dois operandos têm o mesmo valor e tipo (ou seja, são idênticos). !== compara se dois operandos não são idênticos.

Considere o seguinte exemplo:

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

A saída para este trecho de código seria:

FALSE
TRUE

Também é essencial entender a diferença entre = (um operador de atribuição) e == (um operador de comparação).

Enquanto = define o valor de uma variável, == verifica se dois operandos têm o mesmo valor, incluindo se uma variável tem um determinado valor. Não se deve usar o = operador em declarações condicionais (como declarações IF) para verificar a equivalência.

Operadores Bitwise e lógico

O JavaScript suporta as operações AND (& ), OR (|), NOT (~), e XOR (^). Em JavaScript, estes são conhecidos como operadores bitwise. As operações bitwise convertem os operandos em representações binárias de 32 bits antes de operar (i.e. 20 torna-se 10100). Estas operações são chamadas bitwise porque comparam os operandos convertidos bitwise, depois retornam um resultado binário de 32 bits convertido em um número inteiro.

Exemplo:

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

Converter operandos em binários:

20 = 010100

50 = 110010

Uma operação OR retorna verdadeiro (1) quando um dos bits é 1, então o valor de comparação exibido é 110110 ou 53. Em JavaScript, o termo operador lógico se refere a operações cujos operandos têm apenas os valores booleanos 0 ou 1. Os operadores lógicos JavaScript são && (logical AND), || (logical OR), e ! (logical NOT).

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

Funções e métodos

Pense nas funções como os cavalos de trabalho em JavaScript. Eles são blocos de código que executam tarefas específicas. Se você estiver familiarizado com procedimentos e sub-rotinas em outras linguagens de programação, você reconhecerá funções imediatamente.

As funções são definidas usando a seguinte sintaxe:

function function_name(parameter list) {

    // tasks to be performed

}

A definição de funções é apenas o primeiro passo; você deve posteriormente invocar funções usando () no código:

$()

A função $() é a abreviação do método getElementByID, que, como observado acima, retorna a identificação de um elemento específico de um DOM HTML. Ele é frequentemente usado para manipular elementos de um documento. A função $() permite uma codificação JavaScript mais curta e eficiente.

Método tradicional:

document.getElementByID("element_id")

$() method:

$("element_id")

Função vs Método

As funções realizam tarefas; os métodos são propriedades dos objetos que contêm definição funcional. A sintaxe dos métodos de chamada é object.function(). As funções são autocontidas; os métodos são associados a objetos.

No exemplo acima, o método document.getElementByID("element_id") refere-se a um objeto (document) e propriedade associada para aquele objeto (getElementbyID()).

Há dois tipos de métodos em JavaScript:

  • Métodos de instância
  • Métodos estáticos

Os métodos de instância podem acessar e manipular as propriedades de uma instância de objeto. Os métodos de instância também podem chamar outro método de instância ou método estático.

Os métodos estáticos contêm lógica relacionada a uma classe, ao invés de uma instância da classe. Para criar um método estático, você deve usar a palavra estática antes da definição da função. Os métodos estáticos só podem acessar campos estáticos; eles não podem acessar campos de instância.

Promessas no JavaScript

Uma promessa é um objeto que produz um resultado em um momento futuro. Na terminologia JavaScript, as promessas são conhecidas como produzir e consumir código.

As funções podem demorar um tempo não especificado e significativo para serem concluídas. O código de consumo aguarda os resultados do código de produção assíncrona antes de executar suas funções. As promessas definem a relação entre o código de produção e o código de consumo.

As promessas têm três estados possíveis: pendente, cumprido ou rejeitado. Na definição de uma promessa, são especificados dois argumentos: resolver ou rejeitar. Pendente é o estado inicial de uma promessa e significa que a promessa não foi cumprida nem rejeitada. Cumprida implica que a promessa retornou resolvida. Rejeitada significa que a promessa retornou. Uma promessa que não se encontra mais no estado pendente é considerada cumprida.

Um exemplo de sintaxe para criar uma promessa é:

var newPromise = new Promise(

    function(resolve, reject) {

        // condition to be tested

    }

)

Enclosures no JavaScript

Closures são uma característica do JavaScript que confundem muitas vezes os programadores, embora não sejam tão complicados. Closures no JavaScript são métodos para tratar a operação de funções aninhadas. Especificamente, closures permitem que uma função interna acesse o conteúdo de uma função principal, além das variáveis globais comumente acessíveis. Note que, enquanto a função interna tem acesso às variáveis da função externa, o inverso não ocorre.

Para entender closures, é essencial relembrar os fundamentos de escopo. Variáveis dentro de uma função normalmente só são acessíveis a partir dessa função específica, e o escopo é criado por chamada, não de forma genérica para a função. Closures lidam com o fato de que variáveis geralmente desaparecem após a conclusão de uma função. Eles também permitem que as variáveis permaneçam acessíveis após a execução de uma função.

Considere o seguinte código de exemplo:

function outer_closure_function() {

    var outer_variable = "we want to keep the outer variable";

    var inner_closure_function = function() {

        inner_variable = "use closures because"

        console.log(inner_variable + " " + outer_variable);

    }

    return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

Para entender como funciona esse closure, vamos analisar o código passo a passo. Primeiramente, você define a função externa e, em seguida, uma variável associada a ela. Depois, define a função interna. É crucial notar que você não invoca a função interna — apenas a define. Em seguida, há uma instrução que retorna a função interna. Mas o que ela retorna não é o resultado da execução da função interna; ao contrário, é a própria função interna.

Portanto, quando você define um closure como outer_closure_function, ele não retorna o valor real produzido pela função interna. Em vez disso, retorna uma referência à inner_closure_function. Mesmo que a função externa tenha sido concluída após essa declaração e a outer_variable oficialmente não exista mais, ela ainda é mantida na referência à inner_closure_function. Agora, quando você invoca o closure na última declaração, o resultado desejado é exibido.

Para realmente compreender os closures, é recomendável que você mesmo escreva e teste alguns exemplos. Demora um pouco para se familiarizar com eles. Ademais, praticar com atualizações e testes repetidos ajudará a desenvolver uma mentalidade de desenvolvimento ágil.

Entretanto, à medida que você avança, é importante sempre considerar os problemas de segurança — o JavaScript pode estar sujeito a sérios problemas de segurança, como injeções SQL e LDAP, ataques XSS, entre outros.

Resumo

Se você deseja fazer mais com suas páginas web além do que serviços prontos como Wix e Squarespace oferecem, considerar aprender JavaScript é uma excelente escolha. Trata-se de uma introdução simples e acessível à programação de sites e aplicativos, que pode permitir que você adicione funcionalidades altamente interativas ao seu site sem dedicar muito tempo ao processo de aprendizagem.

O JavaScript também representa uma ótima maneira de começar a desenvolver suas habilidades de programação, caso você decida avançar para níveis mais complexos no futuro.