Introdução ao AJAX: Fundamentos, Exemplos e Cuidados

O AJAX, sigla para Asynchronous JavaScript and XML, é uma tecnologia fundamental na criação de páginas web interativas e dinâmicas. Ele permite que as páginas da web se comuniquem com o servidor em segundo plano, sem a necessidade de recarregar a página inteira. Isso proporciona uma experiência mais fluida e responsiva aos usuários, uma vez que apenas partes específicas da página são atualizadas conforme necessário. Neste artigo, exploraremos os fundamentos do AJAX, forneceremos exemplos práticos e discutiremos os cuidados ao usá-lo.

Fundamentos do AJAX

O AJAX é baseado em três tecnologias fundamentais:

  1. JavaScript: O JavaScript é a linguagem de programação que permite adicionar interatividade e funcionalidade às páginas da web. No contexto do AJAX, o JavaScript é usado para iniciar solicitações assíncronas ao servidor e manipular os dados retornados.
  2. XMLHttpRequest: O objeto XMLHttpRequest é o pilar do AJAX. Ele permite que o JavaScript faça solicitações HTTP assíncronas ao servidor. Com esse objeto, você pode enviar dados para o servidor, receber respostas e atualizar partes da página com base nas respostas.
  3. XML ou JSON: Inicialmente, o AJAX foi projetado para trabalhar com dados em formato XML. No entanto, o uso de JSON se tornou mais comum devido à sua simplicidade e eficiência. XML e JSON são usados para estruturar os dados transmitidos entre o servidor e o cliente.

Exemplos de Uso do AJAX

Agora, vamos explorar dois exemplos simples de uso do AJAX:

Exemplo 1: Carregamento de Conteúdo Assíncrono

Imagine um site de notícias que deseja carregar artigos adicionais quando o usuário rolar até o final da página, sem recarregar a página inteira. O AJAX torna isso possível. Aqui está um exemplo básico:

// Função para carregar mais artigos
function carregarMaisArtigos() {
  fetch("servidor.php?pagina=2")
    .then(response => {
      if (!response.ok) {
        throw new Error("Erro ao carregar os artigos.");
      }
      return response.text();
    })
    .then(novoConteudo => {
      // Atualizar a página com o novo conteúdo
      document.getElementById("conteúdo").innerHTML += novoConteúdo;
    })
    .catch(error => {
      console.error(error);
    });
}

Neste exemplo, utilizamos a função fetch para fazer uma solicitação GET assíncrona ao servidor. Quando a resposta é recebida com sucesso, o conteúdo é atualizado na página. Qualquer erro durante o processo é tratado e exibido no console.

Exemplo 2: Autenticação de Usuário

// Função para autenticar o usuário
function autenticarUsuario() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  fetch("autenticacao.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: "username=" + username + "&password=" + password
  })
    .then(response => {
      if (response.ok) {
        // Usuário autenticado com sucesso
        alert("Autenticação bem-sucedida!");
      } else {
        // Falha na autenticação
        alert("Falha na autenticação. Verifique suas credenciais.");
      }
    })
    .catch(error => {
      console.error(error);
    });
}

Neste exemplo, utilizamos o fetch com um método POST para enviar os dados de autenticação para o servidor. Dependendo da resposta do servidor, uma mensagem de autenticação bem-sucedida ou uma mensagem de falha é exibida.

Lembre-se de que o código acima é apenas uma introdução ao uso do fetch para fazer solicitações AJAX. É importante continuar seguindo as melhores práticas, como tratamento de erros, segurança e considerações de desempenho, ao usar o fetch em projetos mais complexos.

Cuidados ao Usar o AJAX

