A vegades faig programes complicats i sembla que "sàpiga" molt, però no. Avui en dia cal saber unes bases però la resta no cal recordar-ho de memòria, cal saber on trobar-ho i com buscar-ho. Per això hem trobo buscant el mateix de forma repetitiva certs temes. Un d'ells és com recuperar el valor d'un control radiobutton en un formulari des de Javascript (fent servir jQuery). Tenim l'HTML:

<input type="radio" id="Ubicacion" name="ordenarpor" value="Ubicacion" />
<label for="Ubicacion">Ubicacion</label><br />
<input type="radio" id="RefCliente" name="ordenarpor" value="RefCliente" />
<label for="RefCliente">Ref. Cliente</label><br />
<input type="radio" id="FechaEntrada" name="ordenarpor" value="FechaEntrada" />
<label for="FechaEntrada">Fecha entrada</label>

Observar en l'HTML cada radiobutton té un value i un id diferent, el que els lliga i fa que estiguin relacionats és el name. El codi javascript per recollir el valor del radiobutton seleccionat és:

var OrderBy = $('input[name="ordenarpor"]:checked').val();

Job done!

Estava mirant funcions en Javascript per fer "coses", anava revisant el W3Schools i he trobat una funció que m'ha cridat l'atenció per enrevessada, no és que ho sigui gaire, però no costava escriure-la bé, d'una forma més clara.

I ja se que d'opinions hi ha tan variades com els colors, però aquesta és la meva. Aquests dos codis fan exactament el mateix, és l'exemple d'una barra de progres :

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
    }
  }
} 

I ara l'altra:

var id;
var width = 0;
var elem = document.getElementById("myBar");
function move() {
  id = setInterval(frame, 100);
}

function frame() { 
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
    }
  }

Jo sincerament m'agrada veure que una variable és global, que es farà servir per conservar un valor entre crides a la mateixa rutina, que una rutina es cridarà varies vegades, que comença i acaba... Això del Javascript que defineixes funcions dins d'altres no m'acaba d'agradar.

A vegades veig llenguatges de programació que penso... "quina llumenera haurà fet això?".

Són llenguatges on va tot empotrat, com el Razor. Són llenguatges on es barreja tot, l'HTML amb lògica, amb dades... Entenc que en el món ha d'haver-hi de tot i al gust de tothom. Així que la mateixa empresa (en aquest cas MS) desenvolupa molts llenguatges per cobrir els gustos de tots. Articles com aquest em fan sagnar els ulls...

Aquí va tot barrejat..., els events? Cap dins. L'estil? Cap dins. Les dades? Cap dins...

Penso que en un equip de programadors hi ha gent que en sap més, gent que menys, i ara que hem toca repartir tasques entre persones ja se de quin peu calça cadascú. Aleshores quan tinc que passar-lis feina, al que sap HTML li passo HTML, el que li va el Javascript li passo Javascript, el de codi servidor, el de SQLs... Així ells (els programadors) estan contents, triguen menys i el resultat és de millor qualitat. Tampoc obligo a saber de tot i es poden especialitzar. Si saps de tot al final no saps el detall que fa que no funcioni el que fas, i perds temps buscant-lo.

Així doncs penso que millor cada element separat, HTML, CSS, dades, enviament/recepció de dades del servidor. De fet tal com treballo puc canviar un servidor web per un altra d'una tecnologia diferent si compleixo una "API" o un cert format JSON acordat entre la part que està al navegador i la part servidora, sense tocar ni un punt d'aquesta. Llavors no entenc per que ho volen tot barrejat. Potser per prototipus o temes molt ràpids... si no, no veig la raó de l'existència dels llenguatges barrejats. Jo prefereixo els poders separats...

Normalment per navegar vaig amb Firefox + Noscript. Aquesta extensió em permet decidir quins javascripts s'executen en el meu navegador.

I ho decideixo domini per domini, de fet quan es carrega una pàgina web hi ha un munt de ronya d'scripts que es carreguen que són d'altres dominis. Normalment aquests s'encarreguen de tracking, publicitat, càrrega de més porqueria...

La setmana passada el Firefox es va actualitzar i el noscript no, i és incompatible amb la versió del navegador. Així que vaig anar als ajustos del navegador (about:config) i vaig deshabilitar en general el javascript (JS). En aquell instant moltes webs van deixar de funcionar, o ho van fer de forma molt limitada. Gmail semblava dels anys 90.

