🚀 Curso de Javascript

Bem-vindo ao meu laboratório de experiências com Javascript!
Aqui você vai encontrar meus primeiros passos, tropeços e conquistas no mundo da programação web. 😄

O que já rolou por aqui?

• HTML + Javascript: Aprendi a criar páginas HTML e conectar scripts JS para deixar tudo mais dinâmico!

• Manipulação do DOM: Já consigo alterar textos na página usando o famoso document.getElementById.
  Exemplo:

  document.getElementById("texto").innerHTML = "Meu primeiro texto <b>Javascript</b>!";

• Organização dos arquivos:

  • paginas-html/index.html: Minha página principal, onde tudo acontece.
  • paginas-javascript/index.js: Meu script JS que faz a mágica acontecer.

• Declarações em Javascript: Descobri que posso criar "caixinhas mágicas" para guardar valores usando var, let e const.

• Sintaxe do Javascript: Estudei como escrever comandos corretamente, usando pontos e vírgulas, chaves para blocos de código e a importância de seguir a estrutura da linguagem para evitar erros.

• Comentários em Javascript:
  Aprendi a deixar recados secretos no código usando comentários de uma linha (//) e de várias linhas (/* ... */).
  Isso ajuda a organizar e explicar o que cada parte faz, sem atrapalhar a execução!

• Declarações de Variáveis:
  Descobri que posso criar "caixinhas mágicas" para guardar valores usando var, let e const.
  Cada uma tem seu jeitinho especial de funcionar!

• Diferença entre var, let e const:

  • var: Antiga, escopo de função, pode ser redeclarada.
  • let: Moderna, escopo de bloco, pode ser alterada mas não redeclarada no mesmo bloco.
  • const: Moderna, escopo de bloco, valor constante (não pode ser alterado).

• Sintaxe do Javascript:
  Estudei como escrever comandos corretamente, usando pontos e vírgulas, chaves para blocos de código e a importância de seguir a estrutura da linguagem para evitar erros.
  Também aprendi que Javascript é case sensitive (letras maiúsculas e minúsculas fazem diferença!).

  Operadores Aritméticos:
  Para fazer contas matemáticas como um(a) verdadeiro(a) calculista!

  • + (adição): soma valores.
  • - (subtração): tira valores.
  • * (multiplicação): multiplica tudo!
  • / (divisão): divide igual pizza.
  • % (módulo): pega o resto da divisão (ótimo para saber se um número é par ou ímpar).
  • ** (exponenciação): potência, tipo 2 elevado a 3.

• Operadores de Atribuição:
  Para guardar valores nas variáveis de forma rápida e prática!

  • = (atribuição simples): coloca um valor na variável.
  • +=, -=, *=, /=, %=: faz a operação e já atualiza o valor.

• Operadores de Comparação:
  Para comparar valores e descobrir se são iguais, diferentes, maiores ou menores.

  • == (igualdade de valor)
  • === (igualdade de valor e tipo)
  • != (diferente)
  • !== (diferente valor ou tipo)
  • > (maior que)
  • < (menor que)
  • >= (maior ou igual)
  • <= (menor ou igual)

• Operadores Lógicos:
  Para criar condições e tomar decisões inteligentes!

  • && (E): só é verdadeiro se tudo for verdadeiro.
  • || (OU): basta um ser verdadeiro.
  • ! (NÃO): inverte o valor lógico.

• Operador de Concatenação:

  • + também serve para juntar textos (strings)!
    Exemplo: "Olá, " + "mundo!" vira `"Olá, mundo

    🚦 Funções em Javascript: O botão mágico do código!

Chegou a hora de aprender sobre funções!
Sabe aquele botão secreto que faz algo incrível quando você aperta? Função é isso no Javascript: um bloco de código que só roda quando você chama!

Com funções, posso repetir tarefas, organizar o código e deixar tudo mais inteligente.
É tipo criar meus próprios comandos secretos! 😎

O que aprendi no arquivo funcoes.js:

• Funções são como mini-fábricas**: Você dá uma entrada (parâmetros), ela processa e te devolve uma saída (retorno).
• Podem ser usadas para qualquer tarefa: Desde somar números até converter temperaturas ou mostrar alertas na tela!

🧰 Pasta objetos: O Baú dos Tesouros do Javascript!

Dentro da pasta paginas-javascript/objetos.js eu mergulhei no universo dos objetos!
Aqui, aprendi que objetos são como baús mágicos onde posso guardar várias informações diferentes sobre uma coisa só — e ainda colocar poderes especiai (métodos) dentro deles!

O que tem nesse baú?

• Propriedades: São os tesouros guardados no objeto, como marca, modelo, ano e placa de um carro.
• Métodos: São os poderes especiais do objeto, como buzinar ou mostrar informações completas.

🎉 Pasta eventos: Deixando a página super interativa!

Agora chegou a parte divertida: eventos!
Na pasta paginas-javascript/eventos.js aprendi como tornar a página viva, reagindo a tudo que o usuário faz: clicar, passar o mouse, digitar, mudar um campo e muito mais.

O que são eventos?

Eventos são ações que acontecem na página, geralmente causadas pelo usuário.
Quando você clica, digita, passa o mouse ou muda algo, um evento é disparado — e o Javascript pode responder a isso!

Exemplos de eventos que estudei:

• onclick: Quando você clica em algo.
• ondblclick: Clique duplo.
• onmouseover: Quando o mouse passa por cima de um elemento.
• onmouseout: Quando o mouse sai de cima do elemento.
• onchange: Quando um campo muda de valor.
• onkeydown / onkeyup: Quando uma tecla é pressionada ou solta.
• onload: Quando a página termina de carregar.

O que fiz no arquivo?

• Mudei a cor do fundo da página ao clicar.
• Troquei a cor de uma div para vermelho ou azul ao passar o mouse.
• Detectei mudanças em campos de texto e teclas pressionadas, mostrando tudo no console.

Resumindo:

Com eventos, minha página ficou muito mais divertida e interativa!
Agora, cada ação do usuário pode virar uma surpresa no site. 😄✨

🗂️ Pasta arrays: Listas mágicas para guardar de tudo!

Chegou a vez dos arrays!
Na pasta paginas-javascript/arrays.js aprendi como criar listas superpoderosas para guardar vários valores em uma única variável.

O que são arrays?

Arrays são como caixas organizadas por ordem, onde cada item tem seu lugar (posição).
Diferente dos objetos, que usam nomes para acessar valores, nos arrays você usa números (índices), começando do zero.

Resumindo:

Arrays são listas mágicas que deixam o código muito mais organizado e prático!
Com eles, posso guardar, acessar e manipular vários valores rapidinho, só usando a posição de cada item.
É como ter uma mochila com vários bolsos numerados para guardar tudo o que eu quiser! 🎒✨

🧙‍♂️ Pasta arrays-2: Truques avançados com listas!

Na pasta paginas-javascript/arrays-2.js mergulhei ainda mais fundo no universo dos arrays e aprendi vários truques mágicos para manipular listas de formas superpoderosas!

O que explorei por aqui?

• Juntar várias listas em uma só Usei o .concat() para criar uma super lista com vários arrays:

  const superLista = lista1.concat(lista2, lista3);
  

• Adicionar e remover itens do começo ou fim

  • .push(): adiciona no final
  • .pop(): remove do final
  • .unshift(): adiciona no começo
  • .shift(): remove do começo

• Adicionar itens em qualquer posição
  Com .splice(), posso inserir ou remover itens em qualquer lugar da lista:

  pessoa.splice(1, 0, "item adicionado1", "item adicionado2");

• Selecionar uma parte da lista
  Com .slice(), pego só um pedaço da lista:

  const craques = jogadores.slice(2, 7);

• Ordenar e inverter listas

  • .sort(): coloca em ordem alfabética ou crescente
  • .reverse(): inverte a ordem da lista

• Filtrar valores com funções Usei .filter() para criar uma nova lista só com números maiores que 20:

  const maior20 = numeros.filter(filtragem);
  function filtragem(value) {
      return value > 20;
  }
  

• Descobrir o maior ou menor número
  Com Math.max.apply(null, array) e Math.min.apply(null, array) encontro o maior e o menor valor de um array rapidinho!

Resumindo:

Agora, além de criar listas, sei como juntar, cortar, ordenar, inverter, filtrar e até buscar o maior ou menor valor!
Com esses truques, meus arrays ficaram muito mais poderosos e versáteis — prontos para qualquer desafio do Javascript! 🪄🗂️

🔀 Pasta if-e-else: Tomando decisões no código!

Na pasta paginas-javascript/if-e-else.js aprendi a deixar o Javascript mais inteligente, capaz de tomar decisões sozinho usando as estruturas if e else!

O que são if e else?

São como placas de trânsito para o código:

• if: "Se isso acontecer, faça tal coisa..."
• else: "Se não, faça outra coisa!"

E ainda tem o else if para criar vários caminhos diferentes.

O que pratiquei:

• Verifiquei se um interruptor está "on" ou "off" para acender ou apagar uma lâmpada virtual.
• Usei a hora do sistema para dar "Bom dia", "Boa tarde" ou "Boa noite" automaticamente.
• Criei uma função que checa se o campo de nome está vazio e mostra uma mensagem colorida na tela:

Resumindo:

Com if e else, meu código agora pode escolher o que fazer em cada situação, deixando tudo mais dinâmico e interativo!
É como dar cérebro para o Javascript decidir o que mostrar ou executar. 🧠🚦

🎲 Pasta switch: Escolhendo caminhos como um mestre!

Na pasta paginas-javascript/switch.js aprendi a usar o switch, uma estrutura super prática para tomar decisões quando há várias possibilidades diferentes!

O que é o switch?

Pense no switch como um cruzamento com várias saídas:
Dependendo do valor, o código segue por um caminho diferente.
Se não encontrar nenhum caminho certo, ele pega a saída padrão (default)!

Resumindo:

Com o switch, posso criar menus, verificações e respostas para várias situações diferentes, tudo de forma organizada e fácil de entender!
É como dar ao Javascript um mapa com várias rotas possíveis — e ele sempre sabe para onde ir! 🗺️🚦

🔁 Pasta lacos-de-repeticao: Repetindo como um robô incansável!

Na pasta paginas-javascript/lacos-de-repeticao.js mergulhei no mundo dos laços de repetição (loops), aprendendo a fazer o Javascript repetir tarefas rapidinho, sem cansar!

O que são laços de repetição?

São comandos que fazem o código executar uma ação várias vezes, de forma automática.
É como pedir para o computador contar, listar ou repetir algo até acabar!

O que pratiquei:

• Usei o for para contar de 0 até 10.000 (sim, o computador faz isso em segundos!).
• Criei uma lista de anos, de 1900 até o ano atual, para preencher um <select> automaticamente.
• Percorri um array de carros e mostrei todos os modelos na tela, um por um.

Resumindo:

Com os laços de repetição, posso automatizar tarefas, criar listas, preencher tabelas e muito mais, tudo de forma rápida e eficiente!
É como ter um exército de mini-robôs fazendo trabalho repetitivo pra mim! 🤖🔄

⏰ Pasta setimeout-setinterval: Controlando o tempo como um mestre do relógio!

Na pasta paginas-javascript/setimeout-setinterval.js aprendi a manipular o tempo no Javascript, criando ações que acontecem depois de um intervalo ou que se repetem sozinhas!

O que são setTimeout e setInterval?

• setTimeout: Executa uma função apenas uma vez após um tempo determinado (em milissegundos).
• setInterval: Executa uma função várias vezes, repetidamente, a cada intervalo de tempo definido.

O que pratiquei:

• Criei um cronômetro que conta o tempo na tela e avisa quando o tempo acaba.
• Usei setTimeout para executar uma ação depois de alguns segundos.
• Usei setInterval para repetir uma ação a cada segundo, como um cronômetro regressivo.
• Aprendi a parar a contagem usando clearInterval (ou clearTimeout).

Resumindo:

Com esses comandos, posso criar alarmes, cronômetros, animações e tudo que depende de tempo no Javascript!
É como ser o guardião do tempo dentro do código, controlando cada segundo do que acontece na página! ⏳🕹️

🏗️ Pasta classes: Criando meus próprios "moldes" no Javascript!

Na pasta paginas-javascript/classes.js mergulhei no universo das classes, uma forma moderna e poderosa de criar objetos com o mesmo formato, mas com valores diferentes!

O que são classes?

Pense nas classes como moldes de fábrica:
Você define como será o objeto (quais propriedades e métodos ele terá) e depois pode criar quantos quiser, cada um com suas próprias características!

O que aprendi:

• Como declarar uma classe usando a palavra-chave class.
• Como criar um construtor para definir as propriedades iniciais.
• Como adicionar métodos que todos os objetos criados a partir da classe podem usar.
• Como criar vários objetos diferentes a partir do mesmo molde.

Resumindo:

Com classes, posso criar quantos objetos quiser, todos seguindo o mesmo padrão, mas cada um com sua própria identidade!
É como ser o engenheiro-chefe de uma fábrica de ideias no Javascript! 🏭🚗

📅 Pasta manipulacao-de-datas: Dominando o tempo no Javascript!

Na pasta paginas-javascript/manipulacao-de-datas.js aprendi a trabalhar com datas e horários, transformando o Javascript em uma verdadeira máquina do tempo!

O que explorei nesse estudo?

• Peguei a data e hora atual com new Date().
• Descobri o ano, mês, dia, hora, minutos, segundos e milissegundos separadamente.
• Mostrei o mês e o dia da semana em formato escrito, usando arrays personalizados.
• Formatei a data no padrão brasileiro (DD/MM/AAAA).
• Criei uma função para adicionar zero à esquerda em números menores que 10 (ficou chique!).
• Comparei datas para saber se uma conta está vencida ou não.
• Calculei a diferença entre duas datas em dias (ótimo para contagem regressiva ou prazos!).

Resumindo:

Agora consigo manipular datas, comparar prazos, criar contadores e formatar tudo do jeito que eu quiser!
É como ter um calendário e um relógio digital dentro do meu código, pronto para qualquer desafio temporal! ⏳📆

🗃️ Pasta jason.js: Decifrando e transmitindo dados com JSON!

Na pasta paginas-javascript/jason.js mergulhei no universo do JSON (JavaScript Object Notation), a linguagem secreta que permite sistemas diferentes conversarem entre si de forma simples e eficiente!

O que é JSON?

• É uma forma de transformar objetos em texto e texto em objetos.
• Super útil para enviar e receber dados entre sistemas, APIs e aplicações web.
• Praticamente toda linguagem de programação entende JSON!

Resumindo:

Agora sei como transformar objetos em texto para enviar para outros sistemas, e como receber textos e transformar de volta em objetos para usar no meu código!
Com JSON, meu Javascript ficou pronto para conversar com o mundo inteiro — é como aprender uma língua universal dos dados!