Criando um código para estudo

Oi Lucas,

Para fazer seu código será necessário entender os conceitos de variáveis e de eventlistener do javascript, para fazer um código organizado vai ser preciso saber também sobre criação de classes do HTML.

Você vai precisar de uma variável, de preferência um array, para armazenar todos as possibilidades de frutas. Na sequencia você vai adicionar um eventListener para cada button.

Sintaxe básica: variável.addEventListener("onClick", funçãoASerExecutada). A Variável será o array que você criar, por exemplo:

var quantidadeFrutas = [0, 0, 0, 0, 0, 0, 0, 0]
const valorFrutas =[1, 5, 2.5, 5, 8, 5, 5, 2.5]
const nomeFrutas ["Maçã", "Abacate", "Banana", "Jaca", "Melancia", "Mamão", "Melão", "Caqui"]
const Botoes= ["btnMaca", "btnAbacate", "btnBanana", "btnJaca", "btnMelancia", "btnMamão", "btnMelão", "btnCaqui"]

for (i= 0; i< valorFrutas.length; i++){
    document.getElementById(botoes[i]).addEventListener("onClick", somaUm(quantidadeFrutas[i])
}

function somaUm(varDeArmazenamento){
varDeArmazenamento = varDeArmazenamento++;
}

Com este trecho Você vai montar o código para ficar verificando se os botões foram clicados. Porém ainda falta adicionar as IDs no HTML, faça a seguinte alteração no HTML:

<button id= "btnMaca">Maçã - R$ 1,00</button>
<button id= "btnAbacate">Abacate - R$ 5,00</button>
<button id= "btnBanana">Banana - R$ 2,50</button>
<button id= "btnJaca">Jaca - R$ 5,00</button>
<button id= "btnMelancia">Melancia- R$ 8,00</button>
<button id= "btnMamão">Mamão - R$ 5,00</button>
<button id= "btnMelão">Melão - R$ 5,00</button>
<button id= "btnCaqui">Caqui - R$ 2,50</button>

...

Fique atento pois o que o código faz é somar mais uma unidade da fruta a cada vez que o botão é clicado. Você ainda vai precisar criar o código que calcula o valor final da compra e informa ao usuário.

Amigo, muito obrigado, não quero pedir muito de você, mas eu sou iniciante então não entendi muito bem o código.

Seria muito pedir que você comentasse as linhas do código que criaste?

Por exemplo, todas as funções declaradas são Array? E mais, não me lembro como funciona o for.

Outra coisa, tem como explicar como funciona o Array?

Att, Lucas.

Oi Lucas,

Para conheceres:

Um Array é uma variável que recebe mais de um valor, sendo assim, nem toda variável é um array. Ex:

Declarando um variável normal: var fruta = "mamao" (neste caso você cria uma variável que recebe a string "mamao", string é uma variável do tipo texto e a maior características para saber que você está trabalhando com um texto são as aspas).

Declarando uma variável do tipo array: var frutas = ["mamao", "pessego", ...]. Um array é conveniente de ser usado quando você tem muitos valores que derivam de um mesmo conceito, ele ajuda a organizar o seu código e a sua maior característica são os colchetes.

O "for" é um tipo de função reservada do sistema onde ele vai executar o código da escrito entre os { }. Ele é um tipo de função de iteração assim como o while, o código é repetido enquanto uma data condição não for atingida. Sintaxe do for":

for (váriavel inicial do for e seu valor inicial; condição a ser atingida para sair do loop (também chamado de laço de repetição nos cursos); incremento da variável){ código a ser executado} Um exemplo comentado de como se faz uma leitura literal desta sintaxe:

"for": declara que se trata da função for"( i=0": a variável é a letra "i" e ela recebe o valor inciial de "0" "; i < frutas.length": enquanto o valor de "i" for menor que o comprimento do array "frutas" o código deve ser executadoi mais uma vez";i++": cada vez que o código for executado deve ser somado mais 1 no valor de "i".

Supondo então que esta linha calcule o número de itens que ele comprou, por exemplo, 5 itens.

for (i= 0; i< valorFrutas.length; i++)

Após isto, ele executará o que está dentro do for?

document.getElementById(botoes[i]).addEventListener("onClick", somaUm(quantidadeFrutas[i])

Ou, a cada loop ele executa o que está dentro do for?

Outra coisa, a função SomaUm não deve estar antes do for?

Outra coisa, coloquei o código dentro do script, mas o que aparece é a lista inicial.

Att, Lucas.

Oi Lucas,

Seguem as respostas:

Supondo então que esta linha calcule o número de itens que ele comprou, por exemplo, 5 itens.

for (i= 0; i< valorFrutas.length; i++). Após isto, ele executará o que está dentro do for? .document.getElementById(botoes[i]).addEventListener("onClick", somaUm(quantidadeFrutas[i]), ou, a cada loop ele executa o que está dentro do for?

A cada loop ele executa o código dentro do for novamente, porém como o valor de "i" muda a cada novo loop o valor que os arrays retornam muda

Outra coisa, a função SomaUm não deve estar antes do for?

Depende de como você vai conceber o código, se você declarar a função dentro do "for" ela só vai existir dentro desta função, se você declarar a função no código você consegue usar a mesma função em outras partes do código. Contudo, não faz sentido criar a função dentro do for pois a ideia de uma função é: reduzir o numero de linhas do código, tornar ele mais semântico ou ainda, proteger uma parte sensível do código. No caso do exemplo que dei, ele serve para o código ser dinâmico, pois se eu declarasse diretamente o nome e as quantidades das frutas uma futura manutenção no código seria dificultada.

Outra coisa, coloquei o código dentro do script, mas o que aparece é a lista inicial.

Não sei se entendi direito, mas o código realmente não está completo para fazer o que você falou no inicio, eu te dei a parte mais complicada, ainda falta escrever o trecho de código que vai calcular o valor final dos produtos e que vai escrever este valor no HTML. Deixei isso em aberto como um desafio para você pesquisar, tente descobrir, se não conseguir te ajudo mais adiante

Muito bem, até agora, tenho o seguinte código:

<meta charset="UTF-8">



Selecione os produtos que deseja comprar:

<button id= "btnMaca">Maçã - R$ 1,00</button>
<button id= "btnAbacate">Abacate - R$ 5,00</button>
<button id= "btnBanana">Banana - R$ 2,50</button>
<button id= "btnJaca">Jaca - R$ 5,00</button>
<button id= "btnMelancia">Melancia- R$ 8,00</button>
<button id= "btnMamão">Mamão - R$ 5,00</button>
<button id= "btnMelão">Melão - R$ 5,00</button>
<button id= "btnCaqui">Caqui - R$ 2,50</button>

<script>

var quantidadeFrutas = [0, 0, 0, 0, 0, 0, 0, 0]
const valorFrutas =[1, 5, 2.5, 5, 8, 5, 5, 2.5]
const nomeFrutas ["Maçã", "Abacate", "Banana", "Jaca", "Melancia", "Mamão", "Melão", "Caqui"]
const Botoes= ["btnMaca", "btnAbacate", "btnBanana", "btnJaca", "btnMelancia", "btnMamão", "btnMelão", "btnCaqui"]

function somaUm(varDeArmazenamento){
varDeArmazenamento = varDeArmazenamento++;
}


for (i= 0; i< valorFrutas.length; i++){
    document.getElementById(botoes[i]).addEventListener("onClick", somaUm(quantidadeFrutas[i])
}


</script>

Mas, quando abro na página, veja o que aparece, somente a lista inicial das frutas.

Att, Lucas.

Outra coisa, pelo que eu vi o for vai ser executado infinitamente, pois não há uma determinação do limite de frutas que eu vou comprar.

Outra dúvida:

document.getElementById e addEventListener são funções padrão do código?

Aguardo seu retorno, Lucas.

Oi Lucas,

Assim que tiver um tempo te repasso mais partes do código. Respondendo as perguntas mais simples primeiro:

pelo que eu vi o for vai ser executado infinitamente: o comando "for" diferente do "while" tem um numero definido de repetições, no caso deste código, ele vai repetir pelo numero de diferentes nomes de frutas que foram registradas no array "nomeFrutas", ou seja, oito repetições.

document.getElementById e addEventListener são funções padrão do código?: exato, essas são sintaxes do linguagem javascript. A primeira seleciona um objeto desejado do documento, a outra avisa que o programa deve ficar observando de algo acontece com um objeto e quando o evento acontecer uma ação deve ser executada.

Oi Lucas, me confirma se você conseue ver esta mensagem. Não consigo abrir novas conversas

Certo, estou entendendo aos poucos, a primeira explicação: se repete 8 vezes, por exemplo, se o comprador comprar duas frutas, ou seja, duas maçãs ou duas bananas, aí ultrapassa 8.

Tem que por algum botão para fechar a compra. Outra coisa, eu deixei a lista mais arrojada transformando em vertical.

<ul>
<li><button id= "btnMaca">Maçã - R$ 1,00</button></li>
<li><button id= "btnAbacate">Abacate - R$ 5,00</button></li>
<li><button id= "btnBanana">Banana - R$ 2,50</button></li>
<li><button id= "btnJaca">Jaca - R$ 5,00</button></li>
<li><button id= "btnMelancia">Melancia- R$ 8,00</button></li>
<li><button id= "btnMamão">Mamão - R$ 5,00</button></li>
<li><button id= "btnMelão">Melão - R$ 5,00</button></li>
<li><button id= "btnCaqui">Caqui - R$ 2,50</button></li>
</ul>

Agora tenho uma ideia, ao lado de cada item, uma janelinha ao lado de cada item que vai contando quantos de cada foram comprados, e por fim no final da lista um botão de Finalizar Compra.

Outra coisa, o "document.getElementById(botoes[i])" pega da variável Botoes e não nome frutas, estou certo?

Última coisa, o for:

for (i= 0; i< valorFrutas.length; i++)

o segundo elemento: i<valorFrutas,length não deve ser: i<quantidadeDeFrutas,length ?

Att, Lucas. Aguardo retorno.

Eu vou tentar entender ao máximo o que você me explicou, mas tenho uma dúvida muito objetiva:

Criar, na lista de produtos, uma janela ao lado de cada item, que, quando clica-se no item, ele contabiliza quantos itens o cliente comprou, depois, abaixo da lista, um botão de finalizar compras, como faço isto?

Att, Lucas.

Up, espero resposta.