HTML

Javascript

Desarrollo frontend

Desarrollo backend

Desarrollo web

Node.js

<p>Fetch API es una interfaz moderna para realizar solicitudes HTTP en el navegador. Proporciona una forma más flexible y poderosa de trabajar con recursos remotos que las antiguas técnicas basadas en XMLHttpRequest (XHR).</p>

<h2>Utilizando fetch con GET</h2>
<p>Con Fetch API, puedes realizar solicitudes GET para obtener datos de un servidor. Aquí tienes un ejemplo:</p>
<div style="font-size: 20px"><SyntaxHighlighter language="javascript">
fetch('https://api.example.com/data') // Reemplazar con URL de recurso que utilizará
  .then((res) => {
    if (!res.ok) {
      throw new Error('Error al obtener los datos');
    }
    return res.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });
</SyntaxHighlighter></div>

<h2>Utilizando fetch con POST</h2>
<p>Fetch API también te permite realizar solicitudes POST para enviar datos al servidor. Aquí tienes un ejemplo:</p>
<div style="font-size: 20px"><SyntaxHighlighter language="javascript">
const persona = {
  nombre: "Manuel",
  edad: 25
}

fetch('https://api.example.com/submit', {  // Reemplazar con URL de recurso que utilizará
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(persona)
})
  .then((res) => {
    if (!res.ok) {
      throw new Error('Error al enviar los datos');
    }
    return res.json();
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });
</SyntaxHighlighter></div>

Fetch API es una interfaz moderna para realizar solicitudes HTTP en el navegador. Proporciona una forma más flexible y poderosa de trabajar con recursos remotos que las antiguas técnicas basadas en XMLHttpRequest (XHR).

¿Qué es FetchAPI?

<p>Una promesa es un objeto que representa el resultado de una operación asíncrona. Puede estar en uno de tres estados: pendiente, resuelta o rechazada. Las promesas proporcionan una forma más limpia y eficiente de trabajar con código asíncrono en comparación con los callbacks.</p>

<h2>Ejemplo de una promesa</h2>
<p>Veamos un ejemplo sencillo de cómo crear y utilizar una promesa en JavaScript:</p>
<div style="font-size: 20px"><SyntaxHighlighter language="javascript">
// Crear una promesa
const myPromise = new Promise((resolve, reject) => {
  // Simulamos una operación asíncrona (por ejemplo, una solicitud HTTP)
  setTimeout(() => {
    const exito = true;
    if (exito) {
      // Si la operación tiene éxito, resolvemos la promesa
      resolve("¡Operación exitosa!");
    } else {
      // Si la operación falla, rechazamos la promesa
      reject("¡Operación fallida!");
    }
  }, 2000); // Simulamos un retardo de 2 segundos
});

// Utilizar la promesa
myPromise.then((mensaje) => {
  console.log(mensaje);
}).catch((error) => {
  console.error(error);
});
</SyntaxHighlighter></div>

<h2>Formas de Resolver promesas</h2>
<ul style="font-size: 20px;">
  <li>Usando then-catch:</li>
  <div style="font-size: 20px"><SyntaxHighlighter language="javascript">
myPromise.then((mensaje) => {
  console.log(mensaje);
}).catch((error) => {
  console.error(error);
});
</SyntaxHighlighter></div>

  <li>Usando async-await:</li>
  <div style="font-size: 20px"><SyntaxHighlighter language="javascript">
async function execPromesa() {
  try {
    const resultado = await myPromise;
    console.log(resultado);
  } catch (error) {
    console.error(error);
  }
}

execPromesa();
</SyntaxHighlighter></div>
</ul>

<h2>Ejemplo práctico de promesas</h2>
<p>Un ejemplo práctico de promesas simulando una funcion asíncrona, como en el caso de buscar una persona por su id.

<div style="font-size: 20px"><SyntaxHighlighter language="javascript">
const personas = [
  {id: 1, nombre: "Raul", edad: 20},
  {id: 2, nombre: "Luis", edad: 18}
]

const getById = (id) => new Promise((resolve, reject) => {
  setTimeout(() => {
    let result = personas.find((persona) => persona.id === id);
    if (result) {
      resolve(result); // Retorna la persona con el id correspondiente
    } else {
      reject("Persona no existe"); // Devuelve que persona no existe
    }
  }, 2000);
});

const id = 2;

// Resolver promesa con then-catch
getById(id)
  .then((persona) => console.log(persona))
  .catch((err) => console.error(err));

// Resolver promesa con async-await
const getPersona = async () => {
  try {
    const persona = await getById(id);
    console.log(persona);
  } catch (err) {
    console.error(err);
  }
}

getPersona();
</SyntaxHighlighter></div>

Una promesa es un objeto que representa el resultado de una operación asíncrona. Puede estar en uno de tres estados: pendiente, resuelta o rechazada. Las promesas proporcionan una forma más limpia y eficiente de trabajar con código asíncrono en comparación con los callbacks.

Promesas en Javascript

<p>Un callback es una función que se pasa como argumento a otra función y se invoca dentro de esa función más adelante. Es una técnica común en JavaScript para realizar operaciones asíncronas o manejar eventos.</p>

<h2>Formas de llamar a un callback</h2>
<ul style="font-size: 20px;">
  <li>Directamente como una función:</li>
  <div style="font-size: 20px"><SyntaxHighlighter language="javascript">
// Callback
function myCallback() {
  console.log("¡Hola desde el callback!");
}

// Llamar callback
function useCallback(callback) {
  callback();
}

useCallback(myCallback);
</SyntaxHighlighter></div>

  <li>Como función anónima:</li>
  <div style="font-size: 20px"><SyntaxHighlighter language="javascript">
// Callback
function useCallback(callback) {
  callback();
}

// Llamar callback
useCallback(function () {
  console.log("¡Hola desde el callback anónimo!");
});
</SyntaxHighlighter></div>

  <li>Utilizando arrow functions:</li>
  <div style="font-size: 20px"><SyntaxHighlighter language="javascript">
// Callback
function useCallback(callback) {
  callback();
}

// Llamar callback
useCallback(() => {
  console.log("¡Hola desde el callback con arrow function!");
});
</SyntaxHighlighter></div>
</ul>

<h2>Ejemplo práctico de callback</h2>
<p>Un ejemplo común de uso de callbacks es con funciones asíncronas, como en el caso de <code>setTimeout</code>:</p>
<div style="font-size: 20px">
<SyntaxHighlighter language="javascript">
console.log("Inicio del programa");
setTimeout(() => {
  console.log("¡Hola después de 2 segundos!");
}, 2000);
</SyntaxHighlighter>
</div>

