Ordenando

2024-01-26 01:31:25 +01:00
parent a32d41503d
commit f482a5c3dd
14 changed files with 130 additions and 0 deletions
--- a/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html
+++ b/Introduccion/09_EVENTOS_DOM_JAVASCRIPT.html
@@ -0,0 +1,122 @@
+<!Doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>EVENTOS DOM</title>
+<style>
+#miElemento {
+	color:green;
+	font-size:2em;
+}
+</style>
+</head>
+<body>
+<div id="miElemento"><p>Hola tengo aplicado un evento</p></div>
+<script>
+/*
+Manejo del DOM (Document Object Model) en JavaScript.
+Usos habituales incluyen:
+
+Manipulación de Contenido: Cambiar, agregar o eliminar elementos HTML en respuesta a eventos o acciones del usuario.
+
+Actualización de Estilos: Modificar propiedades de estilo CSS para cambiar la apariencia de elementos en la página.
+
+Manejo de Eventos: Asociar funciones JavaScript a eventos como clics, cambios, y teclas presionadas.
+
+Validación de Formularios: Verificar y validar datos de entrada en formularios antes de enviarlos al servidor.
+
+Animaciones y Transiciones: Crear efectos visuales mediante cambios graduales en propiedades CSS usando JavaScript.
+
+Creación de Elementos Dinámicamente: Generar y agregar nuevos elementos HTML al DOM según sea necesario.
+
+*/
+/*
+Manejo de eventos:
+
+Identificación del Elemento: Selecciona el elemento HTML al que deseas asociar un evento. Puedes hacer esto usando métodos como document.getElementById, document.querySelector, etc.
+
+Asociación del Evento: Utiliza un método de asociación de eventos, como addEventListener, para vincular una función de JavaScript al evento específico del elemento. 
+*/
+
+//Selección del Elemento: 
+const miElemento = document.getElementById('miElemento');
+//Uso de addEventListener: 
+miElemento.addEventListener('click', miFuncion);
+
+//Definición de la Función: 
+function miFuncion() {
+    // Código a ejecutar cuando se produce el evento
+	
+	if (miElemento.style.color === "green") {
+		miElemento.style.color="blue";
+	} else {
+	    miElemento.style.color="green";	
+	}
+}
+
+//Cuando ocurre el evento (por ejemplo, un clic del mouse en el elemento), la función asociada se ejecuta automáticamente.
+
+/*
+Eventos de Ratón:
+click: Se activa cuando se hace clic en un elemento.
+dblclick: Se activa cuando se hace doble clic en un elemento.
+mousedown: Se activa cuando se presiona el botón del ratón.
+mouseup: Se activa cuando se suelta el botón del ratón.
+mousemove: Se activa cuando se mueve el ratón sobre un elemento.
+
+Eventos de Teclado:
+keydown: Se activa cuando se presiona una tecla.
+keyup: Se activa cuando se suelta una tecla.
+keypress: Se activa cuando se mantiene presionada una tecla.
+
+Eventos de Formulario:
+submit: Se activa cuando se envía un formulario.
+change: Se activa cuando el valor de un elemento de formulario cambia.
+input: Se activa cuando se introduce texto en un campo de entrada.
+
+Eventos de Documento:
+DOMContentLoaded: cuando el documento HTML ha sido completamente cargado y analizado(sin imágenes y estilos).
+
+Eventos de Ventana:
+resize: Se activa cuando la ventana del navegador se redimensiona.
+scroll: Se activa cuando se desplaza la barra de desplazamiento de la ventana.
+
+Eventos de foco:
+focus: Se activa cuando un elemento recibe el foco.
+blur: Se activa cuando un elemento pierde el foco.
+
+Eventos de Arrastre:
+dragstart: Se activa cuando se inicia el proceso de arrastre de un elemento.
+dragend: Se activa cuando se completa el proceso de arrastre de un elemento.
+
+Eventos de Tiempo:
+setTimeout: Permite ejecutar una función después de un cierto tiempo de espera.
+setInterval: Permite ejecutar una función repetidamente cada cierto intervalo de tiempo.
+
+Eventos de Historial de Navegación:
+popstate: Se activa cuando el historial de navegación cambia.
+
+Eventos de Animación:
+animationstart: Se activa cuando una animación CSS comienza.
+animationend: Se activa cuando una animación CSS termina.
+
+Eventos de Red:
+online: Se activa cuando el dispositivo se conecta a internet.
+offline: Se activa cuando el dispositivo pierde la conexión a internet.
+
+Eventos de Geolocalización:
+geolocation: la posición geográfica del dispositivo cambia.
+
+Eventos de Escritura táctil:
+touchstart: Se activa cuando se toca la pantalla.
+touchend: Se activa cuando se levanta el dedo de la pantalla.
+
+Eventos de Clipboard:
+cut: Se activa cuando se corta contenido en el portapapeles.
+copy: Se activa cuando se copia contenido en el portapapeles.
+paste: Se activa cuando se pega contenido desde el portapapeles.
+*/
+
+</script>
+</body>
+</html>