Tag: JavaScript

Publicado em

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.

 

 

Publicado em

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

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

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

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!