O exercício da vez, o desafio que a gente vai resolver agora, é um desafio bem clássico que é o da tabuada. Eu vou colocar um número qualquer. .
. 5. "Gerar tabuada".
E ele gera a tabuada de 5 dentro de um select, um controle diferente no HTML. Inclusive, consigo selecionar os itens entre outras coisas. Se por acaso, eu trocar o valor para 7, ele vai apagar a tabuada de 5 e vai colocar a tabuada de 7.
E se, por acaso, eu deixar vazio ele manda: "Por favor digite um número". Não consigo gerar uma tabuada se você não digitar o Está vendo? Tabuada de 8 e me ele mostra.
Meu código está funcionando corretamente. Você conseguiu fazer esse exercício na sua casa? Sentiu alguma dificuldade na hora de colocar os elementos dentro de um select?
Pois as suas dúvidas estão prestes a terminar, porque a gente está chegando com a resolução desse exercício Olá, pequeno gafanhoto! Seja bem-vindo à resolução de mais um exercício prático do seu Curso em Vídeo de JavaScript totalmente patrocinado pelo Google. O meu nome é Gustavo Guanabara, eu sou professor.
E sobre o exercício que a gente vai resolver agora, tem gente que pensa que ele é mais difícil que o anterior. Mas, na verdade, ele consome menos linhas e é bem mais tranquilo. Porém, ele tem uma grande dificuldade, que é: Como eu vou adicionar elementos dentro de um controle HTML?
Mas não se preocupe. Eu vim aqui, justamente, para mostrar a solução, mas não esquece de abrir seu Visual Studio Code e fazer o código junto comigo Então, já estou com o código aberto. Basicamente, tenho a minha pasta do exercício 17 e abri os três arquivos do exercício que vieram do modelo.
Se você não viu isso acontecer, como eu fiz isso, você precisa dar uma olhada no vídeo da primeira parte desses exercícios. E na verdade, você precisa ver todos os vídeos dessa playlist. Ela é um curso completo e sempre que você quiser, você pode acessar aqui em cima no "i" de interatividade.
Na verdade, a gente sempre coloca, além do curso JavaScript, outros cursos, outras aulas importantes que você precisa assistir. E, aprender a programar é isso. É você praticar constantemente, é você ter o maior número de fontes de consulta, e então, você vai poder encher o peito e dizer: "Eu sei programar em JavaScript" Mas, vamos parar de papo e vamos para cá.
Eu já estou com o Watch in Chrome funcionando. Então, tecnicamente, se eu digitar o título e botar "Título 11111", ele já atualizou aqui. Está vendo?
Ele está sendo atualizado. Ás vezes, o formulário não atualiza sozinho, mas a gente tem o refresh ou a tecla F5 para fazer. Então, vamos lá.
Basicamente, o que a gente vai fazer. . .
Vamos colocar aqui "Tabuada" e aqui no título também, "Tabuada". Aqui no "Testando. .
. ", eu vou ter o meu formulário, que é onde vai aparecer para você escolher qual é o número da tabuada, e aqui vai aparecer a tabuada em si. Vamos colocar aqui.
Vou fazer um parágrafo e nesse parágrafo eu vou ter: Número: < input type= "number" name= "num" id= "txtn"> O input vai ser do tipo number, o name vai ser "num" e o id( que vai ser usado no JavaScript), será "txtn", que vai vir lá do formulário. Então, já está aqui. Vou fazer também um botão, do lado mesmo, dentro do parágrafo.
Vou criar um botão, um input do tipo button, e aqui dentro vou colocar "Gerar Tabuada" Certo? Então, você vai digitar um número aqui e gerar tabuada. Aqui embaixo, eu vou ter um select.
Vou botar o select. O name dele vai ser "tabuada" e o id vai ser "seltab". Então, é o select da tabuada.
Vou deixar esse select vazio. Está vendo? Ele está com o select vazio.
Logo, a gente vai ajeitar ele. Já estou aqui com o CSS carregado aqui em cima no estilo. css, que é esse documento que está aberto e que a gente nem vai mexer.
E também estou com o JavaScript aberto. Então, o script. js está aqui em cima, que é o que a gente vai fazer.
Basicamente, quando clicar eu nesse botão de gerar tabuada, eu vou chamar OnClick= "tabuada( )", que chamar a função tabuada. Vamos vir aqui no JavaScript e vamos criar essa função. .
. function tabuada( ) { } Já estou com a minha função criada. A primeira coisa que vou ter que fazer é pegar um número.
Então, vou colocar dentro das chaves, o meu número vai ser: let num= document. getElementById('txtn') Peguei o num. Também vou pegar a minha área de tabuada.
Então, eu vou fazer: let tab= document. getElementById('seltab'). Estou esquecendo os nomes que eu acabei de colocar.
Então, já peguei o txtn, que é um número e já peguei o seltab. Primeira coisa que eu também vou fazer, é pegar esse número e converter: let n= Number(num. value).
Essa variável n vai ser o número que o cara digitou e eu só vou pegar isso, se por acaso ela estiver cheia. Então, a gente já viu isso. Vamos fazer assim: if (num.
value. length == 0){ }. Eu pego esse número e leio.
else { window. alert (' Por favor, digite um número! ') } Ok?
Vamos salvar e atualizar. Se eu digitar o número 3, gerar tabuada, ele deu um erro. Oh meu deus, mas que burrico!
Isso vai acontecer se for igual a zero. No senão que ele pega o número. Mas que inteligência a minha.
Se o número estiver vazio: " Por favor, digite um número". Senão, ele pega o número. Vamos atualizar, vou digitar um número, 8 e ok.
Ele vai a gerar tabuada, se eu deixar vazio, aparece: " Por favor, digite um número". Agora nós vamos fazer a tabuada. Para fazer a tabuada, a gente pode utilizar tanto o for quanto o while.
No exercício anterior, a gente fez usando for. Nesse, eu vou utilizar o while. Mas, eu, na prática, no dia a dia, também utilizaria o for.
Mas vamos fazer com while. Vou criar uma variável c= 1 e a tabuada vai de 1 até 10. Então, faremos o seguinte: while (c <= 10) { } Ele vai fazer o isso aqui.
E o que eu vou fazer? Eu tenho que adicionar elemento no meu select. Para eu criar elemento, qualquer que seja, dentro de JavaScript, eu vou fazer o seguinte, vou criar uma variável chamada item.
let item = document. createElement('option') Então, estou criando um elemento option, porque dentro do select, para eu colocar opções, eu tenho que ter options. Quer ver?
Eu vou fazer no HTML, dentro do select. Se eu quiser opções, eu vou colocar assim: <option>Valor1</option> Olhe, ele cria um elemento aqui dentro. Se eu botar outro, <option>Valor2</option> Olhe, ele tem "Valor1" e "Valor2".
Certo? Outra coisa que eu vou fazer é, pra não precisar clicar, vou vir aqui em cima no select e vou botar size = "10", para ele ficar grande. Botei 10, porque a tabuada tem 10 elementos.
Outra coisa que é importante, mais para o PHP, para uma linguagem Server-side, é eu colocar um value. value = "v1" para o primeiro value = "v2" para o segundo Se eu selecionar esse aqui e mandar o formulário, ele vai passar o v1, que é o valor desse item que foi selecionado. Então, é importante que tenha value também.
Só que eu não quero esse option assim, eu vou querer criar o option de forma dinâmica. Então, eu vou fazer isso aqui, criei um elemento option, que é como se eu tivesse vindo no HTML e criando um option. É como se tivesse feito isso aqui, está vendo?
Ele já criou com o value aqui. Então, eu preciso de um option e preciso de um value. Basicamente, o que eu vou fazer é, criar um option dessa maneira.
E, vou fazer a parte de dentro do option que vai ser item. text = `${ } x $ { } = $ { }` Use crase, tem que ser crase para eu fazer isso: um número vezes outro número é igual ao resultado da multiplicação e eu tenho o número que eu quero criar tabuada, que é num. Então, eu vou colocar, me mostre o num aqui dentro, depois me mostre o contador para ele fazer num x 1, numx 2, num x 3, e assim sucessivamente, e aqui eu vou colocar o resultado da multiplicação.
E eu posso utilizar, nessa Template string, num*c sem problema. Ele vai fazer a conta, número * c, e vai colocar na tela. Basicamente, ele não tá aparecendo.
Para ele fazer isso aparecer, eu vou ter que botar o meu tab, que é a minha tabuada, que é exatamente esse elemento aqui. Então, eu vou adicionar um elemento filho, que vai ser o item. tab.
ppendChild( ). Vamos salvar, atualizar Ele pede o número, eu quero o número 5. Então, ele vai gerar.
Ele deu uma travada porque esqueci de fazer c++. Por isso, eu gosto mais do for. Está vendo?
Eu tenho que incrementar o valor de 'c' para ele partir para 2,3 e assim sucessivamente. Ele travou a minha execução. Vamos apenas esperar um pouco.
Antes, vamos salvar tudo que está aberto por salvar e vamos atualizar. Vamos gerar tabuada, tabuada de 6. " Gerar tabuada".
É porque eu mandei mostrar o num, não é o num. O num é um texto, está vendo? Na verdade, eu quero o valor que eu tenho aqui, que é a variável n.
item. text = `${n } x $ {c } = $ {n*c }` Salvando, vamos atualizar. Está vendo?
esse tipo de erro é comum, acontece. . .
5, ele gerou a tabuada de 5. 5x1 = 5, 5x2 = 10, 5x3 =15 e assim sucessivamente. Só que esse nosso programa tem um pequeno problema: mostrei a tabuada de 5, se eu mostrar a tabuada de 8, veja o que ele fez, ele mantém a de 5 e a de 8 parou aqui embaixo.
Então, eu teria que limpar o select antes para que a gente possa trabalhar. Então, basicamente, para limpar é muito simples. Eu vou fazer isso: tab.
innerHTML = ' ' Isto é, antes começar a mostrar a tabuada, eu limpo a minha área de tabuada. Então, vamos atualizar, 5, mostrou a tabuada de 5. Eu boto 9 e ele vai limpar e mostrar a tabuada de 9, sem problema nenhum E a última coisa que a gente vai fazer para ficar menos feio (perceba que isso está horroroso), é colocar uma mensagem aqui dentro.
Então, eu vou criar um option e vou até tirar o velho, porque não faz sentido aqui. E vou colocar o seguinte: " Digite um número acima". Certo?
Então, está lá. Quando você digitar o número acima, ele mostra a tabuada. Ele mostra até a tabuada de 0.
Existe a tabuada de 0 e existe também a tabuada de número negativo. Também funciona, sem problema nenhum. Tabuada de 10.
. . Então, nosso programa está funcionando, falta só uma coisa, porque os options também tem que ter values.
Então, o item. text é esse e( você só vai ter problema com isso quando você for aprender outras linguagens, como PHP, por exemplo) eu tenho item. value `Tab${c}`, porque ele vai chamar tab1, tab2, tab3, tab4 Então, por exemplo, colocar a tabuada de 6, está aqui, selecionando a primeira, é tab1.
Esse, é tab2. Esse, tab3 e assim sucessivamente. Esse é o tab10 por conta dessa linha, item.
value. . .
Isso, para o JavaScript t não faz tanto sentido. Mas, outras linguagens vão fazer uso dessa possibilidade pra você poder saber qual foi o item que foi selecionado. E se por acaso eu deixar vazio aqui, ele me diz: "Por favor digite um número".
Porque a tabuada precisa de um número para ser mostrado. Viu o código que está do lado? Esse código é bem simples, bem tranquilo, bem menor, inclusive, que o exercício anterior.
Mas o exercício anterior, a gente julgou um pouco mais fácil, a gente só teve mais possibilidades de falhas e isso fez com que o nosso código crescesse bastante. Mas a resposta desse exercício está aqui do meu lado Você teve alguma dificuldade para colocar esse código para funcionar? Se teve dificuldade durante a prática e você sozinho conseguiu entender agora, eu deixo mais uma vez o meu conselho de sempre: não adianta você só ver eu fazendo e achar que você conseguiu.
E outra coisa, também não é ideal você ir fazendo junto comigo, copiando o meu código. O ideal mesmo, é você ver o vídeo e ir fazendo comigo. Depois, você dá uma parada e tenta criar sozinho, sem olhar de lugar nenhum com a experiência que você obteve durante o vídeo.
Eu me despeço por aqui, mas a gente já tem um encontro marcado no próximo vídeo. O curso já está completo, disponível aqui dentro do YouTube, graças ao nosso patrocinador, o Google. Pratica o seu exercício, faz ele funcionar e a gente se vê no próximo vídeo.
Um grande abraço e até a próxima.
