domingo, 20 de marzo de 2022

Funciones de tiempo en JavaScript

 

U0Ficha1 - Funciones de Tiempo

Cuadro de texto: Algunas Notas
-	1000 milisegundos es 1 segundo
-	10 veces por segundo sería 1000/10 milisegundos.
-	1 minuto es 1000*60 milisegundos
Son funciones que se invocan en el Ciclo principal (main loop) del motor de JavaScript en el navegador. Éste reconoce cuándo pasó el tiempo definido (verbo to set) y ejecuta las funciones dadas en cada función.

Tiempo fuera

Establece que dentro de DADOS TANTOS milisegundos se ejecutará la función DADA. Lo llamaremos “timer de tiempo fuera”.

Sintaxis de la función:

setTimeout( dadaFuncionAEjecutar_fun, dadosMilisegundos_num ) // àNumber

Devuelve un número entero que significa el orden del timer que le da el main loop, comenzando con el valor 1 (el primer timer definido), y el próximo será el 2, el 3, el 4, y así sucesivamente.

Intérvalos

Establece que cada DADOS TANTOS milisegundos se ejecutará la función DADA. Lo llamaremos timer de intérvalos.

Sintaxis de la función:

setInterval( dadaFuncionAEjecutar_fun, dadosMilisegundos_num ) // àNumber

Devuelve un número entero que significa el orden del timer que le da el main loop, comenzando con el valor 1 (el primer timer definido).

Próximo refresh del monitor

Establece que en el próximo refresh del monitor, generado por el modo de pantalla, se ejecutará la función dada. Es ideal para el momento de generar animaciones.

Sintaxis de la función:

requestAnimationFrame( dadaFuncionAEjecutar_fun ) // à Number

Devuelve un número entero que significa el orden del timer que le da el main loop, comenzando con el valor 1 (el primer timer definido).

Detención de acciones del tiempo

Se corresponden con cada una de las funciones anteriores. Debido a que cada una de ellas tiene un código de timer (número entero) se sugiere crear una variable para controlarlas. Por ejemplo: var $timer1 = setTimeout( fn1, 300 ) ; Luego:

clearTimeout( dadoTimerTimeout_num ) ;

clearInterval( dadoTimerInterval_num ) ;

cancelAnimationFrame( dadoTimerAnimationFrame_num ) ;

domingo, 2 de enero de 2022

Importar Unidades o archivos módulos desde los distintos lenguajes de Programación

En Pascal:

use nombre_de_unidad ;


En C/C++, mediante el preprocesador...

#include "archivoenestacarpeta.h"

#include <archivoencarpetadeinstalaciondec.h>


En JavaScript de navegador...

<script src="archivojsonlineoenlamismacarpeta.js" ></script>

<script src="archivojsdemodulo.js" type="module" ></script>


En Node.js clásico (JavaScript)...

require( "archivoenlamismacarpetaoennodemodules.js" ) ;


En JavaScript moderno...

import {objeto1, objeto2} from "archivoencarpeta.js" ;


En PHP...

require "archivo.php" ;

include "archivo.php" ;

domingo, 18 de abril de 2021

Servidor HTTP+Socket+REPL con Node.js

 const

NO = false
, SI = true
;

var
ModuloHTTP = require( "http" )
, ModuloSocket = require( "socket.io" )
, ModuloArchivos = require( "fs" )
, ModuloREPL = require( "repl" )
, hayaError = SI
, numPuerto = 3000
, strCarpetaActual = __dirname
, oConexionesSocket
, oMiServidorHTTP
, oMiCLI
;

function fnIniciarServidor() {
oMiServidorHTTP =
ModuloHTTP
.createServer( fnGestorPeticiones )
.listen( numPuerto, fnListo )
;

oConexionesSocket = ModuloSocket( oMiServidorHTTP ) ;

oConexionesSocket
.on(
"connection"
, function( unCliente ) {
unCliente.on( "disconnect", function( situacion ) {
console.log( `El cliente socket [${unCliente.id}] se ha ido.` ) ;
}) ;
}
)
;

oMiCLI.context.detener = fnDetenerServidor ;
oMiCLI.context.servidor = oMiServidorHTTP ;
}

