martes, octubre 11th, 2022
En este post tengo planeado ir guardando aquellos aspectos nuevos de JavaScript que me parecen extraños
El concepto de transpiler existe por la gran actualización que se eta teniendo del lenguaje Javascript, ya que cada año surge una nueva especificación se vuelve necesario compilar o mas bien transpilar a una versión que sea reconocida por los navegadores viejos y asi despreocuparnos de los problemas de compatibildad
un buen transpiler es https://babeljs.io/
La sentencia let para declarar variables lo hace en el contexto que se usa, por ejemplo si tu declaras un variable con la palabra var entonces esas variables en realidad se declaran al inicio del archivo js, talvez no quieras que esto suceda
function getAlgoNombre(algo) {
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
return algo.nombre;
}el codigo anterior es equivalente a lo siguiente
function getAlgoNombre(pony) {
var nombre;
if (algo.isalgo) {
var nombre = 'nombre ' + algo.name;
return nombre;
}
// nombre tambien es accesible aqui
return algo.nombre;
}con let se declara cabal donde se usa
las constantes se introdujeron en la versión ES2015, la ventaja de una constante es que se mantiene inalterable en todo el código
const algoobjects = 6;La sentencia anterior no puede se reasignada
También se pueden asignar un objeto una constante, se puede declarar y luego ser asiganada
const objeto={};
objeto.nombre="nuevo nombre";
console.log(objeto.nombre);
y tambien con los arrays
const arrayan=[];
arrayan.push("uno","dos");
console.log(arrayan[1]);
Es genial por que permite definir dinamicamente los valores de un objeto y sus propiedades
lunes, julio 6th, 2020
El tema de las fecha es un asunto serio, conversiones aqui, formatos allá, y compatibilizar todo entre diferentes lenguajes y bases de datos, es todo un aprendizaje aparte. He decidido recopilar en este post todos aquellos comando útiles de conversiones de fechas y otros trucos que me han servido y que puedas utilizar si acaso lo consideras útil.
A continuación los comandos útiles para Mysql
A menos que tu servidor este en tu oficina o en tu país, difícilmente estará en el mismo huso horario, por lo general los servidores están en EEUU ya sea en la costa oeste o este, casi siempre en otro huso horario al de tu país, por esa razón cuando trabajes con campos Datetime en mysql debes hacer un pequeño ajuste para mostrar los resultados.
Por ejemplo puede ser que tu servidor se encuentre 6 horas después que tu país, por lo que cuando realizamos consultas debemos presentarlas con un ajuste:
date(DATE_SUB(fecha, INTERVAL 6 HOUR))Puedes cambiar el número 6 ajustándose al horario de tu país con la función DATE_SUB(campo, INTERVAL valor intervalo)
El intervalo puede ser cualquiera de estos :
Dejaré aqui los comando útiles par a php
Cuando necesitas consultar una tabla por sus campos de fecha, quizá te sea útil establecer unos parámetros de fecha para un periodo por default, que generalmente es el mes actual, así puedes mostrar el conjunto de datos mas reciente y luego permitir al usuario que cambie la fecha para que pueda consultar otro conjunto de registros. El comando para hacerlo es el siguiente:
Comando para obtener el primer día del mes actual
$cFecha1=date('Y-m-01');Comando para obtener el último día del mes actual
$cFecha2=date('Y-m-t');Aquí te comparto comandos para javascript. A los que venimos de lenguajes antiguos el manejo de las fechas en javascript nos puede parecer desconcertante, por ejemplo el método getday() no te devuelve el día de una fecha sino un entero que representa el dia de la semana; si lo que deseas es el día del mes entonces debes usar getDate().
Te recuerdo que este blog es para programadores que vienen de lenguajes viejos y que todavía no han hecho el pase a lenguajes web, si eres nativo de la web, nuestro contenido bien puede parecer trivial o demasiado básica.
Al igual que con Php es posible que necesites obtener la primera fecha y la última para enviar los parámetros de una consulta.
Para obtener la fecha inicial:
var dt= new Date();
var dtFirst=Date(1,dt.getMonth()+1,dt.getYear()+1900);Para obtener la fecha final:
var dt= new Date();
var y = dt.getFullYear();
var m = dt.getMonth();
var dtEnd= new Date(y, m + 1, 0);
Sucede que cuando realizas consultas a una base de datos Mysql necesita enviar las fechas ya formateadas, así el procesamiento se realiza en el lado del cliente y tu servidor no se ve cargado con procesamiento extra innecesariamente. Te comparto una función que puedes uar en JavaScript para convertir a formato Mysql
function convertDateMysql(strDate){
const parts = strDate.split('/');
const day = parts[0];
const month = parts[1];
const year = parts[2];
return year+"-"+month.padStart(2, "0")+"-"+day.padStart(2, "0");
}Iré dejando mas código útil para el tratamiento de fecha.
lunes, julio 6th, 2020
Si eres como yo que deseas ir dejando atrás todo lo que tenga que ver con Jquery y bootstrap, ya se por su ralentización en cuanto a la carga de sitios que lo implementan, ó porque deseas ir aprendiendo CSS y javascript desde cero, te verás en la necesidad de buscar alternativas para el manejo de calendarios y fechas en tu web.
Las alternativas pasan por separar en una lista desplegable (comboBox) el día mes y año, hasta construir tú propio componente (si tienes tiempo adelante), o en su defecto buscar una alternativa viable. PikaDay es un buena opción si no tienes tiempo y no quieres hacer todo con combos. A continuación te daré lo básico sobre cómo usar este componente y usarlo para tus proyectos.
Puedes bajar visitar su sitio en Github y replicar el repositorio para examinar todas las funciones y ejemplos de Pikaday
O bien puede replicar el repositorio si ya tiene Git instalado en tu pc
git clone https://github.com/Pikaday/Pikaday.gitLa documentación es bastante completa, por lo que no daré mayores detalles, por supuesto esta inglés por lo que si tienes problemas con alguna parte, déjame un comentario y te ayudare en lo que pueda.
A continuación lo pasos para crear un template
<input type="text" id="datepicker"><script src="pikaday.js"></script>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
También puedes obtener el CDN aquí
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<html>
<head>
<title>
Pikaday Demo
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>
</body>
</html>Una vez que ya tenes instalado el datepicker, quizá necesite consultar el valor del datepicker en cualquier momento, para ello agregaremos un botón al ejemplo anterior
<button type="button" class="btn btn-primary" id="buscar"> buscar </button>ahora agregaremos un alert que nos devuelva el valor de la fecha del datepicker, esto lo hacemos con el datepicker
buscar.onclick=function(){
var fec=document.getElementById('datepicker');
alert(fec.value);
}Lo anterior te devuelve el valor de la fecha del picker seleccionado, pero quizá desees formatearlo, para ello agreguemos un par de líneas
var picker = new Pikaday({ field: document.getElementById('datepicker') });
alert( picker.getDate());
El Pikaday tiene muchas funciones te recomiendo que las consultes en el repositorio del componente. Puedes consultar en vivo el codigo usado en este articulo a continuación
También de dejo el código completo que puede copiar en un bloc de notas y probar a continuación
<html>
<head>
<title>
Pikaday Demo
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<input type="text" id="datepicker">
<button type="button" class="btn btn-primary" id="buscar"> buscar </button>
<script>
var picker = new Pikaday({ field: document.getElementById('datepicker') });
buscar.onclick=function(){
var fec=document.getElementById('datepicker');
alert(fec.value);
var picker = new Pikaday({ field: document.getElementById('datepicker') });
alert( picker.getDate());
}
</script>
</body>
</html>
Cuando trabajas con php y mysql, es posible que necesites procesar los valores de fecha antes de enviarlos al servidor, esto por que los valores MYSQL no son compatibles con los valores JAVASCRIPT POR DEFAULT y necesitas dejarlo listo para que el servidor simplemente ejecuta las consultas, para ello tengo a bien compartirte la siguiente función.
//convierte un valor fecha a uno válido de Mysql
function convertDateMysql(strDate){
return strDate.substr(strDate.length-4,4 )+"-"+
strDate.substr(strDate.length-10,2 )+"-"+
strDate.substr(strDate.length-7,2 );
}La función te devuelve un valor en el formato: YYYY-MM-DD