Esta é a parte 6 da série de postagens do blog sobre JavaScript que o levará do nível iniciante ao avançado. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Sem mais delongas, vamos começar com o sexto tutorial.
Este tutorial assume que você já tem um ambiente de codificação configurado. Se você tem acompanhado os tutoriais anteriores, já deve tê-lo aberto. Se por algum motivo você fechou sua configuração, pode encontrar as instruções completas de configuração na Parte 4 desta série. Nesse tutorial, mostramos como configurar seu ambiente de Snippets do Google Chrome para codificação.
Se você está um pouco confortável usando o Google Chrome, aqui está uma maneira rápida de se preparar para este tutorial, caso contrário, você pode conferir a Parte 4 para o conjunto completo de instruções passo a passo sobre como configurar seu ambiente de codificação.
Se você estiver em um Mac, o atalho de teclado para abrir o console é pressionar “Option + Command + J”, depois de abrir o Chrome. Se você estiver usando um dispositivo Windows, pode usar o atalho de teclado “Control + Shift + J” para abrir o Console JavaScript, assim que abrir o Chrome. Ou você também pode ir ao menu no topo e acessar Visualizar -> Desenvolvedor -> Console JavaScript. Uma vez que o Console esteja aberto, você pode clicar na aba “Fontes”, que está logo ao lado de “Console”. Agora você deve estar vendo Snippets. Você pode continuar codificando em um snippet que já começou a usar antes ou pode criar um novo Snippet clicando no botão “+ Novo snippet”. Desde que você tenha uma configuração de codificação para este tutorial onde possa praticar, você está pronto para começar.
Arrays são amplamente utilizados em muitas linguagens de programação e JavaScript não é exceção. E isso por uma boa razão. Mas você pode estar se perguntando o que é um array para começar? Arrays são essencialmente uma coleção de dados relacionados que podem ser acessados e manipulados com certos métodos definidos. Vamos ver alguns exemplos para ter uma compreensão mais completa de um array.
const numbersUntilTen = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const testAnswers = [true, true, false, false, true]; const pets = ["cachorros", "gatos", "aves", "peixes"];
Podemos usar um array java para armazenar diferentes tipos de dados. Por exemplo, no código acima, armazenamos alguns números, booleanos, bem como dados do tipo string.
Podemos criar um array java da mesma forma que criamos outras variáveis, com as palavras-chave const ou let no lado esquerdo e o conteúdo dos arrays no lado direito das equações. Uma coisa à qual você deve prestar atenção é que, ao criar arrays, usamos colchetes para cercar os itens, assim como fizemos no código acima. Também separamos cada item com uma vírgula entre eles, independentemente do tipo de dado.
Neste tutorial, escreveremos o código de uma maneira que você possa copiar e colar tudo neste tutorial, sequencialmente, ou digitar tudo em um snippet JavaScript no Chrome, e funcionará como esperado, desde que você siga a ordem. Por exemplo, o que isso significa para você é que, se definirmos uma variável com a palavra-chave const uma vez no tutorial, normalmente você não pode definir outra variável com o mesmo nome novamente. É por isso que, se você for copiar e colar parcialmente algum código, é uma boa ideia garantir que você defina essas variáveis no seu código também. Isso não deve ser um problema se você estiver seguindo o tutorial na ordem em que é apresentado.
Uma das primeiras coisas que você deve saber sobre um array java é que, uma vez que você cria um array, precisa acessar seus elementos. Arrays têm algo chamado “índices numerados”, e o que isso significa na prática é que cada elemento que você cria em JavaScript tem um número associado a ele da esquerda para a direita, de zero até o comprimento do array java menos um.
Por exemplo, no código acima para pets, podemos acessar o primeiro elemento de “cachorros” escrevendo o nome da variável, abrindo colchetes, colocando o índice do item que queremos acessar e fechando o colchete:
alert(pets[0]);
Da mesma forma, inserir números mais altos fará com que outros elementos sejam exibidos na caixa de alerta que estamos mostrando.
alert(pets[1]); alert(pets[2]); alert(pets[3]);
Como temos 4 elementos no array pets, e começamos os índices a partir de 0, o último item no array é acessado com pets[3], que é 1 a menos que o comprimento total do array. Neste ponto, você pode estar se perguntando, agora que podemos criar um array e acessar um item desse array, que tal fazer modificações nesse array? Que tal adicionar novos itens, alterar itens existentes ou excluir itens? Bem, vamos fazer isso passo a passo e começar com a adição de novos itens a um array.
Existem várias maneiras de adicionar diferentes itens a um array. Se sabemos que queremos adicionar o novo item ao final do array, podemos usar o método “push”. Isso também é chamado de empurrar um novo item para o array. Observe que o item empurrado irá para o final do array. Por exemplo:
pets.push("serpentes"); // vamos verificar se temos serpentes como o último item // exibindo o conteúdo do array alert(pets);
Se sabemos que queremos especificamente adicionar um item ao array java como o primeiro elemento, podemos usar a palavra-chave “unshift”. Vamos ver isso com um exemplo:
//executar este código irá deslocar todos os valores // para um lado e adicionará o primeiro pet de dragão pets.unshift(“dragões”); //vamos verificar isso exibindo o conteúdo do array alert(pets);
É ótimo que possamos adicionar itens ao final do array ou ao início do array, mas e se por algum motivo eu quiser injetar itens no array em posições específicas? Vamos supor que eu queira adicionar tartarugas na terceira posição. Isso é possível? Sim, é. Para injetar um item em um array, podemos defini-lo da mesma forma que criamos essa parte do array e atribuímos um valor à parte específica do array. Além disso, não se esqueça de usar os valores de índice ao inserir valores. Do ponto de vista prático, fica assim:
pets[2] = "tartarugas"; // vamos verificar se temos tartarugas como o terceiro item // exibindo o conteúdo do array alert(pets);
Como você pode ver, com o método pop, removemos o último item de pet, que era serpentes, do nosso array de pets.
Outra maneira de remover itens de um array java é usar a palavra-chave “shift”. Quando usamos shift, o primeiro elemento será excluído e os outros valores de índice se adaptarão a eles. Por exemplo:
// isso irá excluir o primeiro item // e deslocará os outros itens para seus novos valores de índice // que será um a menos que os valores de índice anteriores pets.shift(); // vamos também verificar isso exibindo o array alert(pets);
O nome “shift” na verdade vem de como a alocação de memória funciona na memória do computador. Portanto, se parecer relativamente não intuitivo no início, isso é perfeitamente normal também. Por enquanto, você deve saber que, usando o método shift, podemos remover o primeiro item de um array.
Quando lidamos com arrays na vida real, pode haver muitas vezes em que queremos contar o número de itens do array. Isso pode ser necessário em uma variedade de lugares, incluindo listas de tarefas, listas de participantes na escola ou no trabalho, e assim por diante. Para alcançar isso, temos uma propriedade de array embutida chamada “length” e ela nos dirá o comprimento total do array. Por exemplo:
alert(pets.length);
Ordenar arrays é uma operação bastante comum em JavaScript. Existem diferentes implementações específicas para ordenar itens em JavaScript. Essas implementações específicas, em geral, são chamadas de algoritmos de ordenação. Diferentes algoritmos de ordenação podem trazer diferentes vantagens e desvantagens. Por exemplo, um algoritmo de ordenação pode ser escolhido em vez de outro porque é simplesmente muito mais fácil de implementar em código, em comparação com outro, mesmo que eles possam mostrar um desempenho ligeiramente melhor. Você pode ter ouvido falar sobre diferentes algoritmos de ordenação para desempenho otimizado. Neste tutorial, utilizaremos o método de ordenação embutido fornecido pelo JavaScript. A ordenação é um problema bastante comum, especialmente no desenvolvimento web. Por exemplo, se você estiver construindo um site de comércio eletrônico, precisará implementar diferentes situações de ordenação para que seu usuário escolha. Embora não haja regras rígidas sobre quais opções e capacidades você deve fornecer ao seu público, existem padrões bastante comuns que são esperados de você como construtor de sites. Por exemplo, como usuário, há uma grande chance de que você queira listar alguns itens da loja tanto em ordem crescente de preço quanto em ordem decrescente de preço. Ao implementar a ordenação para essas tarefas, você deve ter em mente como implementá-la, dado que o usuário também pode limitar os resultados da pesquisa a certas outras categorias, como camisetas, chapéus, bolsas e assim por diante. Podemos ordenar um array adicionando “.sort()” ao final dele.
pets.sort(); alert(pets);
Como ordenamos o array na etapa anterior, você pode ver que agora temos um array que está tanto ordenado quanto invertido.
Quando estamos trabalhando com arrays, o JavaScript nos fornece uma maneira conveniente de percorrer os itens do array com “.forEach()”. Se realmente quisermos, ainda podemos usar um loop for regular para percorrer um array. Na verdade, vamos primeiro ver como construir um loop for para percorrer um array, depois veremos como usar forEach().
// isso nos alertará 4 vezes para alimentar nosso pet for (let a = 0; a < pets.length; a++) { alert("Hora de alimentar meu pet"); }
Também podemos alcançar o mesmo resultado usando forEach.
pets.forEach(alert("Hora de alimentar meu pet"));
Quando comparamos o uso de loops for ou For each, dependendo de suas preferências e de sua situação específica, você pode preferir usar um deles em vez do outro. Em essência, ambos alcançam as mesmas saídas com estilos diferentes no código. ForEach pode ser relativamente mais fácil e economizar uma linha de código para ler e escrever, mas, no final, será sua escolha. Você não precisa fazer tal escolha agora e se apegar a ela. À medida que você escreve código, pode experimentar resolver o mesmo problema usando diferentes abordagens enquanto avança em sua jornada de programação.
Também podemos verificar se um item existe dentro de um array java. Um exemplo de uso real desse método seria se um evento privado inclui o nome de uma pessoa na lista de convidados. A implementação real é bastante direta também. Primeiro, escrevemos o nome do array, neste caso estamos trabalhando com o array pets. Em seguida, colocamos um ponto para acessar diferentes propriedades e métodos do array, depois escrevemos “includes”, abrimos e fechamos parênteses e digitamos o nome do item que queremos verificar dentro. Aqui está um exemplo que verifica um item que sabemos que existe no array:
alert(pets.includes("cachorros"));
Se também tentarmos a mesma coisa com um item que sabemos que não existe no array java, esperamos receber falso como resposta. Vamos também ver esse caso com um exemplo:
alert(pets.includes("filhote")); [/code>Como não tínhamos nenhum filhote no array pets, recebemos falso como esperávamos. No próximo tutorial, veremos outro conceito importante tanto no mundo da programação quanto no JavaScript.
Especialista em JavaScript e instrutor que orienta departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando os outros a cooperar efetivamente enquanto codificam.
Você sabe como criar um ebook? Você conhece todos os aspectos essenciais do processo de…
O marketing sustentável não é mais apenas uma das estratégias de marketing que você pode…
Recentemente, dois fenômenos surgiram no mercado de trabalho relacionados às atitudes dos funcionários e gerentes…
Como vender no Pinterest e por que você deveria fazer isso? Vender no Pinterest é…
Você é um freelancer procurando maneiras de promover seu portfólio? Hoje em dia, não apenas…
A gestão financeira digital e a contabilidade online tornaram-se cada vez mais populares nos negócios.…