1º Aniversario Javascript desde cero con Furoya. Revisón de posts y nuevas demos 31.1.16
Para celebrar el primer aniversario de las colaboraciones de Furoya con el blog (18 posts con éste) para iniciarse y dominar javascript, su autor los repasa.
Bien para atender alguna petición de los electores o para complementarlos añadiendo otras realizaciones y demos a un buen número de ellos.
1º Aniversario Javascript desde cero con Furoya. Revisón de posts y nuevas demos
El tiempo pasa más rápido de lo que uno quisiera, así que hay que aprovecharlo. No es que debamos vivir recordando el pasado, pero a veces resulta necesario mirar para atrás y ver qué rumbo hemos tomado. También pensar en qué hubiésemos hecho distinto o qué podríamos mejorar con la experiencia. La vida no siempre nos da esas oportunidades. Pero el blog ESCss, sí.
Vamos a usar de excusa del primer aniversario de "Javascript desde cero" (que más tarde fue rebautizado como "Javascript con un servidor") y revisitemos viejos códigos que destripamos durante este año.
No es que toquemos a todos, pero algunos tienen ampliaciones que hoy sí se pueden entender mejor, o se pueden adelantar para verlas en detalle mañana, o se comentaron en el blog pero nunca se publicaron.
Título desprolijo
Es el caso de Agregar etiquetas a cada letra de un texto para aplicarles estilos CSS, que si bien tiene un ejemplo, existía otro que lo unía al artículo anterior (Background-image aleatorio) ya que los formatos se elegían al azar.
En principio el "título" no se ve muy llamativo, pero tal como digo siempre, la idea es aprovechar las posibilidades de un escript para aplicarlo en ideas mejores.
Al original le agregamos unos arrays con valores de CSS para formatos de texto. Una vez que pusimos a cada caracter en un span ejecutamos una nueva función que se va a repetir cada segundo cambiando los valores de font, color y top al azar eligiendo de esos arrays, o generando valores propios cuando son numéricos.
La forma de hacerlo es usando otras funciones genéricas a las que sólo se les pasa como argumento el nombre del array y estas retornan un valor que queda en el lugar donde pusimos la llamada a la función; o recuperando valores dentro de un rango (como los colores oscuros); o escribiendo directamente, sin llamar a una función que esté fuera.
Tienen para elegir.
Ahora sí empezamos con los pedidos
Títulos según pasan las imágenes
Para el artículo Control del scroll. Eventos y efectos al desplazar la página apareció una consulta muy emparentada con ¿Estoy dentro o fuera del viewport? que lamentablemente no prosperó porque nunca apareció el ejemplo de la consulta —aunque nuestro juego fue "adivinar"—.
Preparé esta versión que cambia el contenido de un título a medida que aparece en pantalla su imagen correspondiente.
Es un borrador, pero sirve de punto de partida para que hagan versiones mejores.
Abandonamos un poco las medidas y mejoramos el color de la scrollbar
El artículo Averiguar tamaños y pasar su valor a Css. Caso de uso: coloreado del scroll tenía como objeto iniciarnos en la captura de valores de tamaño en el documento, pero fue más festejado el coloreado de la barra de desplazamiento en Mozilla. Allí presenté varios métodos, aunque el que siempre me pareció más apropiado quedó para hoy.
El truco es poner detrás de las barras una franja de color con su mismo tamaño, y para eso es ideal box-shadow. O hasta los gradientes de background-image si queremos ser originales y hacer scrollbars a rayas o con diseños. Ésta sería una versión del primero.
Le agregué un clásico "toggle" javascript para que la imagen duplicara su tamaño y aparecieran las barras en el contenedor. En esa misma función está el color para ver detrás.
Si bien el ejemplo es para Mozilla, debería funcionar en Chrome. Pero por alguna razón blink interpreta distinto el tamaño de la imagen para poner las barras. No voy a averiguar por qué, como estamos probando javascript, lo podemos "corregir" a lo bruto con esas líneas de código que están comentadas.
Un almanaque tipo DatePicker, más práctico
Acá amplío con dos nuevos ejemplos el artículo Construcción de calendarios con date.
El primero muestra una capa "pop-up" con un almanaque para rellenar el formulario. Sigue siendo un borrador y prueba cómo capturar el día de semana en la fecha ingresada.
No tiene validador ni máscara para el formato de fecha, pero pone la del día como ejemplo.
El método es útil cuando todo el mecanismo debe estar en la misma página; si bien solamente cambiamos un display para mostrar u ocultar la tabla del almanaque es evidente que con CSS se le puede dar un mejor formato y hacer que aparezca "flotando" sobre el documento y quizá oscurecerlo atrás hasta que se pinche el botón "Cerrar".
El siguiente utiliza dos documentos. El padre es quien tiene el formulario para llenar y abre el hijo con el almanaque para elegir la fecha en una nueva ventana del navegador.
En este la comunicación es un poco más compleja, porque justamente son dos documentos en dos ventanas distintas para pasarse datos.
Pero es algo que estudiaremos más adelante, por ahora, les dejo dos "source-code" para que experimenten en sus máquinas (o en su host, si tienen uno).
Solamente recuerden que por cuestiones de seguridad deben ponerlos en un mismo sitio (en la misma carpeta preferentemente) o los navegadores no los van a dejar pasarse información ni instrucciones.
1º documento: almanaqueOpener.htm
NOTA DEL EDITOR: el siguiente código está etiquetado entre <xmp> que, aunque tag obsoleta, facilita escribir el código "tal cual" sin entidades Html. Sólo tienes que copiar y pegar en tu documento.
<!--DOCTYPE html-->
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>ABRE ALMANAQUE.</title>
<script type="text/javascript">
var calendario;
function abreAlmanaque() {
calendario = window.open("almanaqueHijo.html", "blank", "width=300, height=260, menubar=no, location=no, resizable=yes, scrollbars=no, titlebar=no, status=no, centerscreen=yes, chrome=yes");
calendario.document.close();
}
</script>
<style type="text/css">
body {
text-align: center;
}
h1 {
text-align: left;
}
p {
text-align: left;
font: 500 .6em/1.2 serif;
}
form {
font: bold 1.5em/1 serif;
}
form input {
text-align: center;
}
</style>
</head>
<body>
<h1>Almanaque tipo "<i>DatePicker</i>". </h1>
<form name="miForm">
Fecha elegida : <input id="miSemana" name="miSemana" readonly size="5">
<input id="miFecha" name="miFecha" readonly size="1"> de <input id="miMes" name="miMes" readonly size="9"> de <input id="miAnio" name="miAnio" readonly size="3">. <br>
<button onclick="abreAlmanaque()" title="Abre almanaque." class=boton>Abre almanaque.</button>
<p>Al cambiar los meses en el almanaque no se actualiza el año antes de enero ni después de diciembre. <br>
Para <a href="https://escss.blogspot.com/">EsCss</a>.</p>
</form>
</body>
</html>
2º documento: almanaqueHijo.html
NOTA DEL EDITOR: el siguiente código está etiquetado entre <xmp> que, aunque tag obsoleta, facilita escribir el código "tal cual" sin entidades Html. Sólo tienes que copiar y pegar en tu documento.
<!--DOCTYPE html-->
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var fecha = new Date();
var anio = fecha.getFullYear();
var mes = fecha.getMonth();
var dia = fecha.getDate();
var textoMes = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
var textoSemana = ["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"];
var almanaque;
function inicia() {
mes = (mes<0)? 11 : (mes>11)? 0 : mes;
var mesSig = Number(mes) + 1;
var diaFinal = new Date(anio, mesSig, 0).getDate();
var primerDiaSemana = new Date(anio, mes, 1).getDay();
var esteDiaSemana = new Date(anio, mes, dia).getDay();
almanaque = document.getElementById("hoja");
almanaque.innerHTML = "";
for(tr=0; tr<6; tr++){
almanaque.insertRow();
}
for(r=0; r<6; r++){
for(c=0; c<7; c++){
almanaque.rows[r].insertCell();
}
}
for(d=0; d<diaFinal; d++) {
cadaDia = document.querySelectorAll("#hoja td")[d+primerDiaSemana];
cadaDia.innerHTML = d+1;
cadaDia.setAttribute("onclick", "dia=this.innerHTML; inicia()", false);
}
document.getElementById("nuevoMes").innerHTML = opener.document.getElementById("miMes").value = textoMes[mes];
document.getElementById("nuevoAnio").innerHTML = opener.document.getElementById("miAnio").value = anio;
opener.document.getElementById("miFecha").value = dia;
opener.document.getElementById("miSemana").value = textoSemana[esteDiaSemana];
document.querySelectorAll("#hoja td")[(dia-1)+primerDiaSemana].className = "destaca";
document.title = textoSemana[esteDiaSemana]+" "+dia+" de "+textoMes[mes]+" de "+anio;
//setTimeout(function(){alert("El día "+dia+" de "+textoMes[mes]+" de "+anio+" es "+textoSemana[esteDiaSemana])}, 1000);
}
onload = inicia;
</script>
<style type="text/css">
body {
text-align: center;
}
form {
font: bold 1.5em/1 serif;
}
table {
margin: .5em auto;
font: bold 1em/1 sans-serif;
background-color: silver;
}
table caption {
font: bold .6em/0 serif;
text-align: justify;
}
table caption::after {
content: "";
display: inline-block;
width: 99%;
}
table caption span {
display: inline-block;
width: 3em;
text-align: center;
}
.boton {
width: 1em; height: 1.4em;
padding: .1em;
font: 1em/1.2 symbola,serif;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
table caption #nuevoMes {
width: 5em;
}
table caption input {
width: 100%;
}
thead th {
background-color: gainsboro;
font: 900 .5em/1.2 serif;
}
tbody td {
width: 1.3em;
text-align: right;
background-color: white;
box-sizing: border-box;
empty-cells: hide;
cursor: pointer;
}
tbody tr td:first-of-type {
background-color: pink !important;
}
.destaca {
color: white;
background-color: black !important;
}
</style>
</head>
<body>
<form>
<table>
<caption>
<input type="button" value="Cerrar" onclick="window.close()"><br>
<span class="boton" onclick="mes=Number(mes)-1; inicia()"> ◄ </span>
<span id=nuevoMes></span>
<span class=boton onclick="mes=Number(mes)+1; inicia()"> ► </span>
<span class=boton onclick="anio=Number(anio)-1; inicia()"> ◄ </span>
<span id=nuevoAnio></span>
<span class=boton onclick="anio=Number(anio)+1; inicia()"> ► </span>
</caption>
<thead><tr><th>D</th><th>L</th><th>M</th><th>M</th><th>J</th><th>V</th><th>S</th></tr></thead>
<tbody id="hoja"></tbody>
</table>
</form>
</body>
</html>
Descargar los 2 docs [.rar 2.2Kb]
Hay un detalle en los ejemplos que no siempre es tenido en cuenta a la hora de crear los datepicker: todos tienen unos botones para avanzar o retroceder meses o años, pero al bajar de enero o subir de diciembre por lo general se actualiza el año.
Eso no siempre es cómodo para el usuario, porque si quiero cambiar de año ya tengo sus propios botones y no necesito que que me los ajuste el formulario. Pero como hay mucha gente acostumbrada a ese método, les dejo un escript que cambia encadenado el año al terminar una serie de meses para que vean el modo de hacerlo y reescriban los anteriores a gusto si lo necesitan.
Agrandando peones
El uso de un tablero de ajedrez para mostrar cómo se cambia o mueve contenido entre celdas no se terminó en Creación de tablas con movimiento de contenido entre celdas. Caso de estudio: Tablero de Ajedrez. Allí mismo se sugirió el agregado de un cajoncito para poner las piezas capturadas y un método para coronar peones.
Y éste último es en realidad un método para agregar datos desde un formulario dependiendo de condiciones en la misma tabla.
Vamos a ver una coronación que utiliza un select para elegir la pieza, y además valida que el peón negro haya llegado a la octava fila o el blanco a la primera.
Un detalle a comentar es que en ajedrez se puede coronar con cualquier pieza, menos el Rey. Cuando uno juega en su casa las únicas que tiene libres para cambiar son las previamente capturadas, pero según el reglamento puede ser cualquiera aunque esté repetida en el tablero.
Volviendo a nuestro código, la validación se hace con una serie de condiciones en un if; else if que son de esas que irritan a un verdadero programador.
Verán, ya existía desde el ejemplo anterior una variable hijo que contiene el código del span clickeado en forma de cadena de texto (como "el código fuente del trebejo") y nos servía para reemplazar lo que tuviese la celda de destino dentro.
Resulta que la vamos a aprovechar para saber si el caracter que contiene es un peón, usando el ya conocido indexOf("♙"), que va a devolver un número distinto a -1 si el caracter está dentro de esa cadena. También vamos a saber si es blanco o negro (y no coronar al que llega a su propio lado) por su clase... pero no vamos a leer la clase sino que vamos a usar exactamente el mismo método : si la palabra "blanco" está en la cadena, es blanco; si dice "negro", es negro. Impresentable, pero efectivo.
Por último, confirmamos que la fila de la celda clickeada sea la cero (para las blancas) o la siete (para las negras) y así completamos la validación.
Optimizamos los contadores de tiempo
Cerramos el año 2015 con un nuevo ejemplo de uso de valores al azar, esta vez con colores y una animación CSS sincronizando transition-duration y setTimeout.
En realidad hay una manera más fácil que no requiere andar leyendo de los estilos la duración de las transiciones para pasarlas al escript, porque existe un evento que se dispara justo al terminar la transición. Se los presento ahora, pero lo vamos a ver en detalle para el próximo artículo.
Otro asunto anecdótico de ésta versión es que ya no usamos la paleta 16M (con dieciseis millones y algo de colores) sino la 4K (con poco más de cuatro mil), donde los tonos son menos parecidos porque la graduación en cada componente salta "de a 16"; y elegimos 1 de entre 4096.
Epílogo anuario.
La selección de ejemplos puede parecer un poco arbitraria, y seguramente alguien estará extrañando uno de los que no reversioné; pero es una vista a vuelo de pájaro de lo que estuvimos viendo hasta ahora, sin el acostumbrado desarrollo en los nuevos códigos.
Es el famoso "refrito" para cuando nos quedamos sin ideas, bah ;-)
Gracias por aguantarme estos meses. Y especialmente a mi amigo Kseso por no echarme, aún.
Autoría
%20para%20iniciarse%20y%20dominar%20javascript,%20su%20autor%20los%20repasa.%3Cbr/%3EBien%20para%20atender%20alguna%20petici%C3%B3n%20de%20los%20electores%20o%20para%20complementarlos%20a%C3%B1adiendo%20otras%20realizaciones%20y%20demos%20a%20un%20buen%20n%C3%BAmero%20de%20ellos.){kind=link}
Artículo original de Furoya.
La intención del autor con sus colaboraciones no es que los artículos sirvan para hacer un copy&paste de códigos sino que comprendas y aprendas la lógica y el cómo trabaja javaScript.
Y a partir de lo expuesto experimentes tú.
El autor del post y el editor del blog te animamos a que plantees tus dudas o reflexiones y que compartas tus realizaciones en base a lo expuesto en los comentarios. Recuerda que puedes incluir pens (ejemplos en Codepen.io) en ellos.
Una genialidad, gracias por los conocimientos compartidos, pero sobre todo por la forma de hacerlo.
ResponderEliminarFeliz aniversario y que no decaiga!!
Gracias a vos, Lisandro, por tomarte el trabajo de leer el artículo. Y me alegra que te guste el estilo, porque hay gente a la que le molesta mi poca seriedad para encarar los temas, por no hablar de mi pobre rigurosidad para describir funciones, métodos y demás.
EliminarCon decirte que olvidé colgar de algún sitio los descargables del datepicker!, menos mal que Kseso está en todo y lo hizo por las suyas.
Un abrazo.
Lo que no voy a hacer, como editor del blog, es darle las gracias una vez más a Furoya. Ya le resultaría hasta cansino por reiterativo al dueño de la sección.
ResponderEliminarPero sí aprovecho para contaros un secreto:
No se cómo lo habré hecho o de dónde lo habrá sacado Furoya, pero resulta que es él quien cree estar en deuda conmigo jajaja
Con un poco de suerte, para mi y para los lectores del blog, mantendremos el malentendido otro tiempo más ;-)
Eso sí, sugerirle ideas o temas sobre los que escribir, para que no tenga la excusa de que se le acabaron las ideas xD xD
Brindemos por ello
En realidad, éste es tu blog, tu espacio; y si estás permitiendo que escribamos aquí, es natural el agradecimiento de nuestra parte.
EliminarTambién es cierto que con la calidad de colaboradores que reuniste, éstos artículos que publico quedan algo pobres. Pero supongo que son las ventajas de la amistad. Hasta donde sé, el resto de los aportantes no se ha quejado de que les esté bajando el nivel promedio. Así que, además, me sirvo del actual comentario para agradecer eso.
Aprovecho la ocasión —recordando la fecha— para felicitarte por otro aniversario más de EsCss. Parece mentira que hayan pasado ya 4 años.
Un abrazo.