Introducción

Pequeña pista de lo divertido que resultará javascript.       Nótese la sutil diferencia de tamaño.
Pequeña pista de lo divertido que resultará javascript. Nótese la sutil diferencia de tamaño.

Aunque originalmente javascript era un lenguaje para pequeñas chapucillas para hacer las web más dinámicas [1] hoy en día está de moda.

Existen servidores, programación de backend enteramente en javascript ( http://nodejs.org/ ) y frameworks MVC o variaciones MV* . Así, se traspasa la responsabilidad desde las aplicaciones de servidor hasta la web que descarga el usuario para que realice buena parte del trabajo en el cliente.

Librerías a tener en cuenta:

Breve descripción en inglés de estos frameworks: http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you

En definitiva, hay un millón de proyectos js porque está de moda.

Recomendaciones y buenas prácticas

Javascript no intrusivo: https://www.google.es/#q=unobtrusive+javascript - separar presentación y comportamiento.
Seleccionamos elementos y asignamos código sólo mediante js en vez de señalar en el html cuál es la acción a realizar.

Dónde declarar nuestros archivos .js <script type="text-javascript" src="scripts/miScript.js"></script> en la página html:
  • En principio, lo establecido es incluir las etiquetas dentro del <head> .
  • Al final del <body>. Se hace para evitar ver una página en blanco hasta que carguen todos los scripts (no renderiza el body hasta no terminar de cargar el head).

Ejemplos de clase

Carpeta de descargas de clase
  • 2014_01_31/internacionalizacion.zip - javascript muy básico.
  • 2014_02_04/dibujafunciones.zip (importar como proyecto genérico de eclipse)

Código interesante:

Diferencia entre $(document).ready y $(window).load [2]
El evento ready salta después de que el documento html termine de cargar. Es específico de jQuery.
El evento onload salta más tarde, cuando todo el contenido enlazado (imágenes, banners, js, etc.) termina de cargar. Es un evento estándar del DOM.


Plantillas javascript

Motivación

Esencialmente: no guarrear el código con presentación y lógica juntos.

Para crear contenido html desde funciones javascript, tenemos tres métodos:
  1. Concatenar cadenas.
    Es lo más trapalleiro posible:
    1. Mezcla la lógica de la vista y el procesado de datos. La presentación está desperdigada entre el html y el js;
    2. Es una pesadilla para mantener; propenso a errores.
    var cadena = "<table> ...";
    for (...) { // filas
       cadena += "<td>";
       for (...) { // columnas
          cadena += "<tr>";
          // procesado vario para añadir contenido
          cadena += "</tr>";
       }
       cadena += "</td>";
    }
    cadena += "</table>";
    // plantar la cadena en medio del html.   
  2. Crear el html programáticamente desde js.
    Sigue teniendo inconvenientes:
    1. Aunque es más civilizado (si cometemos errores, los señalará al compilar el js), sigue acoplando lógica de proceso y vista.
    2. Hay que escribir mucho.
    // http://speakingofcomputers.blogspot.com.es/2010/02/creating-dom-element-by-javascript.html
    // Se crea elemento padre, elementos hijos, atributos, texto interno, etc 
    // y se asignan finalmente al padre
    var newdiv = document.createElement("div");
    newdiv.setAttribute('id','fourthdiv');
    newdiv.setAttribute('class','your-class-name');
    newdiv.innerHTML = "this is the newly created div";
    var parentdiv = document.getElementById('firstdiv');
    parentdiv.appendChild(newdiv);
  3. Usar plantillas
    Mucho más limpio:
    1. Se concentra el procesado de datos en el js, donde quedan preparados en variables.
    2. En la vista sólo se usan etiquetas que reciben los valores de esas variables y estructuras de control mínimas. Idealmente, una persona que diseñe y maquete webs puede entenderlo y retocar el html de manera fácil.

Plantillas js populares

Ejemplo de mustache

Ojo con los cambios de métodos en la nueva versión: ya no hay compile; revisar los métodos render y parse:
http://stackoverflow.com/questions/21545670/how-to-handle-string-or-array-of-strings-in-mustache-template
http://stackoverflow.com/questions/9384650/difference-between-compile-parse-and-render-in-mustache-js

http://code.tutsplus.com/tutorials/quick-tip-using-the-mustache-template-library--net-14590

Revisar las últimas versiones del proyecto internacionalizacion hechas en clase.


Recursos para seguir aprendiendo javascript

Curso básico gratuito para aprender practicando con varias lecciones pequeñitas y un entorno de programación integrado en el navegador: no hace falta instalar nada.
http://www.codecademy.com/es/tracks/javascript

La versión en español no llega tan lejos como la original, no terminaron de traducirla.

En http://www.javascriptya.com.ar/ tienen un montón de explicaciones y ejercicios pequeños para ir aprendiendo el lenguaje.


Colección de recursos de calidad:
http://superherojs.com/

Vídeo de jornada del google developers group de Vigo, donde se presenta jQuery.
http://tv.uvigo.es/matterhorn/17669
El reproductor tarda un poquito en cargar, pero es útil porque permite avanzar el vídeo según las diapositivas, ampliar el proyector, etc.

Libros:
Los tres primeros de http://carlosazaustre.es/blog/libros-recomendados-sobre-javascript-y-node/
En español: http://librosweb.es/javascript/
  1. ^ Específicamente: "el propósito con el que fue diseñado era que el monito de la página bailase cuando pasabas el ratón por encima"
    http://programmers.stackexchange.com/questions/221615/why-do-dynamic-languages-make-it-more-difficult-to-maintain-large-codebases/221658#221658
  2. ^


    http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready
    http://www.codeproject.com/Tips/632672/JavaScripts-document-ready-vs-window-load