Autor: MundoJS

Publicado em

JavaScript Básico: For Of

Você conhece o loop For…Of?

Este loop é específico para iterar entre os elementos de uma lista. Ele percorre objetos iterativos, chamando uma função personalizada com instruções a serem executadas para o valor de cada objeto distinto.

Sintaxe:

for (variavel of iteravel){
    declaração;
}
Onde:

variável: a cada iteração, um valor de uma propriedade diferente é atribuído à variável;
iteravel: objeto cujos atributos serão iterados.

let dias = [“segunda”, “terça”, “quarta”, “quinta”, “sexta”];

for (let dia of dias) {
    console.log(dia);
}

Você pode fazer a leitura como: “Para cada item de uma lista”. No exemplo, dia começará com o valor “segunda” e o último valor será “sexta”.
O for…of percorre a lista de forma crescente, então ele irá mostrar de forma crescente os valores do seu vetor.

Exercício 1:

Crie um algoritmo que liste todos os 12 meses do ano. Para isso, você deve criar um vetor que irá conter, em cada índice, o nome de um mês. Com este vetor criado, utilize o for…of pra realizar a leitura destes doze elementos.

Exercício 2:

Crie um vetor que tenha 10 objetos em seu interior. Cada objeto deverá possuir três propriedades: nome: nomeDoAluno, idade: idadeDoAluno, matricula: matriculaDoAluno. Crie 10 alunos fictícios. Após a criação deste vetor com objetos, utilize o laço for…of para realizar a leitura desta lista de objetos.

Obs: Todas as propriedades devem ser mostradas no console.

Exercício 3:

Crie uma lista de elementos que contenha 10 números. Os números devem estar na seguinte ordem: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]. Utilize o laço for…of para realizar a leitura desta lista. Exiba no console os valores da lista.

Publicado em

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;
    }
});

 

 

Publicado em

Exercício Fácil: Loop em Loop

Exercício 1:

Crie uma função chamada forAninhado() que receberá como parâmetro um vetor. Este vetor deve ter sub-vetores, com valores que variam entre ímpar e par. Com o laço de repetição FOR que irá percorrer este vetor com seus sub-vetores e irá buscar os valores pares. Os valores pares devem ser adicionados em um novo vetor, e você deverá retornar este novo vetor.

Com base neste vetor de exemplo:

let vetor = [[1, 2], [3,4,5,6], [7,8,9,10]]; //Vetor principal

Se colocarmos ele na função:

forAninhado(vetor);

Esperamos o retorno:

[2, 4, 6, 8, 10]; //Novo vetor com os números pares

Lembre-se:

Não use tipos diferentes de vetor, pois não conseguirá dar procedimento no seu exercício.

Com base neste outro vetor de exemplo:

let vetor = [{numero: 2}, [2,8], [1,1,6,2]];

Se colocarmos ele na função:

forAninhado(vetor);

O retorno será:

[2, 8, 6, 2]// O Objeto não será mostrado no vetor.

Também aconselhamos não utilizar somente números ímpares, pois terá em seu retorno algo como:

[]

Exercício 2:

Baseado no código do exercício anterior, some os valores dos sub-vetores e adicione somente os números pares a um novo vetor. Retorne este novo vetor apenas com os números pares.

Com base neste exemplo:

let vetor = [[4,4], [5,2], [7,3]]; //Vetor principal

Se colocarmos ele na função:

forAninhadoPares(vetor);

Esperamos o retorno:

[8, 10]; //Vetor somente com números pares

Faça download dos códigos com as respostas no link abaixo!

[download id=”2836″]

Gostou deste exercício? Comente os seus resultados abaixo!

Publicado em

O Google adiciona noções SEO JavaScript ao seu guia do desenvolvedor

Recentemente, o Google adicionou uma seção básica de SEO do JavaScript ao guia do desenvolvedor da Rede de Pesquisa. A nova seção tem como objetivo fornecer aos iniciantes uma visão geral de como o Googlebot processa o JavaScript. Isto inclui descrições gerais de como o Google processa JavaScript, além de algumas práticas recomendadas.

Além de uma visão geral de como o Googlebot rastreia, processa e indexa aplicativos da Web JavaScript, o guia também fornece dicas básicas, acompanhadas de links para recursos mais detalhados das funcionalidade de indexação Google, como as seguintes:

  • Como descrever sua página com títulos e snippets exclusivos: O JavaScript permite que os SEOs definam ou alterem títulos e meta descrições.
  • Como escrever código compatível: Os desenvolvedores devem estar cientes das limitações da API e do JavaScript do Googlebot.
  • Códigos de status HTTP importantes: Os códigos de status informam ao Googlebot que uma página foi movida ou que ela não deve ser rastreada ou indexada.
  • Informações sobre a tag meta-robôs: O Google afirma que o uso do JavaScript para remover ou alterar a metatag do robô pode não funcionar da maneira esperada, explicando: “O Googlebot ignora a renderização e a execução do JavaScript se a tag de meta-robôs contiver inicialmente ‘noindex’. Se você quiser usar JavaScript para alterar o conteúdo da metatag do robô, não defina o valor da metatag como “noindex”.
  • Corrigindo imagens e conteúdo carregado com lazy load: O Google recomenda o uso de lazy load para aumentar o desempenho e diminuir os custos de largura de banda.