Embora o AJAX seja uma ferramenta poderosa, é importante usá-lo com cuidado e considerar algumas práticas recomendadas:

  1. Progressive Enhancement: Certifique-se de que seu site ou aplicativo funcione mesmo quando o JavaScript estiver desativado. Use o AJAX para melhorar a experiência, não para torná-la essencial.
  2. Tratamento de Erros: Sempre trate erros adequadamente ao fazer solicitações AJAX. Isso inclui lidar com timeouts, respostas inesperadas e falhas de rede.
  3. Segurança: Proteja suas solicitações AJAX contra ataques de segurança, como Cross-Site Scripting (XSS) e Cross-Site Request Forgery (CSRF). Valide e sanitize os dados antes de enviá-los para o servidor.
  4. SEO: Lembre-se de que os mecanismos de busca podem ter dificuldade em indexar conteúdo carregado via AJAX. Certifique-se de que o conteúdo crítico seja acessível diretamente no HTML.
  5. Performance: Evite fazer muitas solicitações AJAX desnecessárias, pois isso pode afetar o desempenho do seu site. Agrupe solicitações sempre que possível e use o cache quando apropriado.

Em resumo, o AJAX é uma tecnologia essencial para criar páginas da web interativas e dinâmicas. Com a capacidade de enviar e receber dados do servidor de forma assíncrona, ele melhora significativamente a experiência do usuário. No entanto, é importante usá-lo com responsabilidade, seguindo as práticas recomendadas e considerando os aspectos de segurança e desempenho ao incorporá-lo em seus projetos web.

Gostaria de saber mais? De ujma olhada nas referencias e bons estudos

  1. Documentação Mozilla para Fetch:
  2. Livro online “You Don’t Know JS” (Capítulo sobre Fetch):
  3. Livro online “Eloquent JavaScript” (Capítulo sobre Fetch):
  4. W3Schools – Tutorial AJAX:
  5. SitePoint – A Guide to Fetch API:
  6. Artigo sobre Boas Práticas de AJAX:
  7. Artigo sobre Segurança em AJAX:

Esses recursos fornecem uma base sólida para entender e trabalhar com a API Fetch e o AJAX em JavaScript, bem como as melhores práticas associadas a essas tecnologias. Certifique-se de explorar esses materiais para aprofundar seus conhecimentos.

Como fazer um elemento ter o tamanho do elemento filho que tenha position : absolute?

Em projetos de desenvolvimento web, é comum precisarmos posicionar um elemento filho dentro de um container usando position: absolute. O problema é que, quando fazemos isso, o container perde a sua altura e largura, pois os elementos filhos posicionados absolutamente são retirados do fluxo do documento. Isso pode ser um problema quando queremos que o container tenha o tamanho do elemento filho.

Felizmente, há uma solução simples para este problema, que envolve o uso de JavaScript para definir o tamanho do container com base no tamanho do elemento filho. Neste artigo, vou mostrar como fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript.

Usando JavaScript para definir o tamanho do container

A maneira de fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript envolve calcular a largura e altura do elemento filho e definir essas dimensões para o container. Veja o código abaixo:

<div class="container" id="container">
  <div class="child">Elemento filho</div>
</div>

<script>
  const container = document.getElementById('container');
  const child = container.querySelector('.child');
  const width = child.offsetWidth;
  const height = child.offsetHeight;
  container.style.width = `${width}px`;
  container.style.height = `${height}px`;
</script>

<style>
  .container {
    position: relative;
  }
  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

Neste exemplo, a classe .container é definida como position: relative, o que significa que ela será posicionada em relação ao seu pai. A classe .child é definida como position: absolute, o que permite que o filho seja posicionado em relação ao container. As propriedades top: 0 e left: 0 garantem que o filho comece a ser posicionado a partir do canto superior esquerdo do container.

O JavaScript começa selecionando o container e o elemento filho usando document.getElementById e Element.querySelector. Em seguida, o código calcula a largura e altura do elemento filho usando offsetWidth e offsetHeight. Finalmente, as dimensões são definidas para o container usando style.width e style.height.

Conclusão

