Esta guía traza un curso de los fundamentos de JavaScript hasta conceptos intermedios, que se basan en mi experiencia de aprendizaje personal. He compilado para llevar clave, ejemplos prácticos y sugerencias útiles para que su viaje de aprendizaje sea más suave. Vamos a sumergirnos!

Tabla de contenido

1. variables
2. matrices
3. declaraciones condicionales
4. funciones
5. objetos
6. el DOM (modelo de objeto de documento)
7. eventos
8. integrando html y javascript

1. Variables

Las variables son contenedores para los datos utilizados en sus programas. JavaScript ofrece dos formas principales de declararlos:

• Let : para variables cuyos valores podrían cambiar.
• const : para valores que deben permanecer constantes.

Ejemplo:

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

Las variables pueden contener números, texto (cadenas), valores verdaderos/falsos (booleanos) o incluso valores indefinidos. JavaScript proporciona operadores aritméticos estándar (, -,*, /, %) y el operador de exponencia (**).

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

2. Matrices

Las matrices almacenan múltiples valores dentro de una sola variable. Use soportes cuadrados para definir una matriz:

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

elementos de acceso usando su índice (a partir de 0):

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

agregando y eliminando elementos:

Las matrices son dinámicas; puede modificarlos:

• . Push () : agrega un elemento al final.
• . Unshift () : agrega un elemento al comienzo.
• . pop () : elimina el último elemento.
• . shift () : elimina el primer elemento.

Ejemplo:

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

Buscando matrices:

• . indexOf () : encuentra el índice de un valor.
• . Incluye () : verifica si existe un valor.

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

3. Declaraciones condicionales

Las declaraciones condicionales permiten que su código tome decisiones. if y else se usan comúnmente:

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

Operadores de comparación:

Estos operadores son esenciales para evaluar las condiciones:

• === (Equalidad estricta)
• ! == (desigualdad estricta)
• > (mayor que)
• (menos que)
• > = (mayor o igual a)
• (menos o igual a)

4. Funciones

Las funciones son bloques de código reutilizables. Defínalos usando la palabra de la función :

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

parámetros y argumentos:

Las funciones pueden aceptar entradas ( parámetros ) y usarlas cuando se les llame con argumentos :

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

5. Objetos

Los objetos son colecciones de pares de valor clave, como mini-databasas:

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

Métodos en objetos:

Los objetos también pueden contener funciones ( métodos ):

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

6. El DOM (modelo de objeto de documento)

El DOM permite que JavaScript interactúe con los elementos HTML.

seleccionando elementos:

use el objeto document para seleccionar elementos:

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

Elementos de actualización:

Modifique el contenido dinámicamente:

heading.innerText = "Welcome to JavaScript!";

7. Eventos

responda a las acciones del usuario (Clicks, Key Presses) usando . AddEventListener () :

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

Ejemplo: incrementando un contador:

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

8. Integrar html y javascript

Agregue javascript directamente a html usando etiquetas:

Para scripts más grandes, enlace un archivo externo . Js :

¡Esto concluye mi viaje de aprendizaje de JavaScript desde principiantes hasta niveles intermedios! Espero que esta guía sea útil. ¡No dude en compartir sus propios consejos de aprendizaje o hacer preguntas en los comentarios! ¡Feliz codificación! ✨