Exercícios JavaScript (Parte 4) - Curso JavaScript

Mais uma aula de exercício chegando aqui dentro de seu curso de JavaScript e se você ainda não viu nenhuma aula de exercício está pensando: "Essa eu posso pular porque ele não vai ensinar nada de novo. " Aí é que você se engana, porque nas aulas de exercício a gente tem um monte de coisa pra fazer, então, antes de vocês desdenhar dessas aulas tenta responder essas quatro perguntas aqui pra mim: em primeiro lugar você já aprendeu a usar direito a extensão Watch in Chrome dentro do Visual Studio Code? e além do Watch in Chrome você aprendeu a utilizar o modo de depuração?

Aquele inseto que aparece do lado esquerdo, eu te ensinei isso durante a aula 14. Você por acaso já fez todos os testes com as estruturas while, do. .

while e for? Que são as três estruturas de laço ou as três estruturas de repetição dentro do JavaScript. E por último você quer aprender um pouco mais sobre como manipular dados em controles HTML utilizando JavaScript?

Pois é exatamente para isso, para resolver todas as questões que estão aparecendo aqui do lado, que serve essas aulas de exercícios. Então sente se confortavelmente, abra todo o seu ambiente e vamos começar a praticar! Legendas: Rayssa Victoria Olá pequeno gafanhoto!

Seja bem vindo a mais um vídeo, mais um importante vídeo aqui do seu curso em vídeo de JavaScript, totalmente patrocinado pelo Google. O meu nome é Gustavo Guanabara, eu sou professor, e mais uma vez chegou a nossa hora de praticar, colocar tudo aquilo que a gente aprendeu em prática é tão importante, e eu diria até mais importante, do que simplesmente assistir aulas. E você pode mais uma vez pensar no cara mais top do esporte que você mais gosta, você acha que ele ficou no esporte lendo sobre esporte ou assistindo vídeos no Youtube sobre esporte?

Ou ele chegou lá dia após dia e foi treinando, foi praticando? Não precisa ser nem muito inteligente para saber a resposta disso, qualquer pessoa que ficou boa em alguma coisa, não foi por que ela assistiu um milhão de vídeos, foi porque ela treinou, e para incentivar você assistir esse tipo de vídeo a gente sempre adiciona coisas novas, dentro dessas aulas, para que tenha sempre um conteúdo extra para você aprender. Esse conteúdo extra faz parte sim do curso então, infelizmente, você vai ter que sim, que assistir todos os vídeos, mas vai por mim, lá no final você vai me agradecer muito por isso.

E se você se lembra lá na aula 12, na verdade depois da aula 12, nós fizemos alguns exercícios e criamos um site modelo, criamos um modelo bem simples, que está sendo montado aqui do lado, onde a gente tem os componentes básicos de um site minimamente bonitinho e que nos atenda para criar coisas em JavaScript e unir as coisas com HTML e CSS basicamente, esse modelo aqui do lado, ele tem alguns componentes como o corpo, uma área de cabeçalho, uma section no meio, a área de rodapé, um footer e na section, no meio, eu tenho duas divs uma pra gente colocar um formulário, componentes interativos e a div de baixo para mostrar os resultados. Na verdade a gente já criou esses documentos nos exercícios pós aula 12 e vou te convidar agora para abrir o Visual Studio Code e pegar os arquivos que a gente criou pós aula 12 e reaproveitar aqui, nos vídeos pós aula 14 Então olha só, em primeiro lugar vamos abrir o Visual Studio Code, com aqueles arquivos, vou até maximizar ele, então eu já tenho aqui, fechar essa janela de Welcome. Eu tenho aqui, durante a aula 12 exercícios a gente criou o exercício 14, o exercício 15 e o modelo, vamos fazer o seguinte, clica em modelo, botão direito, copy ou selecione o modelo e pressiona Ctrl c.