Un callback es una función que se pasa como argumento a otra función y se invoca dentro de esa función más adelante. Es una técnica común en JavaScript para realizar operaciones asíncronas o manejar eventos.

Callbacks en Javascript

<p>
  LocalStorage es un mecanismo de almacenamiento de datos en Javascript que permite a las aplicaciones web almacenar datos de manera persistente en el navegador web. 
</p>
<p>
  Es una característica que proporciona una forma sencilla de guardar datos en el dispositivo del usuario, como cadenas de texto, números, booleanos y objetos, y recuperarlos posteriormente incluso después de cerrar y volver a abrir el navegador.
</p>

<h2>Metodos de LocalStorage</h2>
<ul style="font-size: 20px;">
  <li>
    <strong>setItem():</strong> Asignar item
    <SyntaxHighlighter language="javascript">
const personas = [
  { "nombre": "Raul", "edad": 20 },
  { "nombre": "Luis", "edad": 18 }
];
localStorage.setItem("personas", JSON.stringify(personas));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>getItem():</strong> Obtener item
    <SyntaxHighlighter language="javascript">
console.log(JSON.parse(localStorage.getItem("personas")));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Mostrar LocalStorage</strong>
    <SyntaxHighlighter language="javascript">
console.log(localStorage);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>removeItem():</strong> Borrar item
    <SyntaxHighlighter language="javascript">
localStorage.removeItem("personas");
</SyntaxHighlighter>
  </li>
  <li>
    <strong>clear():</strong> Borrar tods los items
    <SyntaxHighlighter language="javascript">
localStorage.clear();
</SyntaxHighlighter>
  </li>
</ul>

LocalStorage es un mecanismo de almacenamiento de datos en Javascript que permite a las aplicaciones web almacenar datos de manera persistente en el navegador web. Es una característica que proporciona una forma sencilla de guardar datos en el dispositivo del usuario, como cadenas de texto, números, booleanos y objetos, y recuperarlos posteriormente incluso después de cerrar y volver a abrir el navegador.

Local Storage

<p>
  JSON (JavaScript Object Notation) es un formato de intercambio de datos ligero y fácil de leer y escribir. Se utiliza comúnmente para transmitir datos entre un servidor y un cliente web, así como para almacenar y organizar datos en archivos de configuración y bases de datos. JSON se basa en dos estructuras de datos principales: objetos y arreglos.
</p>

<p>
  Un objeto JSON es una colección no ordenada de pares de clave-valor, donde las claves son cadenas de texto y los valores pueden ser de cualquier tipo de datos válido en JSON, como números, cadenas, booleanos, objetos o arreglos. 
</p>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="json">
{
  "nombre": "Juan",
  "edad": 30,
  "activo": true,
  "hobbies": ["fútbol", "lectura"]
}
</SyntaxHighlighter>
</div>

<p>
Un arreglo JSON es una secuencia ordenada de valores, donde cada valor puede ser cualquier tipo de datos válido en JSON.
</p>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="json">
["manzana", "banana", "naranja"]
</SyntaxHighlighter>
</div>

<h2>Diferencia entre JSON y un Objeto de JavaScript</h2>
<p>
  Aunque JSON y un objeto de JavaScript comparten similitudes en su sintaxis y estructura de datos, existen algunas diferencias clave:
</p>
<table>
  <thead>
    <tr>
      <th></th>
      <th>JSON</th>
      <th>Javascript</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <strong>Sintaxis</strong>
      </td>
      <td>
        JSON sigue una sintaxis estricta y requiere que todas las cadenas de texto se encuentren entre comillas dobles, las claves de los objetos deben estar entre comillas dobles, y los valores no pueden ser funciones ni referencias a objetos nativos de JavaScript.
      </td>
      <td>
        Un objeto de JavaScript puede tener claves sin comillas, valores de cualquier tipo de datos, incluidas funciones y referencias a objetos nativos de JavaScript, y admite una sintaxis más flexible.
      </td>
    </tr>
    <tr>
      <td>
        <strong>Formato de Texto Plano</strong>
      </td>
      <td>
        JSON es un formato de texto plano independiente del lenguaje, lo que significa que puede ser interpretado y generado por cualquier lenguaje de programación que admita el formato JSON. 
      </td>
      <td>
         Los objetos de JavaScript, por otro lado, son específicos de JavaScript y solo pueden ser utilizados en ese contexto.
      </td>
    </tr>
    <tr>
      <td>
        <strong>Compatibilidad</strong>
      </td>
      <td>
        JSON es ampliamente utilizado para intercambiar datos entre diferentes sistemas y lenguajes de programación
      </td>
      <td>
        Los objetos de JavaScript solo pueden ser utilizados dentro del entorno de JavaScript en el lado del cliente o del servidor.
      </td>
    </tr>
  </tbody>
</table>

<h2>Serialización y Deserialización</h2>
<h3>Definicion de JSON Serializado y Deserializado</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
//Json Deserializado
const objDeserializado = { "nombre": "Raul", "edad": 20 };

//Json Serializado
const objSerializado = '{"nombre": "Raul", "edad": 20}';
</SyntaxHighlighter>
</div>


<h3>Método de Serialización</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const serializado = JSON.stringify(objDeserializado);
console.log(serializado);
console.log(typeof serializado);
</SyntaxHighlighter>
</div>

<h3>Método de Deserialización</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const desserializado = JSON.parse(objSerializado);
console.log(desserializado);
console.log(typeof desserializado);
</SyntaxHighlighter>
</div>


JSON (JavaScript Object Notation) es un formato de intercambio de datos ligero y fácil de leer y escribir. Se utiliza comúnmente para transmitir datos entre un servidor y un cliente web, así como para almacenar y organizar datos en archivos de configuración y bases de datos. JSON se basa en dos estructuras de datos principales: objetos y arreglos.

Introduccion a JSON

<p>
  Los eventos en JavaScript son acciones que ocurren en el navegador del usuario, como hacer clic en un botón, mover el mouse sobre un elemento, escribir en un campo de texto, cargar una página, etc. Estos eventos pueden ser detectados y gestionados mediante código JavaScript, lo que permite que una página web sea interactiva y responda a las acciones del usuario.
</p>

<h2>Escucha de eventos</h2>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="javascript">
// Escucha de eventos con "EventListener"
const button = document.querySelector(".button");
// Forma 1
button.addEventListener("click", saludar = () => {
  alert("Hola");
  button.removeEventListener("click", saludar);
});

// Forma 2
button.addEventListener("click", saludar);
function saludar(){
  alert("Hola");
  button.removeEventListener("click", saludar);
}

// Objeto Event (e)
button.addEventListener("click", (e) => {
  console.log(e.target);
});
</SyntaxHighlighter>
</div>

