Este guia mostra um curso de fundamentos JavaScript para conceitos intermediários, retirando da minha experiência de aprendizado pessoal. Eu compilei as principais tocas, exemplos práticos e dicas úteis para tornar sua jornada de aprendizado mais suave. Vamos mergulhar!

Índice

1. variáveis ​​
2. Arrays
3. declarações condicionais
4. funções
5. Objetos
6. O DOM (Modelo do Objeto do Documento)
7. eventos
8. integrando html e javascript

---

1. Variáveis ​​

variáveis ​​são contêineres para dados usados ​​em seus programas. JavaScript oferece duas maneiras principais de declará -las:

• let : para variáveis ​​cujos valores podem mudar.
• const : para valores que devem permanecer constantes.

Exemplo:

let age = 25;
const name = "Mario";

variáveis ​​podem conter números, texto (strings), valores verdadeiros/falsos (booleanos) ou até valores indefinidos. O JavaScript fornece operadores aritméticos padrão (, -,*, /, %) e o operador de exponenciação (**).

console.log(2 ** 3); // Output: 8

---

2. Arrays

armazenam vários valores dentro de uma única variável. Use suportes quadrados para definir uma matriz:

let fruits = ["apple", "banana", "cherry"];

Acesso elementos usando seu índice (começando de 0):

console.log(fruits[0]); // Output: apple

Adicionando e removendo elementos:

as matrizes são dinâmicas; Você pode modificá -los:

• . push () : adiciona um elemento ao end.
•
• . Pop () : remove o último elemento.
• . Shift () : remove o primeiro elemento.
• Exemplo:

fruits.push ("laranja"); console.log (frutas); // saída: ["Apple", "Banana", "Cherry", "Orange"]

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

.

.
• console.log (frutits.indexof ("banana")); // saída: 1 console.log (frutas.includes ("uva")); // output: false
3. Declarações condicionais

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

e

---

else

são comumente usados:

if (grau> 60) { console.log ("Você passou!"); } outro { console.log ("Você falhou!"); }

operadores de comparação:

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

=== (igualdade rigorosa)

! ==

(desigualdade estrita)

• > (maior que)
• (menos que)
• > = (maior ou igual a)
• (menos que ou igual a)
4. Funções
• funções são blocos de código reutilizáveis. Defina -os usando a função

palavra -chave:

---

função greet (nome) { retornar `Olá, $ {nome}!`; } console.log (cumprimento ("Alice")); // saída: Olá, Alice!

parâmetros e argumentos:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

argumentos

:

função add (a, b) { devolver um b; } console.log (add (2, 3)); // saída: 5

5. Objetos

function add(a, b) {
  return a   b;
}
console.log(add(2, 3)); // Output: 5

---

const Car = { Marca: "Tesla", Modelo: "Modelo 3", Ano: 2020 }; console.log (car.brand); // output: tesla

métodos em objetos:

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla

const Phone = { Marca: "Apple", anel() { console.log ("Anel, anel!?"); } }; Phone.ring ();

6. O DOM (Modelo do Objeto do Documento)

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! ?");
  }
};
phone.ring();

---

selecionando elementos:

use o objeto

const heading = document.querySelector ("h1"); console.log (heading.innerText); // registra o texto dentro da tag

Atualizando elementos:

Modifique o conteúdo dinamicamente:

const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text within the 
 tag

7. Events

responda às ações do usuário (cliques, pressões de teclas) usando

heading.innerText = "Welcome to JavaScript!";

---

button.addeventListener ("click", () => { console.log ("Button Clicou!"); });

Exemplo: Incrementando um contador:

let count = 0; button.adDeventListener ("clique", () => { contar ; console.log (`clicou $ {count} times`); });

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

8. Integração HTML e JavaScript

Adicionar javascript diretamente ao html usando

let count = 0;
button.addEventListener("click", () => {
  count  ;
  console.log(`Clicked ${count} times`);
});

---

Para scripts maiores, vincule um arquivo externo

. JS

:

Isso conclui minha jornada de aprendizado de JavaScript de níveis iniciantes para intermediários! Espero que este guia seja útil. Sinta -se à vontade para compartilhar suas próprias dicas de aprendizado ou fazer perguntas nos comentários! Codificação feliz! ✨