En contextos l\u00fadicos o evaluativos, como los que se presentan en el trabajo diario del programa de Producci\u00f3n Electr\u00f3nica Multimedial (PEM), la gesti\u00f3n del tiempo es crucial para establecer l\u00edmites y crear experiencias de usuario m\u00e1s din\u00e1micas. La ausencia de un objeto cron\u00f3metro en JavaScript y la falta de un m\u00e9todo dedicado en el objeto \u00abDate\u00bb han motivado la creaci\u00f3n de una soluci\u00f3n vers\u00e1til y f\u00e1cil de implementar.<\/p>\n\n\n\n
Para abordar este desaf\u00edo, proponemos extender la funcionalidad del objeto \u00abDate\u00bb mediante la creaci\u00f3n de un m\u00e9todo espec\u00edfico llamado \u00abChronometer\u00bb. Este m\u00e9todo, ser\u00e1 dise\u00f1ado para recibir tres par\u00e1metros clave como la referencia al elemento en el DOM, donde se visualizar\u00e1 el cron\u00f3metro, el tiempo establecido (con una opci\u00f3n predeterminada de 60 segundos) y una funci\u00f3n de \u201ccallback\u201d, que se ejecutar\u00e1 al alcanzar cero.<\/p>\n\n\n\n
A continuaci\u00f3n, presentamos los pasos detallados para replicar este cron\u00f3metro en aplicaciones web:<\/p>\n\n\n\n
Lo primero que se va a hacer es extender la funcionalidad del objeto \u201cDate\u201d, para implementar un m\u00e9todo llamado \u201cChronometer\u201d. Este m\u00e9todo, va a recibir tres par\u00e1metros:<\/p>\n\n\n\n
Seguidamente, se construir\u00e1 un prototipo del objeto \u201cDate\u201d con un m\u00e9todo llamado \u201cChronometer\u201d, el cual va a recibir los par\u00e1metros \u201celem\u201d, \u201ctime\u201d, \u201ccallback\u201d. Se sigue esta sintaxis, para agregar un m\u00e9todo a un objeto usando prototipos:<\/p>\n\n\n\n
objeto.prototype.nombreFuncion = function(){\n\n\/\/ Lo que va dentro de la funci\u00f3n\n\n}\n\n\/* Donde, objeto: es el nombre del objeto de javascript que se le va a crear el m\u00e9todo\n\nprototype: palabra reservada de javascript para crear el prototipo\n\nnombreFuncion: nombre del m\u00e9todo que va a tener el objeto *\/<\/strong>\n<\/pre>\n<\/div><\/div>\n\n\n\nEl m\u00e9todo \u201cChronometer\u201d del objeto \u201cDate\u201d, debe quedar as\u00ed:<\/p>\n\n\n\n
Date.prototype.chronometer = function(elem, time, callback){\n\n\/\/ aqu\u00ed se escribe el c\u00f3digo\n\n}<\/pre>\n\n\n\nSe debe crear un archivo llamado \u201cchronometro.js\u201d y copiar el siguiente c\u00f3digo:<\/p>\n\n\n\n
var intervalChronometer;\n\nDate.prototype.chronometer = function(elem, time=60, callback){\n\nlet segundosRestantes = time;\n\nintervalChronometer = window.setInterval(function(){\n\nconsole.log(segundosRestantes)\n\nif (segundosRestantes <= 0) {\n\nclearInterval(intervalChronometer);\n\ncallback();\n\n} else {\n\nsegundosRestantes--;\n\nvar hours = Math.floor(segundosRestantes \/ 3600);\n\nvar minutes = Math.floor((segundosRestantes % 3600) \/ 60);\n\nvar seconds = segundosRestantes % 60;\n\nelem.innerHTML= `${String(hours).padStart(2,'0')}:${String(minutes).padStart(2,'0')}:${String(seconds).padStart(2,'0')}`;\n\n}\n\n},1000);\n\n}<\/pre>\n\n\n\nPara implementar el prototipo creado, se deben seguir los siguientes pasos:<\/p>\n\n\n\n
\n- Se instancia el objeto \u201cDate\u201d y se llama al m\u00e9todo \u201cChronometer\u201d:<\/li>\n<\/ul>\n\n\n\n
var fecha = new Date();\n\nfecha. Chronometer(elem, time, callback);<\/pre>\n\n\n\n
\n- Luego, se crea un archivo llamado \u201cindex.html\u201d, donde se copia el siguiente c\u00f3digo:<\/li>\n<\/ul>\n\n\n\n
<!DOCTYPE HTML>\n\n<html Lang=\"es\">\n\n<head>\n\n<meta charset=\"UTF-8\">\n\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<script src=\"chronometer.js\"><\/script>\n\n<title>Prueba cron\u00f3metro<\/title>\n\n<\/head>\n\n<body>\n\n<!-- espacio donde se va mostrar el cron\u00f3metro -->\n\n<div id=\"chronometer\"><\/div>\n\n<script type=\"text\/javascript\">\n\nvar fecha = new Date();\n\nvar elem = document.getElementById(\"chronometer\") \/\/ referencia del DOM\n\nvar time = 20 \/\/ tiempo del cron\u00f3metro en segundos\n\nfecha.chronometer(elem, time, time_out);\n\n\/* funci\u00f3n callback *\/\n\nfunction time_out(){\n\nalert(\"Se termin\u00f3 el tiempo\");\n\n}\n\n<\/script>\n\n<\/body>\n\n<\/html><\/pre>\n\n\n\nEn esta gu\u00eda se incluye un archivo denominado \u00abchronometro.js\u00bb, que contiene un c\u00f3digo eficiente para la implementaci\u00f3n del cron\u00f3metro. Adem\u00e1s, la aplicaci\u00f3n pr\u00e1ctica del prototipo creado, se presenta en otro archivo llamado \u00abindex.html\u00bb. Ambos est\u00e1n disponibles para desc\u00e1rgalos<\/a>, para facilitar la integraci\u00f3n de este cron\u00f3metro funcional en cualquier proyecto.<\/p>\n\n\n\nPara concluir, resulta esencial subrayar que el c\u00f3digo del cron\u00f3metro ha sido incorporado con \u00e9xito en las producciones llevadas a cabo en el seno del PEM, donde ha sido una herramienta valiosa, adaptable a diversas situaciones y aplicaciones dentro del entorno multimedia.<\/p>\n\n\n\n