<h2>Flujo de eventos o "event flow"</h2>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="javascript">
// Event Bubbling
const contenedor1 = document.querySelector(".contenedor-1");
const contenedor2 = document.querySelector(".contenedor-2");

contenedor1.addEventListener("click", (e) => {
  alert("Di click en un contenedor rojo");
});

contenedor2.addEventListener("click", (e) => {
  alert("Di click en un contenedor azul");
});

// Event Capturing
// Si el tercer parametro es true se ejecuta primero
contenedor1.addEventListener("click", (e) => {
  alert("Di click en un contenedor rojo");
}, true);

contenedor2.addEventListener("click", (e) => {
  alert("Di click en un contenedor azul");
});

//event.stopPropagation();
buttonClick.addEventListener("click", (e) => {
    alert("Di click en un boton");
    e.stopPropagation();
});
</SyntaxHighlighter>
</div>

<h2>Eventos de interfaz</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
//error - Ocurre cuando sucede un error durante la carga de un archivo multimedia
const img = document.querySelector("#img-prueba");
img.addEventListener("error", (e) => {
    console.log("Ha sucedido un error");
});

//load - Ocurre cuando un objeto se ha cargado
window.addEventListener("load", (e) => {
    console.log("Ha cargado el sitio");
});

//beforeunload - Ocurre antes de que el documento este a punto de descargarse
addEventListener("beforeunload", (e) => {
    console.log("Estar por irte del sitio");
});

//unload - Ocurre una vez que se ha descargado una pagina
addEventListener("unload", (e) => {
    console.log("Estar por irte del sitio");
});

//resize - Ocurre cuando se cambia el tamaño de la vista del documento
addEventListener("resize", (e) => {
    console.log("Se ha actualizado la resolucion del documento");
});

//scroll - Ocurre cuando se desplaza la barra de desplazamiento de un elemento
addEventListener("scroll", (e) => {
    console.log("Se ha scrolleado");
});

// select - Ocurre después de que el usuario selecciona algún texto de &lt;input&gt; o &lt;textarea&gt;
const input = document.querySelector("#input-texto");
const contenedor = document.querySelector("#seleccionado");

input.addEventListener("select", (e) => {
  let start = e.target.selectionStart;
  let end = e.target.selectionEnd;
  let texto = input.value.substring(start, end);
  contenedor.innerHTML = texto;
});
</SyntaxHighlighter>
</div>

<h2>Eventos de mouse</h2>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="javascript">
//click - Ocurre con un click
const buttonClick = document.querySelector(".button-click");
const contenedor1 = document.querySelector(".contenedor-1");
const contenedor2 = document.querySelector(".contenedor-2");

contenedor1.addEventListener("click", (e) => {
    alert("Di click en contenedor rojo");
});

contenedor2.addEventListener("click", (e) => {
    alert("Di click en contenedor azul");
});

buttonClick.addEventListener("click", (e) => {
    alert("Di click en boton");
    e.stopPropagation();
});

//dblclick - Ocurre con un doble click
buttonClick.addEventListener("dblclick", (e) => {
    alert("Di doble click en boton");
});

//mouseover - Ocurre cuando el puntero se mueve sobre un elemento o sobre uno de sus hijos
contenedor1.addEventListener("mouseover", (e) => {
    alert("Pase sobre el contenedor rojo");
});

//mouseout - Ocurre cuando se mueve el puntero fuera de un elemento o de sus elementos secundarios
contenedor1.addEventListener("mouseout", (e) => {
    alert("Pase y estoy fuera del contenedor rojo");
});

//contextmenu - Ocurre con un click en el boton derecho en un elemento para abrir un menu contextual
contenedor2.addEventListener("contextmenu", (e) => {
    alert("Di click derecho en contenedor azul");
});

//mouseenter - Ocurre cuando el puntero se mueve sobre un elemento
contenedor1.addEventListener("mouseenter", (e) => {
    alert("Pase por el contenedor rojo");
});

//mousemove - Ocurre cuando el puntero se mueve mientras esta sobre un elemento
contenedor2.addEventListener("mousemove", (e) => {
    alert("Estoy moviendo en contenedor azul");
});

//mouseleave - Ocurre cuando el puntero se mueve fuera de un elemento
contenedor2.addEventListener("mouseleave", (e) => {
    alert("Estoy saliendo del contenedor azul");
});

//mousedown - Ocurre cuando un usuario apreta un boton del mouse sobre un elemento
contenedor1.addEventListener("mousedown", (e) => {
    alert("Aprete boton de mouse en contenedor rojo");
});

//mouseup - Ocurre cuando un usuario suelta un boton del mouse sobre un elemento
contenedor1.addEventListener("mouseup", (e) => {
    alert("Solte boton de mouse en contenedor rojo");
});
</SyntaxHighlighter>
</div>

<h2>Eventos de teclado</h2>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="javascript">
// keydown - Ocurre cuando una tecla se deja de presionar
const input = document.querySelector("#input-texto");
input.addEventListener("keydown", (e) => {
console.log("Una tecla fue presionada");
});

// keypress - Ocurre cuando una tecla se presiona
input.addEventListener("keypress", (e) => {
  console.log("Un usuario presionó una tecla y la soltó");
});

// keyup - Ocurre después de que los dos eventos anteriores hayan concluido consecutivamente
input.addEventListener("keyup", (e) => {
  console.log("Un tecla fue soltada");
});
</SyntaxHighlighter>
</div>

<h2>Eventos de tiempo</h2>
<div style="font-size: 20px;">
    <SyntaxHighlighter language="javascript">
// setTimeout() -- Se ejecuta una vez esperando un intervalo de tiempo
const temporizador = setTimeout(() => {
  document.write("Hola");
}, 2000);

//clearTimeout()
clearTimeout(temporizador);

//setInterval() -- Se ejecuta en cierto intervalo de tiempo
const intervalo = setInterval(() => {
    document.write("Hola");
},2000);
      
// clearInterval()
setTimeout(() => {
  clearInterval(intervalo);
}, 7000);
</SyntaxHighlighter>
</div>

Los eventos en JavaScript son acciones que ocurren en el navegador del usuario, como hacer clic en un botón, mover el mouse sobre un elemento, escribir en un campo de texto, cargar una página, etc.

Eventos en Javascript

<p>
  El DOM (Document Object Model) es una representación estructurada y jerárquica de un documento HTML (o XML) que permite interactuar con él mediante programación. En otras palabras, el DOM es una interfaz que proporciona un conjunto de objetos y métodos que permiten acceder, modificar y manipular los elementos de un documento web.
