Tag: Estudo

Publicado em

O que é SPA?

SPA é a sigla para Single Page Application (aplicação de uma página). Este tipo de aplicação tem por característica possuir um carregamento um pouco mais demorado ao ser aberto pois ela irá trazer todos os assets (arquivos, imagens, etc..) para a máquina do usuário, mas após isso, se o sistema foi bem feito a navegação deverá ser muito rápida e fluida.

As SPA se tornaram populares graças as implementações de performance que o V8 engine da Google proporcionou ao JavaScript. Essas melhoras tornaram as páginas mais rápidas permitiram proporcionar uma agilidade antes vista apenas em aplicativos desktops. Uma das aplicações mais famosas que começaram a utilizar este conceito foi o Gmail, o qual era possível navegar entre as opções sem que a página fosse recarregada.

Todos os processos são executados no lado do cliente e a comunicação com o servidor só ocorrerá com chamadas Ajax quando a aplicação precisar enviar ou buscar novos dados. Para este tipo de aplicação não interessa qual a tecnologia, quantas aplicações ou onde o sistema está hospedado, ela precisa apenas saber os endpoints que serão consumidos. Uma desvantagem de tudo ocorrer no front é que algumas regras podem ficar fragmentadas entre o front-end e back-end.

 

Como é de se esperar, em aplicações SPA todo o código fonte fica no browser e para evitar que outros copiem o código, existem ferramentas que ajudam a comprimir e alterar o código de forma que ele seja praticamente impossível de ler.

Normalmente, SPAs possuem um componente chamado Router que gerencia a navegação do usuário mesmo que ele atualize a tela. SPAs trabalham muito com armazenamento local no navegador, de forma que após um refresh seja possível buscar no armazenamento as informações e remontar o estado anterior da tela.

Com o passar do tempo várias técnicas e ferramentas para dar suporte a criação de SPAs foram sendo criadas, algumas com a ideia de ser uma solução completa com tudo que o desenvolvedor precisaria para desenvolver uma aplicação, e outras que procuravam solucionar alguns problemas mais pontualmente.

Continue lendo “O que é SPA?”

Publicado em

JavaScript Básico: Break e Continue

 

Você já conhece o break e continue e suas utilidades? Conheça neste artigo:

BREAK:

O comando “break” serve para encerrar a leitura. O break é um comando que podemos utilizar quando queremos parar/encerrar o laço de repetição na hora. A instrução break interrompe o laço e continua executando o código após o loop (se houver).

Exemplo:

let carros = ["BMW", "Volvo", "Saab", "Ford"];

list: {
    console.log(carros[0]);
    console.log(carros[1]);
    break list;
    console.log(carros[2]);
    console.log(carros[3]);
}

CONTINUE:

Com este comando, é possível iniciar a próxima repetição do loop. A instrução continue interrompe uma iteração (no laço de repetição), se uma condição específica ocorrer, e continua com a próxima iteração no laço de repetição.

for (let i = 1; i < 10; i++) {
    if (i === 3) {
        continue;
    }
    console.log("O número atual é: " + i);
}

Com a instrução continue, você poderá utilizá-la para apenas ignorar  uma iteração de loop.

A instrução break pode ser utilizada para pular de um loop ou de um switch. Ela pode ser usada para pular qualquer bloco de código.

Exercício 1:

Crie um laço de repetição FOR. Este laço deverá começar a iterar no número 1. Enquanto o índice for menor que 10, o laço deverá continuar iterando.

Com o laço criado, cria um estrutura condicional que, utilizando o comando break, pare a iteração quando ela alcançar o valor 5. Caso esta condição seja atendida, mostre os números utilizando o console.log.

Exercício 2:

Crie um vetor que contenha os seguintes nomes: “André”, “Ana Paula”, “Júlio”, “Marcela”, “Rubem”. Utilize o laço de repetição FOR para percorrer esta lista. Quando a leitura for igual a “Júlio”, utilize o comando continue. Ele irá exibir todos os outros nomes deste vetor. Utilize o console.log para logar os dados no console.

Gostou deste artigo? Comente abaixo!

Publicado em

JavaScript Básico: While

 