Neste artigo, vimos como fazer um container ter o tamanho do elemento filho quando este filho tem position: absolute usando JavaScript. Essa solução envolve calcular a largura e altura do elemento filho e definir essas dimensões para o container usando JavaScript. Embora seja um pouco mais complexa do que as soluções CSS, esta técnica é muito útil quando precisamos definir o tamanho do container dinamicamente com base no tamanho do elemento filho.

Como conectar na ViaCPE com JavaScript?

Este é um artigo rápido e prático que mostra que conectar-se ao ViaCEP usando JavaScript. O processo em si é simples, você pode fazer uma requisição HTTP GET para a API do ViaCEP com o CEP desejado e manipular a resposta retornada para obter os dados desejados.

Usando métodos encadeados

Você pode fazer isso usando a função fetch() do JavaScript ou outras bibliotecas de requisições HTTP como o Axios. Veja um exemplo usando a função fetch():

const cep = '01001000';
const url = `https://viacep.com.br/ws/${cep}/json/`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  })
  .catch(error => console.log(error));

Nesse exemplo, uma requisição HTTP GET é feita para a URL do ViaCEP com o CEP desejado inserido na URL. A resposta da API é convertida para o formato JSON usando o método json() e, em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de tratar os erros que podem ocorrer durante a requisição HTTP e de ajustar a forma como os dados serão manipulados de acordo com a sua necessidade.

Usando Async/await

O async/await é uma forma mais moderna e simplificada de trabalhar com Promises, que são utilizadas nas requisições HTTP. Com o async/await, o código fica mais legível e fácil de entender.

Veja um exemplo de como buscar os dados do ViaCEP utilizando async/await:

async function getCEPData(cep) {
  try {
    const url = `https://viacep.com.br/ws/${cep}/json/`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  } catch (error) {
    console.log(error);
  }
}

getCEPData('01001000');

Nesse exemplo, a função getCEPData é definida como assíncrona com a palavra-chave async. Dentro da função, é criada a URL da API do ViaCEP com o CEP desejado e, em seguida, é feita a requisição HTTP GET utilizando o fetch. O await é utilizado para aguardar a resposta da API e a conversão da resposta para JSON. Em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de utilizar a estrutura try/catch para tratar os erros que podem ocorrer durante a requisição HTTP.

Qual a diferença entre Herança de classes e herança Herança Prototípica no JavaScript?

A herança de classes e a herança prototípica são dois mecanismos diferentes para alcançar a reutilização de código e a hierarquia de objetos em linguagens de programação. Ambos têm suas particularidades e diferenças fundamentais, especialmente no contexto do JavaScript.

Herança de Classes

A herança de classes é um conceito comum em linguagens de programação orientadas a objetos, como Java, C++ e C#. Neste modelo, a reutilização de código e a hierarquia de objetos são baseadas em classes. Uma classe pode herdar propriedades e métodos de outra classe através do mecanismo de herança. A herança de classes segue um paradigma de “herança única”, onde uma classe só pode herdar diretamente de uma única classe pai.

A herança de classes normalmente envolve a criação de instâncias de classes específicas e o uso de construtores e destrutores para inicializar e limpar objetos.

Herança Prototípica no JavaScript

Temos um post completo sobre isso aqui: Entendo o Prototype do JavaScript

A herança prototípica é o mecanismo de herança utilizado no JavaScript. Em vez de usar classes, a herança prototípica é baseada em objetos. Cada objeto no JavaScript tem uma referência interna a outro objeto chamado “protótipo”. Quando uma propriedade ou método é acessado em um objeto, o JavaScript procura na cadeia de protótipos até encontrar a propriedade ou método desejado ou até chegar ao fim da cadeia.

A herança prototípica permite a reutilização de código e a hierarquia de objetos sem a necessidade de classes. Isso proporciona uma flexibilidade significativa, já que um objeto pode herdar diretamente de outro objeto e até mesmo modificar seu protótipo em tempo de execução.