</p>
<p>
  El DOM organiza el contenido del documento en un árbol de nodos, donde cada elemento HTML es representado por un nodo en el árbol. Estos nodos pueden ser elementos HTML, atributos, texto u otros tipos de contenido presentes en el documento. Los nodos están interconectados de manera jerárquica, reflejando la estructura del documento HTML.
</p>

<h2>Métodos de Selección de Elementos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
//getElementById() - Selecciona un elemento por ID
let parrafo = document.getElementById("parrafo");

//getElementsByTagName() - Selecciona todos los elementos que coincidan con el nombre de la etiqueta especificada (No recomendable)
let parrafos = document.getElementsByTagName("p");

//getElementsByClassName() - Selecciona todos los elementos que coincidan con el nombre de la clase especificada 
parrafo = document.getElementsByClassName(".parrafo");

//querySelector() - Devuelve el primer elemento que coincida con el grupo especificado de selectores
parrafo = document.querySelector(".parrafo");

//querySelectorAll() - Devuelve todos los elementos que coincidan con el grupo especificado de selectores
parrafos = document.querySelectorAll(".parrafo");
</SyntaxHighlighter>
</div>

<h2>Metodos para Definir, Obtener y Eliminar valores de atributos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
//setAttribute() - Modifica el valor de un atributo
const edad = document.querySelector(".edad");
edad.setAttribute("type","number");

//getAttribute() - Obtiene el valor de un atributo
document.write(edad.getAttribute("type"));

//removeAttribute() - Remueve el valor de un atributo
edad.removeAttribute("type");
</SyntaxHighlighter>
</div>

<h2>Clases, classList y sus métodos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
//add() - Añade una clase
const titulo = document.querySelector(".titulo");
titulo.classList.add("grande");

//remove() - Remueve una clase
titulo.classList.remove("grande");

//item() - Devuelve la clase del indice especificado
let valor = titulo.classList.item(2);
document.write(valor + "&lt;br&gt;");

//contains() - Verifica si ese elemento posee o no, la clase especificada
valor = titulo.classList.contains("clase");
document.write(valor + "&lt;br&gt;");

//replace() - Reemplaza una clase por otra, si devuelve true, existe la clase a reemplazar; si no, no reemplaza.
valor = titulo.classList.replace("grande","chico");
document.write(valor + "&lt;br&gt;");

//toggle() - Si no tiene la clase especificada, la agrega; y si ya la tiene, lo elimina. Para eliminar, true: no deja, false: deja. Para agregar, true: deja, false: no deja.
titulo.classList.toggle("grande");
titulo.classList.toggle("grande", false);
</SyntaxHighlighter>
</div>

<h2>Atributos de inputs</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Atributo className
const input = document.querySelector(".input-normal");
document.write(input.className + "&lt;br&gt;");

// Atributo value
input.value = "100";
document.write(input.value + "&lt;br&gt;");

// Atributo type
input.type = "range";
document.write(input.type + "&lt;br&gt;");

input.type = "file";
input.accept = "image/*";

// Atributo form
const submit = document.querySelector("#submit");
submit.setAttribute("form", "formulario");

// Atributo minlength
const inputlimit = document.querySelector("#input-limit");
inputlimit.minLength = 5;

// Atributo placeholder
inputlimit.placeholder = "Ingresa tu nombre";

// Atributo required
inputlimit.required = "required";
</SyntaxHighlighter>
</div>

<h2>Declaraciones de estilos CSS en elemento</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const cuadrado = document.querySelector(".cuadrado");
cuadrado.style.width = "100px";
cuadrado.style.height = "100px";
cuadrado.style.backgroundColor = "red";
cuadrado.style.color = "#fff";
cuadrado.style.padding = "30px";
</SyntaxHighlighter>
</div>

<h2>Obtener y modificar elementos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// textContent - Devuelve el texto de cualquier nodo
const titulo = document.querySelector(".titulo");
let resultado = titulo.textContent;
console.log(resultado);

// innerHTML - Devuelve el contenido HTML de un elemento
resultado = titulo.innerHTML;
console.log(resultado);

// outerHTML - Devuelve el código HTML completo del elemento
resultado = titulo.outerHTML;
console.log(resultado);

// Creación de Elementos
const contenedor = document.querySelector("#contenedor");
const fragmento = document.createDocumentFragment();
for(let i = 0; i < 20; i++){
    const item = document.createElement("LI");
    item.innerHTML = "Este es un item de la lista";
    fragmento.appendChild(item);
}
contenedor.appendChild(fragmento);
</SyntaxHighlighter>
</div>

<h2>Obtención y modificación de childs (Hijos)</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const primerHijo = contenedor.firstChild;
const ultimoHijo = contenedor.lastChild;
const primerEHijo = contenedor.firstElementChild;
const ultimoEHijo = contenedor.lastElementChild;
const hijos1 = contenedor.childNodes;
const hijos2 = contenedor.children;

// Métodos de Childs
const h2_nuevo = document.createElement("H2");
h2_nuevo.innerHTML = "Título";
const parrafo = document.createElement("P");
parrafo.innerHTML = "Párrafo";
const h2_antiguo = document.querySelector("h2");
contenedor.replaceChild(h2_nuevo, h2_antiguo); // Metodo replaceChild()

let respuesta = h2_nuevo.hasChildNodes(); // Metodo hasChildNodes()

// Propiedades de Parents (Padres)
console.log(h2_nuevo.parentElement);
console.log(contenedor.parentNode);

// Propiedades de Siblings (Hermanos)
console.log(h2_nuevo.nextSibling);
console.log(h2_nuevo.previousSibling);
console.log(h2_nuevo.nextElementSibling);
console.log(h2_nuevo.previousElementSibling);

// Método para buscar un elemento
const div = document.querySelector(".div-3");
console.log(div.closest(".div"));
</SyntaxHighlighter></div>



Introducción al DOM

<h2>Definición de un array</h2>
<p>
  Un array en JavaScript es una estructura de datos que puede contener una colección ordenada de elementos. Estos elementos pueden ser de cualquier tipo de datos, como números, cadenas, objetos u otros arrays. 
</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let frutas = ["Manzana", "Plátano", "Peras"];
</SyntaxHighlighter></div>

<h2>Manipulación de Arrays</h2>
<ul style="font-size: 20px;">
  <li>
    <strong>Bucle for</strong>
    <SyntaxHighlighter language="javascript">
