B.3 JavaScript

Es mucho más difícil introducir JavaScript que HTML y CSS, ya que es un lenguaje de programación. Hay muchos libros y tutoriales sobre este idioma. De todos modos, intentaremos arañar la superficie para los usuarios R en esta sección.

En pocas palabras, JavaScript es un lenguaje que generalmente se utiliza para manipular elementos en una página web. Una forma efectiva de aprender es a través de la consola de JavaScript en las Herramientas de Desarrollador de su navegador web (vea la Figura @ref(fig: chrome-devtools)), porque puede escribir código de manera interactiva en la consola y ejecutarlo, lo cual se siente similar para ejecutar el código en R en la consola de R (por ejemplo, en RStudio). Puede abrir cualquier página web en su navegador web (por ejemplo, https://yihui.name), luego abrir la consola de JavaScript y probar el siguiente código en cualquier página web:

document.body.style.background = 'orange';

Debería cambiar el color de fondo de la página a naranja, a menos que la página ya haya definido los colores de fondo para ciertos elementos.

Para usar JavaScript de manera efectiva, debe aprender tanto la sintaxis básica de JavaScript como la forma de seleccionar elementos en una página antes de poder manipularlos. Puede aprender parcialmente lo primero a partir del fragmento corto de JavaScript a continuación:

var x = 1;  // assignments
1 + 2 - 3 * 4 / 5;  // arithmetic

if (x < 2) console.log(x);  // "print" x

var y = [9, 1, 0, 2, 1, 4];  // array

// function
var sum = function(x) {
  var s = 0;
  // a naive way to compute the sum
  for (var i=0; i < x.length; i++) {
    s += x[i];
  }
  return s;
};

sum(y);

var y = "Hello World";
y = y.replace(" ", ", ");  // string manipulation

Puede sentir que la sintaxis es similar a R hasta cierto punto. JavaScript es un lenguaje orientado a objetos, y generalmente hay varios métodos que puede aplicar a un objeto. La manipulación de cadena anterior es un ejemplo típico de la sintaxis Object.method(). Para conocer los métodos posibles en un objeto, puede escribir el nombre del objeto en su consola JavaScript seguido de un punto, y debería ver todos los candidatos.

Los usuarios de R deben ser extremadamente cautelosos porque los objetos JavaScript a menudo son mutables, lo que significa que un objeto puede ser modificado en cualquier lugar. A continuación, hay un ejemplo rápido:

var x = {"a": 1, "b": 2};  // como una lista en R
var f = function(z) {
  z.a = 100;
};
f(x);
x;  // modificado! x.a es 100 ahora

Hay muchas librerías maduras de JavaScript que pueden ayudarlo a seleccionar y manipular elementos en una página, y la más popular puede ser jQuery. Sin embargo, debe saber que a veces probablemente puede hacerlo lo suficientemente bien sin estas librerías de terceros. Hay algunos métodos básicos para seleccionar elementos, como document.getElementById() y document.getElementsByClassName(). Por ejemplo, puede seleccionar todos los párrafos usando document.querySelectorAll('p').

A continuación mostramos una aplicación ligeramente avanzada, en la que verá funciones anónimas, selección de elementos por nombres de etiquetas HTML, expresiones regulares y manipulación de elementos HTML.

En la sección 2.5.2, mencionamos cómo habilitar MathJax en un sitio web de Hugo. La parte fácil es incluir el script MathJax.js a través de una etiqueta <script>, y hay dos partes difíciles:

1. Cómo proteger el contenido matemático del motor de reducción (Blackfriday), por ejemplo, necesitamos asegurarnos de que los subrayados en las expresiones matemáticas no se interpreten como <em></em>. Este problema solo existe en las publicaciones simples de Markdown, y se ha mencionado en la sección ?? sin explicar la solución.

2. Por defecto, MathJax no reconoce un par de signos de pesos como la sintaxis de las expresiones matemáticas en línea, pero la mayoría de los usuarios se sienten más cómodos con la sintaxis $x$ que con \(x\).

La solución más fácil para el primer problema puede ser la adición de retrocesos alrededor de las expresiones matemáticas, por ejemplo, `$x_i$`, pero la consecuencia es que la expresión matemática se representará en <code></code>, y MathJax ignora las etiquetas <code> cuando busca expresiones matemáticas en la página. Podemos obligar a MathJax a buscar expresiones matemáticas en <code>, pero esto seguirá siendo problemático. Por ejemplo, alguien puede querer mostrar el código en línea R `list$x$y`, y $x$ puede reconocerse como una expresión matemática. MathJax ignora <code> por buenas razones. Incluso si no tiene esas expresiones en <code>, puede tener algunos estilos CSS especiales adjuntos a <code>, y estos estilos se aplicarán a sus expresiones matemáticas, que pueden ser no deseadas (por ejemplo, una luz fondo gris).

Para resolver estos problemas, proporcioné una solución en el código JavaScript en https://yihui.name/js/math-code.js:

(function() {
  var i, text, code, codes = document.getElementsByTagName('code');
  for (i = 0; i < codes.length;) {
    code = codes[i];
    if (code.parentNode.tagName !== 'PRE' &&
        code.childElementCount === 0) {
      text = code.textContent;
      if (/^\$[^$]/.test(text) && /[^$]\$$/.test(text)) {
        text = text.replace(/^\$/, '\\(').replace(/\$$/, '\\)');
        code.textContent = text;
      }
      if (/^\\\((.|\s)+\\\)$/.test(text) ||
          /^\\\[(.|\s)+\\\]$/.test(text) ||
          /^\$(.|\s)+\$$/.test(text) ||
          /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) {
        code.outerHTML = code.innerHTML;  // remove <code></code>
        continue;
      }
    }
    i++;
  }
})();

No es una solución perfecta, pero debería ser muy raro que tenga problemas. Esta solución identifica posibles expresiones matemáticas en <code>, y elimina la etiqueta <code>, por ejemplo, reemplaza <code>$x$</code> con \(x\). Después de que se ejecuta este script, cargamos el script MathJax. De esta forma, no necesitamos obligar a MathJax a buscar expresiones matemáticas en las etiquetas <code>, y sus expresiones matemáticas no heredarán ningún estilo de <code>. El código de JavaScript anterior no es demasiado largo y debe ser autoexplicativo. La parte más difícil es i++. Dejaré que los lectores descubran por qué el bucle for no es la forma habitualfor(i = 0; i <codes.length; i ++). Me tomó unos minutos darme cuenta de mi error cuando escribí el ciclo en la forma habitual.