Així que al final he tingut que reactivar-lo, però ara limito la meva navegació a webs de "confiança" i poca cosa més. Com feia anys que faig servir aquesta extensió al tornar a reactivar el JS ha sigut com un xoc amb la realitat. No era conscient de la quantitat de porqueria que hi ha a la web. El Flash encara no s'ha extingit?! A veure si l'autor de l'extensió es posa les piles i la fa compatible amb el nou Firefox.

Amb el canvi de servidor he posat Windows Server 2016, IIS 10, SQL Server 2016 per veure que hi ha de nou. La migració del software d'un a l'altra ha anat prou bé. Copiar fitxers, permisos NTFS, moure BBDDs, canviar cadenes de connexió... fins que al cap d'un temps m'he fixat que en una de les meves webs, un control jQuery, el Grid, no es veia bé.

Resulta que els texts del control mostraven caràcters estranys en els accents. Típics errors de joc de caràcters. Si obria el fitxer JS en l'Editplus veia el text correctament, l'editor em deia que el fitxer està codificat amb ANSI, encara que en realitat per filar prim és Windows-1252. En HTML5 la codificació Windows 1252 es pot servir com ISO-8859-1 ja que les considera la mateixa.

També és curiós veure com el Firefox, en el Network monitor veu correctament el fitxer, en canvi en el Javascript Debugger el mostra amb els caràcters estranys. Suposo que ara han adoptat el UTF-8 com codificació per defecte si no s'indica res.

Hi ha varies solucions, poso les que he trobat més "assequibles".

1. Passar el fitxer a UTF-8, s'ha de fer fent un "Guardar como...", no un canvi a sac de codificació ja que el canvi directe perd els caràcters, mentre que el "Guardar como..." fa la transformació.
2. No modificar el fitxer JS i indicar en tag HTML que importa l'script la codificació que fa servir:
   

   
   <script type="text/javascript" src="/js/grid/i18n/grid.locale-cat.js" charset="ISO-8859-1"></script>
   

Amb això es solucionen aquest tipus de problema.

Ja fa molts anys (em faig vell!??) que faig servir l'extensió de navegador NoScript per Firefox. Amb ella pots visitar els llocs que vulguis sense problemes perque al no executar codi no et pots infectar amb malware.

Una altra característica que m'agrada és que bloqueja els Flash, i molts anuncis molestos ja ni els veig.

Molts llocs web han baixat el to dels seus anuncis, ja no fan servir ni Flash ni javascript, altres han pres mesures en contra d'això, per exemple http://www.tweaktown.com. Allí han posat un tag <noscript>. En teoria aquest tag serveix per mostrar un missatge quan l'usuari no té el javascript habilitat. Però han anat més enllà i han posat:

<noscript><meta http-equiv="refresh" content="3;URL='http://www.tweaktown.com/sp/index.html'"></noscript>

Es a dir una redirecció a una altra pàgina que no et permet llegir tranquil·lament el que estaves buscant.

Com tota carrera armamentística l'extensió també ha contemplat això, però cal habilitar-ho en una opció:

Un cop fet això s'han acabat els problemes.

Recentment he trobat un article que es preguntava si encara és necessari aprendre jQuery, o si ja es podia abandonar. Segons el noi que escriu ja no cal aprendre jQuery ja que el Javascript normal ja fa tot el que el jQuery fa. Posa els següents exemples:

Selectors:

// jQuery
$('.myClass');

// JavaScript
document.getElementsByClassName('myClass');

// jQuery
$('#myID');

// JavaScript
document.getElementById('myID');

//Fer servir el nou QuerySelector
/*
 * Classes
 */
// Agafar el primer node amb la classe .myClass 
document.querySelector('.myClass');

// Retorna una llista de nodes amb .myClass
document.querySelectorAll('.myClass');

/*
 * ID
 */
// Obté el ID
document.querySelector('#myID');

/*
 * Tags
 */
// Una llista de nodes dels 'div'
document.querySelectorAll('div');

També comenta que es poden fer coses amb afegir i treure una classe:

// jQuery
$('div').addClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.add('myClass');

// jQuery
$('div').removeClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.remove('myClass');

// jQuery
$('div').toggleClass('myClass');

// JavaScript
var div = document.querySelector('div');
div.classList.toggle('myClass');

// JavaScript Document.ready
document.addEventListener('DOMContentLoaded', function() {
    // DOM ready, run it!
}, false);