Nós vamos agora criar a pasta de aula 14ex, exercício, botão direito em uma área livre, new folder e nós vamos colocar aula 14ex, que é o exercío da aula 14. Vou colocar o botão direito em cima de aula 14ex e vamos colocar em paste ou control v, agora eu tenho o modelo aqui dentro também. Eu tenho exercício 14 e o exercício 15, nós vamos fazer o seguinte, esse modelo que é aqueles documentos limpos que a gente tem, nós vamos fazer o seguinte, eu vou selecionar o modelo da aula 14, vou dar Ctrl c, Ctrl V, ele vai criar um modelo.

1 . Eu tinha dentro da aula 12 o exercício 14 e 15, então eu vou criar agora, esse daqui, vou renomear, botão direito rename ou aperta F2 e nós vamos criar o exercício 016, esse exercício 016 eu posso brincar à vontade e fazer o nosso exercício. Também vou fazer o seguinte, vou pegar esse 016 que a gente acabou de criar Ctrl c Ctrl v e ele já vai criar o exercício 17, que são os dois exercícios que a gente vai precisar para essas aulas.

E nesse exato momento eu vou te mostrar os exercícios 16 e 17 funcionando no meu computador e depois de ver eles funcionando chegou a sua hora de fazer eles funcionarem, dá uma conferida aí nos exercícios que eu preparei pra você. O primeiro exercício é bem simples nós vamos colocar um número aqui, por exemplo, 5 o número de fim, sei lá, 12 e o passo 2. Basicamente ele vai contar de 5 até 12 pulando de dois em dois.

Quando eu clicar em contar, ele está aqui preparando contagem quando eu clicar em contar ele vai contar de 5 a 12, aqui no caso pulando de 2 em 2, o próximo já passaria de 12, seria o 13, ele fez 5, 7, 9, 11 e banderinha. Você percebe aqui que utilizei emojis na tela, dá pra fazer isso em JavaScript, como você faz? Eu vou te ensinar na resolução desses exercícios, como eu disse exercício não é pra você pular, é para você aprender coisas novas, então, eu estou deixando coisas novas para aprender aqui, por exemplo se eu contar de 0 a 10 pulando de 1 em 1, ele vai fazer de 0 a 10 pulando de 1 em 1, está com 0, 1, 2, 3, 4 e assim sucessivamente.

Se por acaso deixar uma caixa vazia, por exemplo, não tem início tem como não ter início, então ele vai colocar "Impossível contar. " Viu? Já fiz uma pequena validação aqui dos formulários E outra coisa que eu posso fazer de 1 à 10, pulando de 0 em 0, não tem como eu pular de 0 em 0, então na hora que contar ele vai dizer "Passo inválido considerando passo 1.

" Então ele vai ignorar o passo 0 e vai colocar passo 1 e aí ele faz a contagem para a gente Então esse é o primeiro exercício a contagem é simples, o exercício é bem simples, na verdade ele vai ficar um pouquinho mais longo por conta dessas validações que estou fazendo não pode deixar a caixa vazia, não pode ser passo 0, isso vai dar um trabalho e outro trabalho que você vai ter que dar uma pesquisada ou dar uma olhada na resolução é como é que eu mostro emoji na tela utilizando JavaScript, não é muito difícil não, é bem tranquilo na verdade, esse é o primeiro exercício, vamos para o próximo. O próximo exercício também é bem clássica para mostrar uma tabuada dentro do HTML, eu tenho aqui um controle de caixa de texto normal, onde eu posso escolher um número, por exemplo 8, e aqui embaixo eu tenho um select é um select, é uma lista na verdade, em HTML, você tem também o curso de HTML aqui em cima da minha cabeça, a gente ensina tudo, se você não sabe HTML não tem grandes problemas não, você aprende JavaScript a gente vai dando as sequências aqui direito dos comandos, mas também é importante que você saiba HTML já completo no canal, bem antigo na verdade, a imagem está bem diferente eu estou bem diferente, mas o curso também atualizado ainda. Vou colocar tabuada de 8 e gerar tabuada, ele me mostra tabuada de 8 está vendo?