Diferenças entre Herança de Classes e Herança Prototípica:

  1. Classes vs. Objetos: A herança de classes é baseada em classes, enquanto a herança prototípica é baseada em objetos. Essa diferença fundamental afeta a forma como a herança e a reutilização de código são alcançadas em cada paradigma.
  2. Herança Única vs. Herança Múltipla: A herança de classes geralmente suporta apenas herança única, enquanto a herança prototípica no JavaScript permite herança múltipla através de cadeias de protótipos.
  3. Construtores e Destrutores: A herança de classes geralmente depende de construtores e destrutores para inicializar e limpar objetos, enquanto a herança prototípica no JavaScript não exige tais métodos.
  4. Flexibilidade: A herança prototípica no JavaScript oferece maior flexibilidade, pois os objetos podem herdar diretamente de outros objetos e modificar seu protótipo em tempo de execução. Essa flexibilidade não está presente na herança de classes tradicional.

Em resumo, a herança de classes e a herança prototípica são dois mecanismos diferentes para alcançar a herança e a reutilização de código. No JavaScript, a herança prototípica é o mecanismo utilizado, proporcionando uma abordagem mais flexível e baseada em objetos para a herança.

Entendendo o Prototype do JavaScript

Uma das características mais poderosas do JavaScript é a sua capacidade de trabalhar com objetos, que são instâncias de classes ou protótipos. O sistema de protótipos do JavaScript permite que os desenvolvedores criem objetos de forma flexível e eficiente. Neste artigo, vamos explorar o conceito de prototype no JavaScript e entender como ele funciona.

O que é o Prototype / Protótipo?

O prototype é um mecanismo interno do JavaScript que permite aos objetos herdar propriedades e métodos de outros objetos. Essa herança é diferente da herança de classe tradicional encontrada em linguagens orientadas a objetos, como Java e C#. No JavaScript, a herança ocorre através da chamada “herança prototípica” e é baseada em objetos, em vez de classes.

Herança Prototípica

A herança prototípica é a base do sistema de objetos do JavaScript. Cada objeto em JavaScript tem uma referência interna a outro objeto, chamado de “protótipo”. Quando uma propriedade ou método é acessado em um objeto, o JavaScript primeiro verifica se essa propriedade ou método existe no próprio objeto. Se não for encontrado, o JavaScript procurará no protótipo do objeto. Esse processo continua até que a propriedade ou método seja encontrado ou até que a cadeia de protótipos termine.

Essa cadeia de protótipos é a principal característica que permite a herança no JavaScript. Quando um objeto herda de outro objeto, na verdade está herdeiro do protótipo desse objeto.

Funções Construtoras e o Prototype

No JavaScript, funções construtoras são usadas para criar objetos com propriedades e métodos específicos. Quando uma função é chamada com a palavra-chave “new”, um novo objeto é criado e sua referência de protótipo é atribuída ao protótipo da função construtora.

function Pessoa(nome, idade) {
    this.nome = nome;
    this.idade = idade;
}
const pessoa1 = new Pessoa("João", 30);

Neste exemplo, a função Pessoa é uma função construtora e cria objetos com as propriedades nome e idade. Quando criamos um objeto pessoa1 usando a palavra-chave “new”, o protótipo do objeto pessoa1 é configurado para ser o objeto Pessoa.prototype.

Adicionando Propriedades e Métodos ao Prototype

O prototype é um objeto comum e, como tal, você pode adicionar propriedades e métodos a ele. Isso é útil quando você deseja que todos os objetos criados por uma função construtora compartilhem propriedades e métodos sem precisar redefini-los em cada instância.

