#3 JavaScript Desde Cero

JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web. Empecemos por entender qué es JavaScript y por qué es importante.

JavaScript es un lenguaje de programación de alto nivel, interpretado y orientado a objetos, que se utiliza principalmente para agregar interactividad y dinamismo a las páginas web.

Aunque inicialmente fue diseñado para el lado del cliente (navegadores web), en la actualidad también se utiliza en el lado del servidor a través de plataformas como Node.js.

Elementos básicos de JavaScript y operadores

Ahora, exploremos los conceptos básicos de JavaScript:

1. Variables: Las variables son contenedores de datos. En JavaScript, se pueden declarar utilizando las palabras clave var, let y const. Por ejemplo:

let nombre = "Juan";
const PI = 3.14159;

2. Tipos de datos: JavaScript es un lenguaje de tipado dinámico, lo que significa que no es necesario especificar el tipo de dato de una variable. Los tipos de datos básicos en JavaScript incluyen números, cadenas de texto (strings), objetos, arreglos (arrays), funciones y valores booleanos.
3. Operadores: Los operadores permiten realizar operaciones con valores y variables. Algunos operadores comunes en JavaScript incluyen:
   • Operadores aritméticos: +, -, *, /, %
   • Operadores de comparación: ==, ===, !=, !==, <, >, <=, >=
   • Operadores lógicos: &&, ||, !
4. Estructuras de control: Las estructuras de control permiten controlar el flujo de ejecución de un programa. En JavaScript, las estructuras de control comunes incluyen:
   • Condicionales: if, else if, else
   • Bucles: for, while, do-while
   • Control de flujo: break, continue, switch
5. Funciones: Las funciones son bloques de código reutilizables que se pueden invocar con un nombre y, opcionalmente, pasarles argumentos. En JavaScript, se pueden declarar funciones de la siguiente manera:

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

6. Objetos: En JavaScript, casi todo es un objeto. Los objetos son colecciones de propiedades y métodos. Se pueden crear objetos utilizando la notación literal de objetos o mediante el uso de constructores y la palabra clave new. Por ejemplo:

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

7. Eventos: JavaScript se utiliza para agregar interactividad a las páginas web, y los eventos son una parte fundamental de esto. Los eventos son acciones del usuario o del sistema, como hacer clic en un botón o cargar una página. En JavaScript, se pueden manejar eventos utilizando funciones llamadas "listeners" o "escuchadores" de eventos.
8. DOM (Document Object Model): El DOM es una representación en forma de árbol de una página web y permite a los desarrolladores acceder y modificar el contenido, la estructura y el estilo de una página web utilizando JavaScript.

Estos son solo algunos de los conceptos básicos de JavaScript. Hay muchos más aspectos y características del lenguaje que pueden explorarse a medida que avanzan en su aprendizaje. A continuación, mencionaré algunas áreas adicionales que pueden interesarles:

9. Arrays (Arreglos): Un array es una colección ordenada de elementos. Los arrays se pueden crear utilizando corchetes y pueden contener diferentes tipos de datos. Por ejemplo:

let numeros = [1, 2, 3, 4, 5];
let frutas = ["manzana", "plátano", "cereza"];

10. JSON (JavaScript Object Notation): JSON es un formato ligero para el intercambio de datos que utiliza una sintaxis similar a la de los objetos literales de JavaScript. JSON se utiliza ampliamente en aplicaciones web para enviar y recibir datos entre el cliente y el servidor.
11. Funciones de flecha (Arrow functions): Las funciones de flecha son una forma más concisa de escribir funciones en JavaScript. Tienen una sintaxis más corta y no vinculan su propio valor de this. Por ejemplo:

const suma = (a, b) => a + b;

12. Promesas y async/await: Las promesas son objetos que representan el resultado eventual de una operación asíncrona, como una solicitud HTTP. Async/await es una forma más sencilla y legible de trabajar con promesas, utilizando palabras clave especiales que permiten escribir código asíncrono de manera similar al código síncrono.
13. Módulos: Los módulos son una forma de organizar y compartir código en JavaScript. Permiten dividir el código en archivos separados e importar/exportar funciones, objetos y valores entre ellos. Los módulos ayudan a mantener el código modular y fácil de mantener.
14. Prototipos y clases: JavaScript es un lenguaje de programación orientado a objetos basado en prototipos. Esto significa que los objetos heredan propiedades y métodos de otros objetos a través de la cadena de prototipos. Las clases, introducidas en ECMAScript 6 (ES6), son una forma más estructurada y sintáctica de trabajar con prototipos y herencia en JavaScript.

¿Cómo acceder a HTML desde JavaScript?

Para acceder y manipular el contenido HTML de una página web desde JavaScript, utilizamos el DOM (Document Object Model). El DOM es una representación en forma de árbol de una página web que permite a los desarrolladores interactuar con el contenido, la estructura y el estilo de la página. Aquí hay algunas formas comunes de acceder a elementos HTML desde JavaScript:

1. Acceder a un elemento por su ID:

Si un elemento HTML tiene un atributo "id", puedes acceder a él utilizando el método getElementById() del objeto document. Por ejemplo, si tienes el siguiente elemento HTML:

<p id="miParrafo">¡Hola, mundo!</p>

Puedes acceder a este elemento desde JavaScript de la siguiente manera:

let miParrafo = document.getElementById("miParrafo");

2. Acceder a elementos por su nombre de etiqueta:

Puedes acceder a todos los elementos de un tipo específico utilizando el método getElementsByTagName() del objeto document. Por ejemplo, para acceder a todos los elementos <p> en una página web:

let parrafos = document.getElementsByTagName("p");

Ten en cuenta que este método devuelve una colección de elementos, no un único elemento.

3. Acceder a elementos por su nombre de clase:

Si deseas acceder a elementos que tienen una clase específica, puedes utilizar el método getElementsByClassName() del objeto document. Por ejemplo, si tienes varios elementos con la clase "miClase":

<div class="miClase">Elemento 1</div>
<div class="miClase">Elemento 2</div>

Puedes acceder a estos elementos desde JavaScript así:

let elementosMiClase = document.getElementsByClassName("miClase");

Al igual que con getElementsByTagName(), este método devuelve una colección de elementos.

4. Utilizar selectores CSS:

Puedes utilizar el método querySelector() para seleccionar el primer elemento que coincida con un selector CSS específico, o querySelectorAll() para seleccionar todos los elementos que coincidan. Por ejemplo:

let primerDiv = document.querySelector("div");
let todosLosDivs = document.querySelectorAll("div");

Estos son solo algunos de los métodos disponibles para acceder a elementos HTML desde JavaScript. Una vez que hayas accedido a un elemento, puedes manipular sus atributos, contenido y estilo utilizando las propiedades y métodos del objeto DOM correspondiente.