Practica de JavaScript

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:
3. :
4. :
5. :

Metodos Relacionados

1. :
2. :
3. :
4. :

Eventos Programables JS dentro de una pagina web

Desarrolle un ejemplo para cada evento

1. DOM Content Loading: 

   Definicion: Se dispara cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que terminen de cargarse hojas de estilo, imágenes y sub-frames. Ejemplo: Ejecutar un script para manipular elementos de la página tan pronto como la estructura HTML esté lista, sin esperar a las imágenes.

2. Load: 

   Definicion: Se dispara cuando la página completa (incluyendo todos los recursos dependientes como hojas de estilo, scripts, imágenes e iframes) se ha cargado totalmente. Ejemplo: Ocultar un ícono de "cargando" (spinner) solo después de que toda la página, incluidas las imágenes pesadas, se haya cargado.

3. Unload: 

   Definicion: (Obsoleto) Se dispara cuando el documento está a punto de descargarse (cerrar pestaña, navegar a otra página). Reemplazado en su mayoría por `beforeunload` y `pagehide`. Ejemplo: Intentar enviar un último dato de analítica justo antes de que el usuario abandone la página.

4. BeforeUnload: 

   Definicion: Se dispara justo antes de que el usuario esté a punto de abandonar la página. Se usa comúnmente para advertir sobre cambios no guardados. Ejemplo: Mostrar el mensaje "¿Estás seguro de que quieres salir? Tienes cambios sin guardar" al intentar cerrar la pestaña de un editor.

5. VisibilityChange: 

   Definicion: Se dispara cuando el contenido de una pestaña se vuelve visible u oculto (el usuario cambia de pestaña o minimiza la ventana). Ejemplo: Pausar un video automáticamente cuando el usuario cambia a otra pestaña del navegador y reanudarlo cuando vuelve.

6. ReadyStateChange: 

   Definicion: Se dispara cuando cambia la propiedad `readyState` del documento, indicando el estado de carga (ej. 'loading', 'interactive', 'complete'). Ejemplo: Monitorear el progreso de carga; es una forma más detallada de saber si la página ya es 'interactiva' (similar a DOMContentLoaded) o 'completa' (similar a load).

7. FullScreenChange - FullScreenError: 

   Definicion: `fullscreenchange` se dispara cuando el navegador entra o sale del modo de pantalla completa. `fullscreenerror` se dispara si falla el intento de entrar en dicho modo. Ejemplo: Cambiar el ícono de un botón de "Pantalla Completa" a "Salir de Pantalla Completa" en un reproductor de video.

8. Copy, Cut, Paste: 

   Definicion: Se disparan cuando el usuario realiza la acción correspondiente (copiar, cortar o pegar) en la página, generalmente sobre un texto seleccionado o un campo de entrada. Ejemplo: Registrar cuándo un usuario copia un código de cupón, o impedir que se pegue contenido en un campo de "confirmar contraseña".

9. SelectionChange: 

   Definicion: Se dispara cada vez que cambia la selección de texto actual en el documento. Ejemplo: Mostrar un pequeño menú emergente (tooltip) con opciones como "Buscar" tan pronto como el usuario termina de seleccionar un texto.

10. Scroll: 

    Definicion: Se dispara cuando se desplaza (hace scroll) la vista del documento o un elemento específico. Ejemplo: Hacer que la barra de navegación se vuelva "fija" en la parte superior después de que el usuario se haya desplazado 100 píxeles hacia abajo.

1. :
2. :
3. :
4. :