Pessoa.prototype.apresentar = function() {
    return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`;
};

console.log(pessoa1.apresentar()); // Olá, meu nome é João e tenho 30 anos.

Ao adicionar o método apresentar ao prototype da função construtora Pessoa, todos os objetos criados a partir dela terão acesso a esse método.

Qual a diferença entre herança de classes e herança herança Prototípica no JavaScript?

Bom, esse é um tópico que merece sua própria postagem. E você pode ver detalhes no post Qual a diferença entre Herança de classes e herança Herança Prototípica no JavaScript?

Mas resumidamente, a herança de classes é baseada em classes, enquanto a herança prototípica é baseada em objetos. Essa diferença fundamental afeta a forma como a herança e a reutilização de código são alcançadas em cada paradigma.

Conclusão

Isso ai, o sistema de protótipos do JavaScript é uma característica poderosa e flexível que permite a herança e o compartilhamento. Espero que tenha gostado e aproveita para conferir nossas outras postagens

Trabalhando com a API do DOM

O DOM, ou Document Object Model, é uma interface de programação de aplicativos (API) que permite aos desenvolvedores manipular o conteúdo HTML e CSS de uma página da web.

O DOM é organizado em uma árvore de nós (Nodes), onde cada nó representa um elemento HTML na página. Os desenvolvedores podem usar JavaScript para acessar e manipular esses nós, adicionando, removendo e modificando elementos HTML em tempo real.

Neste tutorial, vamos explorar os conceitos básicos do DOM e como usá-lo para manipular o HTML de uma página da web.

Obtendo elementos do DOM

Antes de podermos manipular o HTML de uma página, precisamos primeiro obter os elementos HTML desejados usando o DOM.

Existem vários métodos para obter elementos do DOM, mas dois dos mais comuns são document.getElementById() e document.querySelector(). O document.getElementById() retorna um elemento HTML com base no valor do atributo id, enquanto o document.querySelector() retorna o primeiro elemento HTML que corresponde a um seletor CSS específico.

// Obtendo um elemento por ID
const myElement = document.getElementById('my-id');

// Obtendo o primeiro elemento que corresponde a um seletor CSS
const myOtherElement = document.querySelector('.my-class');

Manipulando conteúdo do DOM

Uma vez que temos referências aos elementos HTML que queremos manipular, podemos atualizar seu conteúdo usando o DOM.

Para atualizar o conteúdo de um elemento HTML, podemos usar as propriedades textContent ou innerHTML. A propriedade textContent define o texto dentro de um elemento, enquanto a propriedade innerHTML define o HTML dentro de um elemento.

// Atualizando o texto de um elemento
myElement.textContent = 'Novo texto aqui';

// Atualizando o HTML de um elemento
myOtherElement.innerHTML = '<p>Novo HTML aqui</p>';

Adicionando e removendo elementos do DOM

Podemos adicionar e remover elementos HTML do DOM usando o JavaScript. Para adicionar um novo elemento HTML, podemos criar um novo nó usando o método document.createElement() e anexá-lo a um elemento existente usando o método appendChild().

Para remover um elemento HTML, podemos usar o método removeChild().

// Criando um novo elemento HTML
const newElement = document.createElement('div');

// Definindo o conteúdo do novo elemento
newElement.textContent = 'Novo elemento aqui';

// Anexando o novo elemento a um elemento existente
myElement.appendChild(newElement);

// Removendo um elemento
myOtherElement.removeChild(myOtherElement.firstChild);

Manipulando atributos do DOM

Os elementos HTML também possuem atributos que podemos acessar e manipular usando o DOM. Podemos obter e definir valores de atributos usando as propriedades getAttribute() e setAttribute().

// Obtendo o valor de um atributo
const myAttribute = myElement.getAttribute('data-my-attribute');

// Definindo o valor de um atributo
myOtherElement.setAttribute('data-my-other-attribute', 'meu valor');

Conclusão

O DOM é uma ferramenta poderosa que os desenvolvedores podem usar para manipular o conteúdo HTML e CSS de uma página da web em tempo real. Com as habilidades básicas que aprendemos neste tutorial, você deve estar bem encaminhado para começar a criar páginas web dinâmicas e interativas.

Tratando erros em JavaScript

O JavaScript é uma linguagem amplamente utilizada em desenvolvimento web, com várias aplicações em front-end e back-end. Como em qualquer outra linguagem, é possível que ocorram erros durante a execução do código, o que pode afetar o desempenho do programa e, em alguns casos, impedir que ele funcione corretamente.

Felizmente, existem várias maneiras de lidar com erros em JavaScript, permitindo que os desenvolvedores criem códigos mais robustos e confiáveis. Nesta postagem, discutiremos as principais técnicas para tratar erros em JavaScript, juntamente com exemplos de código e as melhores práticas para aplicá-las.

Bloco Try-Catch

Uma maneira comum de lidar com erros em JavaScript é usando o bloco try-catch. O bloco try contém o código que pode gerar um erro, enquanto o bloco catch é usado para tratar o erro caso ele ocorra.

Aqui está um exemplo de como usar o bloco try-catch em JavaScript:

try {
    // código que pode gerar um erro
} 
catch (e) {
    // código que trata o erro
}

No exemplo acima, o bloco try contém o código que pode gerar um erro, enquanto o bloco catch é responsável por manipular o erro caso ele ocorra. A variável e contém informações sobre o erro, como o tipo de erro e uma mensagem de erro.

Eventos de erro

Outra maneira de lidar com erros em JavaScript é por meio de eventos. Alguns erros são gerados por eventos, como uma imagem que não foi carregada corretamente. Para lidar com esses tipos de erros, você pode usar eventos específicos do navegador, como onerror.

Veja um exemplo de como usar o evento onerror em JavaScript:

const img = document.createElement('img');
img.onerror = function() {
  // código que trata o erro
}
img.src = 'imagem_que_não_existe.png';

No exemplo acima, criamos um novo elemento img e definimos a propriedade onerror para uma função que será executada caso ocorra um erro ao carregar a imagem. Dentro dessa função, podemos inserir o código que irá lidar com o erro de acordo com as necessidades do nosso programa.

Validações

Além das técnicas acima, é importante lembrar que as validações são uma forma eficaz de prevenir erros em JavaScript. As validações podem ser usadas para verificar se o input do usuário é válido, se uma variável possui o tipo esperado, ou se um objeto possui todas as propriedades necessárias.

Veja um exemplo de validação em JavaScript:

function calculaQuadrado(x) {
  if (typeof x !== 'number') {
    throw new TypeError('O valor fornecido não é um número');
  }
  return x * x;
}

No exemplo acima, criamos uma função calculaQuadrado que recebe um parâmetro x. Antes de realizar o cálculo do quadrado, verificamos se o parâmetro é um número. Se não for, lançamos um erro de tipo usando o comando throw.

Quando evitar o tratamento de erros e usar validações

Embora seja importante tratar erros em JavaScript, existem situações em que pode ser adequado não tratar um erro. Isso pode ocorrer quando um erro é inofensivo ou irrelevante para o funcionamento do programa, ou quando o tratamento de erros pode ter um impacto significativo no desempenho.

Algumas situações em que pode ser aceitável não tratar um erro incluem:

  • Erros que ocorrem em ambientes controlados, como testes automatizados ou ambientes de desenvolvimento;
  • Erros que ocorrem em código que não é crítico para o funcionamento geral do programa;
  • Erros que ocorrem em eventos que você não tem controle, como a interrupção de uma conexão de rede.

Em vez de tratar um erro, outra abordagem pode ser usar validações para prevenir que ele ocorra em primeiro lugar. As validações podem ser usadas para verificar se o input do usuário é válido, se uma variável possui o tipo esperado ou se um objeto possui todas as propriedades necessárias. Dessa forma, é possível reduzir a probabilidade de erros ocorrerem, o que pode levar a um código mais eficiente e confiável.

Por exemplo, ao invés de tratar o erro de uma variável não ser um número dentro de uma função, podemos validar o input da função e garantir que somente números sejam passados como argumento:

function calculaQuadrado(x) {
  if (typeof x !== 'number') {
    throw new TypeError('O valor fornecido não é um número');
  }
  return x * x;
}

Conclusão

Lidar com erros em JavaScript é uma parte importante do processo de desenvolvimento, garantindo que o código seja eficiente e confiável. Neste artigo, discutimos as principais técnicas para tratar erros em JavaScript, incluindo o uso do bloco try-catch, eventos de erro e validações. Também vimos que, em algumas situações, pode ser aceitável não tratar um erro e, em vez disso, usar validações para prevenir que ele ocorra em primeiro lugar. Esperamos que essas informações ajudem você a criar códigos JavaScript mais robustos e confiáveis em seu próximo projeto.

Como usar Classes no JavaScript

Classes são uma das principais características da orientação a objetos no JavaScript e servem modelos para criar objetos (instâncias) que compartilham propriedades e métodos. É uma maneira de escrever o código de uma forma mais organizada e reutilizável.

Antes do ECMAScript 2015 (ES6), o JavaScript não tinha suporte nativo para classes. Em vez disso, os desenvolvedores usavam funções construtoras e herança por protótipo para imitar a funcionalidade de classes. Com a introdução do ES6, o JavaScript agora oferece suporte nativo para classes.

Estrutura Básica

A sintaxe básica de uma classe no JavaScript é a seguinte:

class NomeDaClasse {
  constructor(propriedade1, propriedade2) {
    this.propriedade1 = propriedade1;
    this.propriedade2 = propriedade2;
  }
  metodo1() {
    // código do método 1
  }
  metodo2() {
    // código do método 2
  }
}

A classe tem um construtor, que é uma função especial chamada quando um novo objeto é criado a partir da classe. O construtor pode ter parâmetros para inicializar as propriedades do objeto. Além disso, uma classe pode ter métodos, que são funções que fazem alguma coisa com o objeto.

Para criar uma nova instância de uma classe, você usa a palavra-chave “new”:

const minhaInstancia = new NomeDaClasse(valor1, valor2);

A partir daí, você pode acessar as propriedades e métodos da instância como:

minhaInstancia.propriedade1;
minhaInstancia.metodo1();

Como era antes do ES6

Precisamos lembrar que o JavaScript é uma linguagem prototipada, então a palavra “class” é um facilitador e por baixo dos panos faz algo parecido com o seguinte código:

function NomeDaClasse(propriedade1, propriedade2) {
  this.propriedade1 = propriedade1;
  this.propriedade2 = propriedade2;

  this.metodo1 = function() {
    // código do método 1
  };

  this.metodo2 = function() {
    // código do método 2
  };
}

var objeto = new NomeDaClasse('valor1', 'valor2');

Herança

Além disso, você pode estender uma classe existente para criar uma nova classe com suas próprias propriedades e métodos adicionais. Isso é chamado de herança e é feito usando a palavra-chave extends.

O código abaixocria uma nova classe NomeDaClasseFilha que herda as propriedades e métodos da classe:

class NomeDaClasseFilha extends NomeDaClasse {
  constructor(propriedade1, propriedade2, propriedade3) {
    super(propriedade1, propriedade2);
    this.propriedade3 = propriedade3;
  }
  metodo3() {
    // código do método 3
  }
}

Conclusão

Isso ai, esse é o fundamento de utilização de classes no JavaScript. Se você teve duvida ou gostaria de um tutoria mais a fundo, prenda uma mensagem com a sua duvida e veremos o que podemos faze para te ajudar.

Comparando o JavaScript com o WebAssembly

Neste breve post estarei comparando os benefícios de do JavaScript em relação ao Web Assembly e vice-versa. Esta é apenas uma introdução não técnica no tópico que tem a intenção de apontar as vantagens de cada tecnologia,

Performance

O WebAssembly é significativamente mais rápido que o JavaScript em termos de desempenho. Isso ocorre porque o código binário é compilado diretamente para a máquina e não precisa ser interpretado pelo navegador. Além disso, o WebAssembly tem acesso direto à memória do sistema, o que o torna mais eficiente em termos de uso de recursos.

Portabilidade

O JavaScript é uma linguagem portável e pode ser executada em qualquer navegador que suporte JavaScript. Já o WebAssembly, por outro lado, é uma tecnologia específica do navegador e, portanto, não pode ser executada fora do contexto do navegador.

Linguagens suportadas

O JavaScript é uma linguagem de programação completa e pode ser utilizada para escrever qualquer tipo de aplicação web. Já o WebAssembly, por outro lado, é projetado para ser usado como uma plataforma de execução para outras linguagens, como C, C++, Rust, entre outras.

Desenvolvimento

O JavaScript é uma linguagem de programação de alto nível e fácil de aprender, o que o torna uma ótima opção para iniciantes e desenvolvedores web. Já o WebAssembly é uma tecnologia mais avançada e que requer conhecimentos em programação de baixo nível e compilação de código.


Conclusão

Em resumo, o JavaScript e o WebAssembly são tecnologias complementares que possuem suas próprias vantagens e desvantagens. O JavaScript é uma linguagem versátil e amplamente utilizada, enquanto o WebAssembly é uma tecnologia de performance mais alta. Ambas têm seu lugar na web e a escolha entre uma ou outra dependerá das necessidades específicas de cada aplicação.

A API do Google V8 une o WebAssembly e a Web assíncrona

Os desenvolvedores do mecanismo V8 JavaScript/WebAssembly do Google introduziram a API JavaScript Promise Integration (JSPI), permitindo que aplicativos WebAssembly que assumem que o acesso à funcionalidade externa seja síncrono funcionem sem problemas em ambientes assíncronos. Isso foi feito pois hoje, API WebAssembly JavaScript Promise Integration suspende um aplicativo Wasm quando ele emite uma chamada de API síncrona e a retoma quando a operação de E/S assíncrona é concluída.

Importante!!!!!

Atualmente em estágio experimental, o JSPI ainda não deve ser usado em aplicativos de produção, disseram os desenvolvedores. Eventualmente, ele se tornará um padrão para implementação nos principais navegadores, disseram eles.

Quando aconteceu?

Apresentado em uma postagem de blog V8 em 19 de janeiro, o JSPI faz a ponte entre aplicativos WebAssembly síncronos e APIs da Web assíncronos. Isso é feito suspendendo o aplicativo quando ele emite uma chamada de API síncrona e retomando quando a operação de E/S assíncrona é concluída. E o JSPI faz isso com pouquíssimas alterações no próprio aplicativo.

Muitas APIs modernas na Web funcionam de forma assíncrona, dividindo a funcionalidade no início e na resolução de uma operação. JSPI intercepta o JavaScript Promise retornado de uma chamada de API assíncrona, suspendendo a lógica principal do aplicativo WebAssembly e retornando um Promise da exportação usada para entrar no aplicativo WebAssembly. Quando a API assíncrona é concluída, o aplicativo WebAssembly é retomado para que possa processar os resultados da chamada de API.

Trabalhar com Promises é difícil, particularmente com WebAssembly, porque a manipulação direta de Promises no WebAssembly não é possível, disseram os desenvolvedores. O JSPI permite que os desenvolvedores criem aplicativos WebAssembly usando APIs síncronas e ainda participem do ecossistema assíncrono da web.

O JSPI está sendo desenvolvido nas arquiteturas Intel e ARM64. Está disponível para Linux, Windows, macOS e ChromeOS. Os desenvolvedores podem testar o JSPI localmente acessando chrome://flags no Chrome, procurando por “Experimental WebAssembly JavaScript Promise Integration (JSPI)” e marcando a caixa. Recomenda-se o uso do canal Chrome Canary. JSPI ainda não pode ser habilitado para usuários finais.

O WebAssembly foi aclamado como um avanço no desempenho de aplicativos da web. O formato de instrução binária permite que muitas linguagens de programação diferentes, incluindo C/C++, C# e Rust, sejam usadas para programação na web.