function fnDetenerServidor() {
oMiServidorHTTP.close() ;
console.log( "Servidor detenido" ) ;
delete oMiCLI.context.detener ;
}

function fnGestorPeticiones( oSolicitud, oDevolver ) {
console.log( `Se ha solicitado la url [${oSolicitud.url}]` ) ;
switch( oSolicitud.url ) {
case "/":
oDevolver.end( "<h1>Bienvenido</h1>" ) ;
break ;
case "/archivos":
console.log( "Se solicitó ver los archivos de la carpeta" ) ;
oDevolver.writeHead( 200, {
"Content-type": "text/html"
} ) ;
oDevolver.end(
"<ol>"
+ ModuloArchivos
.readdirSync(
strCarpetaActual
)
.map(
function( cadaArchivo ) {
return `<li>${cadaArchivo}</li>`;
}
)
.join("")
+ "</ol>"
);
break ;
default:
oDevolver.writeHead( 404 ) ;
oDevolver.end( "<h3>Recurso no encontrado</h3>" ) ;
}
}

function fnListo() {
console.log( `Servidor inicializado... Visitar: ` ) ;
console.log( `http://localhost:${numPuerto}` ) ;
console.log( `http://127.0.0.1:${numPuerto}` ) ;
// console.log( `http://${fnIP()}:${numPuerto}` ) ;
}


oMiCLI = ModuloREPL.start( "Comando >" ) ;

oMiCLI.context.iniciar = fnIniciarServidor ;

oMiCLI.context.salir = function() {
console.log( "Saliendo" ) ;
process.exit(1) ;
}


domingo, 21 de febrero de 2021

Metro UI Barra de menú (ribbon)

Código HTML para insertar como ribbon en formato Emmet

nav[data-role=ribbonmenu]>ul.tabs-holder+div.content-holder