Por que devemos nos importar. O JavaScript é uma ferramenta poderosa para desenvolvedores e pode melhorar a experiência do usuário. Entender como o Googlebot processa seus aplicativos da web com JavaScript pode ajudar você a torná-los mais detectáveis, o que pode aumentar sua visibilidade orgânica e atrair mais tráfego para seu site.

 

 

 

 

Publicado em

Exercício Fácil: Validando Triângulos.

Triângulos são polígonos que possuem três lados. Como qualquer outra figura geométrica, os triângulos possuem alguns elementos, que são:

  • Lados: São segmentos de reta que se encontram nas suas extremidades. Todo triângulo é uma figura geométrica que possui três lados. Os triângulos podem ser definidos de três formas diferentes.
  • Vértices: Os vértices são os pontos de encontro entre os lados.
  • Ângulos internos: Na união dos lados de um triângulo, se forma um ângulo. Os triângulos possuem três ângulos internos. Os vértices e os lados destes ângulos são, respectivamente, os vértices e os lados do triângulo.

Neste exercício, você deverá criar uma função para validar se os valores passados como parâmetro formam um triângulo equilátero, escaleno ou isósceles.

Requisitos:

Para realizar este exercício, você deverá ter conhecimento sobre:

  • Condicionais;
  • Comparadores.

Como realizar:

Crie uma função chamada validarForma(). Esta função deverá receber três parâmetros: a, b, c.

Dentro da função, utilizando condicionais e comparadores, verifique se:

  • Todos os lados são iguais, o triângulo será equilátero;
  • Se todos os lados forem diferentes, será escaleno;
  • Se nenhuma das duas condições anteriores for atendida, será isósceles.

Faça o download de uma das possíveis soluções para este exercício:

[download id=”2831″]

Gostou deste exercício? Resolveu de forma diferente? Mostre o seu resultado nos comentários!

Publicado em

Exercício Fácil: Switch

Você conhece a condicional Switch?

Ela serve para avaliar uma expressão. Combinando o valor desta expressão para a utilização de um case, as instruções associadas ao case serão executadas. O switch executa um código de acordo com diversos resultados possíveis. Ele é uma excelente alternativa para a execução de códigos com muitas comparações.

Por exemplo, podemos ter uma média escolar. Temos como dados de entrada a nota média de cada aluno. Dentro do switch, teremos vários cases (casos). Caso a nota for maior ou igual a sete, o aluno estará aprovado. Caso seja entre cinco e sete, o aluno estará em recuperação e se a nota for menor que cinco, o aluno está reprovado. Utilizando este exemplo conceitual, conseguimos aplicar na prática o uso do switch/case.

Sintaxe:

let variavel = valor;

switch (variavel) {
    case valor:
        instrução;
  break;
    default;
  instrução;
}

Onde:

  • variável: é a expressão que será avaliada;
  • valor: condição que deverá ser verificada para execução das instruções;
  • instrução: trecho de código que será executado quando a condição for especificada;
  • break: serve para encerrar a leitura do switch. Sem este comando, o código do case abaixo será executado na sequência.
  • default: executará quando nenhum case corresponder ao valor especificado.

Observação:

O switch compara valores utilizando ===. Portanto, os valores comparados devem ser do mesmo tipo de dado.

Exercício 1:

Crie uma variável chamada “fruta”. Esta variável deve receber uma string com o nome de uma fruta. Após, crie uma estrutura condicional switch que receba esta variável e que possua três casos: caso maçã, retorne no console: “Não vendemos esta fruta aqui”. Caso kiwi, retorne: “Estamos com escassez de kiwis” e caso melancia, retorne: “Aqui está, são 3 reais o quilo”. Teste com estas três opções e verifique o console do seu navegador. Crie também um default, que retornará uma mensagem de erro no console.

Exercício 2:

Um homem decidiu ir à uma revenda comprar um carro. Ele deseja comprar um carro hatch, e a revenda possui, além de carros hatch, sedans, motocicletas e caminhonetes. Utilizando uma estrutura switch/case, caso o comprador queira o hatch, retorne: “Compra efetuada com sucesso”. Nas outras opções, retorne: “Tem certeza que não prefere este modelo?”. Caso seja especificado um modelo que não está disponível, retorne no console: “Não trabalhamos com este tipo de automóvel aqui”.

Resolva estes exercícios para melhor aprendizado!

Gostou deste exercício? Mostre o seu resultado nos comentários!

Publicado em

JavaScript Básico: For

Você sabe utilizar o laço de repetição FOR em JavaScript?

