Skip to content

Latest commit

 

History

History
135 lines (104 loc) · 4.24 KB

Basic-JavaScript.md

File metadata and controls

135 lines (104 loc) · 4.24 KB

JavaScript

JavaScript é uma linguagem de programação amplamente usada para desenvolver aplicações web interativas. Ela permite que você adicione funcionalidades dinâmicas a páginas da web, manipule o DOM (Document Object Model), interaja com o usuário e faça solicitações a servidores para atualizar o conteúdo da página sem a necessidade de recarregá-la. Abaixo, descreverei os conceitos básicos do JavaScript:

  1. Variáveis e Tipos de Dados:
    • Em JavaScript, você pode declarar variáveis usando var, let e const.
    • Tipos de dados incluem números, strings, booleanos, objetos, arrays e muito mais.
var nome = "João";
let idade = 30;
const PI = 3.14159;

  1. Operadores:

    • JavaScript suporta operadores aritméticos, de comparação e lógicos, como +, -, ==, !=, &&, ||, entre outros.

  2. Condicionais:

    • Você pode usar estruturas condicionais para tomar decisões no código.
if (idade >= 18) {
    console.log("Você é maior de idade.");
} else {
    console.log("Você é menor de idade.");
}
  1. Loops:
    • Loops como for e while são usados para repetir a execução de código.
for (let i = 0; i < 5; i++) {
    console.log(i);
}
  1. Funções:
    • Funções permitem que você defina blocos de código reutilizáveis.
function saudacao(nome) {
    return "Olá, " + nome + "!";
}

console.log(saudacao("Maria"));
  1. Eventos:
    • JavaScript é comumente usado para responder a eventos do navegador, como cliques de botão ou submissões de formulário.
const botao = document.querySelector("#meuBotao");
botao.addEventListener("click", function() {
    alert("Botão clicado!");
});
  1. Manipulação do DOM:
    • O JavaScript permite modificar elementos HTML e seu conteúdo.
const paragrafo = document.querySelector("#meuParagrafo");
paragrafo.textContent = "Novo texto no parágrafo.";
  1. Ajax e Requisições HTTP:
    • Você pode fazer solicitações HTTP assíncronas para buscar ou enviar dados para um servidor.
fetch('https://api.exemplo.com/dados')
    .then(response => response.json())
    .then(data => console.log(data));
  1. Objetos e Classes:
    • JavaScript é uma linguagem orientada a objetos, e você pode criar objetos e classes para organizar seu código.
class Pessoa {
    constructor(nome, idade) {
        this.nome = nome;
        this.idade = idade;
    }

    apresentar() {
        console.log(`Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`);
    }
}

const pessoa1 = new Pessoa("Ana", 25);
pessoa1.apresentar();

Esses são apenas os conceitos básicos do JavaScript. À medida que você avança, pode explorar tópicos mais avançados, como programação assíncrona, manipulação de arrays e objetos, gerenciamento de erros e muito mais.

Exemplo

Claro, aqui está um exemplo simples de JavaScript que cria um botão em HTML e, quando clicado, altera o texto exibido no parágrafo:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de JavaScript</title>
</head>
<body>
    <h1>Exemplo de JavaScript</h1>

    <button id="meuBotao">Clique-me</button>
    <p id="meuParagrafo">Texto a ser alterado.</p>

    <script>
        // Selecione o botão e o parágrafo usando o método document.querySelector
        const botao = document.querySelector("#meuBotao");
        const paragrafo = document.querySelector("#meuParagrafo");

        // Adicione um evento de clique ao botão
        botao.addEventListener("click", function() {
            // Altere o texto do parágrafo quando o botão é clicado
            paragrafo.textContent = "Texto alterado após o clique!";
        });
    </script>
</body>
</html>

Neste exemplo:

  1. Criamos um botão e um parágrafo em HTML.
  2. Usamos JavaScript para selecionar esses elementos pelo seu ID.
  3. Adicionamos um ouvinte de evento ao botão, que responde a um clique no botão.
  4. Quando o botão é clicado, o texto do parágrafo é alterado para "Texto alterado após o clique!".

Ao abrir este arquivo HTML em um navegador e clicar no botão, o parágrafo exibirá o novo texto, demonstrando como o JavaScript pode ser usado para criar interatividade em páginas da web.