Curso de JavaScript para Principiantes Gratis

Bienvenidos a este curso de JavaScript. En este recorrido aprenderás los conceptos fundamentales de JavaScript, con ejemplos prácticos y explicaciones claras. Al finalizar el curso, serás capaz de escribir scripts en JavaScript y aplicarlos en proyectos web.

---

Índice del Curso

1. Introducción a JavaScript
2. Sintaxis Básica
3. Variables y Tipos de Datos
4. Operadores
5. Condicionales y Bucles
6. Funciones
7. Objetos y Arreglos
8. Eventos en JavaScript
9. Manipulación del DOM
10. Conclusión y Recursos Adicionales

---

1. Introducción a JavaScript

JavaScript es un lenguaje de programación que se utiliza principalmente en la web para hacer que las páginas sean interactivas. Se ejecuta en el navegador del cliente, lo que permite modificar contenido, responder a eventos y hacer que la página web sea dinámica.

¿Dónde se usa JavaScript?

• Interactividad: Validación de formularios, control de animaciones, respuestas dinámicas.
• Aplicaciones Web: JavaScript es la base de muchas aplicaciones web modernas como React, Angular, y Vue.
• Backend: También se usa en el backend con Node.js.

---

2. Sintaxis Básica

La sintaxis de JavaScript es el conjunto de reglas que definen cómo escribir el código. Aquí veremos las partes más importantes.

Comandos en JavaScript

console.log("¡Hola Mundo!");

Este código imprimirá ¡Hola Mundo! en la consola.

Puntos clave de la sintaxis:

• Las instrucciones deben terminar con un punto y coma ; (aunque es opcional, se recomienda para evitar errores).
• Los comentarios se escriben con // para comentarios de una sola línea o /* comentario */ para comentarios multilinea.

// Esto es un comentario
/* Este es un comentario
   en varias líneas */

---

3. Variables y Tipos de Datos

Declarar Variables

En JavaScript, las variables se declaran con var, let o const. La diferencia entre ellas es que let y const son de ámbito de bloque, mientras que var es de ámbito global o de función.

let edad = 25;  // Una variable que puede cambiar
const nombre = "Juan";  // Una variable constante

Tipos de Datos

JavaScript tiene diferentes tipos de datos, tales como:

• Números: let numero = 30;
• Cadenas de texto (Strings): let nombre = "Juan";
• Booleanos (true o false): let esEstudiante = true;
• Arreglos: let frutas = ["manzana", "banana", "naranja"];
• Objetos: let persona = { nombre: "Juan", edad: 25 };

---

4. Operadores

Los operadores son símbolos que nos permiten realizar operaciones sobre variables y valores.

Operadores Aritméticos

let a = 10;
let b = 5;

console.log(a + b); // Suma
console.log(a - b); // Resta
console.log(a * b); // Multiplicación
console.log(a / b); // División
console.log(a % b); // Módulo (resto de la división)

Operadores de Comparación

console.log(10 > 5);  // true
console.log(10 < 5);  // false
console.log(10 == 10); // true
console.log(10 != 5); // true

---

5. Condicionales y Bucles

Condicionales: if, else y switch

Los condicionales nos permiten ejecutar bloques de código dependiendo de una condición.

let edad = 20;

if (edad >= 18) {
    console.log("Eres mayor de edad.");
} else {
    console.log("Eres menor de edad.");
}

Bucles: for, while

Los bucles nos permiten repetir una acción múltiples veces.

// Bucle for
for (let i = 0; i < 5; i++) {
    console.log(i); // Imprime los números del 0 al 4
}

// Bucle while
let i = 0;
while (i < 5) {
    console.log(i); // Imprime los números del 0 al 4
    i++;
}

---

6. Funciones

Las funciones son bloques de código reutilizables. Se pueden declarar de la siguiente manera:

function saludar(nombre) {
    console.log("Hola, " + nombre);
}

saludar("Juan"); // Llama a la función y pasa el valor "Juan" como argumento

---

7. Objetos y Arreglos

Objetos

Los objetos permiten almacenar múltiples valores en una sola variable.

let persona = {
    nombre: "Juan",
    edad: 25,
    saludar: function() {
        console.log("Hola, " + this.nombre);
    }
};

persona.saludar(); // Llama al método saludar

Arreglos

Un arreglo es una lista ordenada de elementos.

let frutas = ["manzana", "banana", "naranja"];
console.log(frutas[0]); // Imprime "manzana"

---

8. Eventos en JavaScript

Los eventos permiten reaccionar a la interacción del usuario, como hacer clic, mover el mouse, escribir en un campo de texto, etc.

document.getElementById("miBoton").addEventListener("click", function() {
    alert("¡Hiciste clic en el botón!");
});

---

9. Manipulación del DOM

El DOM (Document Object Model) es una representación estructural del HTML de la página. Con JavaScript podemos manipular el DOM para cambiar el contenido y la apariencia de una página web.

document.getElementById("titulo").innerHTML = "¡Nuevo Título!";

---

10. Conclusión y Recursos Adicionales

En este curso hemos cubierto los aspectos fundamentales de JavaScript, desde la sintaxis básica hasta la manipulación del DOM. Ahora puedes comenzar a crear tus propios scripts y mejorar la interactividad de tus páginas web.

Recursos Adicionales

• Mozilla Developer Network (MDN) JavaScript
• W3Schools JavaScript Tutorial

---

Espero que este curso te haya sido útil. ¡Ahora es momento de practicar!