L'article segueix amb més exemples sobre events, arrays, modificació d'atributs d'un node, manipulació del CSS etc...

Jo penso que sí, que encara cal fer servir i aprendre jQuery, no només per que jo en faci un us extensiu (de fet Noticias3D té molta cosa feta amb javascript normal) si no per que hi ha coses que amb jQuery són més còmodes, per exemple les crides ajax. Tot el codi d'una crida ajax en jQuery està en un sol lloc, en Javascript invoca a una funció callback. Amb jQuery hi ha tot un munt de controls i llibreries que no seran fàcils de subtituir, jqGrid, el deserialitzador de JSON, etc... només per dir-ne dues).

També en l'article menciona que per exemple els nous atributs data-* d'HTML 5 encara no estan estandaritzats del tot i tenen comportaments diferents segons el navegador, en aquest sentit jQuery farà el que se li dóna millor, es a dir proporcionar una capa d'abstracció que programes les coses una vegada i prou. Si per sota canvia la forma en que es fa aleshores només cal modificar la versió de la llibreria jQuery i llestos. Així que jo de moment seguiré fent servir jQuery.

Quan es deserialitzen valors que venen d'un JSON contra un formulari normalment tots els controls del formulari reben correctament els valors del JSON. Tots? No! Un grup d'irreductibles controls es resisteixen a l'invasor. Els "checkboxes"!

En el JSON es poden passar els booleans de dues formes diferents, el serialitzador genera el JSON de forma diferent segons l'origen. Es poden serialitzar de forma nativa ja que el JSON suporta el tipus booleà, llavors es troba algo com: "Camp_boolea": true. En canvi també es pot serialitzar com un "string", i queda així: "Camp_boolea": "True", cal fixar-se en les cometes...

Quan es declara un control checkbox s'ha de fer de les següents maneres, si al JSON arriba un booleà:

<input type="checkbox" name="elID" id="elID" value="1" />

Si per contra al JSON arriba un string cal posar:

<input type="checkbox" name="elID" id="elID" value="True" />

Canvia el value, i el que no és tan intuïtiu és que surti un value="1" pel JSON booleà. També cal tenir en compte el deserialitzador javascript que es fa servir...

Quan a un element d'una pàgina web se li vol afegir un event, amb jQuery és molt fàcil:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

El javascript seria:

$(".myclass").click( function() {
    // fer alguna cosa
});

El problema arriba quan aquests nodes es generen dinàmicament, ja sigui per javascript o que arriben els nodes per Ajax i s'afegeixen al DOM:

<a id="anchor1" href="#">crear enllaços dinamicament<a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

Aleshores cal algo que mantingui els events, encara que siguin elements nous. Per això es fa servir el jQuery on(). Quedaria algo com:

$('body').on('click', 'a.myclass', function() {
    // fer alguna cosa
});

O si es vol filar més prim, i ajustar més l'avaluació (que no sigui en tots els clics):

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

Amb HTML5 es pot carregar un fitxer de l'ordinador local on està el navegador directament a una pàgina web, sense passar pel servidor web. Antigament per fer això calia pujar el XML al servidor, aquest processar-lo i enviar-te el HTML amb els controls degudament informats. Això s'ha acabat, al menys en Firefox. Cal fer un HTML com el següent:

<p><input type="text" name="test" id="test" /></p>
<input type="file" id="files" name="files" /><div id="list"></div>

Un cop fet això cal fer el següent script (té el document.ready del jQuery, així que s'ha de posar el jQuery també):

<script>
var reader = new FileReader();
reader.onload = function (e) {
    var text = reader.result;
    if (window.DOMParser) {
	parser = new DOMParser();
	xmlDoc = parser.parseFromString(text, "text/xml");
	$("#test").val(xmlDoc.getElementsByTagName("SOAPAction")[0].childNodes[0].nodeValue);
    }
    else {
	alert("No hi ha parser!");
    }
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
	output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
		    f.size, ' bytes, last modified: ',
		    f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
		    '</li>');
	reader.readAsText(f);
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

$(document).ready(function () {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
	document.getElementById('files').addEventListener('change', handleFileSelect, false);
    } else {
	alert('The File APIs are not fully supported in this browser.');
    }
});
</script>

Com es pot veure a l'exemple, el XML ha de tenir el tag "SOAPAction" i el seu valor es posa al control "test", i llestos!