ul.tabs-holder>li*15>a[href=#idTab$]
div.content-holder>.section#idTab$
.section#idTab$>div.group*15
div.group>(button.ribbon-button*15>span.icon+span.caption)+span.title
div.group>div.ribbon-toggle-group>(button.ribbon-icon-button*15>span.icon+span.caption)+span.title

sábado, 20 de febrero de 2021

Ideas sobre convenciones en lenguajes

Identificadores: Son la manera de identificar a través de palabras y signos, sin separación (digo, sin espacios, signos de suma, resta, multiplicación, etc.), diversos elementos clave y creados por el programador, en un lenguaje de codificación.

Básicamente son palabras juntadas para nombrar un dato, una habilidad, una función, método, técnica, palabra clave, etc.

Según la categoría de elemento que representa y según el lenguaje de codificación o programación, por las diversas convenciones realizadas entre programadores, se pueden adoptar el uso de mayúsculas iniciales, mayúsculas en toda la palabra, sub guiones, números no al principio, etc.

Caracter: Alias de representante. Piensen en un personaje interpretado por un actor. El actor lo representa, representa al caracter. Distinto es la palabra carácter que describe cómo actúa una persona o una característica de un objeto en general. En informática, cada letra, signo, dígito numérico, símbolo y otras entidades simples son formados por números; para poder recordar a cada número se lo disfraza con un caracter.

Dada una convención, por ejemplo el Set o conjunto de caracteres ASCII que mantiene una variedad de 256 caracteres distintos, formados desde el caracter nulo (el número cero) hasta el caracter de espacio especial (el 255), en total 256 valores distintos. En esta tabla el caracter A (A mayúscula)  es el valor número 65. El caracter Ñ (eñie mayúscula) representa al valor 165, y el caracter ñ (eñie minúscula) representa al valor 164. Originalmente representaban caracteres del idioma inglés, pero luego aumentaron a algunos caracteres del idioma francés, español, portugués, y griego.

Como 256 es una cantidad limitada, existen nuevos y actuales sets de caracteres. Por ejemplo los Unicode o UTF-8 y UTF-16, que resonarán seguido en este documento. Ellos extienden la posibilidad de incluir caracteres de idiomas como el ruso, chino, japonés, árabe, etc.

Lenguajes de programación basados en C/C++

En estos lenguajes los identificadores hacen diferencia entre usar caracteres en mayúscula y minúsculas. No es lo mismo los términos noAplica que NOAplica, que NOAPLICA y noaplica. Son caracteres distintos, por lo tanto serían identificadores distintos. Por eso existen ciertas convenciones entre programadores.

Por ejemplo, todo lo que represente valores constantes, que no cambiarán nunca, se debe nombrar todo en mayúscula. Por ejemplo: const PI = 3.14159265 ; El identificador PI representa a un valor constante. Jamás podrá cambiarse por otro a partir desde que se define.

Los elementos que representen valores variantes o variables, y también funciones, no requieren de mayúsculas, a menos que las no primeras palabras estén pegadas para definir al identificador. Digo, por ejemplo:

var amarillo ;

var noAplica ;

var noAplicaDespues ;

var no_aplica_despues ;

Fíjense: la primera “variable” identificada como amarillo, está formada por una sola palabra. La segunda variable identificada como noAplica, está formada por dos palabras; ya la segunda palabra está iniciada por una mayúscula. Ambas palabras están juntadas sin espacio.

La tercera variable evoca a tres palabras: no, aplica y después. Las palabras no primeras (la segunda y la tercera), se las redactan con la inicial mayúscula; y finalmente se las juntan.

La cuarta variable se suele utilizar en lenguajes como PHP. Las no primeras palabras se redactan íntegramente en minúscula pero todas están separadas por el caracter válido para identificadores llamado subguión (mal llamada “guión bajo”).

Luego van a encontrar que existen identificadores para hablar de objetos en general, generados por la palabra clave “class”. Estos identificadores se redactan con la letra inicial mayúscula.

var miLista = new Lista() ;

var miFirstArray = new Array() ;

var newUIInput = new HTMLElement() ;

var autoAzul = new Automovil( “Ford”, “azul” ) ;

Por lo general todo lo asociado con class representan entidades complejas y orgánicas duplicables, copiables. Cada copia o instanciación se genera a partir de la palabra clave new. Así tenemos en los ejemplos de arriba las classes Lista, Array, HTMLElement y Automovil, palabras precedidas por la palabra new justo después de redactar el signo de asignación “=”.

Noten que las variables, como dijimos antes, comienzan con minúscula, excepto las otras palabras de su identificador, justo antes del signo de asignación.

Otra notación a tener en cuenta es que hay ciertas abreviaturas, por ejemplo  la de UI (User Interface, que en inglés significa elemento de la Interfaz de Usuario) y la de HTML (Lenguaje de marcación o marcado para hipertextos). A ellas se les suele mantener la mayúscula. En los ejemplos del último cuadro tenemos dos identificadores que hacen uso de esta parte de la convención: newUIInput y HTMLElement.

Pero por supuesto, todo esto mencionado es parte de convenciones creadas entre diversas personas que utilizan estos lenguajes, de tal manera que se pueda interpretar fácilmente y diferenciar qué entidades representan cada identificador que se pueda leer.

Signos de puntuación

Como en castellano, todas nuestras ideas deben separarse entre sí a través de ciertos signos de puntuación. Dependiendo del lenguaje, pueden variar entre los siguientes:

En lenguajes de programación basados en C/C++, y por ejemplo en CSS, para separar ideas de acciones, se utiliza un signo “punto y coma” final.

A veces, para separar factores o ideas pequeñas se hacen uso de comas.

También para agrupar ciertas ideas en conjuntos (por ejemplo, una secuencia de acciones) se suelen utilizar pares de símbolos:

  • Paréntesis () (principalmente para separar factores o ideas pequeñas)

  • Llaves {} (principalmente para separar ideas)

  • Corchetes [ ] (agrupan ciertos factores)

  • Comillas dobles “ ” (agrupan caracteres para armar frases)

  • Comillas simples ‘ ’ (agrupan caracteres para armar frases; en lenguajes relacionados con HTML y la web en general, son alternativas a las otras comillas y funcionan complementariamente).

  • Comillas contrarias ` ` (en JavaScript moderno, a partir de la versión ES6 de 2015, es una tercera forma de comillas).

 

Ideas sobre XML y HTML

 ML —> Mark-up languages —> Traducible como: Lenguaje de marcación, lenguaje de marcado, lenguaje de enmarcamiento

Son lenguajes, basados en uno anterior llamado SGML, que construyen la idea de objetos delimitados o enmarcados mediante ETIQUETAS: Etiqueta de apertura y Etiqueta de cierre.

El primer lenguaje, el XML sirve para agrupar IDEAS que generan los datos. El segundo lenguaje sirve para enmarcar objetos de un DOCUMENTO que juegue con hipervínculos.

Pensemos en IDEAS: Tengo un objeto CARTUCHERA. Según el lenguaje XML, una cartuchera se puede definir de la siguiente manera:

<cartuchera></cartuchera>

También de esta manera:

<cartuchera>

</cartuchera>

Y si la cartuchera no debería contener nada dentro, también estaría la posibilidad de escribirse como:

<cartuchera />

El objeto CARTUCHERA se DELIMITA o ENMARCA por las etiquetas <cartuchera> que es de apertura, y </cartuchera> que es de cierre.

A mí me gusta representarla también de la siguiente manera:

Quiero decir que la cartuchera tiene un inicio y tiene un final. Y como dibujante recomiendo pensarla como que comienza dibujando un recuadro desde su parte de arriba a la izquierda y termina abajo a la derecha.

Si lo vemos matemáticamente podemos pensar en un diagrama de Venn, que se representa de la siguiente manera:

Ahora, nosotros en la vida cotidiana utilizamos las cartucheras para almacenar lápices y lapiceras, además de otros útiles. Entonces pensaremos en estos primeros dos objetos: un lápiz y una lapicera. Como son elementos que no contendrán nada, los pensaré de la siguiente manera:

<lapiz />

<lapicera />

Ahora yo voy a insertar varios lápices y lapiceras dentro de mi cartuchera.

<cartuchera >

<lapiz /> <lapiz /> <lapiz /> <lapicera /> <lapicera />

</cartuchera>

Estoy definiendo de esta manera, una IDEA, un objeto Cartuchera que puede alojar dentro varios otros objetos. Es por esto que tal vez puedan leer que yo me referiré a estos objetos como Conjuntos XML o conjuntos HTML, aunque no sea un término técnico, solamente a modo de comprender la idea.

Entonces redefino esto gráficamente:

Y lo redefino como conjunto de Venn:

La diferencia entre el conjunto Matemático y el Informático es que el Informático está limitado por la memoria de la computadora en que se represente. Mientras que en el matemático los elementos dentro de un conjunto puede estar distribuidos aleatoriamente, cual bolsa agitada, los elementos informáticos mantienen un orden como hayan sido descriptos en su inicio.

Puedo definir algunas cosas más del objeto XML/HTML: Por ejemplo su escritura.

El código OUTER XML/HTML es el formado por todos sus caracteres, desde el primer angulito de la etiqueta de apertura < hasta el último > de la etiqueta de cierre.

<cartuchera >

<lapiz /> <lapiz /> <lapiz /> <lapicera /> <lapicera />

</cartuchera>

El código INNER XML/HTML es el formado por todos sus caracteres, luego del angulito > de la etiqueta de apertura y justo antes del </ de la etiqueta de cierre del objeto:

<cartuchera >

<lapiz /> <lapiz /> <lapiz /> <lapicera /> <lapicera />

</cartuchera>

Así también tenemos a los códigos INNER TEXT y OUTER TEXT, que es el texto que representa a cada parte, digo pensando también en cada símbolo (angulito, barra, igual, comillas, etc.) y en cada espacio (espacio, bajar renglón, tabular, etc.). No se piensa como que tiene objetos sino en los simbolos redactados que construyen a esos objetos.

A su vez decimos que los objetos tipo Lápiz y Lapicera, contenidos dentro del objeto CARTUCHERA son sus hijos (child, children; child element, children elements). Y a la inversa, el padre (parent element) de cada lápiz y lapicera es el objeto Cartuchera.

Cada uno de los elementos LÁPIZ y LAPICERA no contiene descendientes; por lo tanto diremos que son objetos vacíos (void or null elements).

Luego, diremos que cada Lapiz y Lapicera son Hermanos (siblings) entre sí, tanto posterior (next sibling) como anterior (previous sibling); y se puede considerar también al primer elemento como el primer hijo (first child) y al último elemento como (last child).

Hablando de la jerarquía que representan, mencionaremos dos maneras más de representarse:

Modo de árbol: