Conheça o BigInt, a nova implementação do ECMAScript 2020

BigInt é um objeto nativo do JavaScript que fornece um modelo de representação de números inteiros maiores que , que é o maior número que o JavaScript consegue representar, com exatidão, utilizando o tipo primitivo Number.

Sintaxe:

A sintaxe do BigInt é:

BigInt(valor);

Onde:

  • valor: é o valor numérico do objeto que irá ser criado. Este pode ser uma string ou um número inteiro.

É importante salientar que o BigInt() não é usado com o operador new.

O BigInt é criado com a simples acrescentação de um “n” ao final de um inteiro literal – 10n – ou chamando a função BigInt();

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// 9007199254740991n

const hugeString = BigInt("9007199254740991");
// 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// 9007199254740991n

O BigInt difere-se do Number em alguns assuntos importantes. Por exemplo:

  • Ele não pode ser usado com métodos no objeto Math;
  • Ele não pode ser misturado em operações ou qualquer instância de Number. Eles devem ser manipulados com o mesmo tipo.
  • A precisão de BigInt pode ser perdida com a conversão de valores para Number.

Se você quiser realizar alguns testes, você pode:

  • Testando com typeof:
typeof 1n === 'bigint'; // true

typeof BigInt('1') === 'bigint'; // true
  • Se estiver envolvido em um Object, o BigInt será considerado como um tipo normal de “object”:
typeof Object(1n) === 'object'; // true

Você também pode realizar operações com BigInt ou com BigInt envolvido em objeto:

const antigoMaximoInt = BigInt(Number.MAX_SAFE_INTEGER);
// 9007199254740991

const maximoMaisUm = antigoMaximoInt + 1n;
// 9007199254740992n

const oFuturo= antigoMaximoInt + 2n;
// 9007199254740993n, isso funciona agora!

const multiplicando = antigoMaximoInt * 2n;
// 18014398509481982n

const subtraindo = multiplicando – 10n;
// 18014398509481972n

const modulo = multiplicando % 10n;
// 2n

const bigN = 2n ** 54n;
// 18014398509481984n

bigN * -1n
// –18014398509481984n

Observação:

O operador / também funciona. No entanto, se os números forem BigIntS e não BigDecimalS, a operação será arredondada para zero, o que não nos trará nenhum valor fracional.

const divisao = 4n / 2n;
// 2n

const arredondado = 5n / 2n;
// 2n, e não 2.5n

É importante salientar que o BigInt não é estritamente igual a um Number, mas eles podem ser comparados normalmente.

0n === 0;
// false

0n == 0;
// true

1n < 2;
// true

2n > 1;
// true

2 > 2;
// false

2n > 2;
// false

2n >= 2;
// true

O BigInt se comporta como um número quando é convertido em um booleano, e também pode ser usado com operadores lógicos , também dentro de uma estrutura condicional.

if (0n) {
    console.log("Olá, você está dentro do IF");
} else {
    console.log("Olá, você está dentro do ELSE");
}

0n || 12n;
// 12n

0n && 12n;
// 0n

Boolean(0n);
//  false

!0n;
// true

Propriedades:

BigInt.prototype;

Permite a adição de propriedades a um objeto BigInt. Todas as instâncias BigInt são herdadas do BigInt.prototype. O objeto de protótipo do construtor BigInt pode ser modificado para afetar todas as instâncias do BigInt.

Gostou deste artigo? Deixe seu comentário abaixo!

Array Methods: Conheça os métodos de vetores.

Neste artigo, irei mostrar alguns dos métodos para manipulação de vetores mais utilizados no JavaScript. Existem outros métodos que serão abordados em próximos artigos.

concat():

Une dois ou mais vetores e retorna uma cópia dos vetores unidos.

Sintaxe:
0045vetor1.concat(vetor2, vetor3, ..., vetorX);
Exemplo:
let meninas = ["Cecilia", "Luana"];
let meninos = ["Emilio", "Tobias", "Leonardo"];
let adulto = ["Roberta"];
let pessoas = meninas.concat(meninos, adulto); 
console.log(pessoas);

copyWithin():

Copia elementos do vetor dentro do vetor, para e de posições especificadas. Este método nunca adicionará mais itens ao vetor. Importante: este método sobrescreve o vetor original.

Sintaxe:
vetor.copyWithin(alvo, inicio, fim);
Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
fruits.copyWithin(2,0,2);
// ["Banana", "Orange", "Banana", "Orange", "Kiwi", "Papaya"]

entries():

Retorna um objeto Array Iterator com pares de chave/valor. Para cada item no vetor original, o novo objeto de iteração conterá um vetor com o índice como chave e o valor do item como valor.

Sintaxe:
vetor.entries();
Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let f = fruits.entries();
for (x of f) {
    console.log(x);
}
// [0, "Banana"]
// [1, "Orange"]
// [2, "Apple"]
// [3, "Mango"]

filter():

Cria um novo vetor com todos os elementos de um vetor que passam no teste.

Sintaxe:
vetor.filter( function(valorAtual, index, vet), thisValue);
Onde:
  • function(valorAtual, index, vet): é uma função que irá ser executada para cada elemento no vetor. Possui os argumentos: valorAtual, index e vet.
  • thisValue: um parâmetro opcional. É Um valor a ser passado para a função a ser usado como seu valor “this”. Se este parâmetro estiver vazio, o valor “undefined” será passado como seu valor “this”.
Exemplo:
let idades = [32, 33, 16, 40];
function verificaAdulto(idade) {
  return idade >= 18;
}
console.log(idades.filter(verificaAdulto));
// [32, 33, 40]

map():

O método map() cria um novo vetor com os resultados da chamada de uma função para cada elemento do vetor. Ele chama a função fornecida uma vezpara cada elemento em um vetor, em ordem.

Sintaxe:
vetor.map(function(function(valorAtual, index, vet), thisValue);
Onde:
  • function(valorAtual, index, vet): Uma função a ser executada para cada elemento na matriz. Argumentos de função: valorAtual, index, vet.
  • thisValue: um parâmetro opcional. É Um valor a ser passado para a função a ser usado como seu valor “this”. Se este parâmetro estiver vazio, o valor “undefined” será passado como seu valor “this”.
Exemplo:
let numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt));
// [2, 3, 4, 5]

sort():

O método sort() classifica os itens de um vetor. A ordem de classificação pode ser alfabética, numérica e crescente ou decrescente. Por padrão, o sort() classifica os valores por ordem alfabética e crescente. Isso funciona bem para sequencias de caracteres. No entanto, se os números forem classificados como sequencias de caracteres, “25” será maior que “100”, porque “2” será maior que “1”. Por esse motivo, o método sort() produzirá um resultado incorreto ao classificar números.

Sintaxe:
vetor.sort(funcaoComparacao);
Onde:
  • funcaoComparacao: Opcional, é uma função que define uma ordem de classificação alternativa. Esta função deverá retornar um valor negativo, zero, ou positivo, dependendo dos argumentos, como:

function (a, b) {return a-b}.

Quando comparamos 40 e 100, o método sort() chama a função de comparação function(40, 100). A função irá calcular 40 – 100 e retornará -60 (um valor negativo). A função sort lerá que 40 é um valor menor que 100.

Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.sort());
// ["Apple", "Banana", "Mango", "Orange"]

reduce():

O método reduce() reduz o vetor para um único valor; Ele executa uma função fornecida para cada valor do vetor (da esquerda para a direita). O valor de retorno da função é armazenado em um acumulador (resultado / total).

Sintaxe:
vetor.reduce(function(total, valorAtual, indiceAtual, vet), valorInicial);
Onde:
  • function(total, valorAtual, indiceAtual, vet): É uma função a ser executada para cada elemento no vetor.
  • valorInicial: Opcional, um valor a ser passado para a função como o valor inicial.
Exemplo:
let numbers = [175, 50, 25];
function myFunc(total, num) {
  return total - num;
}
console.log(numbers.reduce(myFunc));
// 100

join():

O método join() retorna o vetor como uma sequência. Os elementos serão separados por um separador especificado. O separador padrão é a vírgula (,). Este método não altera o vetor original.

Sintaxe:
vetor.join(separador);

O separador pode ser omitido, e será usado por padrão a vírgula (,).

Exemplo:
let fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.join(" and "));
// Banana and Orange and Apple and Mango

slice()

O método slice() retorna os elementos selecionados em um vetor, como um novo objeto de vetor. Seleciona os elementos que começam no argumento inicial especificado e terminam no, mas não incluem, o argumento final especificado.

Sintaxe:
vetor.slice(inicio, fim);
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1, 3);
console.log(citrus);
// ["Orange", "Lemon"]

Gostou deste artigo? Comente abaixo outros métodos de vetores JavaScript!

Uma breve introdução ao Flux

O Flux é uma arquitetura de Software que o Facebook utiliza para construir o front-end de suas aplicações. Flux é mais um conjunto de padrões do que um framework e você pode iniciar o uso de Flux imediatamente em seus projetos, sem ter que escrever ou reescrever muito código.

A criação do Flux ocorreu pois precisava-se de um padrão que resolvesse alguns problemas muito comuns do desenvolvimento front-end, tais como:

  • Padronização do fluxo da arquitetura para reduzir o tempo que leva aos desenvolvedores para entenderem o código de seus colegas.
  • Reduzir a replicação de código e regras de negócio.
  • Facilitar a manutenção do sistema.
  • Tornar mais simples de implementar novas funcionalidades que impactam diversas partes do sistema.
  • Automatizar a atualização do estado de um dado que é lido em diversos lugares.

O Flux possui 4 elementos:

  1. Action: São coleções de métodos que são chamadas pelas nossas Views, que enviam ações para o Dispatcher contendo payloads, que serão entregues aos Stores.
  2. Dispatcher: É o componente que gerencia basicamente todo o processo da nossa aplicação. O ponto central são os métodos Register e Dispatch, que são triggers de eventos entre a ação que disparou o evento e as stores registradas. Ele simplesmente recebe a Action e propaga para as stores que irá identificá-la e disparar um evento caso registrado.
  3. Stores: São os locais onde ficam armazenados a lógica e estado da aplicação, que tem call-backs registrados para o Dispatcher.
  4. (Controller) Views: Responsáveis por permitir que o usuário interaja com a aplicação e por mostrar a ele o estado atual dela.

O Dispatcher é único para toda a aplicação, dessa forma só existe um único elemento responsável por receber as Actions realizadas nas Views e dispará-las para as Stores da aplicação. Toda mudança no estado da aplicação somente pode ser realizada através de uma Action.

A principal característica do Flux é o fluxo unidirecional de dados. Sem alterações em cascata, a cada Action um novo estado é gerado. Dessa forma, o estado da aplicação é previsível, sendo mais simples de testar. Com a lógica de negócio concentrada em um local (nas Stores), fica mais fácil encontrar e corrigir bugs.

Conheça a CryptoCoinJS, uma biblioteca JavaScript para Criptomoedas.

CryptoCoinJS é um projeto JavaScript que ajuda você a interagir com diversas criptomoedas existentes na atualidade, como o famoso Bitcoin, Litecoin, Dogecoin, entre muitas outras. A maioria dos módulos é totalmente compatível com o seu navegador e com o Node.js. Naturalmente, os módulos que fazem interface diretamente com os nós de pares não serão executados no navegador.

Princípios da biblioteca:

Acreditando na filosofia Node.js e UNIX – a idéia de criar pequenos componentes que fazem uma coisa e fazem bem. Escrever software dessa maneira permite que os indivíduos usem e contribuam com muito mais eficácia do que escrevendo uma biblioteca monolítica. O CryptoCoinJS acredita que as pessoas são mais importantes que o código e, portanto, é fundamental escrever um código que seja fácil de ler, fácil de documentar cada módulo com a API e exemplos, e esse código é o inimigo 1 2.

Escrever testes é uma das melhores maneiras de comunicar expectativas entre desenvolvedores. Se a documentação é uma maneira de se comunicar para o consumidor do seu módulo, os testes são uma maneira de se comunicar entre os desenvolvedores.

Plataformas:

O CryptoCoinJS está focado no Node.js e no navegador usando o Browserify. Não há suporte a navegadores herdados, ou seja, se o seu navegador não suporta ECMAScript 5 (2009 – 2010) e não suporta window.crypto.getRandomValues​​(), alguns dos módulos podem não funcionar.

Começando:

O CryptoCoinJS é escrito em JavaScript puro e pode ser usado no servidor (Node.js) e no cliente (navegador moderno> 2010).

A primeira e provavelmente a mais óbvia é que você precisará de um editor de texto. Sublime Text , Github Atom ou Vim farão uma boa escolha.

O Node.js é executado no Windows, Mac OS X ou Linux. É muito fácil de instalar, basta acessar nodejs.org/download e executar o instalador para sua plataforma de escolha. O Node.js agrupa o npm que, estranhamente, não representa o Node.j Package Manager, apesar de ser seu único objetivo.

Continue lendo “Conheça a CryptoCoinJS, uma biblioteca JavaScript para Criptomoedas.”

O que é MVC e MVVM?

O que é MVC?

O MVC é um padrão arquitetural de para o desenvolvimento que existe desde os anos 70 e foca em dividir a aplicação em 3 camadas: Model, View e Controller.

  • O Model representa a camada contendo as regras de negócio e acesso a dados. No JavaScript, está normalmente á a camada que faz a chamada aos WebServices.
  • A View representa o componente de interface do usuário, como por exemplo as páginas HTML.
  • O Controller atua como intermediário entre o Model e a View. Ele recebe requisições da View, faz o processamento para buscar os dados no Model e por último, processa e retorna o resultado recebido para a View.

Vantagens:

  • Alto nível de coesão: o MVC permite o agrupamento lógico de ações relacionadas, tornando fácil de saber quem é e onde está o código de partes do sistema.
  • Baixo acoplamento: A própria natureza da estrutura MVC é tal que existe um baixo acoplamento entre Models, Views e Controllers.
  • Facilidade de modificação: Devido à separação de responsabilidades, o desenvolvimento ou modificação futura é mais fácil, ou seja, a escalabilidade do produto aumenta.

Desvantagens:

  • Navegabilidade de código: A navegação da estrutura pode ser complexa porque introduz novas camadas de abstração e requer que os usuários se adaptem aos critérios de decomposição do MVC.
  • Várias representações: decompor um recurso em três camadas causa dispersão. Portanto, exigindo que os desenvolvedores mantenham a consistência de várias representações ao mesmo tempo.

O que é MVVM?

MVVM é a sigla para Model View ViewModel. Ele foi inicialmente desenvolvido pela Microsoft com o intuito de ser utilizado no com o WPF e Silverlight, mas atualmente vem sendo utilizado por diversos desenvolvedores JavaScript. Muitos frameworks como o Angular, Knockoutjs e Aurelia suportam a utilização do MVVM.

Nesta arquitetura, o Model tem função similar ao do MVC, representando o domínio de dados da aplicação. Já a View e a ViewModel possuem conceitos um pouco diferentes.

  • View é a camada com o qual o usuário interage e neste padrão, ela considerada ativa. Isto significa que elas possuem Data Bindings (vinculação de dados) com o ViewModel para que ambos estejam em sincronia.
  • O ViewModel atua como um conversor de dados, transformando os dados do Model para informações que possam ser utilizadas pela View e passando os comandos da View para o Model. Ele também ajuda a manter o estado da View e atualiza o Model de acordo com as ações do Usuário. A View e o ViewModel estão conectados através do Data Binding, que permite a propagação automática destas mudanças. Existem 2 formas de Data Binding:
    • Two Way: Quando uma alteração na View ou na ViewModel automaticamente atualiza um ao outro.
    • One Way: Quando apenas alterações na View atualizam a ViewModel ou apenas o inverso.

Podemos citar como vantagens na utilização do MVVM:

  1. O desenvolvedor pode optar por reaproveitar um ViewModel em várias Views.
  2. O código para atualizar a View é pequeno, uma vez que as alterações podem ser propagadas automaticamente.
  3. O MVVM facilita o desenvolvimento paralelo da aplicação por vários desenvolvedores.

Já como desvantagens:

  1. É uma estrutura com uma complexidade maior e para aplicações pequenas poderá adicionar camadas e regras desnecessárias.
  2. Aplicações que possuem vários pontos de alteração de um mesmo Model, podem acabar exibindo dados desatualizados.

 

 

Atualizações de Cursos MundoJS!

Olá pessoal! Estamos aqui para contar as novidades para vocês! Neste último mês, aconteceram algumas mudanças em nosso site! Nossa aba de cursos, no site, sofreu algumas alterações. Antes nós disponibilizávamos alguns links para cursos pagos e gratuitos de JavaScript.

Mas agora, o MundoJS começou a lançar seus próprios cursos!

No último mês, lançamos dois cursos na plataforma Udemy, sendo um totalmente gratuito e outro pago, chamados Introdução ao JavaScript e JavaScript Básico, respectivamente. Você pode acessar diretamente:

No curso de Introdução ao JavaScript, abordamos conceitos básicos da linguagem, criamos pequenos algoritmos, vemos as chamadas estruturas condicionais, enfim, o conteúdo básico para qualquer programador, que você provavelmente aprenderia no seu primeiro ano de faculdade.

No curso de JavaScript Básico, começamos a abordar conceitos um pouco mais avançados. Com um foco interessante na Manipulação do DOM e Eventos, abordamos de forma prática a utilização de eventos sobre elementos HTML. O curso também possui dois projetos práticos: Um jogo da velha e uma calculadora, feitos com HTML, CSS e JavaScript! O mais interessante é: disponibilizamos o HTML e CSS para você e, durante o curso, focamos apenas na lógica de programação por trás destes projetos!

Continue lendo “Atualizações de Cursos MundoJS!”

O custo do JavaScript 2019

Se você tem interesse em saber mais sobre os impactos de performance do JavaScript nos navegadores, esse artigo é para você.

Este post é uma adaptação do meu entendimento do vídeo e artigo sobre o custo do JavaScript que foi apresentado por Addy Osmani (Link no final do post) que fala sobre as mudanças que ele observou no custo do JavaScript entre o ano 2018 e 2019.

De acordo com ele, uma das grandes mudanças no custo do JavaScript nos últimos anos se deve nas melhorias como os navegadores conseguem processar scripts. Em 2019 o custo foco está no tempo de download e execução dos scripts.

O que isso quer dizer para os desenvolvedores?

Como a compilação e analise de dados não é mais tão lenta com antes, atualmente é importante considerar 3 coisas nos bundles de JavaScript

  1. Melhorar o tempo de download: Evite ter bundles maiores que 100kb (50kb para dispositivos móveis) pois eles consomem muito a rede e memória do dispositivo. Aproveite as funcionalidades do HTTTP2 para reduzir o overhead de chamadas adicionais.
  2. Melhorar o tempo de execução: Evite tarefas que consomem muito da thread principal. A execução do script após o download é um dos custos dominantes.
  3. Evite scripts inline muito grandes: Uma boa regra genérica e evitar scripts inline que sejam superiores a 1kb pois eles são processados pela thread principal e podem atrasar interatividade da página.

Custo do JavaScript para smartphones.


Tarefas longas monopolizam a thread principal. Tente quebra-las.

Por que a o download e a execução do código são importantes?

Apesar de estarmos começando no mundo do 5G e existirem smartphones com alta capacidade de processamento, a média da capacidade de download (mesmo em países de primeiro mundo) ainda se compara ao 3G. Junto com o fato que muitos destes dispositivos não terem o poder de processamento necessário para rodar eficiente alguns aplicativos, temos ai a receita para uma péssima experiencia para o usuário.

O que o V8 fez para melhorar o tempo de processamento?

O V8 reduziu a quantidade de trabalhos de análise e compilação na thread principal em uma média de 40% (por exemplo, 46% no Facebook, 62% no Pinterest) com a maior melhoria sendo 81% (YouTube), analisando e compilando um trabalhador fio. Isso é um acréscimo ao parsing / compilação de fluxo de threads fora da linha principal existente.

Conclusões

O download e o tempo de execução são os principais bottlenecks para o carregamento de scripts em 2019. Divida pacotes de forma que o usuário só baixe aquilo que precisa quando for necessário. No celular, você deve enviar muito menos script devido à rede, ao consumo de memória e ao tempo de execução para CPUs serem mais lentas.

Fonte:

Blog

Youtube

API de Controle de Voz

Neste artigo, estarei mostrando um passo a passo de como configurar a API de controle de voz e utilizar o JavaScript para capturar o que é falado pelo usuário.

Antes de mais nada, durante está postagem as funcionalidades utilizadas estão em modo experimental e por isso não funcionaram em todos os navegadores. Veja aqui a lista de navegadores que dão suporte https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility. Mas se você usar o Chrome, não deverá ter problema.

A primeira coisa que faremos então é criar um arquivo html com:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Reconhecimento de Voz</title>
</head>
<body>
    <h1>Reconhecimento de Voz</h1>
    <button>Clique e Fale</button>
    <p>Resultado:</p>
    <p id="resultado"></p>
   
    <script src="script.js"></script>
</body>
</html>

E um arquivo JavaScript chamado script.js. Vamos faze-lo passo a passo

Primeiro vamos atribuir variáveis para os objetos SpeechRecognition e SpeechGrammarList

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
window.SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;

Por enquanto ainda precisamos chamar ele ou o webkit para que tenhamos o objeto.

Segundo o MDN

A interface SpeechRecognition da Web Speech API é a interface do controlador para o serviço de reconhecimento; isso também manipula o SpeechRecognitionEvent enviado do serviço de reconhecimento.

A interface SpeechGrammarList da API Web Speech representa uma lista de objetos SpeechGrammar contendo palavras ou padrões de palavras que queremos que o serviço de reconhecimento reconheça.

Com isso, criaremos um evento que iniciará ao carregar o objeto window e nele começaremos instanciando objetos com o SpeechRecognition.

window.addEventListener("load", function () {
    let recognition = new window.SpeechRecognition();

 

após isso, precisamos fazer algumas configurações no objeto recognition

recognition.grammars = new window.SpeechGrammarList();
recognition.continuous = false;
recognition.lang = 'pt-BR';
recognition.interimResults = false;
recognition.maxAlternatives = 1;

onde:

  • Grammars: São os padrões de linguagem que serão entendidos.
  • Continuous: Define se vários resultados serão retornados com base no reconhecimento (true), ou se apenas um será retornado (false)
  • Lang: A linguagem
  • InterimResults: Se irá ou não retornar resultados parciais.
  • MaxAlternatives: Número máximo de alternativas do SpeechRecognitionAlternative que serão retornadas.

 

Agora iremos definir os eventos para que o reconhecimento possa ser feito.

1) Inicia o reconhecimento ao clicar no botão:

document.querySelector("button").addEventListener('click', () =>{
        recognition.start();
    });

 

2) Encerra o reconhecimento ao observar que o usuário parou de falar:

recognition.addEventListener('speechend', () =>{
    recognition.stop();
});

 

3) Caso de Erro:

recognition.addEventListener('error', (event) => {
    document.querySelector("#resultado").textContent = 'Erro no reconhecimento do texto: ' + event.error;
});

 

4) Com base no resultado obtido, captura a parte do objeto deste resultado que possui o texto e o exibe em tela

recognition.onresult = function (event) {
        let last = event.results.length - 1;
        let texto = event.results[last][0].transcript;
        document.querySelector("#resultado").textContent = texto;
    }

Terminamos….. Agora é só testar clicando no botão da página HTML.

Como você pode ver, em apenas algumas linhas de código conseguimos utilizar a api para escrevermos na tela as coisas que são faladas quando você pressiona um botão

Caso precise do código js inteiro, ele segue abaixo:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
window.SpeechGrammarList = window.SpeechGrammarList || window.webkitSpeechGrammarList;

window.addEventListener("load", function () {
    let recognition = new window.SpeechRecognition();

    recognition.grammars = new window.SpeechGrammarList();
    recognition.continuous = false;
    recognition.lang = 'pt-BR';
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;

    document.querySelector("button").addEventListener('click', () =>{
        recognition.start();
    });

    recognition.addEventListener('speechend', () =>{
        recognition.stop();
    });
    
    recognition.addEventListener('error', (event) => { 
        document.querySelector("#resultado").textContent = 'Erro no reconhecimento do texto: ' + event.error; 
    });
    
    recognition.onresult = function (event) {
        let last = event.results.length - 1;
        let texto = event.results[last][0].transcript;
        document.querySelector("#resultado").textContent = texto;
    }
});

 

 

Curso Grátis de JavaScript by MundoJS

logo

Nosso primeiro curso de JavaScript está no ar, segue o link:

Instrodução ao JavaScript

Esperamos que gostem e nos mande uma mensagem aqui no site se você tiver alguma dúvida ou sugestão.
Para quem é o curso: Todo mundo, por favor se inscrevam… kkk

Descrição

O curso é para iniciantes no mundo da programação. Ele ensinará o conteúdo do primeiro semestre de algoritmos da maioria das faculdades, mas de uma forma mais sucinta para você não perder tempo. Conforme tivermos chance, iremos adicionar mais exercícios relevantes e ir atualizando qualquer problema que vocês nos informarem.

Neste curso você aprenderá os fundamentos de JavaScript necessários para entender os algoritmos criados com a linguagem. Você não precisa ter qualquer conhecimento técnico e se já souber o básico de algoritmos, terá bastante facilidade em entender todo o conteúdo.

Ao término dele você saberá mais sobre

  • Variáveis
  • Tipos de dados
  • If/Else
  • Switch
  • For
  • For Of
  • While
  • Do While

Como é grátis, convidamos todos a se inscreverem e nos darem sua opinião.

Bons estudos!!