for (let i = 0; i < frutas.length; i++) {
  console.log(frutas[i]);
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Bucle for...in</strong>
    <SyntaxHighlighter language="javascript">
for (let index in frutas) {
  console.log(index)
  console.log(frutas[index]);
}
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Bucle for...of</strong>
    <SyntaxHighlighter language="javascript">
for (let fruta of frutas) {
  console.log(fruta);
}
</SyntaxHighlighter>
  </li>
</ul>

<h2>Funciones para manipular Arrays</h2>
<ul style="font-size: 20px;">
  <li>
    <strong>push()</strong>
    <SyntaxHighlighter language="javascript">
frutas.push("Piña");
console.log(frutas);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>pop()</strong>
    <SyntaxHighlighter language="javascript">
let x = frutas.pop();
console.log(x);
console.log(frutas);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>shift()</strong>
    <SyntaxHighlighter language="javascript">
let y = frutas.shift();
console.log(y);
console.log(frutas);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Propiedad length de Arrays</strong>
    <SyntaxHighlighter language="javascript">
console.log(frutas.length);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>map()</strong>
    <SyntaxHighlighter language="javascript">
let personas = [
  {
    nombre: "Raul",
    edad: 20
  },
  {
    nombre: "Luis",
    edad: 18
  }
];

let nombres = personas.map((persona) => persona.nombre);
console.log(nombres);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>forEach()</strong>
    <SyntaxHighlighter language="javascript">
personas.forEach((persona) => {
console.log(`Mi nombre es ${persona.nombre} y mi edad es ${persona.edad}`);});
</SyntaxHighlighter>
  </li>
  <li>
    <strong>reduce()</strong>
    <SyntaxHighlighter language="javascript">
let sumaEdades = personas.reduce((accumulator, persona) => {
  return accumulator + persona.edad;
}, 0);
console.log(sumaEdades);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>some()</strong>
    <SyntaxHighlighter language="javascript">
let someResult = personas.some((persona) => persona.nombre === "Raul");
console.log(someResult);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>every()</strong>
    <SyntaxHighlighter language="javascript">
let everyResult = personas.every((persona) => persona.nombre === "Raul");
console.log(everyResult);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>filter()</strong>
    <SyntaxHighlighter language="javascript">
console.log(personas.filter((persona) => persona.edad >= 18));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>find()</strong>
    <SyntaxHighlighter language="javascript">
console.log(personas.find((persona) => persona.nombre === "Raul"));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>findIndex()</strong>
    <SyntaxHighlighter language="javascript">
console.log(personas.findIndex((persona) => persona.nombre === "Raul"));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>includes()</strong>
    <SyntaxHighlighter language="javascript">
console.log(frutas.includes("Manzana"));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>join()</strong>
    <SyntaxHighlighter language="javascript">
console.log(frutas.join("-"));
</SyntaxHighlighter>
  </li>
  <li>
    <strong>sort()</strong>
    <SyntaxHighlighter language="javascript">
console.log(numeros.sort((a, b) => a - b));
</SyntaxHighlighter>
  </li>
</ul>

Un array en JavaScript es una estructura de datos que puede contener una colección ordenada de elementos. Estos elementos pueden ser de cualquier tipo de datos, como números, cadenas, objetos u otros arrays. 

Arrays en Javascript

<h2>Definición de una cadena</h2>
<p>
  Una cadena en JavaScript es una secuencia de caracteres, ya sea texto, números o símbolos, encerrada entre comillas simples o dobles. Se utiliza para representar y manipular texto en aplicaciones web y programas en JavaScript.
</p>

<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Definicion de una cadena
let cadena = "Hola mundo, soy el usuario raul123!";
console.log(cadena);
</SyntaxHighlighter>
</div>

<h2>Cadena en comilla simple</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadenaSimple = 'Esto es una cadena en comilla simple';
console.log(cadenaSimple);
</SyntaxHighlighter>
</div>

<h2>Cadena en comilla doble</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadenaDoble = "Esto es una cadena en comilla doble";
console.log(cadenaDoble);
</SyntaxHighlighter>
</div>
  
<h2>Template string</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let numero = 5;
let templateCadena = `Esto es una cadena en template string, El numero es ${numero}`;
console.log(templateCadena)
</SyntaxHighlighter>
</div>
  
<h2>Concatenar cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let edad = 20;
let concatenacion1 = "Mi nombre es Raul y edad es " + edad;
console.log(concatenacion1);

let concatenacion2 = `Mi nombre es Raul y edad es ${edad}`;
console.log(concatenacion2);

let concatenacion3 = "Mi nombre es Raul y edad es ".concat("20");
console.log(concatenacion3);
</SyntaxHighlighter>
</div>

<h2>Longitud de una cadena</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadena = "Hola mundo, soy el usuario raul123!";
console.log(cadena.length);
</SyntaxHighlighter>
</div>
  
<h2>Funciones de búsqueda en cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let cadena = "Hola mundo, soy el usuario raul123!";
  
// at()
console.log(cadena.at(5)); // Devuelve el carácter en la posición 5 de la cadena.
console.log(cadena[5]);

// startsWith()
console.log(cadena.startsWith("H")); // Devuelve true si la cadena comienza con "H".

// endsWith()
console.log(cadena.endsWith("o")); // Devuelve true si la cadena termina con "o".

// includes()
console.log(cadena.includes("mundo")); // Devuelve true si la cadena contiene "mundo".

// indexOf()
console.log(cadena.indexOf("l")); // Devuelve el índice de la primera ocurrencia de "l" en la cadena.

// lastIndexOf()
console.log(cadena.lastIndexOf("o")); // Devuelve el índice de la última ocurrencia de "o" en la cadena.
</SyntaxHighlighter>
</div>

<h2>Funciones de modificación de cadenas</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num = 5;

// padStart()
console.log(String(num).padStart(10, "0")); // Agrega ceros a la izquierda hasta que la cadena tenga una longitud de 10.

// padEnd()
console.log(String(num).padEnd(5, "0")); // Agrega ceros a la derecha hasta que la cadena tenga una longitud de 5.

// repeat()
console.log(cadena.repeat(5)); // Repite la cadena 5 veces.

// split()
console.log(cadena.split("m")); // Divide la cadena en un array usando "m" como separador.

// substring()
console.log(cadena.substring(indexStart, indexEnd)); // Extrae una parte de la cadena entre los índices especificados.

// toString()
console.log(String(num)); // Convierte el número en una cadena.

// toUpperCase()
let cadena2 = "HolA, Bienvenidos";
console.log(cadena2.toUpperCase()); // Convierte la cadena a mayúsculas.

// toLowerCase()
console.log(cadena2.toLowerCase()); // Convierte la cadena a minúsculas.

// trim()
let cadena3 = "           Raul Lima          ";
console.log(cadena3.trim()); // Elimina los espacios en blanco al principio y al final de la cadena.

// trimEnd()
console.log(cadena3.trimEnd()); // Elimina los espacios en blanco al final de la cadena.

// trimStart()
console.log(cadena3.trimStart()); // Elimina los espacios en blanco al principio de la cadena.

// replace()
let cadena4 = "Naño";
console.log(cadena4.replace("añ", "in")); // Reemplaza la subcadena "añ" por "in".

// replaceAll()
let cadena5 = "Hola mundo, bienvenido a mi mundo";
console.log(cadena5.replaceAll("mundo", "planeta")); // Reemplaza todas las apariciones de "mundo" por "planeta".
</SyntaxHighlighter>
</div>
  

Una cadena en JavaScript es una secuencia de caracteres, ya sea texto, números o símbolos, encerrada entre comillas simples o dobles. Se utiliza para representar y manipular texto en aplicaciones web y programas en JavaScript.

Cadenas en Javascript

<p>
  Los conceptos básicos de JavaScript que son fundamentales para comprender y escribir código JavaScript efectivo y funcional.
</p>

<h2>Mostrar en consola</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Mostrar en consola
console.log("Hola mundo");
</SyntaxHighlighter>
</div>

<div style="font-size: 20px;">
<h2>Alerta</h2>
<SyntaxHighlighter language="javascript">
// Alerta
alert("Hola mundo!");
</SyntaxHighlighter>
</div>

<div style="font-size: 20px;">
<h2>Ingresar por prompt</h2>
<SyntaxHighlighter language="javascript">
// Ingresar por prompt
//let numero = parseInt(prompt("Ingrese un numero"));
let numero = parseFloat(prompt("Ingrese un numero"));

console.log("El numero es " + numero);
console.log(typeof numero);
</SyntaxHighlighter>
</div>

<h2>Operadores</h2>
<p>
   JavaScript tiene operadores aritméticos (suma, resta, multiplicación, división, etc.), operadores de comparación (mayor que, menor que, igual a, etc.) y operadores lógicos (AND, OR, NOT).
</p>
<h3>Operadores de asignación</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores de asignacion
numero = 10;

numero += 1; // numero = numero + 1;
console.log(numero);

numero -= 2; // numero = numero - 2;
console.log(numero);
</SyntaxHighlighter>
</div>

<h3>Operadores aritméticos</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores aritmeticos
let num_2 = 5;

let suma = num_2 + 3;
console.log(suma) // Output: 8

let resta = num_2 - 1;
console.log(resta); // Output: 4

let multiplicar = num_2 * 2;
console.log(multiplicar) // Output: 10

let division = num_2 / 2;
console.log(division) // Output: 2.5

let potencia = num_2 ** 2;
console.log(potencia)  // Output: 25
</SyntaxHighlighter>
</div>

<h2>Operadores de comparación</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores de comparacion
console.log(5 > 7); // Mayor
console.log(6 < 10); // Menor
console.log(10 >= 7); // Mayor igual
console.log(6 <= 9); // Menor igual
console.log("9 es igual a 9, no estricto: ", 9 == "9"); // Igual no estricto
console.log("9 es igual a 9, estricto: ", 9 === 9); // Igual estricto
console.log("9 es igual a 10:",9 === 10) // Igual estricto
console.log( "!!(9 < 10)", !!(9 < 10) );
</SyntaxHighlighter>
</div>
  
<h2>Operadores lógicos</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Operadores logicos
// OR
console.log("----- OR -----");
console.log("(5 > 9 || 10 > 6) => ", 5 > 9 || 10 > 6); // false || true  --> true
console.log("(4 > 3 || 2 < 5) =>", 4 > 3 || 2 < 5);  // true || true --> true
console.log("(6 > 7 || 15 > 20) =>", 6 > 7 || 15 > 20);  // false || false --> false

// AND
console.log("----- AND -----");
console.log("(5 > 9 && 10 > 6) =>", 5 > 9 && 10 > 6); // false && true --> false
console.log("(4 > 3 && 2 < 5) =>", 4 > 3 && 2 < 5) // true && true --> true
console.log("(6 > 7 && 15 > 20) =>", 6 > 7 && 15 > 20);  // false && false --> false
</SyntaxHighlighter>
</div>
  
<h2>Acumulaciones</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
num_3 = 7;

num_3++; // num_3 = num_3 + 1

num_3--; // num_3 = num_3 - 1

--num_3;

++num_3;

console.log(num_3);
</SyntaxHighlighter>
</div>

<h2>Variables</h2>
<p>
  JavaScript utiliza variables para almacenar datos. Los tipos de datos incluyen números, cadenas de texto, booleanos, nulos, indefinidos, objetos y arreglos.
</p>
  
<h3>Variable global</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
var num_1 = 3;
num_1 = 8;
console.log(num_1);
</SyntaxHighlighter>
</div>

<h3>Variable local</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num_2 = 4;
num_2 = 7;
console.log(num_2);
</SyntaxHighlighter>
</div>

<h3>Constante</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
const num_3 = 10;
// num_3 = 5; // Error, no se puede reasignar una constante
console.log(num_3);
</SyntaxHighlighter>
</div>
  
<h2>Diferencia entre var y let</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Var
var num_4 = 10;

if (num_4 < 20) {
    console.log(num_4);
}

// Let
let num_4 = 5;

if (num_4 < 20) {
    let num_4 = 30;
    console.log(num_4);
}
</SyntaxHighlighter>
</div>
  
<h2>Tipos de variables</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let numero = 4; // Numero entero
let decimal = 7.5; // Numero decimal
let cadenaSimple = 'Hola mundo'; // Cadena con comilla simple
let cadenaDoble = "Hola mundo"; // Cadena con comilla doble
let templateString = `El numero decimal es ${decimal}`; // Cadena utilizando template string
console.log(templateString);

let bool = true; // true o false

let nula = null; // Nulo
let noDefinido = undefined; // No esta definido
</SyntaxHighlighter>
</div>
  
<h2>Estructuras de control</h2>
<p>
  Incluyen condicionales (if, else if, else), bucles (for, while, do-while) y el uso de la instrucción switch para manejar múltiples casos.
</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let num = 10;
if (num < 10) {
    console.log(`${num} es menor a 10`);
} else if (num === 10) {
    console.log(`${num} es igual a 10`);
} else {
    console.log(`${num} es mayor a 10`);
}

// Ejemplo
let nota = 11;
if (nota >= 10.5) {
    console.log("Aprobado");
} else {
    console.error("Desaprobado");
}
</SyntaxHighlighter>
</div>
  
<h2>Switch</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let key = 10;
switch (key) {
    case 1:
        console.log("El numero es igual a 1");
        break;
    case 2:
        console.log("El numero es igual a 2");
        break;
    case 3:
        console.log("El numero es igual a 3");
        break;
    default:
        console.log("El numero que ingreso no era el esperado");
        break;
}
</SyntaxHighlighter>
</div>
  
<h2>Operador ternario</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
let edad = 18;

let mensaje = (edad >= 18) ? "Es mayor de edad" : "Es menor de edad";

console.log(mensaje);
</SyntaxHighlighter>
</div>
  
<h2>Estructuras Repetitivas</h2>
<p>
  Las estructuras repetitivas, también conocidas como bucles o ciclos, son una parte fundamental de la programación que permite ejecutar un bloque de código varias veces.
</p>
<h3>For</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("Tabla del 1 al 10");
for (let i = 1; i <= 10; i++) {
    console.log(`Tabla del ${i}`);
    for (let j = 1; j <= 10; j++) {
        console.log(`${j} x ${i} = ${j * i}`);
    }
}
</SyntaxHighlighter>
</div>
      
<h3>While</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("While");
let i = 1;
while (i <= 10) {
    console.log(i);
    i += 1;
}
</SyntaxHighlighter>
</div>
  
<h3>Do While</h3>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
console.log("Do while");
let j = 1;

do {
    console.log(j);
    j += 1;
} while(j <= 10);
</SyntaxHighlighter>
</div>
  
<h2>Funciones</h2>
<p>
  Se definen utilizando la palabra clave function. Pueden aceptar parámetros y devolver valores. Las funciones son bloques de código reutilizables.
</p>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Funcion
function factorial(n) {
    let factorial = 1;
    for (let i = 1; i <= n; i++) {
        factorial = factorial * i;
    }
    return factorial;
}

let resultado = factorial(6);
console.log(resultado);
</SyntaxHighlighter>
</div>
  
<h2>Procedimientos y Arrow Functions</h2>
<div style="font-size: 20px;">
<SyntaxHighlighter language="javascript">
// Procedimiento
function saludo (nombre) {
    console.log("Bienvenido " + nombre);
}

saludo("Raul");

// Arrow function (Procedimiento)
const fsaludo = (nombre) => {
    console.log("Bienvenido " + nombre);
}

fsaludo("Luis");

// Arrow function (Funcion)
const sumar = (a, b) => a + b;
console.log("Suma: ", sumar(3, 4));

const ffactorial = (n) => {
    let factorial = 1;
    for (let i = 1; i <= n; i++) {
        factorial = factorial * i;
    }
    return factorial;
};

console.log("Factorial de 5: ", ffactorial(5));
</SyntaxHighlighter>
</div>

Los conceptos básicos de JavaScript que son fundamentales para comprender y escribir código JavaScript efectivo y funcional.

Conceptos básicos de JavaScript

<p>
  JavaScript es un lenguaje de programación que se utiliza principalmente en el desarrollo web para agregar interactividad y funcionalidad a las páginas. Es un lenguaje de scripting del lado del cliente, lo que significa que se ejecuta en el navegador web del usuario, permitiendo la manipulación del contenido de la página, la respuesta a acciones del usuario y la comunicación con el servidor web.
</p>

<p>
  Es un componente fundamental de la web moderna y se utiliza ampliamente en una variedad de aplicaciones, desde páginas web simples hasta aplicaciones web complejas y dinámicas.
</p>

<h2>Historia de Javascript</h2>
<p>
  JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web. Fue creado por Brendan Eich en 1995 mientras trabajaba en Netscape Communications Corporation. Originalmente, se llamaba Mocha y luego se renombró a LiveScript antes de finalmente adoptar el nombre de JavaScript.
</p>
<p>
  Se diseñó con el propósito de proporcionar interactividad en las páginas web. Inicialmente, se utilizaba principalmente para pequeñas funciones y validaciones en el lado del cliente. Sin embargo, con el tiempo, su uso se expandió enormemente. Se convirtió en el lenguaje principal para el desarrollo del lado del cliente, permitiendo la creación de aplicaciones web dinámicas y complejas.
</p>
<p>
  En 1997, JavaScript fue estandarizado por primera vez bajo el nombre de ECMAScript, que es el estándar que rige su especificación. Desde entonces, ha experimentado múltiples versiones y actualizaciones para mejorar su funcionalidad y abordar las necesidades cambiantes de la web moderna.
</p>
<p>
  Con la popularización de bibliotecas y frameworks como jQuery, Angular, React y Vue.js, JavaScript se ha convertido en una herramienta esencial para el desarrollo web. Además de su uso en el frontend, JavaScript también es ampliamente utilizado en el backend a través de plataformas como Node.js, lo que permite a los desarrolladores crear aplicaciones web completas utilizando un solo lenguaje de programación.
</p>
<p>
  En junio de 2015, fue lanzado ECMAScript 6 (también conocido como ES6 o ECMAScript 2015) que tuvo un papel importante y representó una actualización significativa del lenguaje.
</p>

<h2>ECMAScript 6 (ES6)</h2>
<p>
  ECMAScript 6 introdujo muchas características nuevas y poderosas que mejoraron la legibilidad, la capacidad de mantenimiento y la eficiencia del código JavaScript. Algunas de las características más destacadas incluyen:
</p>
<ul style="font-size: 20px;">
  <li>
    <strong>Let y const:</strong> Introdujo nuevas formas de declarar variables, permitiendo un mejor manejo del ámbito de las variables.
    <SyntaxHighlighter language="javascript">
var num_1 = 1; // Variable global
let num_2 = 5; // Variable local
const num_3 = 2; // Constante
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Arrow functions:</strong> Proporcionaron una sintaxis más concisa para definir funciones, lo que facilitó la escritura de código más legible y expresivo.
    <SyntaxHighlighter language="javascript">
const fsaludo = (nombre) => {
      return "Bienvenido " + ${nombre};
}

let nombre = "Raul Lima";
let saludo = fsaludo(nombre);

// Output: Bienvenido Raul Lima
console.log(saludo);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Template literals:</strong> Permitieron la creación de cadenas de texto multilinea y la interpolación de variables dentro de cadenas de una manera más sencilla.
    <SyntaxHighlighter language="javascript">
let nombre = "Raul Lima";
let saludo = `Bienvenido ${nombre}`;

// Output: Bienvenido Raul Lima
console.log(saludo);
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Clases:</strong> Introdujo una sintaxis más clara y orientada a objetos para definir clases en JavaScript, lo que facilitó la escritura de código orientado a objetos.
        <SyntaxHighlighter language="javascript">
class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
  
  mostrar() {
    return `Mi nombre es ${this.nombre} y tengo ${this.edad}`;
  }
}