O For é um dos laços de repetições que tem a função de executar uma instrução “x” determinada quantia de vezes. Com ele, podemos:

  • Percorrer listas inteiras
  • Acessar e alterar valores nestas listas
  • Descobrir o valor e índice de cada elemento contido nas listas
  • Entre outras funções.

Existem vários tipos de laços de repetição, mas eles realizam a mesma coisa: repetir uma determinada ação. Neste artigo veremos exclusivamente o laço FOR.

O laço FOR é repetido até que uma condição seja especificada. Por exemplo:

Iniciar a contagem de elementos de um vetor, começando no índice zero até o último índice (este vetor contém um total 5 índices):

let vetor = [0, 1, 2, 3, 4];
for (let indice = 0; indice <= 4; indice++){
    console.log(vetor[indice]);
}
// 1
// 2
// 3
// 4

Sintaxe:

for ([inicialização]; [condição]; [expressão final]){
    declaração;
}

Onde:

  • Inicialização: é uma expressão ou declaração de variáveis. É usada para iniciar o contador de variáveis.
  • Condição: é a expressão que será avaliada antes da iteração do loop. Se esta expressão for TRUE, a declaração será executada. É um teste de condição. Enquanto a condição for atendida, o seu código será executado.
  • Expressão final: é validada ao final de cada iteração que acontece no laço FOR. Utilizada para incrementar ou atualizar a variável. Um exemplo prático é a varredura de elementos que vimos no exemplo acima.
  • Declaração: é o trecho de código que será executado caso a condição seja verdadeira.

Exercício 1:

Crie um algoritmo usando o for que leia uma lista. Mostre no console apenas os números pares. Esta lista deve ser assim: [1, 2, 3, 4, 5, 6, 7, 8, 9];

Exercício 2:

Utilizando a lista do exercício anterior, crie um algoritmo que mostre de maneira decrescente os elementos desta lista.

Resolva estes exercícios para melhor aprendizado!

Gostou deste exercício? Mostre o seu resultado nos comentários!

Publicado em

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!!

Publicado em

Novidades no ECMAScript 2019 (ES2019)/ES10

A versão 72 do Chrome lançou alguns novos recursos interessantes do ES10:

.Flat():

O método flat() cria um novo vetor recursivamente com todos os elementos do sub-vetor concatenados nele até a profundidade especificada.

let vetor = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];

vetor.flat();
// (7) [1, 2, 3, 4, 5, 6, Array(4)]

vetor.flat().flat();
// (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)]

vetor.flat().flat().flat();
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

vetor.flat(Infinity);
//(12) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

.flatMap():

O método flatMap() primeiramente mapeia cada elemento do vetor usando uma função e mapeamente para, em seguida, nivelar o resultado em um novo array. O flatMap é bastante útil, pois mescla um mapa seguido por um flat de profundidade 1 em um método mais eficiente.

let vetor = [1, 2, 3, 4, 5];

vetor.map(x => [x, x*2]);
// (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
// 0: (2) [1, 2]
// 1: (2) [2, 4]
// 2: (2) [3, 6]
// 3: (2) [4, 8]
// 4: (2) [5, 10]

vetor.flatMap(v=>[v, v*2]);
// (10) [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Object.fromEntries():

O método Object.fromEntries() transforma uma lista de pares de valores-chave em um objeto.

Exemplo 1:

let obj = {
    chave1:'valor1',
    chave2:'valor2',
    chave3:'valor3'
}    

let entries = Object.entries(obj);

console.log(entries);
// (3) [Array(2), Array(2), Array(2)]0: (2) ["chave1", "valor1"]1: (2) ["chave2", "valor2"]2: (2) ["chave3", "valor3"]

let fromEntries = Object.fromEntries(entries);

console.log(fromEntries);
// {chave1: "valor1", chave2: "valor2", chave3: "valor3"}

Exemplo 2:

let entries  = new Map([
    ['nome', 'ben'],
    ['idade', 25]
]);    

Object.fromEntries(entries);
// {nome: "ben", idade: 25}

String.trimStart() & String.trimEnd():

O método trimStart() remove espaços em branco do início de uma string. O método trimEnd() remove espaços em branco do final de uma string.

let olaMundo = "     Olá Mundo!     ";

console.log(JSON.stringify(olaMundo.trimEnd()));
// "     Olá Mundo!"

console.log(JSON.stringify(olaMundo.trimStart()));
// "Olá Mundo!     "

Optional Catch Binding:

Permite que os desenvolvedores usem try / catch sem criar uma ligação não utilizada. Você pode fazer uso do catch block sem um parâmetro.

try {
    throw new Error("sem erro");
} catch {
    console.log("nenhum parâmetro no catch");
}
// nenhum parâmetro no catch

Antes era obrigatório usar parâmetro no catch block:

try {
    throw new Error ("Algum erro aleatório");
} catch(e) {
    console.log(e);
}    
// Error: Algum erro aleatório

Continue lendo “Novidades no ECMAScript 2019 (ES2019)/ES10”