Exercícios JavaScript (Parte 6) - Curso JavaScript

Vamos fazer alguns exercícios de JavaScript? Chegou a hora de provar a si mesmo que todo o seu esforço está valendo a pena até aqui. Quando aprendemos e praticamos, solicitamos os nossos conhecimentos adquiridos. Então vamos lá! Não pule esse vídeo e faça todas as atividades propostas em JavaScript.

Curso em Vídeo

Patrocínio

#CursoemVideo #JavaScript #EcmaScript #MóduloE #Exercício06

[carolbezerra]

Não me esforcei tanto no exercício anterior, fiz só 5%, quando vi a solução fiquei com a sensação q se tivesse tentado teria conseguido (ou pelo menos chegava perto). Aí o Guanabara disse q quem ta começando não tem q ganhar tempo, tem que ganhar experiência. FAZ SENTIDO! Me dediquei nesse, entendendo o problema e olhando as anotações. Consegui 90%! Sensação maravilhosa!!

[esteroliveira]

Tenho grande dificuldade mas não irei desistir, pode ser difícil as vezes.
Mas não há glória em coisas fáceis, caminhos difíceis são os que mais nos trazem grandeza no final!
Não desistam.

[EricAmbiel]

Pode ser usado o atributo .valueAsNumber ao inves de somente .value ao pegar o valor do elemento, assim não é preciso usar as conversões Number nas variáveis.

[HamiltonGJr]

O conceito final de limpar o select me inspirou a incluir no projeto um botão Limpar pra limpar o select e o campo numérico. Ficou até bacana...

[kimnog]

Muito feliz! Comecei a estudar programação em janeiro de 2022, estudei um pouco de HTML, CSS e agora estou estudando JavaScript. Pela primeira vez consegui fazer um exercício 100% sozinho. Obrigado, Guanabara! Você é um grande professor!

[Thwy]

Eu fiz de um jeito que ficou mais resumido ainda! (As IDs que eu usei são diferentes das do vídeo)

function go(){
== 0){
alert('Por favor, insira um número')
}else{
= ``
var n =
for(let c = 1;c <= 10;c++){
let mult =
mult.text = `${n} * ${c} = ${n*c}`
mult.value = `tab${c}`

}
}
}

[regis]

Aos 5:15 eu percebi o erro do Guanabara e pensei "ué, como assim? xD"
Sinal de que estou entendendo alguma coisa xDDD
Ótima aula, como sempre!

[bibigamino]

Consegui resolver com o for, mas não sabia nem por onde começar o select! Aprendi mais uma coisa! Outra dificuldade que eu tive foi na verificação do campo vazio. Eu tentei colocar como num == null ou num == undefined, mas não funcionavam e eu não queria colocar zero porque na proposta do exercício era pra poder fazer com zero. Agora entendi como se faz usando o num.value.length e faz sentido!

[henriquepicanco]

Rapaz, comparado ao exercício anterior, este me foi bem tranquilo!

Eu tenho feito o curso de HTML5 e CSS3 em paralelo a este, e ainda não cheguei a caixas de seleção como esta usada no exercício de hoje. Então, ao invés de usar uma caixa de seleção, eu coloquei cada novo resultado numa nova linha com <p></p>. FUNCIONOU 100%!

É isso, tenham calma, paciência e vai se atentando a como o programa deve ser executado, pois uma hora você encontra a resposta para isso!

Meu JavaScript ficou assim (os elementos HTML também tiveram IDs diferentes do que o Guanabara usou):

````javascript

let número =
let botão =
let resultado =

botão.addEventListener("click", contar);

function contar() {
resultado.innerHTML = ``;

if (número.value.length == 0) {
// Se "número" for zero
resultado.innerHTML = `Por favor, digite um número acima!`;
} else {
let n = Number(número.value);
let i = 1;
let f = 10;

// Se "número" não for zero
while (i <= f) {
// "resultado" entra o formato "número x (i+1) = resultado"
let item =
item.text = `${n} x ${i} = ${n * i}`;
item.value = `tab-${i}`;
resultado.appendChild(item);
i++;
}
}
}


````

[gcyt]

Para esse exercício não usei o createElement, fiz com (tab.innerHTML += `<option> valor <\option>`) e funciona bem também

[marcosmedeiros]

Confesso que depois desse exercício e do anterior acabei me desmotivando, mas não vou desistir! Vou estudar muito!

[ademirjunior]

Aí, sério, no primeiro exercício eu pequei em ver algumas resoluções sem antes tentar *mesmo* até o final, mas nesse, meu amigo, não ter desistido e ter ido até o fim foi a melhor coisa que eu pude escolher! Que satisfação cara

[GabrielRodrigues-rgxx]

O tanto de dica que tem nos comentários é surreal de tão útil

[vladzzer]

Galera, recomendo fazer com as outras repetições também (do while e for), assim vocês treinam todas!

[henriquemafort]

eu tive dificuldade nos codigos não pelo JavaScript e sim pelo HTML e CSS. Tanto que eu fiz esse mesmo codigo em portugol e foi muito tranquilo. Depois que terminar esse curso vou iniciar meu curso em HTML e CSS

[murillo]

UMA DICA PARA O PESSOAL MAIS INICIANTE:
aprendam a usar totalmente as ferramentas do vscode! todos os atalhos de teclados úteis e tudo o mais, principalmente a debugação que o Guanabara ensinou. Vai ajudar muito!

[notesala]

Ótima aula, obrigado Guanabara. Depois de muitas horas tentando resolver o exercício, finalmente consegui. Antes eu tinha feito sem repetição, tinha dado mais de 40 linhas só para formar as tabuadas, depois peguei uma a ideia de repetição no Chatgpt e consegui implementar no meu código. Outra coisa, eu não usei o appendchild, eu usei innerhtml para escrever dentro do select.

[marinaldopassos]

Pra quem quiser dar uma melhorada na parte visual da tabuada, deixo meus códigos que adicionei no documento CSS:

body {
background: rgba(111, 1, 255, 0.39);
font: normal 15pt Arial;
}

header {
text-align: center;

}

section {
background: white;
border-radius: 15px;
padding: 10px;
width: 500px;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.473);
}
div {
text-align: justify;
}

p {
text-align: center;
}

#seltab {
text-align: center;
border: none;
overflow: hidden;
margin-left: 175px;
}

option {
padding: 15px;
}

footer {
text-align: center;
font-style: italic;
}
body {
background: rgba(111, 1, 255, 0.39);
font: normal 15pt Arial;
}

header {
text-align: center;

}

section {
background: white;
border-radius: 15px;
padding: 10px;
width: 500px;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.473);
}
div {
text-align: justify;
}

p {
text-align: center;
}

#seltab {
text-align: center;
border: none;
overflow: hidden;
margin-left: 175px;
}

option {
padding: 15px;
}

footer {
text-align: center;
font-style: italic;
}

[sebastyann]

Esse exercício eu apanhei no <select> tive que ver aparte do mesmo. Depois também que vi percebi que era manha. Apaguei tudo e refiz do zero 3 vezes só para fixa na cabeça 😊😊 Obrigado mais uma vez toda equipe do Curso em Vídeo 👏

[rodrigo-oliveira-]

Quem quiser fazer com for, pode colocar a variável do número da tabuada (nesse vídeo o professor chama de c) dentro do início do for e fazer assim:

for (let c = 1 ; c <= 10 ; c++) {
let item =
item.text = ${n} x ${c} = ${n*c}
item.value = `tab${c}`
tab.appendChild(item)
}

Também comendo ler as dicas de css que deram nos comentários aqui mesmo!