const persona1 = new Persona("Raul Lima", 20);
// Output: Mi nombre es Raul Lima y tengo 20
console.log(persona1.mostrar());
</SyntaxHighlighter>
  </li>
  <li>
    <strong>Módulos:</strong> Agregó soporte para la importación y exportación de módulos, lo que mejoró la modularidad y la reutilización del código.
<br><br>operaciones.js
<SyntaxHighlighter language="javascript">
// Exportación en Javascript
export const sumar = (a, b) => a + b;
</SyntaxHighlighter>   
index.js
<SyntaxHighlighter language="javascript">
// Importación de tipo modulo 'type = "module"'
import { sumar } from "./operaciones";
let resultado = sumar(3, 4);

// Output: 7
console.log(resultado);
</SyntaxHighlighter>
  </li>
</ul>

<p>
  Para mas información sobre las versiones más recientes de ECMAScript, ver
  <a style="display: contents;" href="https://developer.mozilla.org/es/docs/Glossary/ECMAScript">ECMAScript</a>.
</p>

JavaScript es un lenguaje de programación que se utiliza principalmente en el desarrollo web para agregar interactividad y funcionalidad a las páginas. Es un lenguaje de scripting del lado del cliente, lo que significa que se ejecuta en el navegador web del usuario, permitiendo la manipulación del contenido de la página, la respuesta a acciones del usuario y la comunicación con el servidor web. 

