EVENTOS
REPASO JAVASCRIPT 1.1
<script>
getElementById(): Este método del objeto document se utiliza para obtener una referencia al
elemento HTML con el ID especificado. En este script, se utiliza para acceder al input donde el
usuario ingresa el número, al botón de cálculo y al elemento donde se mostrará el resultado.
addEventListener(): Este método se utiliza para agregar un manejador de eventos a un
elemento HTML, lo que significa que se ejecutará una función específica cuando ocurra un
evento en ese elemento. En este caso, se utiliza para detectar el evento de entrada (input) en
el input del número.
// Obtener el valor del input
[Link]('numberInput').addEventListener('input', function
() {
CONTENIDO…
)};
trim(): Es un método de los strings en JavaScript que elimina los espacios en blanco
iniciales y finales de una cadena de texto. Se utiliza aquí para eliminar cualquier espacio
en blanco alrededor del número ingresado por el usuario.
const inputValue = [Link]();//.trim() Quita los espacios
iniciales, finales
test(): Este método se utiliza para comprobar si una cadena coincide con una expresión
regular. En este caso, se utiliza para verificar si el número ingresado por el usuario es un
número positivo entero.
// Verificar si el valor es un número positivo entero
const isPositiveInteger = /^[1-9]\d*$/.test(inputValue);
disabled: Es una propiedad de los elementos HTML que se utiliza para deshabilitar o
habilitar el elemento. En este script, se establece en true o false para habilitar o
deshabilitar el botón de cálculo según si el número ingresado es válido.
// Habilitar o deshabilitar el botón según la validación
[Link]('calculateButton').disabled = !
isPositiveInteger;
addEventListener() y removeEventListener(): Se utilizan para agregar y quitar un
manejador de eventos al botón de cálculo, respectivamente. Si el número ingresado es
válido, se agrega el manejador de eventos click al botón para llamar a la función.
// Si es un número válido, agregar el manejador de evento click al botón
if (isPositiveInteger) {
[Link]('calculateButton').addEventListener('click',
calcularFactorial);
} else {
// Si no es válido, quitar el manejador de evento click
[Link]('calculateButton').removeEventListener('click',
calcularFactorial);
}
…CONTENIDO
)};
parseInt(): Esta función global de JavaScript se utiliza para convertir una cadena en un número
entero. Aquí se utiliza para convertir el valor ingresado por el usuario en un número entero
antes de calcular el factorial.
for(): Esta es una estructura de control en JavaScript utilizada para repetir una serie de
instrucciones varias veces. Se utiliza aquí para calcular el factorial del número ingresado por el
usuario.
textContent: Es una propiedad que permite establecer o obtener el contenido de texto de un
elemento HTML. Se utiliza aquí para mostrar el resultado del cálculo del factorial en un
elemento específico en el documento.
function calcularFactorial() {
const inputValue =
parseInt([Link]('numberInput').[Link]());
const resultElement = [Link]('result');
// Calcular el factorial
let factorial = 1;
for (let i = 1; i <= inputValue; i++) {
factorial *= i;
}
// Mostrar el resultado
[Link] = `El factorial de ${inputValue}
es: ${factorial}`;
}
</script>
TIPS HTML
<label for="numberInput">Introduce un número positivo entero:</label>
<input type="text" id="numberInput">
<button id="calculateButton" disabled>Calcular Factorial</button>
<output id="result"></output>
1. <label>: Esta etiqueta se utiliza para asociar un texto descriptivo con un control de
formulario, como un input. En este caso, el texto "Introduce un número positivo
entero:" se mostrará junto al input donde el usuario ingresará el número.
2. for="numberInput": El atributo for de la etiqueta <label> especifica a qué elemento
de formulario se está haciendo referencia. En este caso, se vincula con el input de id
"numberInput", lo que significa que cuando se haga clic en el texto del label, el foco se
moverá automáticamente al input.
3. <input type="text" id="numberInput">: Este es un input de tipo texto que permite al
usuario ingresar un número. El atributo id se utiliza para identificar de manera única
este input y vincularlo con el label. Este input es donde el usuario ingresará el número.
4. <button id="calculateButton" disabled>Calcular Factorial</button>: Este es un botón
que el usuario puede hacer clic para calcular el factorial del número ingresado. El
atributo id se utiliza para identificar de manera única este botón. El atributo disabled
se utiliza inicialmente para deshabilitar el botón hasta que se ingrese un número válido
en el input.
5. <output id="result"></output>: Esta etiqueta <output> se utiliza para mostrar el
resultado del cálculo del factorial. El atributo id se utiliza para identificar de manera
única este elemento, lo que facilita su manipulación a través de JavaScript.
REPASO JAVASCRIPT 1.2
1. const container = [Link]('container');: Se obtiene la referencia al
elemento HTML con el id "container", que envuelve todos los elementos del
formulario.
2. const input1 = [Link]('input1');: Se obtiene la referencia al primer
input del formulario, donde el usuario ingresa el primer número.
3. const input2 = [Link]('input2');: Se obtiene la referencia al
segundo input del formulario, donde el usuario ingresa el segundo número.
4. const suma = [Link]('suma'); y const resta =
[Link]('resta');: Se obtienen las referencias a los elementos HTML
que representan las opciones de suma y resta respectivamente.
5. [Link]('click', function (event) { ... });: Se agrega un evento de
escucha al contenedor del formulario para capturar los clics realizados por el usuario.
Cuando se produce un clic dentro del contenedor, se ejecuta la función de devolución
de llamada proporcionada.
6. function realizarOperacion(operacion) { ... }: Esta función toma como argumento la
operación a realizar ("suma" o "resta"). Dentro de esta función, se obtienen los valores
de los dos inputs del formulario, se realizan las operaciones correspondientes y se
muestra el resultado en el elemento HTML con el id "resultado".
7. [Link] = Resultado: ${resultadoOperacion};: Se actualiza el contenido
del elemento HTML con el id "resultado" para mostrar el resultado de la operación
realizada.
1. Asignación de elementos a variables:
container, input1, input2, suma, resta y resultado son variables que
almacenan referencias a elementos HTML específicos mediante su id. Esto se
hace utilizando el método [Link].
2. Evento de escucha en el contenedor:
Se agrega un event listener al contenedor principal (container) para detectar
eventos de clic en cualquier lugar dentro de él.
3. Función de manejo de eventos:
Dentro del event listener, se define una función de manejo de eventos que se
activa cuando se hace clic en cualquier elemento dentro del contenedor. Esta
función toma un parámetro event que representa el evento de clic.
4. Obtención del elemento objetivo (target):
Se utiliza la propiedad [Link] para obtener el elemento específico en el
que se hizo clic dentro del contenedor. Esto permite identificar qué elemento
fue el destino del clic.
5. Verificación del elemento destino:
Se comprueba si el elemento en el que se hizo clic (target) es igual al elemento
de suma (suma). Si es así, se llama a la función realizarOperacion con el
argumento 'suma'.
Si el elemento destino es igual al elemento de resta (resta), se llama a la
función realizarOperacion con el argumento 'resta'.
6. Función realizarOperacion:
Esta función toma un argumento operacion, que indica si se debe realizar una
suma o una resta.
Obtiene los valores de los dos inputs (input1 e input2) y los convierte a
números usando parseFloat.
Realiza la operación correspondiente (suma o resta) en función del parámetro
operacion.
Muestra el resultado de la operación en el elemento de resultado
([Link]).
TIPS HTML
1. <div class="container" id="container">: Este div actúa como contenedor principal del
formulario. Tiene la clase "container" para aplicar estilos CSS y el id "container" para
ser referenciado por el script JavaScript.
2. <input type="number" id="input1" placeholder="Número 1"> y <input
type="number" id="input2" placeholder="Número 2">: Estos son dos elementos de
entrada numérica donde el usuario puede ingresar los números que desea sumar o
restar. Tienen los id "input1" y "input2" respectivamente para ser referenciados por el
script.
3. <div class="operation-container"> ... </div>: Este div actúa como un contenedor para
las opciones de operación (suma y resta). Contiene dos divs internos que representan
las opciones de suma y resta.
4. <div id="suma" style="cursor: pointer; display: inline-block; margin-right:
20px;">Sumar</div> y <div id="resta" style="cursor: pointer; display: inline-
block;">Restar</div>: Estos son los divs que representan las opciones de suma y resta
respectivamente. Tienen los id "suma" y "resta" para ser referenciados por el script.
También se les aplica un estilo CSS para cambiar el cursor al estilo "pointer" cuando se
pasa sobre ellos, y para mostrarlos en línea con un margen entre ellos.
5. <div id="resultado" style="margin-top: 20px; font-weight: bold;"></div>: Este div
muestra el resultado de la operación (suma o resta). Tiene el id "resultado" para ser
referenciado por el script. Se aplica un estilo CSS para agregar un margen superior y
establecer el peso de la fuente en negrita
REPASO JAVASCRIPT 1.3
<script>
const colorBoxes = [Link]('.color-box');
//modifica la clase,
[Link](function (box) {//en colorBoxes modifica el
bacground del body segun el boton que hayas click
[Link]('click', function () {
[Link] =
[Link];
});
});
</script>
Este script JavaScript realiza las siguientes acciones:
1. Selección de elementos HTML:
Utiliza el método [Link] para seleccionar todos los
elementos HTML que tienen la clase "color-box" y los almacena en la variable
colorBoxes.
2. Iteración sobre los elementos seleccionados:
Utiliza el método forEach para iterar sobre cada uno de los elementos
seleccionados en colorBoxes.
3. Event Listener en cada elemento:
Agrega un event listener de clic a cada elemento de la clase "color-box".
Cuando se hace clic en uno de estos elementos, se activa una función de
manejo de eventos.
4. Función de Manejo de Eventos:
Dentro de la función de manejo de eventos, se cambia el color de fondo del
body ([Link]) al color de fondo del elemento
de la caja de color ([Link]) en el que se hizo clic.
Palabras reservadas utilizadas:
const: Se utiliza para declarar una variable constante que no cambiará de valor
después de su inicialización.
[Link]: Método para seleccionar todos los elementos HTML que
coinciden con un selector CSS especificado.
forEach: Método que itera sobre cada elemento de un array (o NodeList en este caso)
y ejecuta una función de devolución de llamada para cada uno de ellos.
addEventListener: Método para agregar un event listener a un elemento HTML.
style: Propiedad que permite acceder a los estilos CSS de un elemento HTML. En este
caso, se utiliza para acceder al color de fondo (backgroundColor) de cada elemento de
la clase "color-box".
backgroundColor: Propiedad CSS que define el color de fondo de un elemento.
TIPS HTML
Caja de color con un color de fondo
1. Elemento <div>:
Se utiliza para crear una caja que contendrá el color.
Cada <div> tiene la clase "color-box", que probablemente se usa para aplicar
estilos comunes a todas las cajas de color.
Cada <div> tiene un atributo id único (id="color1", id="color2", etc.), que
puede ser útil para identificar cada caja de color individualmente mediante
JavaScript o CSS.
Los <div> no contienen contenido visible, ya que su propósito principal es
proporcionar un color de fondo.
2. Estilo inline:
Cada <div> tiene un estilo en línea (style="background-color: color;") que
define su color de fondo.
El atributo background-color establece el color de fondo de cada <div>.
Se utilizan diferentes valores de color (red, blue, green, yellow, orange,
purple) para cada <div>, lo que resulta en cajas de color con colores de fondo
diferentes.
REPASO JAVASCRIPT 1.4
<script>
<script>
const keyboard = [Link]('keyboard');
const output = [Link]('output');
[Link]('click', function (event) {
const clickedKey = [Link];
[Link] = 'Número pulsado: ' + clickedKey;
});
</script>
En este script JavaScript, se realiza lo siguiente:
1. Selección de elementos del DOM:
Se seleccionan dos elementos del DOM utilizando el método
[Link]().
El elemento con el id "keyboard" se almacena en la variable keyboard.
El elemento con el id "output" se almacena en la variable output.
2. Agregando un EventListener:
Se agrega un EventListener al elemento keyboard para el evento 'click'.
Cuando se hace clic en cualquier elemento dentro del elemento keyboard, se
activará el manejador de eventos.
3. Función de Manejo de Eventos:
Dentro del manejador de eventos, se obtiene el elemento que fue clickeado
utilizando [Link].
Se extrae el texto del elemento clickeado usando innerText y se almacena en
la variable clickedKey.
Luego, se actualiza el contenido del elemento con el id "output" para mostrar
el número que fue pulsado.
Palabras reservadas utilizadas:
const: Declara una constante para almacenar referencias a los elementos del DOM.
Una vez que se asigna un valor a una constante, no se puede cambiar.
[Link](): Un método para seleccionar un elemento del DOM
basado en su id.
addEventListener(): Un método para agregar un EventListener a un elemento del
DOM.
event: Un objeto proporcionado automáticamente a las funciones de manejo de
eventos que contiene información sobre el evento que se ha producido.
innerText: Una propiedad que devuelve o establece el texto contenido dentro de un
elemento, incluidos todos sus descendientes. En este caso, se utiliza para obtener el
texto del elemento clickeado.
textContent: Una propiedad similar a innerText, pero devuelve o establece el texto
contenido dentro de un elemento, incluidos todos sus descendientes. En este caso, se
utiliza para actualizar el contenido del elemento con el id "output".
TIPS HTML
Teclado en pantalla
Se utiliza un contenedor con la clase "key-container" y el id "keyboard" para agrupar
todos los botones del teclado.
Cada botón del teclado se representa mediante un div con la clase "key". Cada uno de
estos divs contiene un número del 0 al 9, que representa una tecla del teclado.
REPASO JAVASCRIPT 1.5
<script>
[Link]("DOMContentLoaded", function (event) {
[Link]("El documento HTML ha sido completamente cargado
y parseado, sin esperar hojas de estilo, imágenes y subframes para
finalizar la carga");
// Genera 10 números aleatorios sin repetición
const uniqueNumbers = generateUniqueNumbers(0, 9, 10);
// Crea un elemento <div> para mostrar los números
const numbersContainer = [Link]('div');
[Link] = 'Números Aleatorios: ' +
[Link](', ');
// Añade el elemento al cuerpo del documento
[Link](numbersContainer);
});
function generateUniqueNumbers(min, max, count) {
const numbers = [Link]({ length: max - min + 1 }, (_,
index) => index + min);
const uniqueNumbers = [];
for (let i = 0; i < count; i++) {
const randomIndex = [Link]([Link]() *
[Link]);
const selectedNumber = [Link](randomIndex, 1)[0];
[Link](selectedNumber);
}
return uniqueNumbers;
}
</script>
1. Evento "DOMContentLoaded":
El evento "DOMContentLoaded" se dispara cuando el HTML ha sido
completamente cargado y parseado por el navegador, lo que significa que
todo el contenido HTML está disponible para ser manipulado a través de
JavaScript. Sin embargo, este evento se dispara antes de que se hayan cargado
otros recursos externos como imágenes, hojas de estilo o scripts externos.
2. Función "generateUniqueNumbers":
Esta función recibe tres parámetros: el número mínimo "min", el número
máximo "max" y la cantidad de números únicos que se desean generar
"count".
Se inicializa una lista llamada "numbers" que contiene todos los números en el
rango [min, max].
Se inicializa una lista vacía llamada "uniqueNumbers" que contendrá los
números aleatorios únicos.
Se utiliza un bucle "for" para generar la cantidad especificada de números
aleatorios únicos.
En cada iteración, se selecciona un número aleatorio de la lista "numbers"
utilizando "[Link]()" y se elimina de la lista original utilizando el
método "splice()".
El número seleccionado se añade a la lista de "uniqueNumbers".
Finalmente, se devuelve la lista de números aleatorios únicos.
3. Generación de números aleatorios:
En el evento "DOMContentLoaded", se llama a la función
"generateUniqueNumbers" para generar 10 números aleatorios únicos en el
rango del 0 al 9.
4. Creación del elemento <div>:
Se crea un elemento <div> utilizando [Link]('div').
Se establece el contenido de texto del div para mostrar los números aleatorios
generados. Los números se concatenan como una cadena utilizando el método
"join()" y se separan por comas.
5. Añadir el elemento al cuerpo del documento:
Se añade el elemento <div> recién creado al cuerpo del documento utilizando
el método "appendChild()".
Esto hace que los números aleatorios se muestren en la página cuando el
evento "DOMContentLoaded" se dispara y se completa la carga del
documento.
Palabras reservadas y métodos utilizados:
[Link](): Registra un evento en el documento HTML para ser
ejecutado cuando el documento esté completamente cargado.
DOMContentLoaded: Evento que se dispara cuando el HTML ha sido completamente
cargado y parseado.
[Link](): Método para imprimir mensajes en la consola del navegador.
[Link](): Método estático que crea un nuevo array a partir de un objeto iterable.
[Link](): Función que devuelve un número pseudoaleatorio entre 0 y 1.
splice(): Método que cambia el contenido de un array eliminando elementos existentes
y/o agregando nuevos elementos.
appendChild(): Método que añade un nodo al final de la lista de hijos de un nodo padre
especificado.
REPASO JAVASCRIPT 1.6
<script>
[Link]("DOMContentLoaded", function (event) {
[Link]("El documento HTML ha sido completamente cargado
y parseado, sin esperar hojas de estilo, imágenes y subframes para
finalizar la carga");
// Genera 10 números aleatorios sin repetición
const uniqueNumbers = generateUniqueNumbers(0, 9, 10);
// Crea un contenedor para el teclado en pantalla
const keyboardContainer = [Link]('div');
[Link] = 'flex';
[Link] = 'wrap';
// Añade los números aleatorios al contenedor del teclado en
pantalla
[Link](number => {
const keyElement = [Link]('div');
[Link] = number;
[Link] = '1px solid #000';
[Link] = '10px';
[Link] = '5px';
[Link] = 'pointer';
[Link]('click', handleKeyPress);
[Link](keyElement);
});
// Añade el teclado en pantalla al cuerpo del documento
[Link](keyboardContainer);
});
function generateUniqueNumbers(min, max, count) {
const numbers = [Link]({ length: max - min + 1 }, (_,
index) => index + min);
const uniqueNumbers = [];
for (let i = 0; i < count; i++) {
const randomIndex = [Link]([Link]() *
[Link]);
const selectedNumber = [Link](randomIndex, 1)[0];
[Link](selectedNumber);
}
return uniqueNumbers;
}
function handleKeyPress(event) {
// Maneja el evento de clic en una tecla del teclado en
pantalla
alert('Tecla presionada: ' + [Link]);
}
</script>
Script:
1. Evento "DOMContentLoaded":
Este evento se dispara cuando el HTML ha sido completamente cargado y
parseado por el navegador, lo que significa que todo el contenido HTML está
disponible para ser manipulado a través de JavaScript. Este evento es útil para
ejecutar funciones que necesitan acceder al DOM una vez que ha sido cargado.
2. Función "generateUniqueNumbers":
Esta función genera un conjunto de números aleatorios únicos dentro de un
rango especificado.
Se utilizan los parámetros "min" y "max" para definir el rango de números
posibles, y "count" para especificar cuántos números aleatorios únicos se
desean generar.
Se inicializa un array llamado "numbers" que contiene todos los números en el
rango [min, max].
Luego se seleccionan aleatoriamente números de este array y se eliminan para
evitar la repetición.
Finalmente, se devuelve un array con los números aleatorios únicos
generados.
3. Creación del teclado en pantalla:
Se crea un contenedor <div> llamado "keyboardContainer" que contendrá las
teclas del teclado en pantalla.
Se establecen algunas propiedades de estilo CSS para el contenedor, como
display: flex y flex-wrap: wrap, para organizar las teclas en filas y columnas.
Se utiliza un bucle forEach para iterar sobre el array de números aleatorios
únicos y crear un elemento <div> para cada número.
Cada elemento de tecla se configura con estilos CSS para que se vea como una
tecla en un teclado físico y se añade un manejador de evento de clic
(handleKeyPress) para manejar los clics en las teclas.
4. Añadir el teclado en pantalla al documento:
Una vez que se han creado todas las teclas del teclado en pantalla y se han
añadido al contenedor, el contenedor se añade al cuerpo del documento
utilizando el método appendChild().
Body:
El body contiene una serie de <div> que representan las teclas del teclado en pantalla.
Cada tecla tiene un número como texto dentro de ella y tiene estilos CSS aplicados para
darle una apariencia de tecla, como bordes, relleno, margen y cursor de puntero. Estas
teclas se generan dinámicamente en el script y se añaden al cuerpo del documento
durante el evento "DOMContentLoaded".
Palabras Reservadas y Métodos Utilizados:
[Link](): Registra un evento en el documento HTML para ser
ejecutado cuando el documento esté completamente cargado.
DOMContentLoaded: Evento que se dispara cuando el HTML ha sido completamente
cargado y parseado.
[Link](): Método para imprimir mensajes en la consola del navegador.
[Link](): Método estático que crea un nuevo array a partir de un objeto iterable.
[Link](): Función que devuelve un número pseudoaleatorio entre 0 y 1.
splice(): Método que cambia el contenido de un array eliminando elementos
existentes y/o agregando nuevos elementos.
appendChild(): Método que añade un nodo al final de la lista de hijos de un nodo
padre especificado.