Eu consigo selecionar os itens aqui e dentro de uma tabuada, resolvi fazer uma coisa um pouco diferente este exercício vai ficar um pouco menor do que o outro, mas eu considerei ele vindo depois do anterior, que é o da contagem, por conta dessa manipulação de elementos em HTML que dá pra fazer. Outra coisa, aqui nesse caso, eu posso colocar a 0 sem problema por que existe a tabuada de 0, posso colocar números negativos, sem problema nenhum, oque não pode é deixar vazio se eu deixar vazio vai dizer: "Por favor digite um número. " Não tem como não digitar um número eu preciso ter um número para mostrar tabuada a dele.

E essa é a sua missão pequeno gafanhoto, a ideia é você resolver esses exercícios Por conta própria sem a minha ajuda, se por acaso você não conseguir não tem problema, existem os próximos vídeos que são a resolução respectivamente desses dois exercícios, mas o mais importante, você precisa fazer esses exercícios, você precisa provar para você mesmo que é capaz de resolver esses desafios que eu acabei de fazer pra você e não adianta você só assistir o vídeo e só porque você entendeu, considerar que você já sabe fazer, você precisa colocar a mão na massa e fazer. Fica a dica, na verdade oque eu recomendo agora é você dar uma pausa, abrir o seu Visual Studio Code, tentar fazer os seus exercícios baseados nos modelos que a gente já copiou e caso você não consiga uma determinada funcionalidade por exemplo o da contagem, só não consegui colocar emoji vai lá e assistir o próximo vídeo só para colocar o emoji, oque importa é você queimar a cuca um pouco para tentar resolver porque é assim que a gente aprende a programar, na verdade a gente já combinou, a gente só aprende a fazer as coisas praticando, não é assistindo vídeo, não é lendo matéria, não é lendo o livro, a gente só aprende quando a gente coloca a mão na massa e coloca pra funcionar. Viu os exercícios funcionando?

Entendeu qual é a proposta de cada um deles? Pois agora chegou a sua hora, chegou a sua hora de provar pra você mesmo, pra você mesma, você é capaz de criar esses exercícios, eles precisam de um conhecimento prévio de HTML e CSS, isso é bem verdade, mas se você der uma pesquisada, der uma esforçada, você consegue fazer. E se por acaso você tiver qualquer problema na resolução de qualquer um desses exercícios não tem problema nenhum, a resposta estão nos próximos dois vídeos desse curso então você não perde nada, inclusive você vai aprender a utilizar essas funcionalidades extras que a gente viu acontecendo, mas eu recomendo fortemente que antes de você ver a resposta e só de assistir fazendo você considere que "Está aí, eu entendi.

" Se eu entendi eu já sei fazer e infelizmente não é assim que as coisas funcionam, infelizmente mesmo, se você só assistir os vídeos de eu fazendo esses exercícios você simplesmente está comprovando que eu sei fazer esses exercícios e não é porque você entendeu os comandos que eu fiz que você já sabe fazer, é preciso colocar a mão na massa e fazer sua própria solução, pode ser até baseada na minha não tem nada de errado com isso, principalmente quando a gente está começando, mas faça a sua própria solução, é muito importante isso. Por um momento eu me despeço por aqui pausa a visualização de qualquer aula desse curso, abre o seu Visual Studio Code, abre o seu Google Chrome e tenta fazer, por você mesmo, cada um dos exercícios propostos agora por mim e se por acaso você precisar de alguma ajuda conta com a gente, porque os próximos vídeos estão aí exatamente para isso. Um grande abraço, se você ainda não se inscreveu no canal se inscreve, deixa ele aquele like já para fortalecer em forma de agradecimento pela nossa ajuda e a gente se vê já já.