¿Qué es Javascript?

<p>
  En el mundo del desarrollo web, existen varias tecnologías que han surgido y evolucionado para dar forma a la experiencia en línea que conocemos hoy. 
</p>
<p>
  Desde la creación de estructuras básicas con HTML hasta el dinamismo impulsado por JavaScript,  estas herramientas han transformado la manera en que interactuamos con la web. 
</p>
<p>
  Además, existen otras herramientas que intervienen en el proceso de desarrollo, la elección de una herramienta de control de versiones y un editor de código adecuado, que desempeña un papel esencial. Vamos a explorar brevemente estas tecnologías y editores de código que forman la columna vertebral del desarrollo web moderno.
</p>

<h2>Estándares web</h2>
<p>
  Los estándares web son pautas y especificaciones técnicas establecidas por organizaciones como el World Wide Web Consortium (W3C) y la Internet Engineering Task Force (IETF) para garantizar la consistencia y la interoperabilidad en la creación y el funcionamiento de sitios web y aplicaciones en la World Wide Web.
</p>
<h3>HTML (Lenguaje de Marcado de Hipertexto)</h3>
<p>
  HTML es el lenguaje estándar para la creación y el diseño de páginas web. Desarrollado por Tim Berners-Lee en 1991, HTML permite estructurar el contenido de una página web mediante etiquetas.