É um loop que funciona de forma bem simples. Chamado de “enquanto” (while) a condição for verdadeira (true), o código será executado. Fazendo isso, você cria um laço de repetição que irá executar para cada vez que a condição for verdadeira.

A Sintaxe do While:

while (condição){
    rotina;
}
Onde:
  • condição: é uma expressão que vai ser avaliada antes de cada vez que o laço for executado. Se a condição for verdadeira, a rotina será executada. Quando a condição for avaliada como falsa, a execução continuará na declaração que vem depois do laço while.
  • rotina: é uma declaração que será executada quando/enquanto a condição for avaliada como verdadeira.

Por exemplo:

// Variavel numero que recebe o valor numérico 10
let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    // Irá mostrar o valor acrescentando 1 até que se alcance o total
    console.log("valor:" + numero);
     numero++;
}

Você precisará fornecer uma forma para que o loop termine, caso contrário terá um loop infinito.

let número = 10;

// Enquanto o número for menor que 100
while (numero < 100){
    let valor = 0;
    console.log("valor:" + valor);
    valor = valor + 2;
}

Exercício 1:

Crie um laço while que irá iterar enquanto n for menor ou igual a 5. Mostre no console os valores obtidos.

Dica:

Para realizar este exercício, crie uma variável n que receberá o valor zero. Crie o laço de repetição while que irá ter a condição n menor ou igual a 5. Coloque a rotina a ser seguida dentro do laço de repetição.

 

Exercício 2:

Crie um vetor chamado carros. Este vetor irá conter os valores “Gol”, “Uno”, “S10”, “Kadett”. Você também precisa criar uma variável que será o índice para percorrer este laço de repetição. No seu laço de repetição while, utilize o console.log para mostrar todos os nomes dos carros que estão contidos no seu vetor.

 

Gostou deste artigo? Comente abaixo os seus resultados e tire as suas dúvidas!

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

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

Como fazer: Relógio com JavaScript

Aprenda neste artigo como fazer um relógio mostrando a sua hora atual, atualizando em tempo real as horas, minutos e segundos.

Date():

Objetos Date() são baseados no valor de tempo que é o número em milissegundos desde 1º de Janeiro de 1970 (UTC).  O UTC (Também conhecido como Greenwich Mean Time, GMT), refere-se ao tempo como definido pelo Padrão de Tempo Mundial (World Time Standard). O Objeto Date também suporta métodos de tempos locais. O tempo local é o tempo conhecido pelo computador onde o JavaScript é executado.

Neste nosso exemplo, criaremos uma função que irá retornar o tempo de nossa máquina.

Vamos ao código:

Primeiro, criaremos uma tag h3 que irá receber os valores de nossa função. Esta tag mostrará as horas, os minutos e os segundos.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Relógio</title>
</head>
<body>
    <h3 id="hora"></h3>
    <script>
    </script>
</body>
</html>

Criado este campo de input, iremos criar uma função setInterval. Esta função irá executar uma função anônima que, utilizando o método Date(), getHours(), getMinutes(), retornará as horas, minutos e segundos atuais diretamente para a página HTML, utilizando o textContent.

setInterval(function(){
    
    let novaHora = new Date();
    // getHours trará a hora
    // geMinutes trará os minutos
    // getSeconds trará os segundos
    let hora = novaHora.getHours();
    let minuto = novaHora.getMinutes();
    let segundo = novaHora.getSeconds();

    // Chamamos a função zero para que ela retorne a concatenação
    // com os minutos e segundos
    minuto = zero(minuto);
    segundo = zero(segundo);

    // Com o textContent, iremos inserir as horas, minutos e segundos
    // no nosso elemento HTML
    document.getElementById('hora').textContent = hora+':'+minuto+':'+segundo;
},1000)

Para mostrar as horas no formato padrão (00:00:00), criaremos uma função denominada zero(x) que retornará uma concatenação de um ‘0’ em frente à X, com a condição de x ser menor que 10.

// A function zero concatena a string (número) 0 em frente aos números
// mantendo o zero na frente dos números menores que 10. Exemplo:
// 21:05:01
// 21:05:02
// e assim, sucessivamente
function zero(x) {
    if (x < 10) {
        x = '0' + x;
    } return x;
}

Gostou deste artigo? Deixe seu comentário abaixo!