├── 10_arrays
├── index.html
└── js
│ └── scripts.js
├── 11_if
├── index.html
└── js
│ └── scripts.js
├── 12_op_comparacao
├── index.html
└── js
│ └── scripts.js
├── 13_else_if_e_else
├── index.html
└── js
│ └── scripts.js
├── 14_operador_comp_p2
├── index.html
└── js
│ └── scripts.js
├── 15_operador_logico_and
├── index.html
└── js
│ └── scripts.js
├── 16_operador_or
├── index.html
└── js
│ └── scripts.js
├── 17_operador_not
├── index.html
└── js
│ └── scripts.js
├── 18_while
├── index.html
└── js
│ └── scripts.js
├── 19_op_atribuicao
├── index.html
└── js
│ └── scripts.js
├── 1_primeiro_programa
└── index.html
├── 20_for
├── index.html
└── js
│ └── scripts.js
├── 21_break_e_continue
├── index.html
└── js
│ └── scripts.js
├── 22_funcoes
├── index.html
└── js
│ └── scripts.js
├── 23_for_na_pratica
├── index.html
└── js
│ └── scripts.js
├── 24_escopo
├── index.html
└── js
│ └── scripts.js
├── 25_let_e_const
├── index.html
└── js
│ └── scripts.js
├── 26_metodos_numericos
├── index.html
└── js
│ └── scripts.js
├── 27_metodos_de_string
├── index.html
└── js
│ └── scripts.js
├── 28_metodos_de_string_P2
├── index.html
└── js
│ └── scripts.js
├── 29_metodos_de_array
├── index.html
└── js
│ └── scripts.js
├── 2_inserir_javascript
├── index.html
└── js
│ ├── scripts.js
│ └── scripts2.js
├── 30_metodos_de_array_p2
├── index.html
└── js
│ └── scripts.js
├── 31_nossos_obj
├── index.html
└── js
│ └── scripts.js
├── 32_this
├── index.html
└── js
│ └── scripts.js
├── 33_acessando_dom
├── index.html
└── js
│ └── scripts.js
├── 34_queryselector
├── index.html
└── js
│ └── scripts.js
├── 35_alterar_conteudo
├── index.html
└── js
│ └── scripts.js
├── 36_criar_elemento
├── index.html
└── js
│ └── scripts.js
├── 37_remover_elementos
├── index.html
└── js
│ └── scripts.js
├── 38_adicionar_elemento
├── index.html
└── js
│ └── scripts.js
├── 39_substituir_elementos
├── index.html
└── js
│ └── scripts.js
├── 3_particularidades_js
├── index.html
└── js
│ └── scripts.js
├── 40_alterar_attr
├── index.html
└── js
│ └── scripts.js
├── 41_adicionar_css
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 42_propriedades_document
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 43_callback_functions
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 44_settimeout_setinterval
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 45_cleartimeout_clearinterval
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 46_evento_onload
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 47_click
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 48_mouseover_mouseout
├── css
│ └── styles.css
├── index.html
└── js
│ └── scripts.js
├── 4_variaveis
├── index.html
└── js
│ └── scripts.js
├── 5_number
├── index.html
└── js
│ └── scripts.js
├── 6_string
├── index.html
└── js
│ └── scripts.js
├── 7_boolean
├── index.html
└── js
│ └── scripts.js
├── 8_null_undefined
├── index.html
└── js
│ └── scripts.js
└── 9_objetos
├── index.html
└── js
└── scripts.js
/10_arrays/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 10 - Array
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/10_arrays/js/scripts.js:
--------------------------------------------------------------------------------
1 | var arr = [5, "Matheus", true, {teste: 1, teste: 2}]; // obj => {}
2 |
3 | console.log(arr);
4 |
5 | var arr2 = [2,3,4,5,6];
6 |
7 | console.log(arr2);
8 |
9 | console.log(arr[1]);
10 | console.log(arr2[0]);
11 |
12 | arr[4] = 10;
13 |
14 | arr[0] = "Teste";
15 |
16 | console.log(arr);
17 |
18 | console.log(typeof arr);
--------------------------------------------------------------------------------
/11_if/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 11 - If
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/11_if/js/scripts.js:
--------------------------------------------------------------------------------
1 | var idade = 16;
2 | var idadeMinima = 18;
3 |
4 | console.log("Antes do if");
5 |
6 | if(idade > idadeMinima) {
7 | console.log("Pode fazer a carteira de habilitação");
8 | }
9 |
10 | if(idade > 15) {
11 | console.log("Precisa esperar 3 anos ainda");
12 | }
13 |
14 | console.log("Depois do if");
--------------------------------------------------------------------------------
/12_op_comparacao/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 12 - Operações de Comparação
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/12_op_comparacao/js/scripts.js:
--------------------------------------------------------------------------------
1 | var idade = 15;
2 | var possuiCarro = 1;
3 |
4 | if(idade >= 18) {
5 | console.log("O usuário pode fazer a carteira");
6 | }
7 |
8 | if(idade <= 17) {
9 | console.log("O usuário não pode fazer a carteira");
10 | }
11 |
12 | if(possuiCarro) {
13 | console.log("O usuário já pode andar de carro");
14 | }
15 |
16 | var nome = "Matheus";
17 |
18 | if(nome == "Matheus") {
19 | console.log("O seu nome é Matheus");
20 | }
21 |
22 | if(nome != "Matheus") {
23 | console.log("O nome não é Matheus");
24 | }
25 |
26 | if(20 > 100) {
27 | console.log("Passou");
28 | }
29 |
30 | if(100 < 20) {
31 | console.log("Passou 2")
32 | }
--------------------------------------------------------------------------------
/13_else_if_e_else/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 13 - Else if e Else
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/13_else_if_e_else/js/scripts.js:
--------------------------------------------------------------------------------
1 | var nome = "Xavier";
2 |
3 | if(nome == "Pedro") {
4 | console.log("O nome dele é Pedro");
5 | } else if(nome == "Matheus") {
6 | console.log("O nome é Matheus");
7 | } else if(nome == "Xavier") {
8 | console.log("O nome é Xavier");
9 | } else {
10 | console.log("Ele possui outro nome!");
11 | }
12 |
13 | var idade = 19;
14 |
15 | if(idade > 20) {
16 | console.log("Ele pode entrar na festa!");
17 | } else if(idade >= 18) {
18 | console.log("Ele só pode entrar com autorização");
19 | }
20 |
21 | if(nome == "Matheus") {
22 | console.log("teste");
23 | } else {
24 | console.log("testando");
25 | }
--------------------------------------------------------------------------------
/14_operador_comp_p2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 14 - === e !==
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/14_operador_comp_p2/js/scripts.js:
--------------------------------------------------------------------------------
1 | var numero = 4;
2 |
3 | if(numero === '5') {
4 | console.log("O numero é 5");
5 | }
6 |
7 | if(numero !== 5) {
8 | console.log("Não é o número 5 do tipo number");
9 | }
--------------------------------------------------------------------------------
/15_operador_logico_and/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 15 - AND ou &&
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/15_operador_logico_and/js/scripts.js:
--------------------------------------------------------------------------------
1 | var idade = 16;
2 | var nome = "João";
3 |
4 | if(nome == "João" && idade == 16) {
5 | console.log("O João pode entrar na aula de esgrima");
6 | } else {
7 | console.log("Este não é o João");
8 | }
9 |
10 | if(1 == 1 && 3 > 2 && true) {
11 | console.log("Passou");
12 | }
13 |
14 | if((1 == 1 && 3 > 3) && true) {
15 | console.log("Passou");
16 | } else if(nome === "João" && idade >= 14) {
17 | console.log("Aqui passa!");
18 | }
--------------------------------------------------------------------------------
/16_operador_or/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 16 - OR ou ||
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/16_operador_or/js/scripts.js:
--------------------------------------------------------------------------------
1 | var idade = 12;
2 | var nome = "João";
3 |
4 | if(nome == "João" || idade > 14) {
5 | console.log("Pode entrar na aula de esgrima");
6 | } else {
7 | console.log("Não pode entrar");
8 | }
9 |
10 | if(nome == "Pedro" && (30 > 20 || 10 == 10)) {
11 | console.log("testando");
12 | } else {
13 | console.log("não entrou");
14 | }
--------------------------------------------------------------------------------
/17_operador_not/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 17 - Operador Not ou !
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/17_operador_not/js/scripts.js:
--------------------------------------------------------------------------------
1 | if(!false) {
2 | console.log("Passou");
3 | }
4 |
5 | var nome = "Matheus";
6 |
7 | if(!(nome == "João")) {
8 | console.log("Ok");
9 | }
--------------------------------------------------------------------------------
/18_while/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 18 - While
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/18_while/js/scripts.js:
--------------------------------------------------------------------------------
1 | var x = 0;
2 |
3 | while(x <= 5) {
4 |
5 | console.log("Testando repetição " + x);
6 |
7 | // incremetador
8 | x++;
9 |
10 | }
11 |
12 | var arr = ['teste', 'testando', 'a', 'b'];
13 | var y = 0;
14 |
15 | while(y <= 3) {
16 |
17 | console.log(arr[y]);
18 |
19 | y++;
20 |
21 | }
22 |
23 | var palavra = "Matheus";
24 | var i = 0;
25 |
26 | while(i <= 6) {
27 |
28 | console.log(palavra[i]);
29 |
30 | i += 1;
31 |
32 | }
--------------------------------------------------------------------------------
/19_op_atribuicao/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 19 - Op. de atribuição
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/19_op_atribuicao/js/scripts.js:
--------------------------------------------------------------------------------
1 | var x = 1;
2 | var y = 2;
3 |
4 | // soma
5 | console.log(x = x + y);
6 | console.log(x += y);
7 |
8 | // subtracao
9 | console.log(x -= y);
10 |
11 | // multiplicação
12 | console.log(x *= y);
13 |
14 | // divisão
15 | console.log(x /= y);
16 |
17 | // loops
18 | console.log(x++);
19 | console.log(x--);
20 |
21 | while(x <= 100) {
22 |
23 | console.log(x);
24 |
25 | x *= 2;
26 |
27 | }
28 |
29 | console.log(x);
30 |
31 | var j = 5;
32 |
33 | while(x > 0) {
34 |
35 | console.log(x);
36 |
37 | x -= j;
38 |
39 | }
--------------------------------------------------------------------------------
/1_primeiro_programa/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 1 - Primeiro Programa
7 |
8 |
9 | Teste
10 |
13 |
14 |
--------------------------------------------------------------------------------
/20_for/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 20 - for
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/20_for/js/scripts.js:
--------------------------------------------------------------------------------
1 | for(var i = 0; i < 10; i++) {
2 |
3 | console.log("Repetindo for: " + i);
4 |
5 | }
6 |
7 | var arr = [1,2,3,4];
8 |
9 | for(var j = 0; j < arr.length; j++) {
10 | console.log(arr[j]);
11 | }
12 |
13 | console.log(arr.length);
14 |
15 | for(var x = 5; x < 100; x *= 3) {
16 | console.log(x);
17 | }
--------------------------------------------------------------------------------
/21_break_e_continue/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 21 - break e continue
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/21_break_e_continue/js/scripts.js:
--------------------------------------------------------------------------------
1 | for(var i = 10; i > 0; i--) {
2 |
3 | console.log(i);
4 |
5 | if(i === 5) {
6 | break;
7 | }
8 |
9 | }
10 |
11 | console.log("Deu o break");
12 |
13 | var x = 10;
14 |
15 | while(x < 100) {
16 |
17 | x += 10;
18 |
19 | if(x === 60 || x === 90) {
20 | console.log("CONTINUE");
21 | continue;
22 | }
23 |
24 | console.log("Testando continue " + x);
25 |
26 | }
--------------------------------------------------------------------------------
/22_funcoes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 22 - funções
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/22_funcoes/js/scripts.js:
--------------------------------------------------------------------------------
1 | function primeiraFuncao() {
2 |
3 | console.log("Hello World das funções");
4 |
5 | }
6 |
7 | primeiraFuncao();
8 |
9 | function dizerNome(nome) {
10 |
11 | console.log("O nome é: " + nome);
12 |
13 | }
14 |
15 | dizerNome("Matheus");
16 | dizerNome("Pedro");
17 | dizerNome("Xavier");
18 |
19 | var nomeDoBancoDeDados = "João";
20 |
21 | dizerNome(nomeDoBancoDeDados);
22 |
23 | function soma(a, b) {
24 | var soma = a + b;
25 | return soma;
26 | }
27 |
28 | var somaUm = soma(2, 5);
29 |
30 | console.log(somaUm);
31 |
32 | var somaDois = soma(5, 5);
33 |
34 | console.log(somaDois);
35 |
36 | console.log(soma(4, 5));
--------------------------------------------------------------------------------
/23_for_na_pratica/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 23 - for na prática
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/23_for_na_pratica/js/scripts.js:
--------------------------------------------------------------------------------
1 | var lista = ['Laranja', 'Maçã', 'Pera', 'Jaca', 'Limão'];
2 |
3 | var listaUl = document.createElement('ul');
4 |
5 | var body = document.getElementsByTagName('body');
6 |
7 | // console.log(body[0]);
8 |
9 | body[0].appendChild(listaUl);
10 |
11 | var listaNoBody = document.getElementsByTagName('ul');
12 |
13 | console.log(listaNoBody[0]);
14 |
15 | for(var i = 0; i < lista.length; i++) {
16 |
17 | var liFor = document.createElement('li');
18 |
19 | var textoLi = document.createTextNode(lista[i]);
20 |
21 | liFor.appendChild(textoLi);
22 |
23 | listaNoBody[0].appendChild(liFor);
24 |
25 | }
--------------------------------------------------------------------------------
/24_escopo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 24 - Escopo
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/24_escopo/js/scripts.js:
--------------------------------------------------------------------------------
1 | var x = 1;
2 |
3 | var y = 3;
4 |
5 | console.log(x, y);
6 |
7 | function teste() {
8 |
9 | var z = 0;
10 |
11 | console.log(z);
12 |
13 | }
14 |
15 | teste();
16 |
17 | function testando() {
18 |
19 | var z = 5;
20 |
21 | console.log(z);
22 |
23 | }
24 |
25 | testando();
26 |
27 | if(true) {
28 |
29 | var p = 1;
30 |
31 | }
32 |
33 | console.log(p);
--------------------------------------------------------------------------------
/25_let_e_const/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 25 - let e const
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/25_let_e_const/js/scripts.js:
--------------------------------------------------------------------------------
1 | let x = 5; // var x = 5;
2 |
3 | const y = 10;
4 |
5 | x = 12;
6 |
7 | console.log(x);
8 |
9 | console.log('const ' + y);
10 |
11 | if(true) {
12 |
13 | let x = 20;
14 |
15 | console.log(x);
16 |
17 | const y = 50;
18 |
19 | console.log('const if ' + y);
20 |
21 | }
22 |
23 | console.log(x);
24 |
25 |
26 | if(20 > 10) {
27 |
28 | const y = 100;
29 |
30 | console.log('const if 3 ' + y);
31 |
32 | }
33 |
34 | for(let x = 0; x < 10; x++) {
35 | console.log(x);
36 | }
--------------------------------------------------------------------------------
/26_metodos_numericos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 26 - métodos numéricos
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/26_metodos_numericos/js/scripts.js:
--------------------------------------------------------------------------------
1 | // parseFloat 10.0
2 |
3 | console.log(parseFloat('12.999'));
4 | console.log(Number.parseFloat('12.999'));
5 |
6 | // parseInt
7 |
8 | console.log(parseInt('10'));
9 | console.log(parseInt(16.96));
10 |
11 | // toFixed
12 |
13 | console.log(23.51515165.toFixed(1));
14 |
15 | // isNaN
16 |
17 | console.log(isNaN("teste"));
18 | console.log(isNaN(12));
19 | console.log(isNaN("14"));
20 |
21 | // MAX_VALUE e MIN_VALUE
22 |
23 | console.log(Number.MAX_VALUE);
24 | console.log(Number.MIN_VALUE);
25 |
26 | console.log(2.7976931348623157e+308);
--------------------------------------------------------------------------------
/27_metodos_de_string/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 27 - métodos de string
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/27_metodos_de_string/js/scripts.js:
--------------------------------------------------------------------------------
1 | // length
2 |
3 | var nome = "Matheus";
4 |
5 | console.log(nome.length);
6 |
7 | var obj = "bola";
8 |
9 | console.log(obj.length);
10 |
11 | // indexOf
12 |
13 | console.log(nome[2]);
14 |
15 | var frase = "O rato roeu a roupa do rei de Roma";
16 |
17 | console.log(frase.indexOf("roeu"));
18 |
19 | // slice
20 |
21 | var roeu = frase.slice(7, 11);
22 |
23 | console.log(roeu);
24 |
25 | // replace
26 |
27 | var novaFrase = frase.replace("roeu", "teste");
28 |
29 | console.log(novaFrase);
--------------------------------------------------------------------------------
/28_metodos_de_string_P2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 28 - métodos de string parte 2
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/28_metodos_de_string_P2/js/scripts.js:
--------------------------------------------------------------------------------
1 | // toLowerCase e toUpperCase
2 |
3 | var frase = "Esta é a frase que vamos manipular";
4 |
5 | var fraseCaixaAlta = frase.toUpperCase();
6 |
7 | console.log(fraseCaixaAlta);
8 |
9 | console.log(fraseCaixaAlta.toLowerCase());
10 |
11 |
12 | // trim
13 |
14 | var nome = " Matheus ";
15 |
16 | var nomeTrim = nome.trim();
17 |
18 | console.log(nome);
19 | console.log(nomeTrim);
20 |
21 | // split
22 |
23 | console.log(frase.split(" "));
24 |
25 | var tags = "PHP, JavaScript, HTML, CSS";
26 |
27 | console.log(tags.split(", "));
28 |
29 | // lastIndexOf
30 |
31 | var fraseDois = "Eu quero a última palavra teste desta frase de teste";
32 |
33 | console.log(fraseDois.indexOf("teste"));
34 |
35 | console.log(fraseDois.lastIndexOf("teste"));
36 |
--------------------------------------------------------------------------------
/29_metodos_de_array/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 29 - métodos de array
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/29_metodos_de_array/js/scripts.js:
--------------------------------------------------------------------------------
1 | // length
2 | var arr = [1,2,3,4,5];
3 |
4 | console.log(arr.length);
5 |
6 | // push
7 | arr.push(6);
8 | arr.push('Qualquer coisa');
9 |
10 | console.log(arr);
11 |
12 | // pop
13 | arr.pop();
14 |
15 | console.log(arr);
16 |
17 | // unshift
18 | arr.unshift(0);
19 | arr.unshift('teste');
20 |
21 | console.log(arr);
22 |
23 | // shift
24 | arr.shift();
25 |
26 | console.log(arr);
27 |
28 | // acessar o último elemento
29 | console.log(arr[arr.length - 1]);
30 |
31 | // isArray
32 | console.log(Array.isArray(5));
33 |
34 | console.log(Array.isArray(arr));
35 |
--------------------------------------------------------------------------------
/2_inserir_javascript/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 2 - Inserir JavaScript
7 |
8 |
9 |
10 |
13 | Teste
14 |
15 |
16 |
--------------------------------------------------------------------------------
/2_inserir_javascript/js/scripts.js:
--------------------------------------------------------------------------------
1 | console.log("Este é o script do head!");
--------------------------------------------------------------------------------
/2_inserir_javascript/js/scripts2.js:
--------------------------------------------------------------------------------
1 | console.log("Este é o script do body");
--------------------------------------------------------------------------------
/30_metodos_de_array_p2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 30 - métodos de array p2
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/30_metodos_de_array_p2/js/scripts.js:
--------------------------------------------------------------------------------
1 | // splice
2 | var arr = [1,2,3,4,5];
3 |
4 | arr.splice(2, 0, 999);
5 |
6 | console.log(arr);
7 |
8 | arr.splice(4, 1);
9 |
10 | console.log(arr);
11 |
12 | // indexOf
13 |
14 | console.log(arr.indexOf(5));
15 |
16 |
17 | // join
18 | var arr2 = ["O", "rato", "roeu", "a", "roupa"];
19 |
20 | console.log(arr2.join(","));
21 |
22 |
23 | // reverse
24 | console.log(arr2.reverse());
--------------------------------------------------------------------------------
/31_nossos_obj/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 31 - Nossos Objetos
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/31_nossos_obj/js/scripts.js:
--------------------------------------------------------------------------------
1 | let pessoa = {
2 | nome: "Matheus",
3 | idade: 29,
4 | falar: function() {
5 | console.log("Olá, tudo bem?");
6 | },
7 | soma: function(a, b) {
8 | return a + b;
9 | }
10 | };
11 |
12 | console.log(pessoa.nome);
13 |
14 | pessoa.falar();
15 |
16 | var soma = pessoa.soma(2, 2);
17 |
18 | console.log(soma);
19 |
--------------------------------------------------------------------------------
/32_this/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 32 - this
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/32_this/js/scripts.js:
--------------------------------------------------------------------------------
1 | var teste = 5;
2 |
3 | console.log(this);
4 | console.log(this.teste);
5 | console.log(teste);
6 |
7 | let pessoa = {
8 | nome: "Matheus",
9 | idade: 29,
10 | falar: function() {
11 | console.log("Olá, tudo bem?");
12 | },
13 | dizerNome: function() {
14 | console.log("O meu nome é " + this.nome);
15 | },
16 | aniversario: function() {
17 | this.idade += 1;
18 | },
19 | saudacao: function() {
20 | return 'Sr. ' + this.nome;
21 | }
22 | };
23 |
24 | pessoa.dizerNome();
25 |
26 | console.log(pessoa.idade);
27 |
28 | pessoa.aniversario();
29 | pessoa.aniversario();
30 | pessoa.aniversario();
31 |
32 | console.log(pessoa.idade);
33 |
34 | var sdc = pessoa.saudacao();
35 |
36 | console.log("Olá " + sdc);
--------------------------------------------------------------------------------
/33_acessando_dom/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 33 - Acessando o DOM
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o paragráfo!
13 |
14 |
15 | - Item 1
16 | - Item 2
17 | - Item 3
18 | - Item 4
19 |
20 |
21 |
22 | - Item 5
23 | - Item 6
24 | - Item 7
25 | - Item 8
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/33_acessando_dom/js/scripts.js:
--------------------------------------------------------------------------------
1 | // tag
2 | var titulo = document.getElementsByTagName('h1')[0];
3 |
4 | console.log(titulo);
5 |
6 | var lis = document.getElementsByTagName('li');
7 |
8 | console.log(lis);
9 |
10 | // id
11 | var paragrafo = document.getElementById('paragrafo');
12 |
13 | console.log(paragrafo);
14 |
15 | // class
16 | var itensDaLista = document.getElementsByClassName('item');
17 |
18 | console.log(itensDaLista);
--------------------------------------------------------------------------------
/34_queryselector/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 34 - querySelector
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o paragráfo! teste
13 |
14 |
15 | - Item 1
16 | - Item 2
17 | - Item 3
18 | - Item 4
19 |
20 |
21 |
22 | - Item 5
23 | - Item 6
24 | - Item 7
25 | - Item 8
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/34_queryselector/js/scripts.js:
--------------------------------------------------------------------------------
1 | var itensClasse = document.getElementsByClassName('item');
2 |
3 | console.log(itensClasse);
4 |
5 | // querySelectorAll
6 | var itensQuery = document.querySelectorAll('#lista2 li');
7 |
8 | console.log(itensQuery);
9 |
10 | var itensQuery2 = document.querySelectorAll('#lista .item');
11 |
12 | console.log(itensQuery2);
13 |
14 | // querySelector
15 | var lista = document.querySelector('#lista');
16 |
17 | console.log(lista);
18 |
19 | var primeiraLista = document.querySelector('ul');
20 |
21 | console.log(primeiraLista);
22 |
23 | var span = document.querySelector('#paragrafo span');
24 |
25 | console.log(span);
--------------------------------------------------------------------------------
/35_alterar_conteudo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 35 - Alterar conteúdo
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/35_alterar_conteudo/js/scripts.js:
--------------------------------------------------------------------------------
1 | // selecionar elemento
2 | var title = document.querySelector("#title");
3 |
4 | // innerHTML
5 | title.innerHTML = "Testando o texto alterado!";
6 |
7 | // textContent -> mais utilizado, recomendando e performático
8 | var subtitle = document.querySelector(".subtitle");
9 |
10 | console.log(subtitle);
11 |
12 | subtitle.textContent = "Testando o textContent";
--------------------------------------------------------------------------------
/36_criar_elemento/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 36 - criar elemento
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/36_criar_elemento/js/scripts.js:
--------------------------------------------------------------------------------
1 | // inserir o elemento no body
2 | var novoParagrafo = document.createElement("p");
3 |
4 | var texto = document.createTextNode("Este é o conteúdo do paragráfo");
5 |
6 | novoParagrafo.appendChild(texto);
7 |
8 | console.log(novoParagrafo);
9 |
10 | var body = document.querySelector("body");
11 |
12 | console.log(body);
13 |
14 | body.appendChild(novoParagrafo);
15 |
16 | // inserir em um container
17 |
18 | var container = document.getElementById("container");
19 |
20 | console.log(container);
21 |
22 | var el = document.createElement("span");
23 |
24 | el.appendChild(document.createTextNode("texto do span"));
25 |
26 | console.log(el);
27 |
28 | container.appendChild(el);
--------------------------------------------------------------------------------
/37_remover_elementos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 37 - remover elementos
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/37_remover_elementos/js/scripts.js:
--------------------------------------------------------------------------------
1 | // removendo elemento filho
2 |
3 | var container = document.querySelector("#container");
4 |
5 | var p = document.querySelector("#container p");
6 |
7 | container.removeChild(p);
8 |
9 |
10 | // remover o elemento
11 |
12 | var subtitle = document.querySelector(".subtitle");
13 |
14 | subtitle.remove();
--------------------------------------------------------------------------------
/38_adicionar_elemento/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 38 - Adicionando elemento
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/38_adicionar_elemento/js/scripts.js:
--------------------------------------------------------------------------------
1 | // criar elemento
2 | var el = document.createElement("div");
3 |
4 | el.classList = "div-criada";
5 |
6 | console.log(el);
7 |
8 | var container = document.querySelector("#container");
9 |
10 | // inserindo elemento filho
11 | container.appendChild(el);
12 |
13 | // inserBefore - insere antes
14 |
15 | var el2 = document.createElement("div");
16 |
17 | el2.classList = "div-before";
18 |
19 | var el3 = document.querySelector("#container .div-criada");
20 |
21 | console.log(el3);
22 |
23 | container.insertBefore(el2, el3);
--------------------------------------------------------------------------------
/39_substituir_elementos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 39 - Substituir elementos
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/39_substituir_elementos/js/scripts.js:
--------------------------------------------------------------------------------
1 | // criar um elemento
2 | var el = document.createElement("h3");
3 |
4 | el.classList = "testando-classe";
5 |
6 | var texto = document.createTextNode("Este é o texto do h3");
7 |
8 | el.appendChild(texto);
9 |
10 | console.log(el);
11 |
12 | // selecionar o elemento que quero trocar
13 | var title = document.querySelector("#title");
14 |
15 | console.log(title);
16 |
17 | // selecionar o pai do el
18 | var pai = title.parentNode;
19 |
20 | // trocar os elementos
21 | pai.replaceChild(el, title);
--------------------------------------------------------------------------------
/3_particularidades_js/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 3 - Particularidades JS
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/3_particularidades_js/js/scripts.js:
--------------------------------------------------------------------------------
1 | console.log("Primeiro");
2 |
3 | console.log("Último");
4 |
5 | console.log("Mais um console.log");
6 |
7 | // Declara uma variável
8 | var a = 1;
9 |
10 | a = 'teste';
11 |
12 | console.log(a);
13 |
14 | // Este é um comentário
15 |
16 | /*
17 | Este
18 | é
19 | um
20 | comentário
21 | de
22 | múltiplas
23 | linhas
24 | */
--------------------------------------------------------------------------------
/40_alterar_attr/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 40 - alterar atributo
7 |
8 |
9 |
10 | Título principal
11 |
12 | Este é o segundo título
13 |
14 | Este é o paragráfo! teste
15 |
16 |
17 | - Item 1
18 | - Item 2
19 | - Item 3
20 | - Item 4
21 |
22 |
23 |
24 | - Item 5
25 | - Item 6
26 | - Item 7
27 | - Item 8
28 |
29 |
30 |
31 |
Testando
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/40_alterar_attr/js/scripts.js:
--------------------------------------------------------------------------------
1 | // adicionar atributo
2 | var title = document.querySelector("#title");
3 |
4 | title.setAttribute("class", "testando-atributo");
5 |
6 | console.log(title);
7 |
8 | var btn = document.querySelector("#btn");
9 |
10 | btn.setAttribute("disabled", "disabled");
11 |
12 | var subtitle = document.querySelector(".subtitle");
13 |
14 | subtitle.setAttribute("id", "titulo-2");
15 |
16 | // remover atributo
17 | var lista = document.querySelector("#lista");
18 |
19 | lista.removeAttribute("id");
--------------------------------------------------------------------------------
/41_adicionar_css/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/41_adicionar_css/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 41 - adicionar CSS
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 | - Item 1
19 | - Item 2
20 | - Item 3
21 | - Item 4
22 |
23 |
24 |
25 | - Item 5
26 | - Item 6
27 | - Item 7
28 | - Item 8
29 |
30 |
31 |
32 |
Testando
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/41_adicionar_css/js/scripts.js:
--------------------------------------------------------------------------------
1 | // seleciona elemento
2 | var title = document.querySelector("#title");
3 |
4 | // adiciona o estilo
5 | title.style.color = "red";
6 |
7 | // background-color
8 | title.style.backgroundColor = "yellow";
9 |
10 |
11 | // selecionar elemento
12 | var subtitle = document.querySelector(".subtitle");
13 |
14 | // adicionar vários estilos
15 | subtitle.style.cssText = "color: blue; background-color: pink; font-size: 50px";
--------------------------------------------------------------------------------
/42_propriedades_document/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/42_propriedades_document/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 42 - Propriedades Document
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 | - Item 1
19 | - Item 2
20 | - Item 3
21 | - Item 4
22 |
23 |
24 |
25 | - Item 5
26 | - Item 6
27 | - Item 7
28 | - Item 8
29 |
30 |
31 |
32 |
Testando
33 |
34 |
35 |
36 |
39 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/42_propriedades_document/js/scripts.js:
--------------------------------------------------------------------------------
1 | // propriedades document
2 | console.log(document.body);
3 |
4 | console.log(document.head);
5 |
6 | console.log(document.links[0]);
7 |
8 | document.links[0].textContent = "Twitter";
9 |
10 | console.log(document.URL);
11 |
12 | console.log(document.title);
13 |
14 | document.title = "Aula 42";
15 |
16 | console.log(document.title);
17 |
18 |
--------------------------------------------------------------------------------
/43_callback_functions/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/43_callback_functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 43 - callback
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 | - Item 1
19 | - Item 2
20 | - Item 3
21 | - Item 4
22 |
23 |
24 |
25 | - Item 5
26 | - Item 6
27 | - Item 7
28 | - Item 8
29 |
30 |
31 |
32 |
Testando
33 |
34 |
35 |
36 |
39 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/43_callback_functions/js/scripts.js:
--------------------------------------------------------------------------------
1 | function exibir(num) {
2 | console.log("A operação resultou em: " + num);
3 | }
4 |
5 | function soma(a, b, callback) {
6 | var op = a + b;
7 | callback(op);
8 | }
9 |
10 | function multiplicacao(a, b, cb) {
11 | var op = a * b;
12 | cb(op);
13 | }
14 |
15 | soma(2, 2, exibir);
16 |
17 | multiplicacao(2, 4, exibir);
--------------------------------------------------------------------------------
/44_settimeout_setinterval/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/44_settimeout_setinterval/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 44 - setTimeout e setInterval
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 | - Item 1
19 | - Item 2
20 | - Item 3
21 | - Item 4
22 |
23 |
24 |
25 | - Item 5
26 | - Item 6
27 | - Item 7
28 | - Item 8
29 |
30 |
31 |
32 |
Testando
33 |
34 |
35 |
36 |
39 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/44_settimeout_setinterval/js/scripts.js:
--------------------------------------------------------------------------------
1 | // setTimeout
2 | console.log("Antes do setTimeout");
3 |
4 | setTimeout(function() {
5 |
6 | console.log("Testando o setTimeout");
7 |
8 | }, 2000);
9 |
10 | console.log("Depois do setTimeout");
11 |
12 | // setInterval
13 | setInterval(function() {
14 |
15 | console.log("Testando setInterval");
16 |
17 | }, 1000);
--------------------------------------------------------------------------------
/45_cleartimeout_clearinterval/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/45_cleartimeout_clearinterval/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 45 - clearTimeout e clearInterval
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 | - Item 1
19 | - Item 2
20 | - Item 3
21 | - Item 4
22 |
23 |
24 |
25 | - Item 5
26 | - Item 6
27 | - Item 7
28 | - Item 8
29 |
30 |
31 |
32 |
Testando
33 |
34 |
35 |
36 |
39 |
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/45_cleartimeout_clearinterval/js/scripts.js:
--------------------------------------------------------------------------------
1 | // clearTimeout na prática
2 | var x = 0;
3 |
4 | var myTimer = setTimeout(function() {
5 | console.log("O x é 0");
6 | }, 1500);
7 |
8 | x = 5;
9 |
10 | if(x > 0) {
11 | clearTimeout(myTimer);
12 | console.log("O x passou de 0");
13 | }
14 |
15 | // clearInterval na prática
16 | var myInterval = setInterval(function() {
17 | console.log("Imprimindo interval");
18 | }, 500);
19 |
20 | setTimeout(function() {
21 |
22 | console.log("Não precisamos mais repetir!");
23 | clearInterval(myInterval);
24 |
25 | }, 1500);
--------------------------------------------------------------------------------
/46_evento_onload/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/46_evento_onload/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 46 - evento onload
7 |
8 |
9 |
10 |
11 |
12 | Título principal
13 |
14 | Este é o segundo título
15 |
16 | Este é o paragráfo! teste
17 |
18 |
19 | - Item 1
20 | - Item 2
21 | - Item 3
22 | - Item 4
23 |
24 |
25 |
26 | - Item 5
27 | - Item 6
28 | - Item 7
29 | - Item 8
30 |
31 |
32 |
33 |
Testando
34 |
35 |
36 |
37 |
40 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/46_evento_onload/js/scripts.js:
--------------------------------------------------------------------------------
1 | window.onload = function() {
2 |
3 | console.log("Carregou o DOM");
4 |
5 | var title2 = document.querySelector("#title");
6 |
7 | console.log(title2);
8 |
9 | }
10 |
11 | console.log("Carregou o JS");
12 |
13 | var title = document.querySelector("#title");
14 |
15 | console.log(title);
--------------------------------------------------------------------------------
/47_click/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
--------------------------------------------------------------------------------
/47_click/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 47 - click
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Este é o paragráfo! teste
16 |
17 |
18 |
19 |
20 |
21 |
22 | - Item 1
23 | - Item 2
24 | - Item 3
25 | - Item 4
26 |
27 |
28 |
29 | - Item 5
30 | - Item 6
31 | - Item 7
32 | - Item 8
33 |
34 |
35 |
36 |
Testando
37 |
38 |
39 |
40 |
43 |
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/47_click/js/scripts.js:
--------------------------------------------------------------------------------
1 | // inserir click
2 | var btn = document.querySelector("#btn");
3 |
4 | console.log(btn);
5 |
6 | btn.addEventListener("click", function() {
7 |
8 | console.log("clicou");
9 |
10 | console.log(this);
11 |
12 | this.style.color = "red";
13 |
14 | });
15 |
16 |
17 | // click afetando outros elementos
18 | var title = document.querySelector("#title");
19 |
20 | title.addEventListener("click", function() {
21 |
22 | var subtitle = document.querySelector(".subtitle");
23 |
24 | subtitle.style.display = "none";
25 |
26 | });
27 |
28 |
29 | // double click
30 | var subtitle = document.querySelector(".subtitle");
31 |
32 | subtitle.addEventListener("dblclick", function() {
33 |
34 | console.log("click duplo!");
35 |
36 | });
--------------------------------------------------------------------------------
/48_mouseover_mouseout/css/styles.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: purple;
3 | }
4 |
5 | .hide {
6 | display: none;
7 | }
--------------------------------------------------------------------------------
/48_mouseover_mouseout/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 48 - mouseover e mouseout
7 |
8 |
9 |
10 |
11 | Título principal
12 |
13 | Este é o segundo título
14 |
15 | Contém algum texto!
16 |
17 | Este é o paragráfo! teste
18 |
19 |
20 |
21 |
22 |
23 |
24 | - Item 1
25 | - Item 2
26 | - Item 3
27 | - Item 4
28 |
29 |
30 |
31 | - Item 5
32 | - Item 6
33 | - Item 7
34 | - Item 8
35 |
36 |
37 |
38 |
Testando
39 |
40 |
41 |
42 |
45 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/48_mouseover_mouseout/js/scripts.js:
--------------------------------------------------------------------------------
1 | // evento de mouseover
2 | var title = document.querySelector("#title");
3 |
4 | title.addEventListener("mouseover", function() {
5 |
6 | this.style.backgroundColor = "yellow";
7 |
8 | });
9 |
10 |
11 | // evento de mouseout
12 | title.addEventListener("mouseout", function() {
13 |
14 | this.style.backgroundColor = "white";
15 |
16 | });
17 |
18 | // afetar outro elemento com mouseover
19 | var subtitle = document.querySelector(".subtitle");
20 |
21 | subtitle.addEventListener("mouseover", function() {
22 |
23 | var legenda = document.querySelector("#legenda");
24 |
25 | legenda.classList.remove("hide");
26 |
27 | });
28 |
29 | subtitle.addEventListener("mouseout", function() {
30 |
31 | var legenda = document.querySelector("#legenda");
32 |
33 | legenda.classList.add("hide");
34 |
35 | });
--------------------------------------------------------------------------------
/4_variaveis/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 4 - Variáveis
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/4_variaveis/js/scripts.js:
--------------------------------------------------------------------------------
1 | var teste = 1;
2 |
3 | var nome = "João";
4 |
5 | console.log(teste);
6 |
7 | teste = 'Matheus';
8 |
9 | console.log(teste);
10 |
11 | console.log(nome);
12 |
13 | var $nome = 'ASD';
14 | var _nome = 'ASD2';
15 |
16 | console.log($nome);
17 | console.log(_nome);
18 |
19 | var nome5 = 'ASD3';
20 |
21 | console.log(nome5);
22 |
23 | var meuPrimeiroNome = 'Matheus';
24 |
25 | console.log(meuPrimeiroNome); // camelCase
26 |
27 | var meusobrenome = "Battisti";
28 |
29 | console.log(meusobrenome);
30 |
31 | let testando = 1;
32 | const ola = 2;
33 |
34 | console.log(testando);
35 | console.log(ola);
36 |
37 | var meuNome;
38 |
39 | console.log(meuNome);
40 |
41 | meuNome = "Matheus";
42 |
43 | console.log(meuNome);
--------------------------------------------------------------------------------
/5_number/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 5 - Number
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/5_number/js/scripts.js:
--------------------------------------------------------------------------------
1 | var numero = 5;
2 |
3 | console.log(numero);
4 | console.log(typeof numero);
5 |
6 | var float = 5.32;
7 |
8 | console.log(float);
9 | console.log(typeof float);
10 |
11 | var textoComNumero = '523';
12 |
13 | console.log(textoComNumero);
14 | console.log(typeof textoComNumero);
15 |
16 | console.log(NaN);
17 | console.log(typeof NaN);
18 | console.log(typeof +Infinity);
19 | console.log(typeof -Infinity);
--------------------------------------------------------------------------------
/6_string/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 6 - String
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/6_string/js/scripts.js:
--------------------------------------------------------------------------------
1 | var nome = "Matheus";
2 | var sobrenome = "Battisti";
3 |
4 | var nomeCompleto = nome + " " + sobrenome;
5 |
6 | console.log(nome);
7 | console.log(typeof nome);
8 |
9 | console.log(typeof "asd");
10 |
11 | console.log(nomeCompleto);
12 |
13 | console.log(typeof "5.292929");
14 |
15 | var frase = 'Esta é uma frase complexa';
16 |
17 | console.log(frase);
18 | console.log(typeof frase);
19 |
20 | console.log(nome + " " + frase);
21 |
22 | document.write('Ele disse: "Olá"');
23 |
24 | document.write("Ele disse: 'Olá'");
25 |
26 | console.log("Este número: " + nome);
--------------------------------------------------------------------------------
/7_boolean/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 7 - Boolean
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/7_boolean/js/scripts.js:
--------------------------------------------------------------------------------
1 | var verdadeiro = true;
2 |
3 | console.log(verdadeiro);
4 | console.log(typeof verdadeiro);
5 |
6 | console.log(typeof true);
7 | console.log(typeof false);
8 |
9 | var falso = false;
10 |
11 | console.log(falso);
12 | console.log(typeof falso);
13 |
--------------------------------------------------------------------------------
/8_null_undefined/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 8 - Null e undefined
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/8_null_undefined/js/scripts.js:
--------------------------------------------------------------------------------
1 | // Hoisting - içamento
2 | console.log(sobrenome);
3 | console.log(numero);
4 |
5 | var nome = null;
6 | var sobrenome = "Battisti";
7 |
8 | console.log(nome);
9 | console.log(sobrenome);
10 |
11 | nome = "Matheus";
12 |
13 | console.log(nome);
14 |
15 | var numero = 5;
--------------------------------------------------------------------------------
/9_objetos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 9 - Objetos
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/9_objetos/js/scripts.js:
--------------------------------------------------------------------------------
1 | var obj = {
2 | nome: "Matheus",
3 | idade: 29,
4 | profissao: "Programador",
5 | estaTrabalhando: true,
6 | };
7 |
8 | console.log(obj);
9 |
10 | console.log(typeof obj);
11 |
12 | console.log(obj.nome);
13 | console.log(obj.idade);
14 | console.log(obj.profissao);
15 |
16 | console.log("O meu nome é " + obj.nome);
17 |
18 | obj.nome = "Pedro";
19 |
20 | console.log(obj.nome);
21 |
22 | console.log(obj);
23 |
24 | obj.graduacao = true;
25 |
26 | console.log(obj);
--------------------------------------------------------------------------------