Professional Documents
Culture Documents
ANdROId SEM LIMITES
ANdROId SEM LIMITES
Aula 1: https://www.youtube.com/watch?v=MJtVTpcEFwM
Aula 2: https://www.youtube.com/watch?v=XPb5kiR1Siw
Aula 3: https://www.youtube.com/watch?v=BUXwoRjkVes
Aula 4: https://www.youtube.com/watch?v=tIAqwte-piI
Aula 5: https://www.youtube.com/watch?v=SHjMR11kwlw
Aula 6: https://www.youtube.com/watch?v=-SOIAnfCZwo
Aula 7: https://www.youtube.com/watch?v=TJD3ug0Xd0U
Aula 8: https://www.youtube.com/watch?v=9dJMLUNk3K8
Aula 9: https://www.youtube.com/watch?v=-ptFKBP7Ct8
Aula 10: https://www.youtube.com/watch?v=lj5eNwkSGE0
MATERIAL
AULA 3
• Dicas pra usar o Codepen:
https://www.alura.com.br/artigos/codepen-o-que-e-e-como-usar
• Ajuda pra o exercício: https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Element/br
AULA 5
• Vídeo ajudando a responder o exercício:
https://www.youtube.com/watch?v=pZrAG27KZSg&feature=youtu.
be
• Código da Pokébola:
https://codepen.io/AndroidSemLimites/pen/vYNNNyN
AULA 6
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/MWaaomB
AULA 7
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/KKddvmY
AULA 8
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/GRppMva
• Aprenda um pouco mais: https://www.alura.com.br/artigos/criando-
uma-mascara-de-telefone-com-javascript
AULA 9
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/jObbaLZ
AULA 10
• Codepen base pra acompanhar a aula:
https://codepen.io/AndroidSemLimites/pen/MWaaQQm
Aula 1: Seu primeiro código JavaScript
Eu e toda equipe bolamos essa primeira aula para você não precisar instalar nada. Seu
primeiro código será em JavaScript, sem sair do seu navegador (o tal do browser)!
Desa o
Para esta aula, deixamos como desafio você tentar fazer o cálculo de batimentos
cárdiacos e mandar isso no canal! Isto é: dada a sua idade, quantas vezes seu coração já
bateu? Sim, é uma estimativa :).
Na aula de hoje conhecemos o alert ele mostra uma caixa de diálogo de aviso com o que
escrevemos e um botão OK. Então para mostrar um cálculo de multiplicação nessa caixa
podemos escrever o seguinte código no nosso navegador
alert(4*4)
alert(3 + 3)
alert(4 - 3)
Para fazer a calculo com várias operações juntas precisamos utilizar parênteses para
separar cada uma delas.
alert((((3 * 3 ) * 3) * 3))
A resposta aqui é 81
Também podemos colocar mensagens junto com o resultado da operação que estamos
fazendo, para isso precisamos usar as áspas " " para o navegador entender que estamos
passando um texo: "Ola meu nome é Paulo e eu tenho " e para juntar o texto e a
operação para descobrir a idade o sinal de adição +
A mensagem exibida aqui é Olá meu nome é Paulo e eu tenho 20 anos. Agora que já
sabemos fazer operações vamos ao desafio.
Agora que sabemos as batidas por hora, conseguimos saber quantas batidas ele da por
dia já que sabemos quantas horas tem o dia.
Mais exercícios
Maria foi à padaria e comprou 19 balas, depois voltou à padaria e comprou mais 45.
Quantas balas Maria tem agora?
Exercício 4 - Área:
https://codepen.io/AndroidSemLimites/pen/RwWWPBX
Aula 2: Capturando informações e variáveis
Você pediu e segue uma aula mais longa e com mais desafios da #QuarentenaDev!
O IMC é calculado dividindo o peso pela altura elevada ao quadrado. Será que
você consegue descobrir qual o seu IMC?
Guilherme tem 30 anos e tem 3 irmãs, a Carol que tem 20 anos, Márcia que tem 15,
Patrícia que tem 10 anos. Qual a média de idade da família do Guilherme?
Exercício 1 - IMC:
https://codepen.io/AndroidSemLimites/pen/YzyyXRo
Oi
como
você
está
pulando
linha
?
O carro da Amanda faz 12km/l, ela viajou por 10 horas a uma velocidade de 81km/h.
Quantos de litros combustível foram necessários para realizar essa viagem?
Exercício:
https://codepen.io/AndroidSemLimites/pen/JjYYYdV
Aula 5: HTML e CSS
Desa o da Vanessa
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
https://developer.mozilla.org/pt-BR/docs/Web/CSS
https://developer.mozilla.org/pt-BR/docs/Web/HTML
Desa o do Art
Ao invés de deixar apenas o fundo branco com a letras pretas, usar o document.write
junto com css para estilizar a calculadora da aula passada da maneira que você quiser!!
Mais um exercício!
Aprendemos algumas tags HTML e como estilizar essas tags usando css. Será que você é
capaz de reproduzir o seguinte layout?
Vamos ter que fazer algumas pesquisas e interagir bastante no discord para resolver esse
problema, vamos lá?
Dicas:
Temos links no HTML, quando eu clicar nele vou ir direto para o codepen onde você
criou o exercicio.
Desa o do Mário
Será que você consegue mudar a cor da pokebola de vermelho para roxo???
Cada tag é uma caixa.<div></div> é a nossa caixa e podemos aplicar efeitos nela. Um
deles é o efeito de sombra com a propriedade box shadow.
div {
box-shadow: tamanho tamanho tamanho tamanho cor
}
div {
0px 0px 0px 0px green;
}
Essa propriedade permite que várias sombras possam ser declaradas para a mesma tag.
Não é por ser sombra que ela tem que ser esfumaçada e transparente, podemos fazer
sombras nítidas e sólidas!
Desa o master!!
Se você conseguiu trocar a cor da pokebola, será que você consegue criar a sua?
Por último, aqui está o material sobre vscode que o mário mostrou no video
RESPOSTAS DOS EXERCÍCIOS DA
AULA 5
Exercício 1 - Calculadora:
https://codepen.io/AndroidSemLimites/pen/mdeeemE
Exercício 2 - Layout:
https://codepen.io/AndroidSemLimites/pen/RwWWWVa
Exercício 3 - Pokebola:
https://codepen.io/AndroidSemLimites/pen/gOaaaWL
Desafio Master:
https://codepen.io/AndroidSemLimites/pen/OJyyymp
Aula 6: Verdadeiro ou Falso
Seja bem-vindo e bem-vinda à sexta aula da #QuarentenaDev! Sabe aquele programa que
te mostra um resultado baseado na sua resposta? Então chegou a hora de aprender como
fazer!!
Desa os da aula6
Utilizando a instrução if você consegue dizer para o usuário qual é o mês baseado no
número de 1 a 12 que ele escolher.
Na aula2 tem uma tabela dizendo qual o significado do resultado do imc. Depois de
calcular, você consegue exibir o significado do IMC da pessoa?
Links extras
Exercício 1 - Mês:
https://codepen.io/AndroidSemLimites/pen/gOaaRdW
Exercício 2 - IMC:
https://codepen.io/AndroidSemLimites/pen/VwvvWGa
Aula 7: Sorteio com Botões e Funções
Seja bem-vindo e bem-vinda à sétima aula da #QuarentenaDev! Você, é você mesmo que
queria descobrir como exibir o html primeiro e depois gerar a interação do usuário com
JavaScript, essa aula é para você. E para você que não queria saber, afinal a aula é para
todos e todas!
Material da aula
Desa os da aula7
O Paulo desafiou vocês a trocar o estilo da mensagem de você ganhou ou você perdeu
O Art desafiou você a não deixar o usuário digitar um número maior que 10, caso ele
digite um maior, dizer que ele não pode e pedir para digitar um novo número.
Para alterar o html utilizando JavaScript primeiro selecionamos a tag que diz respeito
ao parágrafo a paragrafoResultado e depois usamos a propriedade innerHTML que vai
ser reposável por colocar o texto!
paragrafoResultado.style.backgroundColor = "yellow"
numerocerto=chute==aleatorio
O que vamos fazer é colocar essa comparação depois de ter certeza que o número está
entre 1 e 10.
E para fazer essa comparação vamos usar o if , operador lógico ou que em javascript é ||
e simbolos que indicam : > maior que e < menor que
Estamos dizendo que caso chute for menor que zero ou maior que 10 vamos pedir um
numero novo só depois dessa verificação fazemos a comparação do número digitado com
o gerado pelo aleatorio
numerocerto= chute==aleatorio
RESPOSTAS DOS EXERCÍCIOS DA
AULA 7
Exercício 1 - Paulo:
https://codepen.io/AndroidSemLimites/pen/wvKKqXR
Exercício 2 - Art:
https://codepen.io/AndroidSemLimites/pen/pojjrmJ
Aula 8: Contadores e Loops
Desa os aula 8
Desafio do Mario
Desafio do Art
Sim o art disse 10 milhões, mas calma lá, vamos exibir todos os números de 1 até 500 tudo
bem?
Desafio extra
Usando o while consegue exibir os números pares de até de 0 até 100? Pode ser usando
document.write, alert você escolhe.
Consegue descobrir uma outra fórmula de aleatoriedade que seja mais "justa" que a que
usamos no exercício?
Links extras
Exercício 1 - Olimpíadas:
https://codepen.io/AndroidSemLimites/pen/vYNNewo
Exercício 2 - De 1 a 500:
https://codepen.io/AndroidSemLimites/pen/ZEbbXNv
Seja bem-vindo e bem-vinda à nona aula da #QuarentenaDev! Você aprendeu muito até
agora parabéns, nessa aula vamos juntar todas as peças que aprendemos até agora e
aplicar no nosso aplicativo de transporte!!!
Desa os aula 9
Desa o da Vanessa
Desa o do Art
Trocar o prompt que estavamos utilizando para pegar dados do usuário pelo input
RESPOSTAS DOS EXERCÍCIOS DA
AULA 9
Ficha Melhorada:
https://codepen.io/AndroidSemLimites/pen/wvKKPpq
Aula 10: Completando nosso certificado
Quer ir um pouco além? Alguns canais e playlists para você dar os próximos passos:
https://www.youtube.com/playlist?list=PLh2Y_pKOa4UfHbRqfiiI4uWik2MOKHRfL
Playlist respondendo dúvidas de iniciantes
https://www.youtube.com/playlist?list=PLh2Y_pKOa4UcBRWcWAEp4d4M7INLCec1f)
https://www.youtube.com/playlist?list=PLh2Y_pKOa4UfsZfAT5ylSsbcEjpguxoBI
Desa o aula10
Será que usando JavaScript você consegue imprimir ou seja abrir a janela de impressão
de documento e salvar seu certificado que fizemos no codepen em pdf ou até imprimir
mesmo? Dica é um comando apenas
Se você conseguiu imprimir seu certificado, percebeu que os links não aparecem. Será
que você consegue deixar eles aparecendo igual na imagem:
Como imprimir o certificado?
Caso você queira imprimir o seu certificado, basta colocar a função "print()" ao final do
código se baseando no exemplo do que a Amanda fez, mas não está no vídeo:
https://codepen.io/AndroidSemLimites/pen/pojjaQP
Links Extras
Gerador de Certificado:
https://codepen.io/AndroidSemLimites/pen/pojjaQP