Java Script es un lenguaje de programacion que se ejecuta tanto en el frontend como en el backend

Java Script lo usamos en varios frameworks

1. React
2. Vue.js
3. Angular
4. Svelte
5. Next.js
6. Nest.js
7. Astro

Conocimiento previos

Para programar en Java Script se hara uso de los conocimientos de programacion adquiridos durante la carrera

Variables: Locales, Globales, Estaticas, Constantes

Estructuras de control: If, Else, Switch

Bucles: For, While

Funciones: Definicion y scope

Tipos de variables

• let: Locales - Dentro de una funcion o bloque de programacion
• var: Globales - Las podemos utilizar en cualquier parte del desarrollo
• const: Valores fijos - No pueden cambiar su valor durante la ejecucion

Tipos de datos

• String: Caracteres alfanumericos
• Number: Valores numericos
• Booleano: True/False
• Arrays: Listas []
• Object: Diccionarios {}
• Null: Valores Nulos

Programacion en JavaScript

• Condiciones: if - else
• Estructuras: Switch
• Ciclos / Bucles: For, While, Do-While
• for...of: para recorrer colecciones (arrays)
• for...in: para recorrer objetos (keys)

Momento donde se ejecuta Java Script

1. Script dentro de HTML: Embebido en medio del HTML
2. Script dentro de un control: Uso de los atributos de elementos HTML
3. Script al final - Antes de cerrar el body: Script embebido antes de cerrar el body (inline script late)
4. Archivo externo (.js): Script externo vinculado al HTML (External script)

Prueba de ejecucion de cada momento

1. Script dentro de HTML - Inline Script Early:
2. Script dentro de un control - Inline Events Handlers: Presione 1
3. Script al final - Inline Script Late: Presioname 2
4. Archivo externo (.js) - Script externo vinculado al html - (External script) Presioname 3

   Modificar el contenido del HTML desde JS

   Este parrafo fue escrito en HTML, no deberia ser modificado desde el script

   Presioname 4

Metodos Relacionados

Eventos JavaScript para paginas web

1. getElementById: Afectar a un unico elemento por su id

   						document.getElementById("IdDelControl")
   					

2. getElementByClassName: Todos los elementos que tengan la misma CLASS se ven afectados por:

   						document.getElementByClassName("class")
   					

   Parrafo #1 con la clase item

   Parrafo #2 con la clase item

   Parrafo #3 con la clase item

3. getElementByTagName: Todos los elementos que tengan la misma ETIQUETA se ven afectados por:

   						document.getElementByTagName("tag")
   					

4. querySelector: El primer elemento que coincida con selector css:

   						document.querySelector("selector")
   					

5. querySelectorAll: Todos los elementos que coincidan con el selector seleccionado:

   						document.querySelectorAll("selector")
   					

   Primero

   Segundo

   Tercero

Eventos Programables JS dentro de una pagina web

Desarrolle un ejemplo para cada evento

1. DOMContentLoaded

   Ejemplo: Mostrar un mensaje apenas el DOM esté listo.
2. Load

   Ejemplo: Mostrar mensaje cuando toda la página (imágenes, etc.) esté cargada.
3. Unload

   Ejemplo: Avisar por consola cuando la página se descarga.

4. BeforeUnload

   Ejemplo: Preguntar al usuario antes de salir de la página.

5. VisibilityChange

   Ejemplo: Pausar texto cuando la pestaña se oculte y reanudar al volver.

   Página visible

6. ReadyStateChange

   Ejemplo: Mostrar el estado actual del documento.
7. FullScreenChange / FullScreenError

   Ejemplo: Cambiar texto al entrar o salir de pantalla completa.

   Activar Pantalla Completa

8. Copy, Cut, Paste

   Ejemplo: Detectar cuando el usuario copia, corta o pega texto.

9. SelectionChange

   Ejemplo: Detectar cuando el usuario selecciona texto.

   Selecciona una parte de este texto para ver el evento.

10. Scroll

    Ejemplo: Cambiar color de fondo al hacer scroll.

    Desplázate hacia abajo para activar el evento.