Javascript es un lenguaje de programacion que se ejcuta tanto en el frontend como en el backend

Se usa en varios frameworks:

1. React
2. Vue.js
3. Svelte
4. Next.js
5. Nuxt
6. Astro

Para programar en javascript se hace uso de conocimientos en programacion
Variables: globales, locales, estaticas y constantes
Estructuras de control
Bucles
Funciones

tipos de variables

• let : variables locales - dentro de un bloque de programacion
• var: globales - en cualquier parte del desarrollo
• const: variables con valores inmutables durante su ejecucion

Tipos de Datos

• String: Cadenas de caracteres alfanumericos
• Number: Valores numericos
• Boolean: True/False
• Array: Listas ["Elemento","Elemento"]
• Object: Diccionarios: Nombre{"Clave":valor,"Clave":valor}
• Null: Valor indefinido

Programacion en JavaScript

• Condicionales
• Estructuras
• Ciclos/Bucles
• for of - para recorrer colecciones
• for in - para recorrer propiedades enumerables de un objeto

Momentos en los que se ejecuta JS

1. Script dentro del HTML - script embebido en medio del HTML - inline early script
2. Script dentro de un control - Uso de los atributos en elementos html - inline Event Handler
3. Script al final (antes de cerrar el Body) - inline late script
4. Archivo externo (.js) - Script externo vinculado al html - external script

Pruebas de ejecucion

1. INLINE EARLY SCRIPT
2. INLINE EVENT HANDLER Presiona 1
3. INLINE LATE SCRIPT Presiona 2
   
4. EXTERNAL SCRIPT Presiona 3

   Modificar contenido de HTML desde JavaScript

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

   Modificar caption de un boton

   Presiona 4
   

Metodos relacionados

Eventos JS para sitios web

1. getElementById()
   

   Afectamos un unico elemento a traves de su ID
   document.getElementById("ControlID")

   Titulo Original

2. getElementsByClassName()
   

   Se afecta todos los elementos que tengan la misma clase
   document.getElementsByClassName()

   This is Paragraph 1

   This is Paragraph 2

   This is Paragraph 3

3. getElementByTagName()
   

   Todos los elementos que tengan la misma etiqueta: getElementsByTagName(p)

4. querySelector
   

   El primer elemento que coincida con un selector CSS determinado: querySelector()

   
   

   Ejecucion paso a paso

5. All
   

   Todos los elementos que coincidan con un selector determinado: querySelectorAll()

   Primero
   Segundo
   Tercero

Eventos programables Javascript dentro de una web

1. DOMContentLoaded

   Se dispara cuando el documento HTML ha sido completamente cargado y parseado, sin esperar a que se carguen imágenes o estilos externos. Ideal para manipular el DOM tan pronto esté listo

2. load

   Se dispara cuando la página web y todos sus recursos (imágenes, estilos, scripts) están completamente cargados

3. unload

   Se dispara cuando el usuario navega fuera de la página o cierra la pestaña. Usado para limpieza sencilla, sin posibilidad de confirmar salida

4. beforeunload

   Se dispara antes del evento unload, permite mostrar un diálogo para que el usuario confirme si quiere abandonar la página (por ejemplo, para evitar perder datos no guardados)

5. visibilitychange

   Ocurre cuando cambia la visibilidad de la página (como cambiar de pestaña o minimizar el navegador).

6. readystatechange

   Se dispara cuando el estado de carga del documento cambia (loading, interactive, complete).

7. fullscreenchange

   Se dispara cuando la página o un elemento entra o sale del modo de pantalla completa.

8. fullscreenerror

   Dispara si ocurre un error al intentar activar pantalla completa.

9. copy, cut, paste

   Eventos relacionados con el portapapeles al copiar, cortar o pegar texto u otros datos.

10. selectionchange

    Se dispara cuando cambia la selección de texto en la página.

11. scroll

    Ocurre cuando el usuario desplaza la página o un elemento con scroll.