Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis itaque incidunt sint, doloribus ducimus quae tempore quod maxime minima eveniet unde amet recusandae reiciendis libero quis excepturi laboriosam sunt!
31 |
32 |
33 |
--------------------------------------------------------------------------------
/06_sessao-da-tarde/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | *:focus {
6 | outline: none;
7 | }
8 |
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | font-family: 'Playfair Display', serif;
13 | text-align: center;
14 | background: #FFEA80;
15 | color: #323232;
16 | }
17 |
18 | .container {
19 | width: 1200px;
20 | margin: 0 auto;
21 | text-align: center;
22 | }
23 |
24 | @media (max-width: 1199px) {
25 | .container {
26 | width: 100%;
27 | padding: 0 2%;
28 | }
29 | }
30 |
31 | .link {
32 | color: #196b9e;
33 | margin-bottom: 5px;
34 | word-break: break-all;
35 | }
36 |
37 | .btn {
38 | border-radius: 5px;
39 | padding: 10px 20px;
40 | font-size: 16px;
41 | text-decoration: none;
42 | color: #fff;
43 | position: relative;
44 | display: inline-block;
45 | border: 0 none;
46 | cursor: pointer;
47 | }
48 |
49 | .btn:active {
50 | transform: translate(0px, 5px);
51 | -webkit-transform: translate(0px, 5px);
52 | box-shadow: 0px 1px 0px 0px;
53 | }
54 |
55 | .btn-green {
56 | background-color: #2ecc71;
57 | box-shadow: 0px 5px 0px 0px #15B358;
58 | margin-right: 10px;
59 | margin-left: 65px;
60 | }
61 |
62 | .btn-green:hover {
63 | background-color: #48E68B;
64 | }
65 |
66 | .btn-orange {
67 | background-color: #e67e22;
68 | box-shadow: 0px 5px 0px 0px #CD6509;
69 | }
70 |
71 | .btn-orange:hover {
72 | background-color: #FF983C;
73 | }
74 |
75 | @media (max-width: 768px) {
76 | .btn {
77 | display: block;
78 | margin: 0 auto 10px auto;
79 |
80 | }
81 | }
82 |
83 | .display-movie-title {
84 | margin-top: 40px;
85 | font-size: 24px;
86 | font-weight: 600;
87 | margin-bottom: 5px;
88 | }
89 |
90 | ul,
91 | li {
92 | list-style: none;
93 | padding: 0;
94 | }
95 |
96 | .title {
97 | font-size: 5vw;
98 | margin: 20px 0 40px 0;
99 | }
100 |
101 | .title .title-part {
102 | font-weight: 600;
103 | font-family: 'Fredoka One', sans-serif;
104 | text-transform: uppercase;
105 | color: #FFFFD9;
106 | }
107 |
108 | .title .title-part.line-1 {
109 | text-shadow: #ff6239 1px 1px, #ff6339 2px 2px, #ff643a 3px 3px, #ff663a 4px 4px, #ff673b 5px 5px, #ff683c 6px 6px, #ff693c 7px 7px, #ff6a3d 8px 8px, #ff6b3d 9px 9px, #ff6c3e 10px 10px, #ff6e3f 11px 11px, #ff6f3f 12px 12px, #ff7040 13px 13px, #ff7140 14px 14px, #ff7241 15px 15px, #ff7342 16px 16px, #ff7442 17px 17px, #ff7643 18px 18px, #ff7743 19px 19px, #ff7844 20px 20px, #ff7945 21px 21px, #ff7a45 22px 22px, #ff7b46 23px 23px, #ff7c46 24px 24px, #ff7e47 25px 25px, #ff7f48 26px 26px, #ff8048 27px 27px, #ff8149 28px 28px, #ff8249 29px 29px, #ff834a 30px 30px, #ff844b 31px 31px, #ff864b 32px 32px, #ff874c 33px 33px, #ff884c 34px 34px, #ff894d 35px 35px, #ff8a4e 36px 36px, #ff8b4e 37px 37px, #ff8c4f 38px 38px, #ff8e4f 39px 39px, #ff8f50 40px 40px, #ff9051 41px 41px, #ff9151 42px 42px, #ff9252 43px 43px, #ff9352 44px 44px, #ff9453 45px 45px, #ff9654 46px 46px, #ff9754 47px 47px, #ff9855 48px 48px, #ff9955 49px 49px, #ff9a56 50px 50px, #ff9b57 51px 51px, #ff9c57 52px 52px, #ff9e58 53px 53px, #ff9f58 54px 54px, #ffa059 55px 55px, #ffa15a 56px 56px, #ffa25a 57px 57px, #ffa35b 58px 58px, #ffa45b 59px 59px, #ffa65c 60px 60px, #ffa75d 61px 61px, #ffa85d 62px 62px, #ffa95e 63px 63px, #ffaa5e 64px 64px, #ffab5f 65px 65px, #ffac60 66px 66px, #ffad60 67px 67px, #ffaf61 68px 68px, #ffb061 69px 69px, #ffb162 70px 70px, #ffb263 71px 71px, #ffb363 72px 72px, #ffb464 73px 73px, #ffb564 74px 74px, #ffb765 75px 75px, #ffb866 76px 76px, #ffb966 77px 77px, #ffba67 78px 78px, #ffbb67 79px 79px, #ffbc68 80px 80px, #ffbd69 81px 81px, #ffbf69 82px 82px, #ffc06a 83px 83px, #ffc16a 84px 84px, #ffc26b 85px 85px, #ffc36c 86px 86px, #ffc46c 87px 87px, #ffc56d 88px 88px, #ffc76d 89px 89px, #ffc86e 90px 90px, #ffc96f 91px 91px, #ffca6f 92px 92px, #ffcb70 93px 93px, #ffcc70 94px 94px, #ffcd71 95px 95px, #ffcf72 96px 96px, #ffd072 97px 97px, #ffd173 98px 98px, #ffd273 99px 99px, #ffd374 100px 100px, #ffd475 101px 101px, #ffd575 102px 102px, #ffd776 103px 103px, #ffd876 104px 104px, #ffd977 105px 105px, #ffda78 106px 106px, #ffdb78 107px 107px, #ffdc79 108px 108px, #ffdd79 109px 109px, #ffdf7a 110px 110px, #ffe07b 111px 111px, #ffe17b 112px 112px, #ffe27c 113px 113px, #ffe37c 114px 114px, #ffe47d 115px 115px, #ffe57e 116px 116px, #ffe77e 117px 117px, #ffe87f 118px 118px, #ffe97f 119px 119px, #ffea80 120px 120px, #FF6138 0px 0px;
110 | }
111 |
112 | .title .title-part.line-2 {
113 | text-shadow: #ffb502 1px 1px, #ffb604 2px 2px, #ffb706 3px 3px, #ffb809 4px 4px, #ffb90b 5px 5px, #ffb90d 6px 6px, #ffba0f 7px 7px, #ffbb11 8px 8px, #ffbc13 9px 9px, #ffbd15 10px 10px, #ffbe17 11px 11px, #ffbf1a 12px 12px, #ffc01c 13px 13px, #ffc11e 14px 14px, #ffc220 15px 15px, #ffc222 16px 16px, #ffc324 17px 17px, #ffc426 18px 18px, #ffc529 19px 19px, #ffc62b 20px 20px, #ffc72d 21px 21px, #ffc82f 22px 22px, #ffc931 23px 23px, #ffca33 24px 24px, #ffcb35 25px 25px, #ffcb37 26px 26px, #ffcc3a 27px 27px, #ffcd3c 28px 28px, #ffce3e 29px 29px, #ffcf40 30px 30px, #ffd042 31px 31px, #ffd144 32px 32px, #ffd246 33px 33px, #ffd349 34px 34px, #ffd44b 35px 35px, #ffd44d 36px 36px, #ffd54f 37px 37px, #ffd651 38px 38px, #ffd753 39px 39px, #ffd855 40px 40px, #ffd957 41px 41px, #ffda5a 42px 42px, #ffdb5c 43px 43px, #ffdc5e 44px 44px, #ffdd60 45px 45px, #ffdd62 46px 46px, #ffde64 47px 47px, #ffdf66 48px 48px, #ffe069 49px 49px, #ffe16b 50px 50px, #ffe26d 51px 51px, #ffe36f 52px 52px, #ffe471 53px 53px, #ffe573 54px 54px, #ffe675 55px 55px, #ffe677 56px 56px, #ffe77a 57px 57px, #ffe87c 58px 58px, #ffe97e 59px 59px, #ffea80 60px 60px, #FFB400 0px 0px;
114 | }
115 |
116 | .title .title-part.line-3 {
117 | text-shadow: #03a488 1px 1px, #05a488 2px 2px, #08a588 3px 3px, #0aa688 4px 4px, #0da788 5px 5px, #0fa788 6px 6px, #12a887 7px 7px, #14a987 8px 8px, #17a987 9px 9px, #1aaa87 10px 10px, #1cab87 11px 11px, #1fac87 12px 12px, #21ac87 13px 13px, #24ad87 14px 14px, #26ae87 15px 15px, #29ae87 16px 16px, #2baf87 17px 17px, #2eb087 18px 18px, #30b086 19px 19px, #33b186 20px 20px, #36b286 21px 21px, #38b386 22px 22px, #3bb386 23px 23px, #3db486 24px 24px, #40b586 25px 25px, #42b586 26px 26px, #45b686 27px 27px, #47b786 28px 28px, #4ab886 29px 29px, #4db886 30px 30px, #4fb986 31px 31px, #52ba85 32px 32px, #54ba85 33px 33px, #57bb85 34px 34px, #59bc85 35px 35px, #5cbd85 36px 36px, #5ebd85 37px 37px, #61be85 38px 38px, #63bf85 39px 39px, #66bf85 40px 40px, #69c085 41px 41px, #6bc185 42px 42px, #6ec285 43px 43px, #70c284 44px 44px, #73c384 45px 45px, #75c484 46px 46px, #78c484 47px 47px, #7ac584 48px 48px, #7dc684 49px 49px, #80c784 50px 50px, #82c784 51px 51px, #85c884 52px 52px, #87c984 53px 53px, #8ac984 54px 54px, #8cca84 55px 55px, #8fcb84 56px 56px, #91cb83 57px 57px, #94cc83 58px 58px, #96cd83 59px 59px, #99ce83 60px 60px, #9cce83 61px 61px, #9ecf83 62px 62px, #a1d083 63px 63px, #a3d083 64px 64px, #a6d183 65px 65px, #a8d283 66px 66px, #abd383 67px 67px, #add383 68px 68px, #b0d482 69px 69px, #b3d582 70px 70px, #b5d582 71px 71px, #b8d682 72px 72px, #bad782 73px 73px, #bdd882 74px 74px, #bfd882 75px 75px, #c2d982 76px 76px, #c4da82 77px 77px, #c7da82 78px 78px, #c9db82 79px 79px, #ccdc82 80px 80px, #cfdd82 81px 81px, #d1dd81 82px 82px, #d4de81 83px 83px, #d6df81 84px 84px, #d9df81 85px 85px, #dbe081 86px 86px, #dee181 87px 87px, #e0e181 88px 88px, #e3e281 89px 89px, #e6e381 90px 90px, #e8e481 91px 91px, #ebe481 92px 92px, #ede581 93px 93px, #f0e680 94px 94px, #f2e680 95px 95px, #f5e780 96px 96px, #f7e880 97px 97px, #fae980 98px 98px, #fce980 99px 99px, #ffea80 100px 100px, #00A388 0px 0px;
118 | }
119 |
120 | /* https://codepen.io/dariocorsi/pen/jqxERJ */
121 |
122 | @media (max-width: 768px) {
123 | .title .title-part.line-1,
124 | .title .title-part.line-2,
125 | .title .title-part.line-3 {
126 | text-shadow: none;
127 | }
128 |
129 | .title .title-part {
130 | color: #dc9fa1;
131 | }
132 |
133 | .title {
134 | font-size: 10vw;
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/1 - If...Else/Exercicio Média - If_Else.md:
--------------------------------------------------------------------------------
1 | # Desafio
2 |
3 | Faça um script que pede duas notas de um aluno. Em seguida ele deve calcular a média do aluno e dar o seguinte resultado:
4 | - A mensagem "Aprovado", se a média alcançada for maior ou igual a sete;
5 | - A mensagem "Reprovado", se a média for menor do que sete;
6 | - A mensagem "Aprovado com Distinção", se a média for igual a dez.
7 |
8 | # Questão resolvida e Código Comentado
9 | Inicialmente, criamos dois campos de input em HTML, do tipo number, para receber as notas dos alunos e um botão 'Calcular média', que quando acionado chama a função media(), que vai dentro do código JS.
10 |
11 | Vamos lá, inicialmente, declaramos duas variáveis nota1 e a nota2, que vão receber os dados digitados nos formulários de input.
12 |
13 | Como esses dados vem no formato string, precisamos transformar eles em dados números do tipo decimal, por isso usamos a função parseFloat().
14 |
15 | Com os dois números em mãos, declaramos a variável media, que recebe o valor da média das duas notas (somamos elas e dividimos por 2).
16 |
17 | Agora pegamos esse valor, e vamos usar nos testes condicionais.
18 | Se este valor for maior ou igual a 7, é porque foi aprovado.
19 |
20 | Mas temos dois tipos de aprovações.
21 | Então, dentro do IF, testamos se essa nota é igual a 10. Se for, dizemos que foi aprovado com distinção. Se não for, é porque a nota é maior ou igual a 7 e é menor que 10, logo dizemos apenas que foi aprovado.
22 |
23 | Se o primeiro IF for falso, é porque a nota é menor que 7, cai no ELSE com a mensagem de provação.
24 |
25 | # Código HTML + JavaScript
26 |
27 | ```
28 |
29 |
30 |
31 |
32 | Exercicio If ... Else
33 |
34 | Primeira nota
35 | Segunda nota
36 |
37 |
38 |
39 |
57 |
58 |
59 |
60 | ```
61 |
62 |
63 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/1 - If...Else/ifelse-media.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Exercicio If ... Else
6 |
7 | Primeira nota
8 | Segunda nota
9 |
10 |
11 |
12 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/2- Switch/Exercicio - Switch.md:
--------------------------------------------------------------------------------
1 | # Desafio
2 |
3 | Escreva uma página que pede ao usuário um número de 1 até 12, e mostra o mês correspondente a este número. Por exemplo, 1 é Janeiro, 2 é Fevereiro etc.
4 |
5 | # Questão resolvida e Código Comentado
6 | Exibimos um formulário, de id=numero, do tipo numérico e pedimos o número para o usuário.
7 | Em seguida, um botão chama a função exibir() do JavaScript, ao ser acionado (clicado).
8 |
9 | Vamos para o JS.
10 | Pegamos o que foi digitado no campo numero pelo usuário, passamos para inteiro (parseInt) e armazenamos na variável mes, dentro de nosso código JavaScript.
11 |
12 | Depois, jogamos essa variável no switch.
13 | E fazemos:
14 | case 1: alert("Janeiro")
15 | case 2: alert("Fevereiro")
16 | etc
17 |
18 | Ou seja, se o mes digitado for 1, vai aparecer uma janela dizendo que o mês é Janeiro.
19 | Se o usuário tiver digitado 2, a janela vai mostrar Fevereiro, e assim sucessivamente.
20 |
21 | # Código HTML + JavaScript
22 |
23 | ```
24 |
25 |
26 |
27 | Curso JavaScript Progressivo
28 | Digite um mês de 1 até 12:
29 |
30 |
31 |
52 |
53 |
54 |
55 | ```
56 |
57 |
58 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/2- Switch/switch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Exercicio - Switch
5 | Digite um mês de 1 até 12:
6 |
7 |
8 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/3 - For/Exercicio_FOR.md:
--------------------------------------------------------------------------------
1 | # Desafio
2 |
3 | Faça um script que, usando apenas um laço for, exiba as duas colunas a seguir:
4 |
5 | 
6 |
7 | # Questão resolvida e Código Comentado
8 | Na figura temos duas coisas:
9 | um valor que sobe de 0 até 10
10 | um valor que cai de 10 até 0
11 |
12 | O grande pulo do gato desse exercício é usar duas variáveis: a e b
13 |
14 | A variável a inicia do 0 e vai sendo incrementada até chegar em 10.
15 | Ao passo que b inicia de 10 e vai sendo decrementada em uma unidade até chegar a 0.
16 |
17 | Na inicialização, criamos as duas variáveis e inicializamos ela corretamente.
18 | Depois, temos dois testes: a deve ser menor ou igual a 10, e b deve ser maior ou igual a 0.
19 | Por fim, demos um incremento (a++) e um decremento (b--).
20 |
21 | Agora, dentro do laço FOR, é só imprimir linha por linha.
22 | Primeiro o valor de a, depois um traço, o valor de b e uma quebra de linha do HTML ( )
23 |
24 | # Código HTML + JavaScript
25 |
26 | ```
27 |
28 |
29 |
30 | Apostila JavaScript Progressivo
31 |
32 |
33 |
34 |
35 |
36 |
37 | script.js
38 | function exibir(){
39 | for(let a=0, b=10 ; a<=10 && b>=0; a++, b--)
40 | document.write(a+" - "+b+" ");
41 | }
42 | ```
43 |
44 |
45 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/3 - For/for.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Apostila JavaScript Progressivo
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/Exercicios Resolvidos/3 - For/script.js:
--------------------------------------------------------------------------------
1 | function exibir(){
2 | for(let a=0, b=10 ; a<=10 && b>=0; a+=3, b-=3)
3 | document.write(a+" - "+b+" ");
4 | }
--------------------------------------------------------------------------------
/Exercicios Resolvidos/4 - Do While/Exercicio_Do_While.md:
--------------------------------------------------------------------------------
1 | # Desafio
2 |
3 | Laços do while são muito usados para exibir menu, pedir dados, senhas...
4 | Vamos criar um script que pede uma senha ao usuário.
5 |
6 | Se a senha estiver correta, ele entra no sistema.
7 | Se estiver errada, avisa e pede a senha novamente.
8 |
9 | # Questão resolvida e Código Comentado
10 | Funciona assim: ao clicar no botão Entrar, invocamos a função entrar() do JavaScript.
11 |
12 | A senha digitada vai ser armazenada na variável senha.
13 | Aí vamos pro do.
14 |
15 | Lá nele, usando um prompt, pedimos a senha pro usuário.
16 | Se ela for 2112js, aparece a mensagem de entrada no sistema.
17 |
18 | Se não for, de senha inválida.
19 |
20 | Isso vai acontecer indefinidamente, até o usuário digitar a senha corretamente, pois o teste condicional é: senha != '2112js'
21 |
22 | Em outras palavras, isso quer dizer: 'usuário, enquanto a senha digitada não for a correta, vou ficar pedindo e testando, pedindo e testando...só paro quando digitar a senha correta.'
23 |
24 | Leia em inglês: do ... while
25 | Ou seja: faça, execute esse código, enquanto isso for verdade.
26 |
27 | Note uma coisa importante: ele executa o código pelo menos uma vez!
28 | Isso não acontece no laço WHILE.
29 |
30 | Pro código rodar em WHILE, primeiro o teste tem que ser verdadeiro, senão nem entra.
31 |
32 | # Código HTML + JavaScript
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Semana 7 - Java Script II
2 | Turma 7 | Front-end | 2019 | Semana 7 | JavaScript II
3 |
4 | 
5 |
6 | Este é o material da semana 7 de front-end. Aqui você encontra pastas numeradas com os dias de aula que teremos.
7 |
8 | Dentro de cada pasta estão os exercicios que vamos desenvolver ao longo da semana.
9 |
10 | ### Dúvidas
11 | Para tirar dúvidas, leve para a sala de aula, mande mensagem para a professora ou abra um issue aqui no repositório.
12 |
13 | ### *Este é nosso indice completo de atividades:*
14 |
15 | # Guia Rápido - revisão
16 |
17 | * [Aula 1 - Revisão](https://github.com/mariaritacasagrande/reprograma-Javascript-II#aula-1)
18 | * [Variaveis](https://github.com/mariaritacasagrande/reprograma-Javascript-II#vari%C3%A1veis)
19 | * [Sobre Variaveis](https://github.com/mariaritacasagrande/reprograma-Javascript-II#sobre-variaveis)
20 | * [Escopo de variavel](https://github.com/mariaritacasagrande/reprograma-Javascript-II#escopo-de-variavel)
21 | * [Tipos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#tipos)
22 | * [Numeros](https://github.com/mariaritacasagrande/reprograma-Javascript-II#n%C3%BAmeros)
23 | * [Strings](https://github.com/mariaritacasagrande/reprograma-Javascript-II#strings)
24 | * [Booleanos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#booleanos)
25 | * [null e undefined](https://github.com/mariaritacasagrande/reprograma-Javascript-II#null-e-undefined)
26 | * [Conversão](https://github.com/mariaritacasagrande/reprograma-Javascript-II#convers%C3%A3o)
27 | * [Condicionais](https://github.com/mariaritacasagrande/reprograma-Javascript-II#condicionais)
28 | * [Condicional - if / else](https://github.com/mariaritacasagrande/reprograma-Javascript-II#condicional---if--else)
29 | * [Operador Condicional Ternário](https://github.com/mariaritacasagrande/reprograma-Javascript-II#operador-condicional-tern%C3%A1rio)
30 | * [Condicional - switch](https://github.com/mariaritacasagrande/reprograma-Javascript-II#condicional---switch)
31 | * [Break e continue](https://github.com/mariaritacasagrande/reprograma-Javascript-II#condicional---break-e-continue)
32 | * [DOM](https://github.com/mariaritacasagrande/reprograma-Javascript-II#dom)
33 | * [O que é DOM](https://github.com/mariaritacasagrande/reprograma-Javascript-II#o-que-%C3%A9-o-dom)
34 | * [Métodos para manipular o DOM](https://github.com/mariaritacasagrande/reprograma-Javascript-II#m%C3%A9todos-para-manipular-o-dom)
35 | * [Laços de Repetição](https://github.com/mariaritacasagrande/reprograma-Javascript-II#la%C3%A7o-de-repeti%C3%A7%C3%A3o)
36 | * [for (para)](https://github.com/mariaritacasagrande/reprograma-Javascript-II#for-para)
37 | * [do…while(faça … enquanto)](https://github.com/mariaritacasagrande/reprograma-Javascript-II#dowhile-fa%C3%A7a--enquanto)
38 | * [while (enquanto)](https://github.com/mariaritacasagrande/reprograma-Javascript-II#while-enquanto)
39 | * [Arrays](https://github.com/mariaritacasagrande/reprograma-Javascript-II#arrays)
40 | * [Funções](https://github.com/mariaritacasagrande/reprograma-Javascript-II#fun%C3%A7%C3%B5es)
41 | * [Objetos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#objetos)
42 | * [This](https://github.com/mariaritacasagrande/reprograma-Javascript-II#this)
43 |
44 |
45 | # JavaScript II
46 |
47 | * [Aula 2 - While, Do While e For](https://github.com/mariaritacasagrande/reprograma-Javascript-II#aula-2)
48 | * [While](#aula-1)
49 | * [Do While](#)
50 | * [For](#)
51 | * [Exercicios](#)
52 |
53 | * [Aula 3 - Objetos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#aula-3)
54 | * [O que são Objetos?](https://github.com/mariaritacasagrande/reprograma-Javascript-II#o-que-s%C3%A3o-objetos)
55 | * [Criando objetos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#criando-objetos)
56 | * [Acessando propriedades e métodos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#acessando-propriedades-e-m%C3%A9todos)
57 | * [Alterando e adicionando propriedades](https://github.com/mariaritacasagrande/reprograma-Javascript-II#alterando-e-adicionando-propriedades)
58 | * [Deletando propriedades](https://github.com/mariaritacasagrande/reprograma-Javascript-II#deletando-propriedades)
59 |
60 |
61 | * [Aula 4 - Eventos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#aula-4)
62 | * [O que são eventos?](https://github.com/mariaritacasagrande/reprograma-Javascript-II#o-que-s%C3%A3o-eventos)
63 | * [Como usar os eventos em JavaScript](https://github.com/mariaritacasagrande/reprograma-Javascript-II#como-usar-os-eventos-em-javascript)
64 | * [Evento Inline](https://github.com/mariaritacasagrande/reprograma-Javascript-II#evento-inline)
65 | * [Usando evento externo](https://github.com/mariaritacasagrande/reprograma-Javascript-II#usando-evento-externo)
66 | * [Exemplos](https://github.com/mariaritacasagrande/reprograma-Javascript-II#alguns-exemplos)
67 | * [onLoad ](https://github.com/mariaritacasagrande/reprograma-Javascript-II#onload)
68 | * [onChange](https://github.com/mariaritacasagrande/reprograma-Javascript-II#onchange)
69 | * [onMouseOver e onMouseOut](https://github.com/mariaritacasagrande/reprograma-Javascript-II#onmouseover-e-onmouseout)
70 | * [onmousedown, onmouseup e onclick](https://github.com/mariaritacasagrande/reprograma-Javascript-II#onmousedown-onmouseup-e-onclick)
71 |
72 | * [Exercícios](#)
73 |
74 | * [Para saber mais](#)
75 |
76 |
77 | ***
78 | # Aula 1
79 |
80 | ## O básico da sintaxe de JavaScript
81 | *Um guia rápido e básico da linguagem JavaScript.*
82 |
83 | ### Variáveis
84 | As variáveis são declaradas com a palavra chave var, let ou const, como segue:
85 | ```
86 | var i;
87 | var sum;
88 | ```
89 | Também é possível declarar varias variáveis com a mesma palavra chave var:
90 | ```
91 | var i, sum;
92 | ```
93 | E pode-se combinar a declaração da variável com sua inicialização:
94 | ```
95 | let i = 0, j = 0, k = 0;
96 | let nome = "Fulano";
97 | ```
98 | Antes de usar uma variável em um programa JavaScript, você deve declará-la.
99 |
100 | ### Sobre Variaveis
101 |
102 | Existem três tipos de declarações em JavaScript.
103 |
104 | `var`( funciona , mas Let e Const são mais modernos)
105 | Declara uma variável, opcionalmente, inicializando-a com um valor.
106 | `let` (usamos e amamos)
107 | Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.
108 | `const` (usamos e amamos)
109 | Declara uma constante de escopo de bloco, apenas de leitura.
110 |
111 | ### Escopo de Variavel
112 | Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável global, porque está disponível para qualquer outro código no documento atual. Quando você declara uma variável dentro de uma função, é chamada de variável local, pois ela está disponível somente dentro dessa função.
113 |
114 | JavaScript antes do ECMAScript 6 não possuía escopo de declaração de bloco; pelo contrário, uma variável declarada dentro de um bloco de uma função é uma variável local (ou contexto global) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de x está na função (ou contexto global) no qual x é declarado, não o bloco, que neste caso é a declaração if.
115 |
116 | ```
117 | if (true) {
118 | var x = 5;
119 | }
120 | console.log(x); // 5
121 | ```
122 | Esse comportamento é alterado, quando usado a declaração let introduzida pelo ECMAScript 6.
123 |
124 | ```
125 | if (true) {
126 | let y = 5;
127 | }
128 | console.log(y); // ReferenceError: y não está definido
129 | ```
130 |
131 | ### Tipos
132 | Os tipos em JavaScript podem ser divididos em duas categorias:
133 |
134 | * tipos primitivos
135 | * tipos de objeto
136 |
137 | Os tipos primitivos incluem números, strings e valores booleanos.
138 |
139 | Os valores especiais null e undefined são valores primitivos mas não são números, nem string e nem booleanos.
140 |
141 | Qualquer valor em JavaScript que não seja número, string, booleano, null ou undefined é um objeto.
142 |
143 | O typeof é um operador unário colocado antes de seu operando, o qual pode ser de qualquer tipo. Seu valor é uma string que especifica o tipo do operando.
144 | ```
145 | typeof "foo"; // 'string'
146 | typeof 123; // 'number'
147 | ```
148 | ### Números
149 |
150 | Ao contrário de muitas linguagens, JavaScript não faz distinção entre valores inteiros e valores em ponto flutuante. Todos os números em JavaScript são representados como valores em ponto flutuante.
151 |
152 | Literais inteiros:
153 | ```
154 | 0
155 | 1
156 | 100
157 | ```
158 | Literais em ponto flutuante:
159 | ```
160 | 3.14
161 | 100.09
162 | 0.33333
163 | ```
164 | #### Strings
165 |
166 | Para incluir uma string literal em um programa JavaScript, basta colocar os caracteres da string dentro de um par combinado de aspas simples ou duplas.
167 | ```
168 | "" string de cumprimento zero
169 | 'teste'
170 | "outro teste"
171 | ```
172 | Para concatenar strings utilizamos o operador +.
173 | ```
174 | var msg = "Ola " + "mundo"; // "Ola mundo"
175 | msg = "Bem vindo ao meu blog, " + name;
176 | ```
177 | A propriedade length determina o tamanho da string.
178 | ```
179 | "palavra".length // 7
180 | ```
181 | #### Booleanos
182 | Os valores booleanos são representados por *true* e *false*.
183 |
184 | #### null e undefined
185 | A palavra chave *null* indica a ausência de um valor.
186 |
187 | Mas também há um segundo valor que indica ausência de valor: *undefined*.
188 |
189 | O valor indefinido (undefined) representa uma ausência mais profunda, é o valor de variáveis que não foram inicializadas.
190 |
191 | ### Conversão
192 | A linguagem é muito flexível quanto aos tipos de valores que exige.
193 |
194 | As variáveis em JavaScript são não tipadas. Você pode atribuir um valor de qualquer tipo a uma variável e, posteriormente, atribuir um valor de tipo diferente para a mesma variável.
195 |
196 | JavaScript converte valores de um tipo para outro de forma livre.
197 |
198 | Se um programa espera uma string, por exemplo, e você fornece um número, ele converte o número em string automaticamente.
199 |
200 | Se você usa um valor não booleano onde é esperado um booleano, JavaScript converte adequadamente.
201 |
202 | ## Condicionais
203 |
204 | Estruturas condicionais Javascript são como estruturas condicionais na maioria das linguagens de programação existentes, as utilizamos para verificar uma condição e definir se algo deve ou não acontecer.
205 |
206 | Um bom exemplo disso, e que não tem nada a ver com programação, é a linguagem que utilizamos para nos comunicar, repare:
207 |
208 | **Se o sol sair hoje, vou nadar.**
209 |
210 | Temos uma condição (*se o sol sair hoje*) para executar uma ação (*vou nadar*) dependendo do resultado dessa condição. Se verdadeira, a ação é executada.
211 |
212 | ### Condicional - if / else
213 | A estrutura condicional permite avaliar uma condição e, a partir dela, executar diferentes linhas de código.
214 |
215 | 
216 |
217 | ```
218 | if (n == 1) {
219 | // executa este bloco if
220 | } else if () {
221 | // executa este bloco else if
222 | } else {
223 | // executa este bloco else
224 | }
225 | ```
226 | > Exercício: if/else
227 | #### Operador Condicional Ternário
228 |
229 | É possível obter resultados semelhantes usando o operador condicional ternário condition ? expr1 : expr2.
230 |
231 | ```
232 | resultado = (a > b) ? "a é maior que b" : "b é maior que a";
233 | ```
234 | O código acima é equivalente ao de baixo:
235 | ```
236 | if (a > b) {
237 | resultado = "a é maior que b";
238 | } else {
239 | resultado = "b é maior que a";
240 | }
241 | ```
242 |
243 | ### Condicional - switch
244 | A estrutura condicional switch permite executar um bloco de código diferente de acordo com cada opção (cada case) especificada. Seu uso é indicado quando os valores a serem analisados nessas condições são pré-definidos.
245 |
246 | ```
247 | let data = new Date();
248 | let d = data.getDay(); //Retorna o dia da semana, começando por 0 equivalendo ao domingo.
249 |
250 | switch(d){
251 | case 0:
252 | alert("Domingo");
253 | break;
254 |
255 | case 1:
256 | alert("Segunda");
257 | break;
258 |
259 | case 2:
260 | alert("Terça");
261 | break;
262 |
263 | case 3:
264 | aert("Quarta");
265 | break;
266 |
267 | case 4:
268 | alert("Quinta");
269 | break;
270 |
271 | case 5:
272 | alert("Sexta");
273 | break;
274 |
275 | case 6:
276 | alert("Sábado");
277 | break;
278 |
279 | default:
280 | alert("Não identificado");
281 | }
282 |
283 | ```
284 | Agora vamos entender melhor cada parte:
285 |
286 | `Switch` – Recebe por parâmetro o valor que será verificado.
287 | `Case`: Informamos um valor a frente que será comparado, ou seja, o valor testado e se retornar verdadeiro executa a instrução contida nele.
288 | `Break`: Se uma condição e operação foram realizadas, o break garante que nossa aplicação vai sair do switch e o outro case não serão testados.
289 | `Default`: Se nenhuma condição foi satisfeita, o default assume como execução padrão, ou seja, ele sempre será executado caso nenhuma condição tenha sido reproduzida.
290 |
291 | 
292 |
293 | ## Break e Continue
294 | Break e Continue são utilizados para controle de estruturas fechadas como for, while e switch.
295 |
296 | Break serve para sair de uma estrutura. Por exemplo, se estivermos em uma estrutura de repetição que irá contar de 1 a 1.000.000, mas nós colocarmos uma condição que diz que se o número for 5, então quebre (saia) da estrutura. Faríamos o seguinte código.
297 | ```
298 |
306 | ```
307 | Que resulta em: 1 2 3 4 5
308 |
309 | Podemos observar que, apesar de termos definido a estrutura de repetição for para contar de 1 a 1.000.000, os únicos números que aparecem são 1, 2, 3, 4 e 5. Isso acontece porque que dentro da condição (if) determinamos que quando x for igual a 5, o comando break deve ser chamado e dessa forma nós saímos de dentro de for sem ter que chegar até o fim.
310 |
311 | O continue também serve para controlar estruturas de dados fechadas, assim como o break. Mas, sua principal diferença é que, ao invés de sair completamente da estrutura, o continue apenas ignora o resto da estrutura e prossegue com a seguinte.
312 |
313 | Simplificadamente, em uma estrutura switch, no qual tem os cases, automaticamente, o próximo case será selecionado. Em uma estrutura de repetição como for, todo o bloco de dados abaixo do comando continue será ignorado e a repetição continua com o próximo loop.
314 |
315 | É um conceito importante, embora, teoricamente, seja difícil de entender. Então, abaixo está um código com erro por estar sem o continue.
316 |
317 | ```
318 |
329 | ```
330 | O script acima deveria fazer o browser responder de acordo com a brincadeira do um, dois, três, pin... Ou seja, a cada múltiplo de 4 o browser não pode contar, ao invés disso, deve aparecer pin. Mas, veja que o resultado está errado.
331 |
332 | 1
333 | 2
334 | 3
335 | pin
336 | 4
337 | 5
338 | 6
339 | 7
340 | pin
341 | 8
342 | 9
343 | 10
344 | 11
345 | pin
346 | 12
347 | 13
348 | 14
349 | 15
350 | pin
351 | 16
352 | 17
353 | 18
354 | 19
355 | pin
356 | 20
357 |
358 | Sempre que aparece o pin, também aparece o número múltiplo de 4. Isso porque o if é executado e depois o código que está abaixo dele também. Para evitar que o código abaixo dele seja executado, e mesmo assim continuar executando o loop, devemos usar o continue. Veja a diferença agora.
359 | ```
360 |
372 | ```
373 | Veja que agora os múltiplos de quatro são apenas o pin e não o número.
374 |
375 | 1
376 | 2
377 | 3
378 | pin
379 | 5
380 | 6
381 | 7
382 | pin
383 | 9
384 | 10
385 | 11
386 | pin
387 | 13
388 | 14
389 | 15
390 | pin
391 | 17
392 | 18
393 | 19
394 | pin
395 |
396 |
397 | > Exercício: Switch
398 |
399 |
400 | ## DOM
401 |
402 | ### O que é o DOM?
403 |
404 | * DOM é uma sigla que significa Document Object Model.
405 | * Quando a página é carregada o browser cria um objeto que representa os elementos da página a partir do HTML.
406 | * A forma mais fácil de acessar e manipular o DOM é usando JavaScript
407 | * Componentes:
408 | * Document - representa o documento HTML
409 | * Elements - são todas as tags que estão no arquivo HTML e se transformam em elementos da árvore DOM
410 | * Texts - é o conteúdo de texto que vai entre os elementos (tags).
411 | * Attributes - são os todos atributos para um nó específico. No caso, o attribute class="HERO" está associado ao elemento
, outros exemplos de atributos são o href, o id, entre outros.
412 |
413 | ### Métodos para manipular o DOM
414 |
415 | `getElementById()`- Retorna o elemento que estiver contendo o nome do ID passado. Como os IDs devem ser únicos, é um método muito útil para pegar apenas o elemento desejado.
416 |
417 | `getElementsByClassName()` - Retorna uma coleção de todos elementos que estiverem contendo o nome da classe passada.
418 |
419 | `getElementsByTagName()`- uma coleção de todos elementos que contennham a tag name passada.
420 |
421 | `querySelector()` - Retorna o primeiro elemento que possui o seletor CSS passado (usa mesma sintaxe do CSS) Exemplo: querySelector('.classe'), querySelector('#id') e querySelector('tag')
422 |
423 | `querySelectorAll()` - semelhante ao querySelector(), só que retorna todos os elementos que se equiparam ao seletor
424 |
425 | > Exercício: DOM
426 |
427 | ## Laço de Repetição
428 |
429 | Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes.
430 |
431 | ### for (para)
432 | Um laço for é repetido até que a condição especificada seja falsa.
433 |
434 | ```
435 | for (let i = 0; i < 5; i++) {
436 | // Vai executar 5 vezes
437 | }
438 | ```
439 |
440 | ### do...while (faça ... enquanto)
441 | A instrução do...while repetirá até que a condição especificada seja falsa.
442 |
443 | ```
444 | do
445 | declaracao
446 | while (condicao);
447 | ```
448 |
449 | ### while (enquanto)
450 | Uma declaração while executa suas instruções, desde que uma condição especificada seja avaliada como verdadeira. Segue uma declaração while:
451 | ```
452 | while (condicao)
453 | declaracao
454 | ```
455 |
456 | ### Arrays
457 | Em JavaScript, arrays são um tipo especial de objeto que representam um conjunto ordenado de valores numerados.
458 | ```
459 | var a = new Array();
460 | a[0] = "dog";
461 | a[1] = "cat";
462 | a[2] = "hen";
463 | a.length // 3
464 | ```
465 | Uma forma mais conveniente de utilização de um array, na verdade a mais usada:
466 | ```
467 | var a = ["dog", "cat", "hen"];
468 | a.length // 3
469 | ```
470 | ### Funções
471 |
472 | Uma função é um objeto que tem código executável associado. Uma função pode ser chamada para executar esse código executável e retornar um valor calculado.
473 | ```
474 | function add(x, y) {
475 | var total = x + y;
476 | return total;
477 | }
478 | ```
479 | ### Objetos
480 | Um objeto em JavaScript é um conjunto não ordenado de valores nomeados.
481 |
482 | Para criar um objeto vazio:
483 | ```
484 | let obj = {};
485 | ```
486 | Podemos criar um objeto com propriedades e métodos:
487 | ```
488 | let obj = {
489 | name: "Carrot",
490 | "for": "Max",
491 | details: {
492 | color: "orange",
493 | size: 12
494 | }
495 | }
496 | ```
497 | E acessar as propriedades dessa forma:
498 | ```
499 | obj.details.color // orange
500 | obj["details"]["size"] // 12
501 | ```
502 | Funções também se comportam como objetos, veja o exemplo abaixo.
503 | ```
504 | function Person(name, age) {
505 | this.name = name;
506 | this.age = age;
507 | }
508 | ```
509 | Instanciamos o objeto.
510 | ```
511 | let obj = new Person("You", 36);
512 | ```
513 | Alteramos os valores das propriedades.
514 | ```
515 | obj.name = "Simon";
516 | obj.name; // print 'Simon'
517 | ```
518 | ### This
519 |
520 | Em JavaScript, usa-se `this` de forma semelhante ao uso de pronomes em linguagens naturais, como o inglês ou francês. Escreve-se: “João está correndo rápido porque ele está tentando pegar o trem”. O uso do pronome “ele”. Poderia se ter escrito: “João está correndo rápido porque João está tentando pegar o trem”. Não se reutiliza “João” dessa maneira, pois se assim fosse, nossa família, amigos e colegas nos abandonariam… De uma maneira graciosamente semelhante, em JavaScript se usa a palavra-chave `this` como um atalho, um referente; ou seja, o sujeito no contexto ou o sujeito do código em execução.
521 |
522 | ```
523 | firstName : "Penelope",
524 | lastName : "Barrymore",
525 | fullName : function() {
526 | // Notou o uso do "this" tal como se usou "ele" no exemplo da frase anterior?
527 | console.log( this.firstName + ' ' + this.lastName );
528 |
529 | // Também poderia se ter escrito:
530 | console.log( person.firstName + ' ' + person.lastName );
531 | }
532 | }
533 | ```
534 | Se se usa person.firstName e person.lastName, tal como no último exemplo, o código se torna ambíguo. Considere que poderia haver outra variável global (você estando ciente dela ou não) com o nome “person”. Em seguida, as referências a person.firstName poderiam tentar acessar a propriedade firstName da variável global person e isso poderia levar a erros difíceis de serem depurados. Portanto, usa-se a palavra-chave this não apenas para fins “estéticos” (isto é, como um referente), mas, também, para fins de precisão. Seu uso realmente torna o código mais inequívoco, assim como o pronome “ele” tornou a frase mais clara, informando que se estava referindo ao João específico do início da frase.
535 |
536 | ***
537 | # Aula 2
538 |
539 | ## Laços de Repetição
540 |
541 | 
542 |
543 | Laços oferecem um jeito fácil e rápido de executar uma ação repetidas vezes.
544 |
545 | Você pode pensar em um laço de repetição como um jogo onde você manda o seu personagem andar X passos em uma direção e Y passos em outra; por exemplo, a ideia "vá 5 passos para leste" pode ser expressa em um laço desta forma:
546 | ```
547 | var passo;
548 | for (passo = 0; passo < 5; passo++) {
549 | // Executa 5 vezes, com os valores de passos de 0 a 4.
550 | console.log('Ande um passo para o leste');
551 | }
552 | ```
553 |
554 | Existem várias formas diferentes de laços, mas eles essencialmente fazem a mesma coisa: repetir uma ação múltiplas vezes ( inclusive você poderá repetir 0 vezes). Os vários mecanismos diferentes de laços oferecem diferentes formas de determinar quando este irá começar ou terminar. Há várias situações em que é mais fácil resolver um problema utilizando um determinado tipo de laço do que outros.
555 |
556 | ### for (para)
557 | Um laço for é repetido até que a condição especificada seja falsa. Uma declaração for é feita da seguinte maneira:
558 | ```
559 | for ([expressaoInicial]; [condicao]; [incremento])
560 | declaracao
561 | ```
562 | Quando um for é executado, ocorre o seguinte:
563 |
564 | * A expressão Inicial é inicializada e, caso possível, é executada. Normalmente essa expressão inicializa um ou mais contadores, mas a sintaxe permite expressões de qualquer grau de complexidade. Podendo conter também declaração de variáveis.
565 | * A expressão condicao é avaliada. caso o resultado de condicao seja verdadeiro, o laço é executado. Se o valor de condição é falso, então o laço terminará. Se a expressão condicao é omitida, a condição é assumida como verdadeira.
566 | * A instrução é executada. Para executar múltiplas declarações, use uma declaração em bloco ({ ... }) para agrupá-las.
567 | * A atualização da expressão incremento, se houver, executa, e retorna o controle para o passo 2.
568 |
569 | ### Exemplo
570 |
571 | A função a seguir contém uma declaração `for` que contará o número de opções selecionadas em uma lista (um elemento