</p>
<h3>CSS (Hojas de Estilo en Cascada)</h3>
<p>
  CSS complementa a HTML al definir el estilo y la presentación de las páginas web. Propuesto por Håkon Wium Lie y Bert Bos en 1996, CSS ha evolucionado para ofrecer mayor flexibilidad en el diseño web.
</p>
<h3>JavaScript</h3>
<p>
  JavaScript es un lenguaje de programación que permite la creación de contenido dinámico e interactivo en las páginas web. Ha ganado importancia en el desarrollo tanto del lado del cliente como del servidor. Fue creado por Brendan Eich en 1995.
</p>

<h2>Herramientas de Control de Versiones</h2>
<p>
  Las herramientas de control de versiones son fundamentales en el desarrollo de software para gestionar cambios, colaborar eficientemente y mantener un historial claro de las modificaciones en el código. 
</p>
<h3>Git</h3>
<p>
  Git es la herramienta más ampliamente utilizada, permitiendo a los desarrolladores rastrear cambios, crear ramas para nuevas funcionalidades y fusionar estas ramas de manera controlada.
</p>
<h3>Github</h3>
<p>
  GitHub es la herramienta que permite de alojar repositorios de código de forma gratuita. Los repositorios actúan como almacenes para el código fuente, permitiendo a los equipos trabajar juntos, realizar un seguimiento de cambios y gestionar versiones de manera efectiva. 
</p>
<picture>
  <img src="https://portafoliowebraulflima.000webhostapp.com/storage/media/github-repository.png" alt="git github repository" >
</picture>
<q style="display: block; margin: 10px 0px;">Repositorio remoto en github</q>

<h2>Editores de codigo</h2>
<p>
  Los editores de código son herramientas esenciales para los desarrolladores, proporcionando un entorno donde pueden escribir, editar y depurar su código de manera eficiente.
</p>
<picture>
  <img src="https://portafoliowebraulflima.000webhostapp.com/storage/media/editor-code.png" alt="Editor de codigo" >
</picture>
<q style="display: block; margin: 10px 0px;">Editor de codigo Visual Studio Code</q>

<p style="margin-top: 20px;">Los editores de código mas recomendados son:</p>
<ul class="ls-decimal" style="font-size: 20px;">
  <li>
    <strong>Visual Studio Code (VSCode):</strong> Desarrollado por Microsoft, VSCode es altamente popular debido a su velocidad, amplia variedad de extensiones y soporte para múltiples lenguajes de programación.
  </li>
  <li>
    <strong>Sublime Text:</strong> Con una interfaz sencilla y rendimiento rápido, Sublime Text es conocido por su capacidad de respuesta y funciones avanzadas, incluyendo atajos de teclado eficientes.
  </li>
  <li>
    <strong>Atom:</strong> Creado por GitHub, Atom es un editor de código de código abierto con una interfaz personalizable y una gran comunidad de desarrolladores que contribuyen con extensiones y temas.
  </li>
  <li>
    <strong>Fleet:</strong> Un editor de código colaborativo que permite a los equipos trabajar simultáneamente en proyectos en tiempo real, facilitando la colaboración y la comunicación entre desarrolladores.
  </li>
</ul>

<h2>Conclusión</h2>
<p>
  El desarrollo web se ha beneficiado enormemente de la evolución constante de tecnologías clave. HTML, CSS y JavaScript proporcionan las bases para la creación de contenido web dinámico y atractivo.
</p>
<p>
  Además, existen herramientas que complementan desarrollo web como Git y GitHub facilitan la colaboración y el control de versiones en proyectos. Y la elección de un editor de código que permite a los desarrolladores trabajar de manera eficiente y personalizada.
</p>
<p>
  Estas herramientas, en conjunto, han transformado el panorama del desarrollo web, permitiendo la creación de experiencias en línea cada vez más sofisticadas y colaborativas.
</p>

En el mundo del desarrollo web, existen varias tecnologías que han surgido y evolucionado para dar forma a la experiencia en línea que conocemos hoy. 

Blog