Domine o Javascript: Do Básico ao Avançado

Aprenda Javascript do zero e dê os primeiros passos no desenvolvimento web. Curso prático e acessível para iniciantes.

Javascript é uma das linguagens de programação mais populares e essenciais para o desenvolvimento web. Este artigo é um guia prático que o levará do zero ao domínio dessa linguagem poderosa, abordando desde os conceitos básicos até os tópicos mais avançados.

Introdução ao Javascript

Javascript é uma linguagem de programação de alto nível utilizada principalmente para adicionar interatividade às páginas web. Com sua sintaxe simples e versatilidade, você pode criar desde pequenos scripts até aplicações complexas.

O que você aprenderá?

  • Variáveis e interação com HTML
  • Estruturas condicionais e loops
  • Manipulação de arrays
  • Objetos e funções
  • Eventos e manipulação de datas
  • Projeto prático: Lista de Tarefas

1. Variáveis e Interação com HTML

Na primeira parte do curso, você aprenderá sobre como declarar variáveis e usar o evento onClick para interagir com o HTML.

let nome = "Usuário";
function mostrarNome() {
    alert("Olá, " + nome + "!");
}

1.1 Funções

As funções são blocos de código reutilizáveis. Você pode defini-las e chamá-las conforme necessário.

function saudacao() {
    console.log("Bem-vindo ao Javascript!");
}
saudacao();

2. Entrada do Usuário

Na segunda parte, exploramos como pegar valores de entrada do usuário utilizando prompts e escrevendo resultados na tela.

let idade = prompt("Qual a sua idade?");
document.write("Você tem " + idade + " anos.");

3. Usando o Console

O console é uma ferramenta poderosa que permite depurar e testar seu código.

console.log("Esta é uma mensagem de depuração.");

4. Estruturas Condicionais

As estruturas condicionais, como if e else, permitem executar diferentes blocos de código com base em condições.

if (idade >= 18) {
    console.log("Você é maior de idade.");
} else {
    console.log("Você é menor de idade.");
}

5. Arrays e Estruturas de Repetição

Os arrays permitem armazenar listas de dados. Com estruturas de repetição, como o laço for, você pode iterar sobre esses dados.

let frutas = ["maçã", "banana", "laranja"];
for (let i = 0; i < frutas.length; i++) {
    console.log(frutas[i]);
}

6. Métodos de Array

Você aprenderá a manipular arrays usando métodos como push, pop, shift e unshift.

frutas.push("uva");
console.log(frutas); // ["maçã", "banana", "laranja", "uva"]

7. Javascript Interno e Externo

Entenda a diferença entre Javascript interno (dentro do HTML) e externo (em arquivos .js).

<script src="script.js"></script>

8. Tipos de Saída

Aprenda a usar alert, prompt, e document.write para saída de dados.

9. Declarações

Entenda as diferentes formas de declarar variáveis usando var, let, e const.

var nome = "João"; // escopo global
let idade = 30; // escopo de bloco
const PI = 3.14; // constante

10. Sintaxe e Comentários

A sintaxe do Javascript é simples, e os comentários são essenciais para manter o código legível.

// Este é um comentário de linha única
/*
Este é um comentário
de múltiplas linhas
*/

11. Operadores

Aprenda sobre operadores aritméticos, relacionais e lógicos.

let a = 10;
let b = 20;
console.log(a + b); // 30

12. Funções Avançadas

Explore funções anônimas e funções de callback, essenciais para programação assíncrona.

13. Objetos

Objetos são fundamentais no Javascript. Eles permitem agrupar dados e funcionalidades.

let carro = {
    marca: "Fusca",
    ano: 1970,
    ligar: function() {
        console.log("Carro ligado!");
    }
};
carro.ligar();

14. Eventos

Aprenda a lidar com eventos do usuário, como cliques e movimentos do mouse.

document.getElementById("meuBotao").onclick = function() {
    alert("Botão clicado!");
};

15. Matrizes

Entenda como usar arrays multidimensionais, ou matrizes, para armazenar dados complexos.

16. Métodos Avançados para Arrays

Explore métodos como map, filter, e reduce para manipular e transformar arrays.

17. Estruturas Condicionais Avançadas

Aprenda a usar a estrutura switch para simplificar a lógica condicional.

let cor = "verde";
switch (cor) {
    case "vermelho":
        console.log("Parar!");
        break;
    case "verde":
        console.log("Seguir!");
        break;
    default:
        console.log("Aguarde!");
}

18. Laços de Repetição

Além do for, conheça outros laços como while e do-while.

19. Temporizadores

Aprenda a usar setTimeout e setInterval para executar funções após um intervalo de tempo.

setTimeout(() => {
    console.log("Executado após 2 segundos");
}, 2000);

20. Classes

O Javascript moderno suporta programação orientada a objetos com classes.

class Pessoa {
    constructor(nome) {
        this.nome = nome;
    }
}

21. Manipulação de Datas

Aprenda a trabalhar com datas usando o objeto Date.

let data = new Date();
console.log(data.toLocaleDateString());

22. JSON

Entenda como trabalhar com JSON para troca de dados entre o cliente e o servidor.

let usuario = { nome: "Maria", idade: 25 };
let usuarioJSON = JSON.stringify(usuario);

23. Projeto Prático: Lista de Tarefas

Finalmente, aplique todos os conceitos aprendidos em um projeto prático: uma lista de tarefas. Este projeto ajudará a consolidar seu conhecimento.

let tarefas = [];
function adicionarTarefa(tarefa) {
    tarefas.push(tarefa);
    console.log(tarefas);
}

Conclusão

Neste artigo, você aprendeu os fundamentos do Javascript, desde variáveis até a programação orientada a objetos. Com o conhecimento adquirido, você está agora preparado para desenvolver aplicações web interativas e dinâmicas. Continue praticando e explorando essa linguagem incrível!

Voltar ao blog